Fundamentos del diseño: ¿Cómo crear jerarquía visual?

 El diseño es una forma de comunicación, su objetivo es comunicar un mensaje a cierta audiencia. Para ello se hace uso de diversos elementos visuales y se ponen en práctica distintos fundamentos del diseño. Entre estos fundamentos del diseño se encuentra la jerarquía visual que permite a los diseñadores organizar elementos e información para que el mensaje principal llegue a sus destinatarios sin problemas.

En este artículo te explicamos brevemente qué es la jerarquía visual y cuáles son las herramientas para crearla.

¿Qué es la jerarquía visual?

Cada vez que organizas elementos en base a cierto orden de importancia, estamos creando una jerarquía. Si esa estructura se organiza de forma visual se le llama jerarquía visual y es un fundamento esencial en el área del diseño. En la jerarquía visual se diferencian los elementos en base a la forma en cómo lucen, su apariencia es un indicador de su orden de importancia y su relación con otros elementos.

Por esta misma razón, la jerarquía es un importante fundamento del diseño. Si se le entrega más peso a ciertos elementos, estos se hacen más importantes. De esta manera, te puedes comunicar más fácilmente con tus visitantes ya que la jerarquía ayuda a que la información presentada sea procesada de manera más sencilla.

¿Cómo crear jerarquía visual?

Existen diferentes técnicas para crear jerarquía visual. Usualmente no sólo se emplea una de ellas sino que se combinan. Básicamente son seis: tamaño, contraste, color, proximidad, alineación y repetición. Esto principios del diseño son tus mejores armas para poder generar jerarquía visual. Profundizaremos sobre cada uno de ellas a continuación:

Tamaño

Los elementos de mayor tamaño captan tu atención más rápidamente. Además, el tamaño indica la importancia de cada elemento. Esta técnica es excelente para poder guiar la atención de tus usuarios y es una de las más empleadas también.

Si todos los elementos fueran del mismo tamaño es complicado para el usuario detectar qué elemento es más importante. Sin mencionar que es bastante monótono y aburrido para los usuarios.

Crear jerarquía visual en base al tamaño es una de las primeras técnicas que se aprenden como diseñador. Claro que, como sabes, en el diseño web no sólo se emplea el tamaño para indicar la importancia de los elementos, sino que se combina con otras técnicas elementales, las cuáles seguiremos explorando en este artículo.

Contraste

El contraste también tiene un efecto en la jerarquía y se puede aplicar contraste en cualquier elemento, por ejemplo, al elegir una paleta de colores. El impacto se genera en base a los cambios que existen entre un elemento y otro, mientras más dramático sea este cambio, mejor. Por eso, en un diseño web, se eligen colores que generen contraste a modo de generar impacto y llamar la atención.

Color

El color es una de las maneras más poderosas de captar la atención de tus usuarios. No sólo te sirve para organizar y generar jerarquía visual, sino para darle estilo y personalidad a tu sitio web. Tal vez por esta razón el color es un arma de doble filo ya que debes tener en cuenta la personalidad de marca y el público objetivo, mientras que, al mismo tiempo, intentas generar una combinación de colores armónica.

Es probable que la selección de colores sea un proceso bastante largo y se logre mediante ensayo y error. Es decir, probando cómo lucen los colores uno con otro hasta llegar a la combinación ideal para tu diseño web.

Usualmente, los colores vibrantes suelen destacar, mientras que los colores pastel suelen pasar desapercibidos si se ponen al lado de un color saturado. Claro, también hay casos exitosos de uso de colores pasteles en la web así como de colores saturados, pero no es una tarea sencilla de lograr. Y en muchos casos necesitarás algún color de acento.

Proximidad

La proximidad es una manera de separar y agrupar elementos. Mientras más próximos estén son considerados como un grupo y se pueden identificar como sub-jerarquías. La proximidad sirve para agrupar elementos similares y separar aquellos que son distintos, por eso es de mucha importancia al momento de diseñar un sitio web.

Agrupar elementos sirve para organizar tu sitio y ayudar al usuario a identificar secciones o zonas comunes. Por ejemplo, en un blog, la barra lateral suele contener widgets, cada uno con un título y contenido propio. Cada elemento funciona por separado, pero también se les reconoce como un grupo.

Alineación

La ubicación de los elementos también puede indicar importancia. Siguiendo el ejemplo anterior, sabemos que los elementos ubicados en la barra lateral son de menor importancia que los elementos que se ubican en el centro pues ocupan un mayor espacio. De igual manera, los elementos que se colocan en la parte superior suelen ser de mayor importancia, por eso ese lugar es el común para la barra de menú y el logo. En una tienda online, el carrito de compras también se suele ubicar en la parte superior.

También puedes usar la alineación para generar interés y movimiento en tu página web. De manera usual, los elementos similares se suelen alinear de forma igual. Pero si quieres generar impacto en una zona, podrías cambiar la alineación de ciertos elementos.

Repetición

La repetición es un elemento que también sirve para agrupar elementos. Si tomamos como ejemplo el texto dentro de una página web vemos que cada párrafo tiene una fuente y una puntaje igual. Esto permite al usuario reconocer fácilmente los elementos similares.

Aunque la repetición es importantes, es también esencial saber cómo romper esa repetición para generar interés, de lo contrario la página se vería demasiado estática y aburrida. Tomando como ejemplo el texto, vemos que cada cierto número de párrafos se coloca un subtítulo, usualmente en mayor puntaje o en negritas o con algún tipo de formato distinto que el del párrafo. Este subtítulo funciona como un elemento que genera quiebre visual.