Si alguna vez has hojeado una revista, navegado por una página web o simplemente te has parado a mirar un cartel en la calle sin acabar confuso o abrumado por la información percibida, puede ser debido a la jerarquía visual. Ya sabemos que el principal objetivo del diseñador gráfico es comunicar, y para lograr hacerlo correctamente y garantizar que nuestro mensaje se lee en el orden adecuado, nos apoyamos en la jerarquía visual. Aunque no la veas (bueno, realmente la estás viendo pero no te das cuenta), está ahí. Trabajando a la sombra y de forma subconsciente para el diseñador gráfico.
En este post te voy a contar qué es la jerarquía visual, por qué es fundamental en el diseño y cómo se usa para que todo lo que miramos o el mensaje que queremos transmitir tenga sentido y no sea un caos de letras, imágenes y colores. Sin esta jerarquía, el diseño es una explosión visual en el que nadie entiende nada.
¿Qué es la jerarquía visual?
Se podría decir, que la jerarquía visual es el orden en el que percibimos la información visual. Necesitamos ordenar para comunicar. Así de simple y así de importante. Es una técnica que usamos los diseñadores gráficos para guiar tus ojos por un diseño, asegurándonos mediante señales y contrastes, que veas primero lo más importante, luego lo siguiente, y así hasta llegar a lo menos relevante. De eso trata la jerarquía visual. De trabajar con todos los recursos a nuestro alcance para ordenar, organizar y otorgar prioridades a nuestro contenido.
Digamos que es como un GPS visual. Consiste en establecer un primer punto focal desde donde los espectadores comenzarán a observar la composición y que posteriormente te llevará por el camino correcto aunque no te des cuenta. Si alguna vez has entrado a una web y has sabido al instante dónde hacer clic, qué leer primero o cómo encontrar un producto fácilmente, felicidades, has sido manipulado hábilmente por una buena jerarquía visual… Y eso es bueno!
¿Por qué es tan importante?
Ahora que ya sabes qué es la jerarquía visual, igual te preguntas «¿por qué debería importarme?». Pues por que vivimos en un mundo visual, y la forma en que se organiza la información, afecta directamente a cómo la entendemos.
Aquí van algunas razones por las que deberías considerar darle más valor a la jerarquía visual:
- Facilita la lectura y comprensión.
Nadie quiere leer bloques interminables de texto. Cuando hay jerarquía, la vista se relaja, el cerebro entiende y estructura mejor y agradecemos poder enfocar nuestros esfuerzos en el contenido del texto y no también en su forma. - Aumenta la efectividad del mensaje.
Un buen diseño guía la atención hacia donde el diseñador quiere. ¿Quieres que el lector haga clic? ¿Qué lea algo importante? Dale una buena jerarquía y lo conseguirás. - Transmite profesionalismo.
Sí, incluso si estás haciendo un flyer para la venta de unas palomitas. Si está bien jerarquizado, parece serio, cuidado y de confianza. Sin jerarquía, da la sensación de haber sido hecho por cualquiera. - Mejora la experiencia de usuario (UX).
En diseño web, por ejemplo, una buena jerarquía visual hace que la gente encuentre lo que busca sin frustrarse. Eso equivale a que probablemente ese cliente vuelva, compre o al menos que no salga corriendo con una mala impresión de tu web.
Recursos para ayudarnos a establecer una correcta jerarquía visual
En el diseño gráfico contamos con varios recursos que nos ayudan a generar énfasis y contraste en el contenido. Nos apoyamos en estos recursos para encauzar y señalar el orden correcto de los distintos elementos de nuestra composición, influyendo así en su percepción.
Así pues, se podría decir que para crear una buena jerarquía visual, tenemos que jugar con unos recursos visuales para establecer unos niveles de importancia.
Veamos cuales son estos recursos o ingredientes clave:
1.- El tamaño sí importa
El más obvio. Lo grande llama más la atención. Aumentar las dimensiones de un elemento de una composición en relación con los otros elementos, es una forma muy efectiva de generar énfasis en una parte concreta del diseño.
Los elementos más grandes son como un foco de atención para el espectador. Pero no solo generan una atención puntual. Pongamos que queremos restar importancia a un elemento. En ese caso, reduciendo su tamaño, podemos posicionar ese elemento en un nivel inferior de nuestra jerarquía visual. Esto quiere decir que, el tamaño, puede establecer un ritmo compositivo u orden lógico de lectura para procesar toda la información pasando de los elementos más grandes a los más pequeños. Veamos un ejemplo de esto:
2.- Color como imán visual
Los colores vivos o con contrastes, destacan más que los colores neutros y apagados. Un botón rojo sobre un fondo blanco te está pidiendo a gritos que lo presiones. Por lo tanto, podríamos decir que el color no solo transmite sensaciones, sino que también dirige.
¿Existen colores más atractivos que otros? Lo cierto es que es algo un poco subjetivo que dependerá de otros factores como el contexto, la composición o incluso la procedencia del espectador. Sin embargo, sí podemos garantizar que, para el ser humano, los colores más llamativos, más vibrantes, saturados e intensos, suelen ser los colores más cálidos.
Para conseguir los colores más vivos e intensos, hacemos uso de 3 propiedades del color como son el tono, la saturación y el brillo. Una forma sencilla de poder buscar colores cálidos (o fríos) es con el círculo cromático por contar con un alto grado de contraste. Para profundizar un poco más en este tema, puedes visitar mi artículo sobre la paleta de color.
3.- Tipografías que hablan
Con respecto a la tipografía, tenemos que tener en cuanta dos factores: la jerarquía tipográfica y la fuente tipográfica.
La jerarquía tipográfica
En toda composición en la que hagamos uso de elementos tipográficos, nos apoyaremos en la jerarquía tipográfica, que organizará nuestra composición y marcará el orden de lectura. Esta jerarquía tipográfica se suele dividir en tres niveles: nivel primario donde se reflejarán los titulares; nivel secundario que incluye subtítulos y pequeños bloques de texto; y el nivel terciario que comprende el texto o cuerpo principal del diseño.
Las fuentes tipográficas
No nos olvidarnos de la fuente tipográfica. Esta se encarga de otorgar a la composición de un estilo y personalidad concretos, y que contraste sobre el resto de elementos. Podemos combinar tipografías haciendo uso de interlineado, cualidades como el tamaño o con sus variantes tipográficas. Para quien no lo sepa, las variantes tipográficas son las diferentes opciones que podemos encontrar dentro de una misma familia tipográfica. Estas actúan en el grosor del trazo, proporción del carácter, inclinación, etc.
Gracias a la versatilidad y abanico que ofrecen las variantes tipográficas, muchas veces no necesitamos hacer uso de tipografías diferentes. En muchos casos nos ayudamos de las variantes de una misma tipografía para lograr una buena jerarquía visual.
4.- El espacio también comunica
El espacio es un elemento muy importante para el diseñador. Es como las necesarias pausas de cualquier conversación y es esencial para garantizar el correcto orden de muestra composición. Si otorgamos espacio alrededor de un elemento, lo que estamos haciendo es darle de un mayor protagonismo situándolo jerárquicamente por encima del resto de elementos.
«Principio de proximidad», ¿os suena? Este principio es una de las leyes de la Teoría de la Gestalt que todo diseñador debe conocer. Este defiende que la mirada del espectador siempre tiende a desplazarse al elemento más próximo. Es por ello que si agrupamos elementos cercanos unos a otros disminuyendo su espacio entre ellos, estamos estableciendo un vínculo en un mismo nivel jerárquico, al mismo tiempo que una pauta de navegación por los mismos. Si por el contrario, si los espacios son demasiado grandes, rompemos la relación entre ellos.
Por lo tanto, el espacio como recurso de jerarquización es muy socorrido tanto para centrar la atención sobre un elemento concreto, como para mantener un orden lógico de lectura o compositivo.
5.- Composición y estructura
La composición es como el esqueleto del diseño. Las rejillas, la regla de los tercios, la simetría o las alineaciones, entre otros, ayudan a que todo tenga un sentido visual. Es decir, según cómo dispongamos los elementos visuales en nuestra composición, influirá directamente en la jerarquía visual.
No debemos olvidar cómo funciona nuestra mente. Siempre tenderá a leer de arriba a abajo y de izquierda a derecha. Está acostumbrado a procesar la información por reconocimiento de patrones, algo que también se estudia en la Teoría de la Gestalt. Por lo tanto, también podemos generar énfasis en algún elemento rompiendo ese equilibrio, alineación o patrón de forma intencionada.
La profundidad también ayuda a jerarquizar. Nuestra percepción tiende a centrar su atención sobre el objeto que se encuentre más cerca de nosotros (o que lo parezca).
Todos estos recursos son muy útiles para jerarquizar visualmente una composición, para guiarte por una web o para comunicar de forma ordenada una noticia o artículo en una revista.
Eso sí, hay que saber usarlos con sutileza y tacto. Si nos excedemos, llenando nuestra composición de elementos gigantes, muchos colores chillones, varias tipografías al mismo tiempo… lo único que lograremos es confundir al observador y no conseguir comunicar el mensaje como queremos. Al mismo tiempo, recordar que los elementos diseñados con el mismo tamaño, tipografía, color o disposición, serán percibidos en el mismo nivel jerárquico.
Conclusión.
La jerarquía visual es como un director de orquesta de tu diseño. No se ve, pero marca el ritmo. Decide qué va primero, qué después y qué no necesita tanto protagonismo. No se trata de seguir reglas rígidas, sino de saber qué quieres comunicar y guiar al ojo del espectador para que lo reciba sin esfuerzo. Se trata de diseñar con intención, no solo con inspiración.
Un buen diseño no es el que tiene más elementos, sino el que hace que todo tenga sentido a primera vista. Así que la próxima vez que montes un póster, una web o incluso una presentación de PowerPoint, pregúntate: «¿Qué quiero que se vea primero?», y construye a partir de ahí.
Hola, soy Roberto Vidiella.
Soy fundador y Director Creativo de VIDI. Me apasiona el diseño gráfico, y mediante este blog, intento profundizar en mis conocimientos y compartir lo que he aprendido durante mi trayectoria. Si me dejas un comentario, me ayudas a seguir aprendiendo y mejorando, ¡y además me hace mucha ilusión!