Jerarquía visual: qué es, con ejemplos de piezas
La jerarquía visual es el orden en que el ojo recorre una pieza: lo más importante se ve primero, lo secundario después y el resto queda de apoyo. Se logra con el tamaño, el contraste, el color, la posición, el espacio y la alineación. Para comprobarla, entrecerrá los ojos y fijate qué se lee primero.
En este artículo
Qué es la jerarquía visual
Es la forma de ordenar los elementos de una pieza (un volante, una publicación, un cartel, una página web) para que quien la mira entienda qué es lo más importante, qué viene después y qué es detalle. Es una decisión de comunicación antes que de estética.
Cuando una pieza no tiene jerarquía, todo parece gritar al mismo tiempo: el título, el precio, el logo, la dirección, los íconos. La persona no sabe dónde mirar y, en general, sigue de largo.
Por qué importa
En una publicación, un cartel o una página, la gente rara vez lee todo: escanea. La persona mira lo que se destaca, se queda si le interesa y sigue de largo si no. La jerarquía es lo que decide qué vio primero y qué se perdió.
Nielsen Norman Group, una consultora de experiencia de usuario, estudió con seguimiento de la mirada cómo se lee en la web y describió el patrón en F: las personas leen las primeras líneas completas y después van bajando y leyendo cada vez menos, sobre todo las primeras palabras de cada renglón. Según el propio estudio, aparece cuando el texto no tiene formato: sin títulos, sin negritas, sin listas. La recomendación es la misma que la de este artículo: dar pistas visuales sobre qué es importante.
Las herramientas para ordenar la mirada
Una buena jerarquía combina varias de estas herramientas. Con dos o tres bien usadas suele alcanzar:
- Tamaño: lo más grande se ve primero. Es la herramienta más directa. Usala para el titular o el dato central y no para todo.
- Contraste: lo que más se diferencia del fondo se ve antes: un texto oscuro sobre fondo claro, una palabra en negrita entre palabras livianas. En psicología del color: qué sirve y qué es mito está cómo cuidar el contraste para que el texto se lea.
- Color: un color de acento usado poco llama la atención sobre lo importante, como un precio o un botón. Si todo tiene color, el acento deja de funcionar.
- Posición: lo que está arriba y a la izquierda (en un idioma que se lee de izquierda a derecha, como el castellano) se ve primero. Lo que está en el centro también atrae.
- Espacio: el aire alrededor de un elemento lo destaca, y acercar elementos relacionados los agrupa. Dejar espacio entre bloques ordena mejor que agregar líneas o cajas.
- Alineación: alinear los elementos sobre un mismo borde crea orden y guía el recorrido. Lo que se sale de la alineación llama la atención, así que hacelo a propósito.
También cuentan el peso de la letra y su estilo: cómo elegir y combinar tipografías está en tipografía para tu logo. Y la repetición ayuda: si los títulos de tus piezas siempre se ven igual, la gente aprende a reconocerlos.
Cómo suele recorrer la mirada una pieza
No hay una regla que valga para todas las piezas, pero hay recorridos habituales que sirven como punto de partida:
- Patrón en F: aparece en textos largos sin formato: se leen las primeras líneas y después la mirada baja por el borde izquierdo. La solución es formatear: títulos, negritas, listas.
- Recorrido en Z: muchos diseñadores lo usan como guía en piezas con poco texto, como un volante o un cartel. La mirada va del extremo superior izquierdo al derecho, baja en diagonal y termina abajo a la derecha, donde se suele ubicar la llamada a la acción. Es una regla práctica de oficio, no el resultado de un estudio: usala como hipótesis y comprobala.
- Punto focal: una imagen grande, un color muy fuerte o un elemento aislado atrae la mirada primero. Elegí a propósito qué va a ser ese punto.
- Orden de lectura natural: en castellano se lee de izquierda a derecha y de arriba hacia abajo. Un dato importante abajo a la izquierda, escondido, tiene menos chances de verse.
Ejemplo: el volante de una ferretería
Ferretería familiar que quiere promocionar una oferta de herramientas eléctricas
Un caso inventado para mostrar cómo se ordena una pieza.
- La pieza original
- Un volante con el logo grande arriba, nueve productos del mismo tamaño, cada uno con su precio en letra chica, cinco colores de fondo y la dirección y el WhatsApp abajo, sin destacar.
- La prueba
- Se entrecierran los ojos: lo primero que se ve es el logo y los fondos de colores. El precio y la oferta no se leen.
- Qué tiene que verse primero
- 1) La oferta: «Taladros en oferta hasta el sábado». 2) El producto y su precio. 3) Cómo pedirlo. 4) La dirección y el horario. El logo pasa a ser un dato de apoyo.
- Qué se cambia
- El titular crece y pasa arriba. Un solo taladro se muestra grande, con el precio en un color de acento. Los otros productos quedan en una grilla chica. Se usa un solo color de fondo y se agrega espacio entre bloques.
- Prueba final
- Se vuelve a entrecerrar los ojos: se lee primero «Taladros en oferta», después el taladro con su precio y por último el botón para pedir.
No se agregó nada: se ordenó lo que ya estaba y se decidió qué quedaba primero.
| Antes: todo compite | Después: con jerarquía |
|---|---|
| El titular «Ofertas» tiene el mismo tamaño que el resto del texto. | Un titular grande y específico: «Taladros en oferta hasta el sábado». |
| Nueve productos del mismo tamaño, todos con la misma importancia. | Un producto destacado grande y el resto en una grilla chica. |
| Los precios van en letra chica, dentro del texto. | El precio principal va grande, en un color de acento, junto al producto. |
| Cinco colores de fondo sin un criterio claro. | Un fondo y un solo color de acento, usado sólo en precios y en el botón. |
| Textos pegados entre sí y al borde del papel. | Márgenes y espacio entre bloques; cada tema agrupado. |
| La forma de pedir está al pie, chica y sin destacar. | Una llamada clara, «Pedilo por WhatsApp», con dirección y horario debajo. |
Cómo ordenar una pieza en tres pasos
- Decidí qué es lo primero
Escribí en una línea qué querés que la persona entienda al mirar la pieza. Eso es el nivel uno. Si tenés dos, elegí uno.
- Ordená el resto en dos o tres niveles
Nivel dos: lo que apoya al primero (precio, beneficio). Nivel tres: los datos prácticos (dirección, horarios, aclaraciones). Si algo no entra en ningún nivel, probablemente sobra.
- Asignale a cada nivel una herramienta
Primer nivel: tamaño y contraste. Segundo: peso y color de acento. Tercero: letra más chica y más liviana. Usá el mismo criterio en todas tus piezas.
Lista de chequeo antes de publicar
Lista de chequeo de jerarquía visual
Copiala y pasala por cada pieza antes de publicarla. Si una respuesta es no, hay algo para ajustar.
- Entrecerrar los ojos
- Con los ojos entrecerrados, ¿se ve primero lo que querías que se vea primero?
- Un solo protagonista
- ¿Hay un elemento claramente más importante que los demás, o varios compiten?
- Tres niveles
- ¿Se distingue lo principal, lo que lo apoya y los datos prácticos?
- Una llamada clara
- ¿Se entiende qué tiene que hacer la persona después, y se ve?
- Color con criterio
- ¿El color de acento aparece sólo en lo importante?
- Aire entre bloques
- ¿Los temas relacionados están agrupados y separados de los otros?
- Prueba en el celular
- ¿Se lee bien en el tamaño en que la va a ver la mayoría de tu público?
- Prueba con otra persona
- Mostrásela cinco segundos a alguien y preguntale qué recuerda. ¿Coincide con lo que querías?
Errores comunes
- Poner todo en negrita o en grande. Cuando todo destaca, no destaca nada.
- Usar muchos colores sin criterio. El color funciona si guía; si decora, distrae.
- Centrar todo por defecto. El centrado sirve para pocas líneas; en bloques largos dificulta la lectura y rompe la alineación.
- Querer decir todo en una pieza. Si una publicación tiene cinco mensajes, no se recuerda ninguno.
- No probar en el tamaño real. Lo que se lee en la compu puede no leerse en el celular o en el papel.
La jerarquía es una de las bases del trabajo visual, junto con la identidad, la claridad y la coherencia entre piezas. Si querés practicar cómo ordenar una pieza con casos reales, eso es lo que se trabaja en Contenido visual.
Preguntas frecuentes
¿Qué es la jerarquía visual en diseño gráfico?
Es el orden de importancia que se le da a los elementos de una pieza para guiar la mirada. Se logra con el tamaño, el contraste, el color, la posición, el espacio y la alineación.
¿Cuántos niveles de jerarquía tiene que tener una pieza?
No hay un número fijo, pero tres suelen alcanzar: lo principal, lo que lo apoya y los datos prácticos. Con más niveles, es difícil que alguien distinga uno de otro.
¿Cómo sé si mi pieza tiene buena jerarquía?
Hacé la prueba de entrecerrar los ojos o de mostrarla cinco segundos a otra persona. Si lo que se ve o se recuerda primero es lo que querías, la jerarquía funciona. Si no, ajustá el tamaño, el contraste o la posición.
¿La jerarquía visual sirve para publicaciones en redes?
Sí. En una publicación la gente decide en segundos si sigue mirando o no, así que conviene que lo principal se vea primero: un titular claro, un elemento protagonista y una llamada a la acción visible.
Contenido visual
Reconocimiento, jerarquía y claridad para tus piezas.
8 capítulos · 8 casos interactivos · 8 audios
$12.000ARSPrecio de lanzamiento hasta el 31/10 · desde el 1/11: $18.900Conocé el eBook
