Jerarquía como principio de diseño

Publicado el 11 noviembre, 2020

Jerarquía visual en el diseño

¿Cómo sabes quién es el rey? En general, será la persona más ataviada con grandes joyas, túnicas moradas y todo tipo de galas. Los majestuosos atuendos de los monarcas de todo el mundo no son accidentalmente llamativos; están diseñados para llamar la atención. Esta es una forma de decir: ” ¡Soy más importante! ¡Mírenme, campesinos! ”

Así como las monarcas usan señales visuales para comunicar una jerarquía de poder, los diseñadores gráficos usan señales visuales para crear una jerarquía de información. En diseño, la jerarquía describe la disposición de los elementos por su prominencia visual.

Piénselo de esta manera: ¿qué parte de su diseño desea que la audiencia vea primero? ¿Qué quieres que vean segundo o tercero?


¿Qué es lo primero que nota tu ojo en esta imagen?
¿Qué notas en segundo lugar? ¿Tercero?
cartel de comida

La jerarquía de una composición describe el orden en el que el ojo se mueve de una parte del diseño a las otras. Creas un camino a través de la composición asignando un peso visual diferente a varios componentes, y todo comienza estableciendo un punto focal , una posición que atrae naturalmente la atención.

Si lo hace correctamente, su composición tendrá una jerarquía que atrae a las personas a la información más importante primero.

Tamaño y jerarquía

Entonces, ¿cómo se crea una jerarquía visual? Empecemos por el tamaño.

Da un paso atrás desde tu pantalla y mira el texto de esta lección. ¿Qué partes te llaman la atención? Probablemente, son los encabezados de las secciones. ¿Por qué? ¡Porque son más grandes! Es un hecho simple que los artículos más grandes atraen naturalmente la atención.

El tamaño puede ser una excelente manera de crear un punto focal, así como de establecer diferentes niveles de jerarquía visual. También es importante recordar que no siempre tendrá espacio para hacer las cosas más grandes, por lo que puede restar importancia a las partes menos cruciales del diseño haciéndolas más pequeñas y reduciendo su peso visual.


El tamaño puede ser una herramienta poderosa para establecer una jerarquía visual
cartel de texto

Color y jerarquía

Otro elemento que juega un papel importante en el establecimiento de una jerarquía visual es el color. Nos gusta el color. Es naturalmente agradable a la vista y atrae nuestra atención, por lo que puede ser muy útil para crear puntos focales.

En general, los elementos más visibles en una composición son aquellos con una coloración distintiva, en comparación con las otras partes. Por ejemplo:

  • Los colores brillantes crean un fuerte contraste con los más apagados, haciéndolos destacar.
  • Los colores cálidos avanzan mientras que los colores fríos se retiran, creando una jerarquía visual natural.
  • Los colores más atrevidos son más notables que los pasteles o descoloridos, incluso si son solo valores diferentes del mismo tono.

Cualquiera de estos trucos se puede utilizar para crear una jerarquía de componentes altamente visibles y menos visibles en su diseño.


¿Cómo se usa el color en este diseño para crear puntos focales?
cartel de color

Organización espacial

Finalmente, hablemos de las formas en que puede organizar elementos de su diseño para establecer jerarquías visuales. A menudo, esto se puede hacer a través de la proximidad o la relación de distancia entre elementos del diseño.

Los elementos que están muy juntos atraen la atención. A nuestros ojos les gustan los grupos de cosas, y nos gustan especialmente las cosas que están agrupadas en números impares. En general, tres se considera la agrupación numérica más agradable desde el punto de vista estético, por lo que organizar la información en estos grupos puede ser una buena forma de aumentar el peso visual de esa parte del diseño.

La proximidad también es importante porque nos ayuda a comprender qué elementos no están relacionados. Al mantener la distancia entre elementos no relacionados, establecemos agrupaciones distintas y creamos vías de espacio negativo para que el ojo las siga de una información a la siguiente.

Este concepto de vías es importante porque las personas tienden a leer imágenes visuales y textuales de la misma manera. Tienden a escanear la imagen primero, familiarizándose con el diseño general y las ideas más importantes, y luego vuelven a examinar los detalles. Entonces, si sabe adónde viajarán los ojos de las personas, puede colocar puntos focales en áreas que ya son puntos naturales en el camino.

Tipos de vías

Hay dos caminos dominantes que las personas toman al escanear una imagen. Para los diseños que son sobre todo visual, las personas a menudo escanear con un Z-patrón . Básicamente, el ojo comienza en la parte superior izquierda de la página, escanea hacia la parte superior derecha, corta en diagonal hacia la parte inferior izquierda y escanea hacia la parte inferior derecha.

Si coloca información importante en estas líneas, es más probable que se note. Ha aumentado su lugar en la jerarquía visual gracias a su ubicación en una vía natural del ojo.

Los diseños con mucho texto siguen una teoría similar, pero el patrón es un poco diferente. En los diseños textuales, las personas tienden a comenzar en la parte superior izquierda y escanear el lado izquierdo del texto. Siempre que encuentran un punto de interés, escanean hacia la derecha a lo largo de esa línea de texto. A esto le llamamos un F-patrón .

Puede aprovechar esto colocando puntos focales a lo largo del lado izquierdo del texto, como palabras en negrita, viñetas o texto en diferentes colores, captando la atención de las personas y animándolas a leer el resto de esa línea. Puedes influir en la forma en que leen el documento y ni siquiera tienes que aprobar un decreto real.

Resumen de la lección

En diseño, la jerarquía se refiere a la organización de la información de una manera que pone mayor énfasis visual en la información visual o textual más importante. Al enfatizar los componentes cruciales y restar importancia a los menos críticos, puede influir en lo que es más probable que el espectador note primero, segundo, tercero e incluso cuarto en la página.

El punto más importante del diseño es el punto focal , la parte superior de la jerarquía visual, donde se dibuja primero el ojo. A partir de ahí, el ojo puede moverse a través de caminos naturales mediante el uso del tamaño, el color y la disposición espacial de los componentes del diseño. La proximidad , o la relación de distancia entre los elementos del diseño, nos ayuda a comprender qué elementos están relacionados. Al ojo humano le gustan los grupos en números impares, especialmente de tres en tres.

Los dos tipos de vías naturales son:

  1. Patrón en Z : en las imágenes visuales, el ojo comienza en la parte superior izquierda de la página y luego sigue una dirección similar a una Z.
  2. Patrón F : en imágenes con mucho texto, las personas comienzan en la parte superior izquierda y escanean el lado izquierdo del texto. Siempre que encuentran un punto de interés, escanean hacia la derecha a lo largo de esa línea de texto.

¡Puntúa este artículo!