La jerarquía visual es un método de organización de los elementos de diseño en orden de importancia. En otras palabras, es un conjunto de principios que influyen en el orden en el que nos fijamos en lo que vemos.
En esta guía, vamos a enumerar 12 principios de jerarquía visual que todo diseñador principiante debe conocer.
Tenemos mucho que cubrir así que vamos a empezar.
- Tabla de contenidos
- ¿Qué es la jerarquía visual?
- 1 El tamaño influye en la visibilidad
- 2 La perspectiva crea una ilusión de profundidad
- 3 El color y el contraste atraen la atención
- 4 fuentes organizan el diseño
- 5 El espacio proporciona énfasis y movimiento
- Regla del espacio
- Patrones de escaneo de páginas
- Patrones F
- Patrones Z
- 6 La proximidad sugiere relaciones
- 7 El espacio negativo enfatiza
- 8 La alineación dirige los ojos
- 9 Los grupos impares crean enfoque
- 10 La repetición unifica una composición
- 11 Líneas sugieren movimiento
- 12 cuadrículas organizan un diseño
- Diseños de cuadrícula alternativos
- Romper la cuadrícula
- Visual Hierarchy Infographic
Tabla de contenidos
¿Qué es la jerarquía visual?
Principio #1: El tamaño impacta en la visibilidad
Principio #2: La perspectiva crea una ilusión de profundidad
Principio #3: El color y el contraste llaman la atención
Principio #4: Las fuentes organizan el diseño
Principio #5: El espacio proporciona énfasis y movimiento
Principio #6: La proximidad sugiere relaciones
Principio #7: El espacio negativo enfatiza
Principio #8: La alineación dirige la mirada
Principio #9: Los grupos impares crean foco
Principio #10: La repetición unifica una composición
Principio #11: Las líneas sugieren movimiento
Principio #12: Las cuadrículas organizan un diseño
Infografía sobre la jerarquía visual
¿Qué es la jerarquía visual?
La jerarquía visual es un principio de diseño que se refiere a cómo se organizan los elementos en un diseño. La jerarquía visual ayuda a los diseñadores y desarrolladores a disponer cada elemento de una manera lógica que ayuda a que el visual sea digerido correctamente.
En un diseño, esto significa que el encabezado estará en la parte superior en la fuente más grande, con cada elemento subsiguiente de tamaño basado en la importancia. Esto ayuda al usuario a entender mejor el flujo para que sepa dónde mirar primero.
La razón por la que la jerarquía visual es un principio tan importante de entender es porque está en el diseñador crear la jerarquía de tal manera que el espectador ni siquiera tiene que pensar en dónde mirar primero. Su ojo se dirige automáticamente a cada elemento en el orden exacto en el que debe verlo.
También hemos creado una versión en vídeo de esta entrada del blog para ayudarte a entender mejor la jerarquía visual. Puedes verlo a continuación.
1 El tamaño influye en la visibilidad
Más grande es mejor, ¿verdad? Aunque el clásico adagio sigue siendo objeto de debate, el tamaño es, sin duda, la forma más eficaz de resaltar los elementos visuales. En pocas palabras, los elementos más grandes llaman más la atención que los más pequeños.
Es la razón precisa por la que los titulares de los periódicos aparecen en fuentes más grandes, y las historias más importantes suelen tener titulares incluso más grandes que los artículos del resto de la página. En cualquier diseño, los elementos más grandes -ya sean palabras o imágenes- no sólo serán más llamativos, sino que también transmitirán el mensaje más fuerte.
Nota en el ejemplo anterior cómo la palabra más grande es también la más llamativa y emotiva. Es mucho más probable que los lectores respondan rápidamente a la palabra «cracking» que a la segunda palabra más grande, la básica «performance». El diseño no sería ni de lejos tan eficaz si las palabras fueran del mismo tamaño o si otra palabra de la página, como «acto» o «tiempo», fuera aún más grande.
Otro principio importante relacionado con este concepto es la escala, que es el tamaño de un objeto en relación con otro. Un solo objeto, por grande o pequeño que sea, no tiene escala hasta que se compara con otro. Nos permite crear un equilibrio en un diseño y centrarnos en los elementos dominantes. Cuanto mayor sea la escala, mayor será el énfasis.
2 La perspectiva crea una ilusión de profundidad
Al utilizar la perspectiva, los diseñadores pueden crear una ilusión de profundidad que va desde unos pocos centímetros hasta varios kilómetros. Como vemos ilusiones similares en el mundo real, generalmente percibimos los objetos más grandes como más cercanos que los objetos similares más pequeños y, por lo tanto, suelen llamar la atención antes que cualquier otro objeto de una página.
Por ejemplo, una ilustración de una carretera suele ser más ancha en su punto más bajo y se va estrechando gradualmente a medida que se extiende por el lienzo. Asimismo, el objeto más cercano al espectador siempre parecerá más grande que el mismo objeto más lejano.
Una perspectiva adecuada empleará tanto la escala como la proporción para comunicar con precisión la distancia adecuada. Un dibujo de un tramo de cinco millas de carretera retrocederá mucho más que un tramo de media milla dibujado en un lienzo del mismo tamaño.
3 El color y el contraste atraen la atención
Así como los elementos más grandes se perciben como más importantes que los más pequeños, los colores brillantes suelen llamar más la atención que los tonos más apagados. Por ejemplo, si una sola frase de un bloque de texto se resalta con un color brillante, capta inmediatamente la atención de los lectores.
Spotify’s Found Them First
Considera el diseño anterior. ¿Notas cómo capta mucho más la atención cuando los tonos naturales fueron resaltados a colores neón? La combinación de colores se conoce como duotono, una tendencia de diseño web cada vez más popular. Este efecto, que consiste en colocar un par de colores contrastados sobre una foto, da lugar a diseños llamativos que, en sentido figurado, salen de la página o la pantalla.
Los colores dramáticamente contrastados también pueden enfatizar elementos específicos que un espectro en una escala más suave. Colocar un objeto rojo sobre un fondo verde o negro llamará más la atención que el mismo objeto rojo sobre un fondo naranja o morado.
Las combinaciones de colores utilizadas en un diseño, y la forma en que se relacionan entre sí, se conocen como su esquema de color. La elección de la combinación de colores de un diseñador puede crear unidad, armonía, ritmo y equilibrio dentro de una creación, pero también puede crear contraste y énfasis.
Un diseño que utiliza demasiados colores contrastados suele parecer desorganizado e incoherente. Lo mismo puede decirse a veces de los diseños que utilizan una combinación de colores que no se adhiere a la teoría del color. Pero elegir la mejor paleta implica mucho más que elegir al azar una combinación monocromática, complementaria o tétrica.
Los colores similares pueden utilizarse para agrupar elementos relacionados en un diseño, y la elección del color puede incluso sugerir peso y distancia. Los colores más cálidos, como el rojo y el amarillo, avanzan hacia el primer plano de un diseño con un fondo oscuro, mientras que los colores fríos, como el azul o el verde, suelen retroceder hacia el fondo. Lo contrario ocurre con un diseño sobre un fondo claro: Los colores fríos, como el azul y el verde, aparecen más cerca que los colores cálidos. Es simplemente como lo percibe el ojo humano.
Tabla de profundidad de color
Las combinaciones de color efectivas dependen no sólo de la posición de cada tono en la rueda de color, sino también de su calidez y contraste con los colores circundantes. Echa un vistazo al tutorial de Visme sobre cómo elegir combinaciones de colores impactantes.
4 fuentes organizan el diseño
Piensa en un esquema, un currículum tradicional o un índice. Por lo general, cada uno de ellos se compone de varios tamaños de letra, con los títulos principales en un tamaño de punto mayor que las subsecciones y los detalles más pequeños. El uso de una variedad de tamaños de letra no sólo enfatiza lo que es más importante, sino que también organiza el diseño general del documento.
Las jerarquías tipográficas pueden crearse con texto de varios tamaños, pesos y espaciado, o una combinación de cada elemento. Incluso si se utiliza un único tipo de letra en todo el diseño, variar su tamaño y peso no sólo atrae la atención hacia los elementos más importantes, sino que crea una composición general que es fácil de leer y entender.
Sólo imagine un currículum que utiliza un tipo más grande y más audaz para las referencias que para el nombre del solicitante. No sólo podría parecer descuidado, sino que probablemente causaría una buena cantidad de confusión para aquellos que escanean rápidamente una montaña de solicitudes.
De la misma manera, un diseño que cuenta con una serie de tipos que son todos del mismo tamaño, tipo de letra y peso no atraerá la atención de manera efectiva a casi nada – un desafío que tiene que ser resuelto rápidamente con tantas audiencias que pasan fracciones de segundo calibrando la calidad de su diseño.
Es por esta razón que la mayoría de los programas de diseño web ofrecen no sólo una selección manual de los atributos del tipo de letra, sino una jerarquía preestablecida que consiste en fuentes de títulos, subtítulos y encabezados graduados, además del texto básico de la copia.
¿Mira el diseño anterior? ¿Parece más organizado y fácil de leer cuando todas las palabras tienen el mismo tamaño, o cuando se aplican los principios de jerarquía?
5 El espacio proporciona énfasis y movimiento
Regla del espacio
Uno de los principios más básicos de la composición visual tiene que ver con lo que dejas fuera de tu diseño. Según la Regla del Espacio, un diseño estéticamente agradable requiere su cuota de espacio negativo libre de desorden, a menudo conocido como «espacio en blanco», independientemente del color de fondo real del diseño.
Al organizar los elementos de una composición, los diseñadores pueden utilizar el espacio que rodea el contenido para llamar la atención sobre elementos concretos -piensa en un solo elemento en una página en blanco- o para enviar un mensaje visual totalmente independiente, como la «flecha» oculta que se encuentra dentro del famoso logotipo de FedEx.
El espaciado estratégico puede incluso atraer los ojos de los espectadores a través de la página en una secuencia específica, contribuyendo a los patrones de escaneo de páginas.
Patrones de escaneo de páginas
Los lectores tienden a escanear las páginas basándose en patrones particulares, observables a través de sus movimientos oculares. Cuando los diseñadores quieren que el público se fije en los elementos en un orden determinado, suelen basarse en los patrones más comunes.
Los hablantes nativos de inglés, por ejemplo, leen de izquierda a derecha. Por lo tanto, suelen presentar un patrón de escaneo similar cuando se enfrentan a una página de texto. El árabe, en cambio, se escribe de derecha a izquierda. Quienes están acostumbrados a leer ese idioma suelen escanear las páginas en esta dirección «opuesta». Los diseñadores deben tener en cuenta estas diferencias a la hora de crear contenidos para audiencias globales.
Patrones F
El patrón de movimiento ocular más común de los lectores de inglés es el patrón F. ¿Por qué? Porque es precisamente así como leemos un libro, una carta o una página web. Escaneamos la página de izquierda a derecha a lo largo de la parte superior y de nuevo para cada línea de texto hasta que llegamos a la parte inferior de la página.
Debido a esta tendencia natural, los diseñadores utilizan con mayor frecuencia el patrón F cuando componen sitios web y otras ilustraciones que dependen en gran medida del texto. Porque leer en otra dirección es simplemente incómodo cuando no es a lo que estamos acostumbrados.
Patrones Z
Los diseños que se basan más en imágenes suelen componerse en un patrón Z. Dado que el cerebro procesa las imágenes más rápido que el texto, los lectores pueden escanear la página rápidamente echando un vistazo a la parte superior de izquierda a derecha, y luego bajando por la página en diagonal antes de completar el escaneo cruzando de nuevo de izquierda a derecha (o de derecha a izquierda si el público suele leer en esa dirección).
Los diseñadores pueden enfatizar ciertos elementos de una composición colocándolos a lo largo de estos patrones comunes de movimiento ocular en «Z». Piensa en un título, una imagen y un subtítulo.
6 La proximidad sugiere relaciones
La proximidad, o dónde aparecen los elementos en relación con otros, es uno de los elementos más básicos de la composición. En términos sencillos, la colocación de elementos relacionados entre sí sugiere a los lectores que, de hecho, están relacionados.
Piense en una pantalla blanca con un grupo de cinco puntos en un lado y un único punto en el otro. Nuestra primera suposición siempre va a ser que los cinco son, efectivamente, un grupo.
Colocar elementos cerca unos de otros también puede enviar otros mensajes. Por ejemplo, la colocación de elementos en determinados lugares de un mapa puede proporcionar al público una comprensión de la distancia, ya sea cercana o lejana. Por supuesto, esto también depende del tamaño y la escala del mapa. Una pulgada no siempre es una milla.
Colocando elementos especialmente próximos entre sí, se pueden crear imágenes y mensajes añadidos. Piensa en la frecuencia con la que ves tres círculos y una línea colocados de forma que sugieran la forma de una cara feliz o triste. La imagen sugerida suele llamar más la atención que sus elementos individuales. ¿Ves una cara feliz o ves tres círculos y una línea?
7 El espacio negativo enfatiza
Así como agrupar elementos cerca unos de otros sugiere su relación, incluir espacio en blanco alrededor de los elementos los señala como grupos de información separados. El espacio negativo y vacío no sólo hace que la información sea más fácil de digerir para los lectores al agruparla en compartimentos, sino que también crea un enfoque, ya que ayuda a los ojos a centrarse en los elementos individuales.
Las composiciones que carecen de un amplio espacio negativo pueden dar lugar a un diseño desordenado, confuso y caótico. En otras palabras, menos es más. Los diseñadores inteligentes pueden incluso utilizar el espacio en blanco para sugerir un mensaje visual adicional. Piense en la «flecha» implícita en el centro del famoso logotipo de FedEx, o en el diseño de Coca-Cola, arriba.
8 La alineación dirige los ojos
La alineación forma parte de la estructura por la que se colocan los elementos en un diseño. Impone que los componentes visuales, ya sean textos o imágenes, no se coloquen de forma arbitraria en una composición. Por ejemplo, una página típica de texto está alineada a la izquierda, de modo que los objetos comparten un margen izquierdo.
Muchos diseños visuales están centrados o justificados, lo que significa que están espaciados a lo largo de una página de modo que comparten los márgenes izquierdo y derecho. Si las palabras se esparcieran aleatoriamente por una página en todas las direcciones, crearían un escenario bastante confuso.
En los diseños con patrón F, los objetos suelen estar alineados a la izquierda, mientras que los patrones Z suelen emplear una combinación de alineaciones a la izquierda, al centro y a la derecha, como en el anuncio anterior.
Los diseños visuales sencillos se alinean con mayor frecuencia en el centro del marco, un formato que proporciona equilibrio y armonía, y que además es estéticamente agradable.
La mayoría de los lectores occidentales están acostumbrados a leer desde el tamaño izquierdo al derecho de una página. Por lo tanto, los diseños con texto suelen estar alineados al margen izquierdo de la misma manera.
Las alineaciones a la derecha se emplean a menudo para proporcionar equilibrio a un diseño general que puede ser más pesado visualmente en el lado izquierdo. Del mismo modo, las alineaciones a la izquierda pueden ofrecer el mismo efecto en el escenario inverso.
9 Los grupos impares crean enfoque
La Regla de los Impares permite a los diseñadores enfatizar imágenes particulares colocándolas en el centro de un grupo. Al colocar un número igual de objetos vecinos a cada lado del punto focal principal -creando así un grupo impar- el resultado apunta claramente al elemento visual más importante, situado en el centro.
Por ejemplo, un grupo de uno o tres elementos es más llamativo que un solo par. Asimismo, los grupos formados por un número impar de objetos se consideran casi siempre más interesantes y estéticos que los grupos pares. ¿Por qué? La gente se siente más cómoda con el equilibrio.
10 La repetición unifica una composición
Así como el contraste enfatiza y llama la atención sobre los elementos del diseño, la repetición crea unidad, lo que potencia la comprensión y el reconocimiento.
Piense en la mayoría de los textos publicados. Los diseños de las páginas están organizados de tal manera que el cuerpo del texto tiene un tipo de letra, los títulos de los capítulos otro y las notas a pie de página un tercer tipo de letra diferente, todo ello coherente a lo largo de toda la publicación. Esta repetición de estilos crea una obra cohesionada, reconocida como un todo.
Para lograr un diseño unificado, repita algún elemento -ya sea el tipo de letra, el color, la forma o el tamaño- a lo largo de toda la composición. Los estilos coherentes ayudan a definir claramente la jerarquía visual de cualquier diseño.
Toma, por ejemplo, la infografía de la introducción que presenta nuestros 12 principios de jerarquía visual. La repetición de las mismas fuentes y estilos en todo el documento unifica claramente la lista e indica a los lectores que cada entrada forma parte de un todo.
La repetición también puede dar un nuevo significado a los elementos. Con qué frecuencia ves que un texto subrayado en azul destaca en una página? Lo suficiente como para reconocer al instante la fuente como un hipervínculo, ¿verdad? La repetición de este estilo en un diseño indica a su público dónde puede hacer clic para obtener más información. ¿Qué otros estilos populares pueden dar a su diseño un significado adicional?
11 Líneas sugieren movimiento
El movimiento es una de las formas más eficaces de atraer la atención de los espectadores, especialmente cuando está implícito dentro de un diseño inmóvil. Las líneas son, obviamente, eficaces para señalar los elementos de énfasis -sólo hay que pensar en una flecha-, pero no tienen que aparecer físicamente en la página para conseguirlo.
Las líneas conductoras pueden estar implícitas mediante el uso de elementos repetidos -piensa en una fila de puntos-, la proximidad de objetos o formas, así como la relación de espacio positivo y negativo. Por ejemplo, al inclinar un objeto hacia arriba o hacia abajo, se pueden crear líneas que sugieran el vuelo o el descenso.
12 cuadrículas organizan un diseño
Los diseños más eficaces se componen mediante algún tipo de cuadrícula. La cuadrícula más típica es la clásica composición modular de líneas verticales y horizontales cruzadas.
Los artistas, fotógrafos y diseñadores gráficos han empleado durante mucho tiempo la regla de los tercios para mejorar el equilibrio general de sus composiciones. La regla consiste en dividir mentalmente una composición en una cuadrícula compuesta por dos líneas horizontales y dos verticales, es decir, nueve secciones separadas.
Los elementos visuales importantes se colocan a lo largo de las líneas, enfatizando los cuatro puntos en los que éstas se encuentran. Las composiciones descentradas suelen considerarse más agradables desde el punto de vista estético que los diseños en los que el punto principal se sitúa en el centro del marco. La regla fomenta el uso del espacio negativo, la proximidad inteligente de los elementos y la alineación efectiva.
No sólo es la más común, sino que la cuadrícula modular suele ser el diseño más legible. Aun así, a veces la mejor manera de crear énfasis es romper las reglas.
Diseños de cuadrícula alternativos
En lugar de la clásica cuadrícula vertical-horizontal, los diseñadores pueden elegir una composición dirigida en diagonal para asegurarse de que su creación destaque en una página y atraiga la atención general de los espectadores.
Romper la cuadrícula
Algunos diseñadores optarán por romper la cuadrícula por completo, colocando elementos visuales al azar a lo largo de una página con el fin de distinguirse mejor del texto circundante bloqueado por la cuadrícula. Ese texto circundante puede estar en el mismo diseño o en una página circundante.
No se deje engañar por el concepto de aleatoriedad. Esparcir elementos al azar por un fondo sin ninguna razón o estrategia específica no va a transformarse milagrosamente en una obra maestra de Jackson Pollock. Cuando se rompe la cuadrícula, cada elección debe ser calculada y con un propósito.
Los principios de jerarquía visual son algunas de las estrategias más eficaces para enfatizar los elementos de un diseño y aclarar un mensaje visual. Pero, como ocurre con muchas cosas en la vida, se puede tener demasiado de algo bueno.
Los diseñadores deben elegir sabiamente qué principios emplear, o arriesgarse a diluir cualquier énfasis y romper la jerarquía visual. Si todo destaca, entonces nada destaca.
¿No está seguro de si su jerarquía es eficaz? Pues ponlo a prueba. Simplemente mire fijamente el espacio frente a su página o pantalla, permitiendo que el diseño real se desvanezca en el fondo hasta que se convierta en un borrón de formas y colores. Qué es lo que destaca?
O, para ahorrarse el quedarse bizco, puede utilizar la prueba del desenfoque tomando una captura de pantalla de su diseño, abriéndola en Photoshop y aplicando el filtro de Desenfoque Gaussiano.
Si la atracción principal sigue siendo el elemento o elementos que tenía previsto destacar, su jerarquía visual es efectiva.
Visual Hierarchy Infographic
Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.
Embed on your site:
<script src=»//my.visme.co/visme.js»></script><div class=»visme_d» data-url=»ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know» data-w=»800″ data-h=»6404″></div><p style=»font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=»http://www.visme.co/make-infographics» target=»_blank» style=»color: #30a0ea»><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>