Webs mal diseñadas

El diseño de una web debe llevar consigo no sólo una agradable experiencia desde el punto de vista estético, sino que también debe aportar a los usuarios una experiencia de navegación satisfactoria. Cuando creas una web que no cumple con todos los requisitos, provocas rechazo por parte de los usuarios y de esta manera pierdes visualidad y clientes en tu empresa o negocio. Por tanto, una web bien diseñada aporta a la imagen visual de tu negocio y ayuda a posicionarte. Acá te mostramos algunos ejemplos de páginas web que no han sido diseñadas correctamente, para que evites cometer estos errores.

Ten en cuenta que con el editor visual de WordPress puedes conseguir resultados sorprendentes.

Web con dificultad para leerse y diseño pobre

Space is the place

http://www.spaceistheplace.ca/

El primer caso se trata de una página web dedicada a mostrar temas sobre viajes espaciales por parte de una persona para la que esta temática es muy importante. La web posee una estética baja en cuanto al uso de todos los elementos. Nos encontramos desde tipografías con bajos contrastes con el color del fondo (azul saturado presente en toda la página) hasta un tratamiento fotográfico deficiente con muy poca edición o ediciones realmente de mal gusto. Además, la página no posee un home page principal que guie el recorrido de la navegación, sino que pareciera ser una página de un pdf o una imagen con texto insertado. La composición de los elementos no sigue un patrón lógico, por lo que estos se encuentran regados y dificulta la lectura y la comprensión de la información.

Detalles que hacen a esta página tener un mal diseño:

  • Colores y tipografías con bajos contrastes y colores saturados muy estridentes
  • Composición regada que dificulta la lectura y la navegación coherente por la página
  • Textos que contienen más de 9 a 12 palabras por línea
  • Tratamiento fotográfico muy deficiente
diseño pobre y desactualizado en esta web

Catolia

https://www.catolia.com/

Catolia es una web con temática religiosa católica, que brinda información sobre eventos, noticias y también tiene secciones dedicadas a retos. El diseño de esta web si bien no parece tan caótico al principio, ya que se entiende la manera de navegar, su diseño es bastante poco actualizado. Se utilizan colores desaturados oscuros que no aportan mucha visualidad a la página principal y los rasgos con que se diseñaron los íconos y botones tampoco se corresponden con signos muy contemporáneos. Al acceder a las otras páginas nos encontramos con un diseño igualmente deficiente que no posee ningún tipo de jerarquía, composición ni llamado de atención. Se trata en su mayoría de textos con líneas muy grandes que dificultan la lectura de los usuarios.

Elementos deficientes en Catolia:

  • Diseño desactualizado y pobre
  • Dificultad para leer las informaciones
  • Íconos coloridos sin una estética en común en la parte inferior
  • Abundante texto sin imágenes ni gráficos
web muy poco trabajada y diseño mal hecho

Web Design

https://www.inet-web.com/

Lo que a simple vista puede verse como el principal error en esta web es el desorden, pero lo que resulta bastante alarmante cuando en este caso es que se ofrecen, entre otras cosas, servicios de diseño web. Para el diseño de esta página se han utilizado variadas tipografías con rasgos muy diferentes, lo que lleva al caos visual y al desorden. El fondo negro sobre el que se pone toda la información resulta muy poco estético y los colores tampoco tienen una paleta coherente. En resumen, todos estos errores se traducen a no tener una imagen visual bien marcada y utilizar elementos sin un punto en común que solo conducen al reguero visual.

Qué elementos de esta web debemos evitar:

  • Imágenes poco trabajadas e íconos ineficientes
  • Desorden en las informaciones y en la disposición de los elementos dentro de la página que dificultan la navegación.
  • Colores diferentes y poco contrastantes entre sí
  • Uso de muchas tipografías inapropiadas
Web desordenada y con diseño saturado

Gates N Fences

http://www.gatesnfences.com/

Al analizar esta página web salta a la vista el exorbitante volumen de información que posee. La navegación se ve entorpecida por las masas de texto e imágenes que no respetan los espacios en blanco ni se encuentran de manera jerarquizada para guiar la lectura, la vista y la exploración por las diferentes informaciones. Además, la estética es muy antigua y deficiente, sin una imagen visual fuerte, con colores y ornamentos de mal gusto.

Elementos deficientes en Gates N Fences:

  • Desorden en la información debido al volumen grande de información
  • No se ha dispuesto la información de manera jerarquizada y respetando los espacios en blanco
  • Colores diferentes y poco coherentes entre sí
  • Fondos con texturas y degradados que entorpecen la lectura
Una web sin diseño

Cantina Chichilo

http://www.cantinachichilo.com.ar/

En este caso la web simplemente carece de diseño. Se trata de una página web de un restaurante de Buenos Aires. Nos encontramos frente a un diseño con una página en blanco y unas letras rojas y verdes con las informaciones correspondientes, que además de ser muy poco estéticas no presentan ningún tipo de organización o jerarquización acorde a los diferentes tipos de información. El resto de la página está compuesta por fotografías que no muestran correctamente el producto que se ofrece, con baja calidad, diferentes tamaños, muy informales y dispuestas igualmente de manera desorganizada.

Qué elementos de esta web deberíamos evitar:

  • Fotografías en baja calidad que no muestran bien el producto        
  • Diseño prácticamente inexistente, a base de letras y un fondo en blanco
  • Tipografías con colores diferentes que aportan a un diseño poco estético
Diseño escaso en esta web

Govind Tiwari

http://govindtiwari.blogspot.com/

Este es un claro ejemplo de muchas malas decisiones en el diseño de una web. Se trata del blog de un chico llamado Govind Tiwari. La página posee un diseño demasiado ineficiente, desde los gifs con una imagen propia y repetidos por toda la página, hasta el diseño de los fondos con brillos animados o editados con montajes de cielos o paisajes. La estética realmente es lo peor de este blog, no tienen ningún tipo de coherencia. Además, se han utilizado de manera arbitraria tipografías y recursos que de por sí ya son muy anticuados y con poco atractivo. Realmente esta página es tan amateur que parece un chiste, pero que nos da una noción sobre qué cosas debemos evitar a la hora de crear la nuestra.

Malas prácticas en la web de Govind Tiwari

  • Gifs anticuados y sin sentido con baja estética
  • Fotografías editadas con diseños de muy baja calidad
  • Información regada y navegación deficiente
  • Estética general muy pobre

 

Web de James bond mal diseñada

James Bond 007 Museum

http://www.007museum.com/

En este ejemplo podemos apreciar claramente la importancia de un patrón compositivo a la hora de crear un producto gráfico. Cuando una página web se muestra desorganizada y con todos sus elementos incluidos de manera arbitraria, claramente no se ha llevado a cabo un diseño pensado en el usuario para facilitar su experiencia en la navegación. El museo James Bond 007 decidió incluir en esta página tipografías, fotografías, colores, ediciones y gráficos con estilos bastante diferentes y de manera desordenada. Además, nos encontramos con un contenido tan extenso, que tal parece un libro de muchísimas páginas y no una página web. Estos elementos solo dificultan el proceso de navegación, aburren a los usuarios, disminuyen el tráfico y por tanto la visualidad de la página.

Errores que se cometieron en esta web:

  • Estéticas muy diferentes para los diseños de fotografía, gráficos, tipografías, colores
  • No existe una imagen visual fuerte y definida
  • Desorden y elementos colocados de manera arbitraria que desencadena el caos y afecta la lectura y la navegación
  • Contenido extremadamente extenso
Demasiados objetos en una web. Muy mal diseño

Arngren

https://www.arngren.net/

Arngren es una web que pone a la venta diferentes equipos de transporte. En una primera impresión esta web parece un catálogo impreso sobre una hoja en blanco o una página digital de un pdf. Lo más llamativo, dentro del diseño, es la increíble cantidad de información que han logrado incluir en un espacio reducido. No se han respetado los espacios en blanco y las columnas para ubicar bien la información, si no que todo está ubicado de la manera más apretada posible y esto no provoca nada más que un caos y una desinformación terrible. Un detalle importante de esta web es que su desplazamiento es a través de realizar scroll hacia abajo, pero también notamos que utilizando la barra de desplazamiento hacia el lado derecho la página no acaba ahí, sino que es mucho más extensa de lo que habíamos imaginado. El espacio está terriblemente utilizado en este ejemplo y esto no es más que una falta de conocimiento del responsive design en una página web.

Que elementos de esta web deberíamos evitar:

  • Información apretada y sin aire entre cada elemento, qué dificulta la lectura y la navegación
  • Estética baja, diseño prácticamente inexistente
  • Falta de responsive design que desencadena en una navegación turbulenta donde la información no se aprecia en su totalidad.
Una web saturada de información por un diseño pobre

Lignscars

https://www.lingscars.com/

Esta web se dedica al alquiler de automóviles. Suponemos que se proponían hacer un diseño divertido y atractivo, pero la verdad el resultado no ha sido otro que una suma de elementos bastante caóticos. Se han utilizado todos los colores y tonalidades posibles y no faltan los diseños con arabescos, patrones, stickers, gifs y todo tipo de recursos llenos de colores y vida, pero que no consolidan una imagen ni tienen coherencia entre sí. Es importante tener en cuenta que cuando se crea una web para un negocio en específico se debe analizar el público y sus características y a partir de ahí crear un estilo acorde a estos.

Errores de Lignscars:

  • Demasiados elementos coloridos y llamativos que no responden a una estética en común
  • Mucha información con llamados de atención que no conducen la navegación ni guían al usuario, más bien lo desorientan.
  • Diferentes tipografías con colores muy saturados
  • Desaprovechamiento del espacio
Una web mal hecha en diseño y en accesibilidad

The slide rule universo

https://www.sphere.bc.ca/test/sruniverse.html

Esta página ofrece la venta de determinados productos. El diseño es bastante pobre, y esto es bastante notable en los fondos negros con texturas y las imágenes pequeñas y de baja calidad. Las tipografías de colores saturados tampoco aportan mucho y afectan severamente el contraste, la estética y hasta la lecturabilidad de las informaciones. Existe una masa de texto muy larga en la parte inferior de la web que no ha sido jerarquizada ni dispuesta de manera lógica para ayudar al usuario a navegar, por lo que hay bastante desorden en general.

Características negativas de esta web:

  • Baja estética en el uso de fondos con texturas oscuras.
  • Tipografías con colores que dificultan la lectura
  • Información extensa y agobiante que no llama la atención ni invita a navegar
  • Composiciones sin sentido y sin respetar el aire entre las distintas informaciones
web súper saturada, con un diseño mal hecho

Accept Jesus, forever forgiven

http://www.dokimos.org/ajff/

Solo al abrir la página ya nos encontramos mareados y saturados. Se trata de una web con temática religiosa que no te va a dejar indiferente por su diseño alocado. En la home se han puesto una serie de gifs, animaciones y fondos bastante estridentes que saturan la visión por la combinación de los colores muy saturados y las animaciones sin demasiado sentido que solo provocan cansancio visual. Además, la web no tiene una razón de ser muy específica, no queda claro a qué se dedican específicamente o que pretenden mostrar.

Errores presentes en esta web:

  • Colores demasiado estridentes que afectan la visualidad y provocan cansancio visual.
  • Incomprensión de los objetivos o contenidos de la web
  • Estética baja, composición incoherente, simple, sin mucho diseño.
  • Animaciones sin sentido o propósito que provocan un caos visual.
una web muy anticuada

The World’s worst website ever

https://www.theworldsworstwebsiteever.com/

Por su nombre ya podemos hacernos una idea de lo que vamos a encontrar. Realmente se trata de una de las peores webs en cuanto a diseño y contenido. Podría pensarse que por su nombre tiene sentido hacer una web así, pero la verdad es que ninguna circunstancia justifica el caos total en una página que va a ser visitada por diferentes usuarios, porque simplemente es insostenible. Con esta web es muy probable que te vuelvas loco, pues se entiende muy poco ya que todo absolutamente está ubicado de una manera aleatoria. No hay una estética común en cuanto a colores, tipografías o gráficos. Todo está demasiado anticuado, colorido caóticamente, ilegible e inentendible.

Por qué esta web es tan caótica:

  • Desorganización total, que dificulta entender la información, la lectura, el recorrido visual y la navegación.
  • Colores, tipografías, imágenes, gráficos y recursos totalmente diferentes entre sí, con estilos muy antiguos.
Web con una estética pésima

Penny Juice

https://www.pennyjuice.com/

Nuevamente nos encontramos un caso en el que el estudio del público al que va dirigido el producto no ha sido del todo llevado a cabo. Penny Juice promociona la venta de jugos naturales para niños, pero sus características no provocan mucho la estética de esta temática. En un intento por hacer divertida la página se han utilizado colores muy saturados y tipografías con degradados de mal gusto. Algunos de los recursos utilizados están pixelados y no se agrupan bien al resto de los diseños.

Errores de esta web:

  • Diseño que no se ajusta a la temática de la web
  • Estética baja: fotografías pixeladas y colores saturados que no armonizan entre sí
Una web mal diseñada y de baja calidad

Gold Nugget Web

https://goldnuggetwebs.com/

En esta web una de las cosas más grave que nos podemos encontrar en un primer momento es la desinformación. En la home aparecen enlaces a diferentes páginas webs que pareciera que han sido hechas por el propio desarrollador pero no queda del todo claro, es bastante escasa la información. A esto se le suma un diseño muy pobre y sobrio con una tipografía con relieve, sombra y pixelada. Realmente se trata de algo demasiado simple y nada llamativo.

Qué impresiones ha dejado Gold Nuggets Web:

  • Estética pobre y malas decisiones tipográficas y de color
  • Muy poca información para una página web
  • Imágenes con baja calidad, sin edición y que no aportan atractivo
una web con mal diseño por desactualización

El escaparate de Rosa

http://elescaparatederosa.blogspot.com/2009/09/entradas-relacionadas-con-miniatura-de.html

Este es un ejemplo particular dentro de esta lista, pero valía la pena incluirlo. Se trata de una web que ha quedado totalmente desactualizada. Esto suele pasar cuando no se atiende la web y las imágenes y enlaces quedan rotos. Una página con un posible potencial no cumple su función si no se actualiza y rediseña.

Errores fundamentales dentro de esta web:

  • Desactualización: enlaces e imágenes rotos
  • Diseño escaso y demasiado simple
Una web muy mal hecha, Holywar

Holywar

http://holywar.org/

Esta web es un poco escalofriante. No queda muy claro de que trata, pero parece ser algún movimiento religioso bastante peculiar. Independientemente de su temática, la web posee una estética bastante brusca, con un fondo negro potente y tipografías a relieve, con colores, sombras y mucho tratamiento que lo hacen lucir estéticamente pobre. Al navegar podemos apreciar que se mantiene el mismo estilo con el color negro de fondo con imágenes religiosas y políticas de baja calidad y tipografías de diferentes estilos y colores.

Características negativas de esta web:

  • Temática confusa y casi nada de información
  • Estética baja: tipografías grandes, a relieve, con sombras y degradados y diferentes entre sí
  • Color negro de fondo, muy brusco y que no permite buenos contrastes
  • Desorden y casi nula composición en sus páginas

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com