20 razones por las que el diseño de tu sitio web apesta - Parte 1

Todos tenemos o hemos oído hablar de esos clientes del infierno, a los que les encantan las páginas rosas con texto rojo. Peor aún, ¿qué pasa con esas personas que se hacen llamar "diseñadores web" con precios y servicios caros que figuran en sus portafolios realmente desordenados, horribles y amateurs, sólo porque hicieron la página de empresa de su tío y les gustó? Desgraciadamente, mucha gente cree que el diseño web es cuestión de estilo personal y de IDE inteligentes con botones preconstruidos. Déjame decirte algo: están equivocados. Me encanta jugar al fútbol, pero eso no me convierte en un jugador profesional, y Dreamweaver no te convierte en un desarrollador web profesional. El diseño y el desarrollo web exigen conocimientos, práctica, esfuerzo diario para aprender y estudiar, y pasión, como los jugadores profesionales de fútbol. (Convenciones de diseño: Necesarias directrices para mejorar un diseño concreto). Independientemente de lo bueno o malo que sea el estilo personal, lo cierto es que todo el mundo tiene uno. Sin embargo, cuando se dejan de lado las convenciones de diseño en un proyecto, el resultado será un diseño malo o poco interesante. Eso es exactamente lo que ocurre con esos clientes terribles, cuando intentan aplicar su estilo personal sin saber nada de las convenciones del diseño.

1) Equilibrio

El equilibrio es un principio básico del diseño. Está directamente conectado a cada elemento, y te ayuda a controlar el flujo de diseño de tu página. Hay dos conceptos importantes en el equilibrio: el equilibrio simétrico y el asimétrico. Con el Equilibrio Simétrico, los elementos tienen el mismo peso en ambos lados, lo que da lugar a un sitio web formal y tradicional; sin embargo, con el equilibrio asimétrico, los elementos tienen un peso diferente, lo que da lugar a un diseño distinto y único. He decidido incluir este tema porque su importancia es capital en el diseño de maquetas. Si se utiliza incorrectamente, puede llevar a la ruina total de tu trazado. Arriba tienes un buen ejemplo de equilibrio asimétrico. ¿Te has fijado en el texto "Reparación de parabrisas DECO" a la derecha, y en la imagen del mapa de fondo a la izquierda? Aunque esos elementos no tienen el mismo peso, se siente perfectamente equilibrado. Sin embargo, si ocultas el texto de la derecha, la página perderá su equilibrio muy rápidamente. Ahora echa un vistazo a la sección inferior blanca, esas tres columnas no tienen el mismo peso, pero está perfectamente equilibrada porque el texto de la izquierda ("No puedes estar en todas partes…") tiene el mismo peso que el texto superior derecho sobre el fondo rojo. El resultado es un "equilibrio cruzado", es decir, que los elementos débiles y fuertes crean un equilibrio entre ellos. Considero que esto tiene una enorme importancia en el equilibrio asimétrico. El sitio web anterior falla de tantas maneras que podría utilizarlo como ejemplo en los nueve temas restantes que siguen, pero centrémonos en éste. ¿Sientes el equilibrio? Sí, tienes razón, no hay equilibrio. El lado izquierdo tiene muchas imágenes, además de un vídeo de la persona de pie, lo que hace que el lado izquierdo tenga más peso que la imagen de la derecha.

2) Biselar y repujar

Tenía que incluir ésta. Es realmente molesto ver el mal uso de este estilo de capa. Para los que estáis empezando, entiendo que penséis que el bisel y el relieve es un efecto bonito y que debería estar por todas partes en vuestra página, pero no es así. Los efectos de bisel deben utilizarse con moderación. Hay un montón de tutoriales sobre cómo transformar el bisel y el relieve en una técnica poderosa, pero si no sabes cómo utilizarla, no la utilices.

3) Fondos que distraen

Implementar un fondo recargado distrae la atención del usuario, oculta información importante y no respeta la jerarquía visual. Si tu imagen de fondo tiene un impacto visual mayor que todo lo demás, los usuarios no captarán el mensaje de tu sitio web y se irán rápidamente. El sitio web de John Kavanagh hace un buen uso de las imágenes de fondo, respetando la jerarquía visual y también la información del contenido. La lectura es de izquierda a derecha, y en este caso, la atención del usuario sigue los edificios de la izquierda hacia la Torre Eiffel y el Puente de Londres de la derecha, lo que le lleva a navegar (que no es visible en la imagen). Este es un ejemplo perfecto de cómo puede utilizarse el fondo como "herramienta" para el flujo de diseño. Arriba tienes un ejemplo perfecto de lo que no debes hacer con tu fondo.

4) Falta de detalle

Si tu sitio web apesta, probablemente es porque no te preocupaste de las cosas menores. Cuando creas que tu diseño está completo, tienes que empezar desde el principio e intentar aplicar el detalle en cada uno de los elementos. En cuanto termines con el detalle, tienes que empezar de nuevo y considerar en qué se puede mejorar. Un solo trazo, un efecto de luz o una sombra marcan la diferencia entre un buen y un gran diseño. El sitio web de Blackberry es un buen ejemplo de lo que se puede conseguir dedicando tiempo a los detalles. Detalle, detalle, detalle. Para una empresa del tamaño y la repercusión de Microsoft, su sitio web dista mucho de ser genial. Es sin duda un buen ejemplo de falta de atención y detalle.

5) Espacio en blanco

El espacio en blanco se refiere al espacio entre elementos, y no tiene nada que ver con el color. Si no sabes de qué estoy hablando, detén tus proyectos de diseño y lee sobre este tema: Cómo utilizar realmente el espacio negativo como elemento de diseño. El espacio en blanco define el espacio/distancia entre los elementos de tu sitio web, proporcionando una buena legibilidad, enfoque y fluidez de diseño. También da a tu sitio web un aspecto limpio y profesional. Un diseño limpio no es lo mismo que minimalista, piensa en limpio como lo opuesto a desordenado, donde el contenido está por todas partes. Otra cosa que deberías tener en cuenta es utilizar la misma altura entre elementos, de modo que si tienes tres divs alineados verticalmente, y el div del medio está a 50px del div superior, también debería estar a 50px del div inferior. Esto no es obligatorio, pero te ayuda a conseguir un buen equilibrio entre los elementos. El sitio web de Uberspace hace un buen uso del espacio en blanco. Sólo con mirar la imagen de arriba, me da dolor de cabeza. La cantidad de información es abrumadora, pero la forma en que se muestra es aún peor. La información desordenada hace que el usuario se sienta perdido e infeliz. ¡Evítalo!

6) Flash Intros

Hace tiempo, tener una intro en flash en tu sitio web te convertía en un ninja del diseño web. Hay muchas intros geniales por ahí, y muchos más intentos realmente malos. Hoy en día, la mayoría de los visitantes quieren acceder rápidamente a la información y cuando les exiges que esperen, se van. Si quieres una introducción en tu sitio web, asegúrate de que tenga sentido, aporte valor y esté bien hecha.

7) Música

Así que tengo los auriculares puestos, abro varias pestañas y, de repente, salto de la silla porque empieza a sonar una música irritante. Luego busco la pestaña correcta y cuando la encuentro, busco el botón de silencio y adivina qué, no lo hay. No quiero silenciar los altavoces, así que cierro la página y no vuelvo a ese lugar ruidoso. La música alta y aburrida procedente de tu sitio web es realmente molesta, pero no tener una forma de apagarla, es un boleto de salida de tu sitio web.

8) Mesas

Este es un tema controvertido, algunas personas defienden el uso de tablas y otras no tanto. Este tema no pretende convencerte de que no utilices tablas, sino de que las utilices cuando y donde debas. Personalmente, no recuerdo la última vez que he utilizado tablas, sencillamente no me gusta. Sin embargo, para los datos tabulares, las tablas son la mejor opción, ya que aumentan la legibilidad y la organización. La página de precios de Shopify es un buen ejemplo de lo bueno que puede ser el uso de tablas para datos tabulares. ¡Nunca utilices tablas para dar estilo a tu diseño!

9) Colores

Una elección equivocada de colores puede arruinar todo un sitio web. Contraste, saturación, tipos de colores, público objetivo, estilo, etc. Hay muchos factores que debes tener en cuenta a la hora de elegir los colores adecuados para tu sitio web. Si no sabes por dónde empezar, Tina escribió un magnífico artículo sobre este tema: Los colores en el diseño web: Elegir la combinación adecuada para tu sitio web. Si utilizas demasiados colores brillantes, o un contraste similar para tus elementos de fondo y primer plano, o incluso colores cálidos junto con colores fríos, básicamente estás obligando a tus visitantes a marcharse. El color tiene que encajar perfectamente, de acuerdo con tu público objetivo, estilo y personalidad. Si entras en el sitio web anterior, asegúrate de utilizar gafas de sol.

10) Desbordamiento

A menos que estés construyendo un sitio web con diseño horizontal, mostrar una barra de desplazamiento horizontal es un error y queda mal. Asegúrate de que tu diseño está optimizado para una resolución de 1024 x 768 píxeles, de esta forma el 98% de tus visitantes podrán visitar tu sitio web sin problemas. Si realmente quieres utilizar una imagen de fondo más grande, asegúrate de ocultar la barra de desplazamiento horizontal, utilizando la propiedad CSS overflow-x: hidden.