La importancia de la jerarquía visual
La jerarquía visual es una de las claves del diseño. A la hora de crear imágenes para imprimir o un uso digital el contenido deberá estar bien organizado. No vale sólo con ser creativo, sino que hay que tener en cuenta las sutilezas de una composición, como el color, los tamaños, los contrastes, direcciones, emplazamientos, y, sobre todo, qué dejar fuera y qué incluir en la composición. La jerarquía visual es cómo organizar el contenido para transmitir mejor el mensaje a la audiencia.
Como diseñadores hay que tomar decisiones calculadas que tengan presente cómo se prioriza el contenido. Hay que tener en cuenta la cantidad de información que presentamos y el tiempo que le lleva al espectador tener su primera impresión. Si el mensaje no se coloca de forma consciente no conseguirá el impacto deseado. Hay que guiar a los espectadores, creando “caminos” que les lleve en la dirección adecuada. Es importante prestar atención al peso de los diferentes elementos gráficos y distribuirlos de forma correcta para que nos ayuden a crear ese camino.
Tipos de visionado de páginas
Todas las culturas leen de arriba abajo, y la mayoría de ellas de izquierda a derecha. Pero hace falta algo más que eso para ver cómo se lee una página. Estudios recientes muestran que los lectores primero “escanean” la página completa antes de empezar a leer. Y esos escaneos tienen dos formas: F y Z
https://blog.adobe.com/media_9c8e712db6fdfc745d1fd2889f4657aaf450f180.gif
Un estudio del movimiento de los ojos realizado por Nielsen Norman Group.
La forma F se aplica en páginas más pesadas, con mucho texto, como artículos o blogs. El lector escanea desde la parte izquierda de la página, buscando palabras clave importantes en títulos alineados a la izquierda o las frases iniciales, y cuando encuentran algo interesante empiezan a leer hacia la derecha.
https://blog.adobe.com/media_551814c107914d5a868c1cb32e171fc230dc6b7c.gif
Ejemplo de un diseño siguiendo el patrón en F
Para usar estos principios en diseño, hay que poner la información importante a la izquierda y usar títulos cortos en negrita, marcadores de texto y otras formas que atraigan la atención y separen los párrafos del texto. En otras páginas, como anuncios o webs donde la información no tiene por qué aparecer en bloques de texto, habría que aplicar la forma Z: los ojos del lector primero revisan la parte superior de la página, que es donde suele estar la información principal, y descienden de forma diagonal a la esquina opuesta, hacen lo mismo con la parte inferior.
https://blog.adobe.com/media_0c509ed0f165abaf95541df98b761abb184d3062.gif
Ejemplo de diseño usando un patrón en Z
Tanaño
Aquí la regla no podría ser más sencilla: la gente lee antes las cosas grandes.
https://blog.adobe.com/media_d7c0347919f97c74c85bbb386c1ce9db80ef044a.gif
Por ejemplo, la web de Google Creative Lab. Es bastante probable que las palabras “HAPPY PARTY” sean lo primero que llaman tu atención. Esto es a posta, y se y tiene que ver con el mensaje principal que la empresa quiere comunicar.
El tamaño, especialmente en el texto, es una herramienta muy poderosa que se salta las reglas de leer de izquierda a derecha y de arriba a abajo. Esto significa que una palabra o frase grandes serán lo primero que se lea. Es más, el tamaño también aumenta la importancia del mensaje.
https://blog.adobe.com/media_770e87a82d54bc29e4d6b648a28a2d01f165696a.gif
Espacio y textura
Otra forma de llamar la atención al contenido es dar aire para respirar. Si se deja suficiente espacio negativo alrededor de un botón, o si las líneas de un párrafo están bien espaciadas los elementos serán más legibles para el usuario.
https://blog.adobe.com/media_5443aedbde7094ff69e7d54834656f49c86a9be6.gif
Al crear una página web con un gran tamaño, el espaciado puede ser una alternativa elegante. Reducir el ruido visual creará un concepto más claro de tu creación.
El espacio en blanco también ayuda a que el contenido sea más fácil de leer. En 2004 se realizó un estudio que descubrió que el uso de espacios en blanco entre párrafos y en los márgenes laterales aumentaba en un 20% la comprensión del texto, ya que al lector le era más sencillo centrarse en el contenido.
La textura hace referencia a la organización global y al espaciado del texto y otros elementos a la hora de crear la página web.
Tipografía
La elección de las fuentes es esencial a la hora de establecer una buena jerarquía visual. Uno de los atributos más importantes es el peso y el estilo (con o sin serifa). El uso de cursiva también es importante.
https://blog.adobe.com/media_8f84ff76131cb167331de1bddfe6588e6d982d3c.gif
Color
Otra regla sencilla y efectiva: los colores brillantes llaman más la atención que colores suaves o grises. Puedes aprovecharte de esto para atraer la atención del lector a lo que más te interese. Además, ciertos colores ayudan a crear un ambiente diferente (el azul es sereno, el rojo más agresivo, etc.).
https://blog.adobe.com/media_6ce591f87461acbdb6cb0c4254e1e97b0e89973c.gif
La web de Fitbit usa colores con un patrón en Z de forma muy inteligente. El magenta brillante llama inmediatamente la atención en la parte superior de la jerarquía visual, mientras que nos lleva al botón “Get Active”, indicando que ambos conceptos están interrelacionados.
Dirección
Los diseños de las páginas normalmente se realizan de acuerdo a rejillas horizontales o verticales, por costumbre y para mejorar la lectura. En este sistema surge una nueva forma de jerarquía, que rompe con esas rejillas. Los textos puesto en curvas, o diagonalmente destacarán sobre el resto de la estructura en bloques de texto. Esto se ha utilizado con éxito tanto en publicidad como en diseños web.
https://blog.adobe.com/media_a3e1a25d606755f7d18636a100cee2457883c006.gif
