La misión principal del diseñador no es hacer que las cosas sean bonitas. Su razón de ser es organizar la información con claridad, consiguiendo un resultado atractivo. ¿Cómo se logra eso? ¡Atento a esta guía para crear una jerarquía visual!
En este artículo, que forma parte de la serie sobre cómo diseñar una identidad de marca, te voy a contar trucos de diseñador para organizar el contenido en la era digital, sin necesidad de que seas diseñador, ojo.
¿Qué es la jerarquía visual?
Pero, ¿qué es esto de la jerarquía visual? Es la disposición de los elementos gráficos en un diseño atractivo que ayude al lector una idea de la importancia de cada elemento. Es parte fundamental de la guía de estilo web y sin una buena jerarquía visual, no serás capaz de tener un diseño atractivo.
El peso visual define la importancia de un elemento. Es decir, si ves algo en mayúsculas, PIENSAS QUE ES IMPORTANTE. El ser humano es así, no destacamos todos y cada uno de los elementos de nuestra comunicación, solo los que son importantes.
Gracias a la jerarquía visual, el diseñador puede guiar al lector a centrarse en qué debe enfocarse y, sobre todo, en qué orden debe hacerlo.
La jerarquía visual en la era de internet
Si hasta hace poco era relativamente fácil centrar al lector, la era de las pantallas ha reducido el tiempo de atención y ha aumentado significativamente el número de elementos a los que debemos prestar atención.
¿Recuerdas cómo eran las primeras webs? Si eres un nativo digital, no podrás recordarlo. Aquí tienes un ejemplo:
Hoy en día, las cosas son diferentes. La jerarquía visual es más importante que nunca, porque garantiza una experiencia de lectura positiva para el usuario final.
A continuación, los 6 principios de jerarquía visual que debes seguir para asegurar una lectura comprensiva eficaz.
Guía de jerarquía visual para internet
Ojo, porque no puedes centrarte solo en uno de estos principios. Debes tenerlos todos en cuenta o tu edificio visual se caerá.
1. Patrones de lectura
Todas las culturas leen de arriba hacia abajo y la mayoría de las culturas leen de izquierda a derecha. Esa es la teoría, claro, porque en internet las cosas son mucho más complicadas.
Seguro que no son ajenas a ti los conceptos de “escaneo”, “lectura en F” y “lectura en Z”. Por si te los has perdido, ahí van:
Escaneo
Hay multitud de estudios que confirman que los usuarios no entran en una web y leen todas y cada una de las palabras en orden.
En lugar de eso, escanean la página picoteando aquí y allá para saber si es lo que están buscando. Es algo así como ojear un libro en la estantería de la biblioteca para saber si responde a lo que necesitas.
Patrones en F
Los patrones F se aplican a páginas tradicionales con mucho texto, como los artículos o publicaciones de blog. El lector escanea el lado izquierdo de la página, buscando palabras clave interesantes en los encabezados alineados a la izquierda o en las frases temáticas iniciales, luego se detiene y lee (a la derecha) cuando llega a algo interesante.
El resultado se parece a una F (o una E, o algo con más barras horizontales; pero el término “F” es el que más se utiliza).
¿Cómo puedes utilizar este patrón a tu favor? Coloca la información más importante en la parte izquierda y utiliza títulos cortos en negrita, viñetas y otros elementos que llamen la atención para dividir los bloques de párrafos.
Patrones en Z
Los patrones Z se aplican a otros tipos de páginas, como anuncios o webs, donde la información no se presenta necesariamente en párrafos.
El ojo del lector primero escanea la parte superior de la página, donde es probable que se encuentre información importante, luego se dispara hacia la esquina opuesta en diagonal y hace lo mismo en la parte inferior de la página.
Los diseñadores, que no son tontos, conocen bien este comportamiento y diseñan con esto en mente. Colocan la información más importante en las esquinas y orientan el resto de la información importante en las esquinas y lo largo de las barras superior e inferior y conectando la diagonal.
Aquí tienes un buen ejemplo de un diseño pensado con este compartimiento en mente. Entre los elementos importantes está la imagen, evidentemente, así como el claim y el botón de contacto. El resto de los elementos, como el teléfono de contacto están, pero en su sitio justo y sin necesidad de resaltarlos porque los usuarios los buscarán.
2. El tamaño importa para crear una jerarquía visual
Este principio es bastante simple: las personas leen primero lo más importante.
Por eso debes ponerlo en grande, estarás ayudando a los usuarios a atender a lo que es importante. Debajo de estas líneas puedes ver un ejemplo de cómo se puede guiar a los lectores.
3. Espacio y textura
Otra forma de llamar la atención es dar al contenido un amplio espacio para respirar. Se llama “uso del espacio negativo” y puede ayudarte a llevar al lector a donde quieras. Por ejemplo, puedes colocar espacio negativo alrededor de un botón para hacerlo más visible e incentivar que los visitantes hagan clic.
El espacio negativo puede ser una alternativa elegante, además de un recurso ideal para lograr que los elementos importantes llamen la atención.
La jerarquía visual y la textura son dos conceptos que parecen no tener mucho que ver. En este caso la textura hace referencia a la disposición general de los elementos y cómo los mezclas.
En este ejemplo lo verás más claro:
En este caso, he hecho un poco de trampa porque he jugado también con el tamaño de las tipografías y el peso visual entre el primer y el segundo caso.
En el tercero, puedes ver que he incluido un nuevo elemento que añade “textura” y altera la jerarquía visual del conjunto.
4. Peso de la tipografía y combinaciones
La selección de tipografías es importante para establecer una correcta jerarquía visual.
Lo vimos cuando te conté cómo seleccionar las mejores tipografías de marca. Entre sus atributos más importantes de una tipografía está su peso visual. El ancho de los trazos que componen las letras, el estilo y otros aspectos contribuyen a que tengas una tipografía más o menos pesada.
En este ejemplo que puedes ver debajo de las líneas se utiliza el peso de las distintas tipografías para dirigir la mirada del usuario hay lo más importante del mensaje.
No tengas miedo de recurrir también a la mezcla de cursivas, negritas, serifas o de palo; siempre que haya armonía en el conjunto, será un buen trabajo.
Las revistas de moda suelen tener un problema que saben resolver con este truco.
Todo lo que nos presentan es igual de importante, es decir, tienen la misma jerarquía visual. Sin embargo, consiguen que prestes atención a la información agrupando los titulares en distintos puntos de la página y jugando con la combinación de pesos visuales.
5. Color y tono
Este es otro punto obvio: los colores brillantes destacan sobre los oscuros o con poco contraste.
En este ejemplo que puedes ver debajo de estas líneas el contraste de colores y la utilización del color establece una jerarquía visual clara, que ayuda al lector a ir hacia donde el diseñador quiere que vaya.
El color es de lo más importante que puedes utilizar en diseño para móviles, donde el tamaño de la pantalla te limita y no puedes utilizar otros “trucos” como el tamaño o el espacio.
En este diseño de aplicación que puedes ver debajo de estas líneas, se ha utilizado el color como forma de organizar y dirigir la mirada del usuario hacia lo verdaderamente importante.
6. Dirección
Las webs, las portadas y los artículos impresos se diseñan por lo general con una cuadrícula de líneas verticales y horizontales que ayudan a crear una jerarquía visual. Se hace porque es más fácil y porque el ojo humano está acostumbrado a alinear objetos y es muy susceptible a la jerarquía visual.
Sin embargo, como las reglas se crearon para romperlas, una nueva forma de crear una jerarquía visual es romperla.
En este buen diseño de Yena Joo puedes descubrir cómo ha alterado la clásica rejilla vertical para crear algo dinámico, un diseño que centra la tención en el centro, sin dejar de lado el resto de los elementos de información que completan lo que el diseñador quiere que el lector vea.
¿Qué principios para crear una jerarquía visual crees que son los más importantes? ¡Comparte en los comentarios!
0 comentarios