Blog

877

 Diseño

 Una introducción acerca del conjunto de estrategias para ayudar a comunicarte visualmente del modo más efectivo: tipografía, estructura de los contenidos y color.

Estas tres herramientas son, en cierto sentido, bastante simples. Pero al combinarlas se consigue guiar y marcar el ritmo de lectura de la aplicación. Estas serían las tres metas principales del diseño visual:

  • Dar sentido a la información.
  • Dotar de estructura a los contenidos, sugiriendo las relaciones entre ellos y sus importancias relativas.
  • Establecer la forma de interacción para atraer al usuario, orientarlo y poner anzuelos para que se sumerjan en la información.

A menudo, un buen diseño visual no se nota porque el contenido aparece claro y despejado. Por supuesto, a veces sí notamos un buen diseño por su gusto o por su habilidad para comunicar una determinada idea. Pero lo notamos de una forma distinta a un mal diseño. Nos damos cuenta de un mal diseño cuando nos tropezamos con él. Como con las gafas que están sucias, arañadas o mal graduadas, tenemos que entornar los ojos para encontrar el sentido a las cosas.

Respecto a la tipografía, recalcar que la variación tipográfica y el contraste de tamaños pueden dar un cierto sentido de jerarquía visual. En mi artículo sobre las características de la tipografía puedes encontrar más información.

En cuanto a la estructura de los contenidos, uno de sus principios fundamentales es la relación entre el espacio en blanco y el contenido. Es necesario que algún espacio sea estrecho para que otro sea ancho, y algún espacio debe vaciarse para que otro pueda llenarse.  Al añadir algo de espacio en blanco, logramos trocear el diseño visual para que las partes destacadas se agrupen y las diferentes queden al margen. Sin duda, para manejar estas relaciones, la herramienta más potente de la que disponemos es la cuadrícula (conjunto de líneas invisibles al que se ajustan todos los elementos en la pantalla). Gracias a la cuadrícula podemos dar una estructura a la información, haciendo que lo más importante esté cerca de la parte superior o acercando los elementos que estén conceptualmente más relacionadas. Hay varias partes que componen el sistema de cuadrícula:

  • las columnas, que pueden ser del mismo ancho, o no.
  • los canales, que son los espacios en blanco entre las columnas.

 Además de eso, generalmente todo se alinea horizontalmente usando una referencia. Puedes añadir texto jerárquicamente (título, subtítulo, pie de autor o algo parecido). Y no es necesario para las cuadrículas que todo sea de la misma anchura. La cuadrícula puede romperse un poco en la parte inferior con el pie de página y así hacer el interfaz un poco más dinámico.

 Un consejo rápido: asegúrate de trabajar primero con el bloque de texto más largo. Puede ser fácil diseñar un título corto, y luego tener una cuadrícula o sistema de alineado que se rompa cuando se trata de algo más largo. Esto es especialmente válido si estás diseñando para múltiples idiomas. Por ejemplo, el texto en alemán a menudo consume más espacio que el texto en inglés, español o francés.

 En general, la regla de oro es que para los idiomas que se leen de izquierda a derecha, por lo tanto el alineado a la izquierda es el más rápido para ojear. Usar bien la alineación guía a tu ojo y disminuye el desorden. Evita desajustes leves, porque debilitan tu habilidad para guiar la organización. Automáticamente detectamos patrones y también desviaciones de ellos, así que usa patrones cuando quieras transmitir coherencia, y desvíate de ello solo cuando quieras intencionadamente distinguir ese contenido. También puedes usar la escala y jerarquía, haciendo más grandes las cosas más importantes, y más pequeñas las menos importantes, o con menor escala de color, como un modo de resaltar cuáles son las partes más y menos importantes de la página.

 Acerca del color, lo primero es diseñar en escala grises. A menudo se confía en el color para hacer distinciones visuales en los diseños y, en realidad, hay que utilizar las otras herramientas primero: comienza trabajando con la escala y estructura como modos de distinguir los elementos en la página. Luego se puede usar la luminosidad como una forma de indicar qué es más y menos importante. Una vez que tengas el mejor diseño posible en escala de grises —en blanco y negro—, añade color como un modo de darle una codificación redundante.

Comentarios ( 877 )

    The comments are now closed.