7 Principios que tienes que conocer para el buen diseño web

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

El diseño web puede ser más difícil de lo que uno se cree, ya que se trata de lograr un diseño que a la vez sea útil y atractivo al mismo tiempo que ofrecer información de la marca o producto. En el articulo anterior te dábamos varios consejos para diseñar vuestra web pero hoy escribimos los 9 principios a tener en cuenta para que vuestra página pueda tener un buen diseño web.

Guiar al lector

Un buen diseño web debe guiar al lector de la página por dónde queremos que lea, pase o haga click. Un ejemplo sencillo es el siguiente: lo primero que ve un usuario al entrar a una web es el logotipo ya que a menudo es muy grande y se ha demostrado que es lo primero que la gente mira (parte superior izquierda). Si quieres seguir manteniendo que el usuario sepa inmediatamente qué sitio está visitando siga manteniéndolo en esa posición. Pero la prioridad de una página web va más allá, es decir, no solamente queremos que el usuario sepa dónde está sino que queremos que el usuario haga click en una promoción o información determinada que tenemos colgada en nuestra web. Entonces debemos colocar esta información importante para el usuario y para nosotros en una posición especial, o al lado de una imagen impactante. El usuario debe ser atraído por esto para hacer click donde queremos que lo haga.

¿Cómo se puede lograr la llamada de atención de los usuarios que entran en la web? Hay que tener en cuenta:

  • Posición: cuando algo está en una página influye claramente el orden en el que el usuario ve la información.
  • Color: el uso de colores llamativos y sutiles es una forma sencilla de decir al usuario dónde buscar.
  • Contraste: Ser diferente hace que las cosas destaquen al mismo tiempo que las hacen secundarias.
  • Tamaño: lo grande prevalece sobre lo pequeño
  • Elementos de diseño: flechas que indiquen…

Para lograr prioridad que tiene muchas herramientas a su disposición:
Posición – Cuando algo está en una página influye claramente en el orden en que el usuario ve.
Color – El uso de colores llamativos y sutiles es una forma sencilla de decirle a su usuario donde buscar.
Contraste – Ser diferente hace que las cosas se destacan, al tiempo que la misma les hace secundaria.
Tamaño – Big prevalece sobre poco (menos que todo es grande, en cuyo caso poco podría sobresalir gracias al contraste)
Elementos de diseño – si hay una gigantesca flecha que apunta a algo, supongo que el usuario se verá?

No Saturar al usuario

El espacio vacío parece un desperdicio dentro de la página web pero el efecto es el opuesto. Cuanto más separación hay entre la información que des al usuario más claro es para él. Hay tres aspectos que debes considerar:

  • Interlineado: El espacio entre las líneas afecta directamente a la facilidad de lectura. Demasiado espacio o poco espacio complica la lectura así que hay que encontrar un término medio.
  • Relleno: El relleno es el espacio entre los elementos y el texto. Hay excepciones pero como regla general es importante espaciar bien el texto del resto de información e imágenes de la página ya que esto hace que la web sea infinitamente más fácil y agradable de leer.
  • Espacio en blanco: El espacio en blanco no necesita ser de color blanco. El término blanco se refiere sencillamente a un espacio vacío en una página (o espacio negativo como a veces se le llama). El espacio en blanco se utiliza para dar equilibrio, proporción y diferencia de una página. Una gran cantidad de espacio en blanco tiende a hacer que las cosas parezcan más elegantes, así que si por ejemplo tu sitio está orientado a un nicho de alto standing tendrás que dejar un montón de espacios en blanco. Para aprender más sobre cómo utilizar los espacios en blanco te recomendamos que ojees revistas de anuncio de grandes marcas de relojes o coches y similares ya que son un gran ejemplo del uso de espacios en blanco.

Facilitar la navegación

Una de las experiencias más frustrantes que puede tener un sitio web es que el usuario no sepa dónde ir o dónde está. Hay dos conceptos de navegación a tener en cuenta:

  • Navegación ¿Dónde puedo ir? Hay algunas reglas de sentido común que recordar aquí: pon botones fáciles de encontrar para facilitar la navegación dentro del sitio web (en la parte superior de la página). Los botones además deben ser fáciles de identificar (usa distintos colores que llamen a la acción).
  • Orientación ¿Dónde estoy ahora? Hay un montón de maneras de orientar a un usuario así que no hay excusa para no hacerlo. En sitios pequeños puede ser sólo cuestión de un gran título o un botón correspondiente en el menú. En sitios más grandes hay que hacer uso de la miga de pan para marcar el camino, es decir, utiliza subtítulos y un mapa del sitio para que los usuarios no se pierdan.

Tipografía

El texto es el elemento más común del diseño. Es importante tener en cuenta cosas como:

  • Opciones de fuente – las fuentes dicen cosas distintas sobre un diseño o marca. Algunas son más modernas y otras tienen un look más retro. Asegúrate de utilizar una fuente adecuada para tu imagen corporativa.
  • Tamaños de fuente – hace años la moda era que el texto apareciera en letra muy pequeño. Afortunadamente nos hemos dado cuenta que el texto está destinado a ser leído, no sólo a mirar. Asegúrate que los tamaños de texto son consistentes, lo suficientemente grandes para ser leídos.
  • Espacio – el espacio entre las letras es importante, aunque en el conjunto de la web no sea lo más importante debes tenerlo en cuenta.
  • Longitud de la línea – Por lo general las líneas de texto no deben ser demasiado largas. Cuanto más largas más difícil que las acaben leyendo. Recomendamos pequeñas columnas de texto ya que funcionan mucho mejor (piensa en como un periódico presenta el texto).
  • Color – Es importante que se contraste con el fondo para que la lectura sea óptima.
  • Párrafos – El texto justificado tiende a crear espacios extraños entre las palabras. Esto no es agradable para el ojo por lo que es mejor utilizar textos alineados a la izquierda a menos que puedas evitar los espacios entre palabras cuando justifiques el texto es más estético en el conjunto general del diseño web.

Usabilidad

El diseño web no son solamente fotografías bonitas. Exponemos aquí tres aspectos importantes para que tu página web sea cómoda para el usuario:

  • Normas: hay ciertas cosas que la gente espera. Por ejemplo, si el texto está subrayado esperamos que sea un enlace. Hacer lo contrario no es una buena práctica de usabilidad. Claro que puedes romper algunas convenciones, pero la mayor parte de tu sitio web debe seguirlas.
  • Piensa como un usuario en qué lógica seguirá dentro de tu sitio web y en qué tareas podría hacer en tu web (comprar, suscripción a tu web…) todo ello con el objetivo de guiar al usuario en qué es lo que debe hacer en la web. Al fin y al cabo el diseño web es una herramienta para que las personas utilicen una página web y por ello mismo el funcionamiento tiene que ser agradable.

6. Alineación

No quiere decir que toda la página web tenga que estar alineada, sino que hay que tratar de poner las cosas de forma ordenada y de fácil digestión para que a los usuarios les parezcan fáciles.

Consistencia y coherencia

Tu página web debe ser coherente y seguir el mismo estilo: tamaños de fuente, opciones de fuente, colores, estilos de botón, espacios, elementos de diseño, ilustraciones, opciones de foto, etc. Todo debe ser coherente entre la misma página y el resto de la web.

Mantener el diseño de tu página web de forma coherente da profesionalidad a la imagen de tu negocio o marca. Las inconsistencias en el diseño con como los errores de ortografía en un ensayo. Ellos sólo consiguen disminuir la percepción de la calidad. Sea cual sea tu diseño debes mantenerlo siempre constante. Incluso si se trata de un mal diseño, al menos que sea un mal diseño coherente.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *