La versión corta
- La jerarquía visual es el orden en que la gente percibe y lee las partes de un diseño.
- La jerarquía se controla con cinco herramientas: tamaño, peso, color y contraste, posición y espacio.
- La mayoría de los diseños no necesitan más de tres niveles: una cosa que se ve primero, unas pocas que se ven después y los detalles al final.
- El elemento con más contraste respecto a lo que lo rodea suele verse primero, sea cual sea su tamaño, así que los colores de acento deben gastarse en una sola cosa.
- La prueba de entornar los ojos, desenfocar la vista hasta que solo queden formas, muestra de un vistazo qué elemento manda de verdad.
En esta página
La jerarquía visual es el orden en que la gente percibe y lee las partes de un diseño. La controlas con cinco herramientas: tamaño, peso, color y contraste, posición y espacio. Una jerarquía clara tiene una cosa que se ve primero, unas pocas que se ven después y detalles que solo encuentra quien los busca. Sin ella, todo compite y la gente no lee nada.
Las cinco herramientas de la jerarquía visual
Todas las herramientas funcionan igual: hacen que un elemento sea distinto de sus vecinos. Cuanto mayor es la diferencia, antes se ve el elemento. Usar varias herramientas en el mismo elemento lo refuerza; usarlas en elementos distintos los hace competir.
| Herramienta | Cómo crea énfasis | Ejemplo |
|---|---|---|
| Tamaño | Lo más grande se ve antes | Un titular del doble de tamaño que el texto que lo rodea |
| Peso | Los trazos más gruesos destacan | Una fecha en negrita en una línea de texto regular |
| Color y contraste | Gana el color más distinto | Un único acento dorado en un diseño oscuro y tranquilo |
| Posición | Lo de arriba y el inicio del sentido de lectura van primero | El titular arriba a la izquierda |
| Espacio | Los elementos aislados atraen la mirada | Una sola línea con márgenes amplios alrededor |
Decide el orden antes de diseñar
Los problemas de jerarquía suelen ser problemas de decisión. Si no has decidido qué importa más, el diseño no puede mostrarlo. Antes de abrir una herramienta de diseño, ordena el contenido.
- 1
Haz una lista de todo
Cada texto y cada imagen que el diseño tiene que contener.
- 2
Elige lo único
Si la gente solo recuerda un elemento, ¿cuál debería ser? Ese es el nivel uno.
- 3
Agrupa los datos de apoyo
Las dos a cuatro cosas que la gente necesita después, como una fecha, un lugar o una explicación breve. Ese es el nivel dos.
- 4
Todo lo demás es detalle
Nombres de usuario, letra pequeña, logotipos. Ese es el nivel tres, pequeño y discreto.
- 5
Quita lo que no encaja
Si algo no encuentra su nivel, probablemente va en el pie de foto o en la siguiente diapositiva.
Tres niveles: primero el nombre del evento, luego la fecha arriba y los detalles abajo, cada uno un escalón claramente más pequeño.
Tamaño y peso
El tamaño es la herramienta más fuerte, y la más fácil de estropear por timidez. Si un titular es solo un poco más grande que el texto de debajo, los dos parecen un error más que una jerarquía. Haz evidentes los saltos entre niveles; una escala tipográfica, como se describe en fundamentos de tipografía, los mantiene coherentes.
Jerarquía plana
- Titular apenas más grande que el texto
- Todo en negrita, así que nada lo está
- Cuatro tamaños distintos que son casi iguales
- Dos titulares del mismo peso
Jerarquía clara
- Titular de al menos el doble del tamaño del texto
- Negrita reservada para las pocas palabras que deben mandar
- Tres tamaños con saltos claros entre ellos
- Un titular, una línea de apoyo
Color y contraste
La mirada va primero a lo que más se diferencia de su entorno. Una pequeña mancha de color vivo en un diseño oscuro y tranquilo gana a un elemento más grande en un tono apagado. Eso convierte el color de acento en un presupuesto: gástalo en lo único que debe mandar, o en la acción que quieres que la gente haga, y en nada más.
Bajar el contraste es la forma de mandar las cosas atrás sin encogerlas: una tinta más suave para pies de foto y etiquetas los mantiene legibles pero por detrás del titular. Mantén incluso el texto más discreto por encima de los mínimos de contraste de color. La regla 60-30-10 es otra forma de pensar cuánto usar de cada color.
Posición y sentido de lectura
En los idiomas que se leen de izquierda a derecha, la gente tiende a empezar arriba a la izquierda y avanzar hacia la derecha y hacia abajo, así que lo que se coloca ahí se ve pronto. En los idiomas que se leen de derecha a izquierda, la esquina de inicio se invierte. Las composiciones centradas y simétricas empiezan en el medio y avanzan hacia fuera, lo que encaja con diseños cortos de un solo mensaje, como pósteres, citas y anuncios.
La posición también puede jugar en tu contra. En los formatos de redes, los controles de la plataforma tapan partes de la imagen, y en las miniaturas hay una etiqueta en la esquina. Aleja de esas zonas el primer elemento; diseño de miniaturas de YouTube muestra cómo.
Espacio
El espacio hace dos trabajos. Alrededor de un solo elemento, lo aísla, y el aislamiento se lee como importancia: una línea con márgenes generosos puede superar a un bloque de texto mucho mayor. Entre elementos, los agrupa: lo que está cerca se lee como parte de lo mismo. Pon la fecha y el lugar cerca entre sí y más lejos del titular, y la gente los leerá como una sola unidad de detalle.
Mandan las palabras: el titular lleva la noticia y el detalle la apoya.
Manda un número: el mismo contenido, reordenado para que la cifra se vea primero.
El mismo contenido admite jerarquías distintas. Elegir una depende de lo que quieres que la gente recuerde: la idea o el número.
Cómo poner a prueba la jerarquía visual
- La prueba de entornar los ojos. Entrecierra los ojos o desenfoca el diseño. La forma que sigue destacando es tu verdadero nivel uno. Si no es la que elegiste, ajusta.
- La prueba de los dos segundos. Enseña el diseño a alguien durante dos segundos y pregúntale qué decía. Debería repetir tu nivel uno.
- La prueba de la miniatura. Redúcelo al tamaño con el que aparecerá en un móvil. Los niveles dos y tres pueden desaparecer, y no pasa nada; el nivel uno no.
- La prueba de la escala de grises. Quita el color. Si la jerarquía se viene abajo, dependía del tono y no del contraste de luminosidad.
La jerarquía se complica cuando el fondo es recargado o muy colorido, porque el contraste cambia bajo las palabras; texto sobre un degradado explica cómo mantener legible el nivel uno esté donde esté. Para los anuncios, donde la jerarquía importa más que nunca, mira cómo diseñar una publicación de anuncio.
Preguntas frecuentes
¿Qué es la jerarquía visual?
La jerarquía visual es el orden en que la gente percibe y lee las partes de un diseño, controlado con el tamaño, el peso, el color y el contraste, la posición y el espacio.
¿Cuántos niveles de jerarquía debe tener un diseño?
Normalmente tres: un elemento que se ve primero, unos pocos elementos de apoyo después y los detalles al final.
¿Qué es la prueba de entornar los ojos?
Entrecierra los ojos o desenfoca el diseño hasta que solo queden formas. Lo que siga destacando es lo que la gente verá primero.
¿El tamaño es la única forma de crear jerarquía?
No. El peso, el contraste, el color, la posición y el espacio crean énfasis, y un elemento pequeño en un color de acento vivo puede superar a otro más grande y apagado.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
