Guía básica para crear una jerarquía visual

Para asegurarte que tus diseños se comuniquen tan efectivamente como sea posible, querrás aprovechar todo su contenido – incluso aquellos conceptos olvidados de la clase de arte como la teoría del color y la composición — y usarlos estratégicamente en lugar de apegarte a unos cuantos favoritos o a las técnicas de moda.

De eso es lo que trata la jerarquía visual: trabajar con todos los recursos en tu caja de herramientas de diseño – color, contraste, tipografía, espaciado y otros principios básicos – para organizar y darle prioridad a tu contenido.

Una de las funciones más importantes de la jerarquía visual es ayudar a establecer un punto focal, dándoles a los espectadores un punto de entrada para comenzar a navegar por tu diseño y mostrarles dónde se encuentra la información más importante.

Revisemos algunas maneras distintas en las que podemos darles énfasis a nuestros elementos de diseño para crear una jerarquía visual clara con enfoque y flujo:

¿Alguna vez escuchaste la frase “el que no llora, no mama”? Dicho de otra manera: los elementos de diseño más grandes reciben la atención. Agrandar el tamaño de un objeto (sus dimensiones) y su escala (su tamaño en relación a otros objetos) es una de las maneras más sencillas y efectivas de darle importancia visual.

Aquí, los elementos de diseño agrandados de Erin Lancaster — la tipografía y una fotografía grande, ambos saliéndose de la página – hacen que el tema del artículo sea claro inmediatamente.

Por otro lado, los elementos de diseño que no sean tan importantes o que quieres que tengan un menor énfasis pueden reducirse en tamaño para volverlos menos visibles – y por consiguiente serán inferiores en la jerarquía visual.

Como con cualquier principio de diseño, el equilibrio y la moderación son la clave. Podrías sobrecargar un diseño con un punto focal que sea demasiado grande, o comprometer la usabilidad con información secundaria que sea demasiado pequeña.

El color nos atrae visualmente, especialmente cuando se usa estratégicamente para resaltar información importante o imágenes. Un toque brillante de color como rojo o amarillo, por ejemplo, es difícil de pasar por alto – ya sea en una señal de tráfico al otro lado de la carretera o en un volante⁠(se abre en una ventana nueva) colgado en tu cafetería local.

Sin embargo, si llenas un diseño con todos los colores del arco iris, puedes negar cualquier impacto que el color pudiese haber tenido en la creación de una jerarquía visual. Por lo que usar el color con prudencia y propósito son los principios clave aquí.

De otra manera, existen muchas formas creativas en las que el color y el contraste pueden aplicarse a un diseño para dirigir la mirada de un espectador, incluyendo:

Temperatura: Los colores puede ser fríos (como el azul y el verde), cálidos (como el rojo, naranja y amarillo), o neutrales (como el negro, el blanco, el gris, y a veces el café/beige). Mezclar las temperaturas de los colores – especialmente los de alto contraste – puede llamar mucho la atención visual.

Este póster de teatro por el estudio Zee combina un vívido y cálido naranja con un brillante y frío azul para crear una paleta de colores impresionante que crea interés visual y aprovecha el contraste entre las temperaturas de los colores.

Apegarse a una temperatura también puede ayudar a que el diseño se vea visualmente más cohesivo. Por ejemplo, el volante y el banner del sitio web de Keith Johnson presentan temperaturas de color similares para unificar el diseño en vez de crear énfasis.

Valor: La claridad u oscuridad de un color se conoce como su valor. Como la temperatura, los colores de valores diferentes pueden contrastarse entre sí para crear un efecto dramático, mientras que los colores de valores similares tienden a tener un peso visual más igual.

En el diseño que se muestra debajo, el diseño de tipografía de Brad Vetter para un póster de un espectáculo presenta dos colores pastel de valores de claridad similares en el fondo. Está contrastado con un azul marino oscuro para enfatizar el titular del artista.

Saturación: Un color en su forma más pura y brillante está 100% saturado; entre más cerca esté del gris, menos saturado está. Usar colores brillantes o apagados (ya sea solos o combinados) puede ser una forma estratégica de crear lugares de alto y bajo contraste en un diseño.

En el diseño de portada del libro de Jason Booher, un rojo intenso resalta las imágenes que respaldan el título del libro. Esto sobresale aún más porque el fondo está en un color neutral desvanecido. Esta pieza también presenta contraste entre las temperaturas de color (cálido y neutral).

Para cualquier diseño que involucre texto (la mayoría), la jerarquía tipográfica es un componente de jerarquía visual que no puedes darte el lujo de descuidar. Para tener una idea básica de la jerarquía tipográfica, solo basta que te imagines un periódico o un artículo de revista con un título, subtítulo y cuerpo de texto.

Este enfoque básico de tres niveles puede aplicarse a casi cualquier tipo de diseño, desde tarjetas de presentación hasta sitios web. Desglosemos los niveles y veamos para qué se usan típicamente:

Nivel uno: Por lo general, tu tipografía de nivel uno será el contenido más importante; este debería ser el elemento tipográfico más inmediatamente visible en tu diseño.

Nivel dos: Los elementos de nivel dos normalmente ayudan a organizar tu diseño en secciones o a agrupar información relacionada. No deberían sobresalir tanto como tu tipografía de nivel uno, pero ciertamente deberían dirigir a los espectadores a las diferentes partes del diseño para ayudarlos a navegar a través de él con facilidad.

Nivel tres: Para un formato cargado de texto, la tipografía de nivel tres usualmente es el mensaje completo, el propósito o los detalles del diseño. Podría ser larga o corta – un artículo completo, una nota corta, una descripción breve – pero la preocupación principal para este nivel es que sea altamente legible, ya que es probable que el tamaño de la fuente será algo pequeño.

Si deseas ver una guía más detallada sobre la jerarquía tipográfica, asegúrate de leer Por qué todo diseño necesita tres niveles de jerarquía tipográfica.

La jerarquía tipográfica no es el único aspecto a considerar durante la redacción. La apariencia de las fuentes – la categoría (sans serif, serif, caligráficas o decorativas) y el estilo (negrita, cursiva, minúsculas, etc.) – puede crear o destruir un diseño.

Piensa que las tipografías tienen tipos de personalidad. Sabes que algunas son ruidosas y llamativas, mientras que otras son más reservadas pero interesantes, y otras que son flexibles y se adaptan dependiendo de con quién estén.

Usa estas cualidades de manera apropiada (de forma que coincida con el contexto de tu proyecto) y estratégica para mejorar tu diseño. Si bien una jerarquía tipográfica organizará tu diseño y hará que sea más fácil de navegar, las elecciones estilísticas contribuyen al ánimo general del diseño y son una manera más natural de crear énfasis.

Por ejemplo, Duane Smith ha incluido una mezcla de tipografías en su tarjeta de presentación (serif, sans serif y una algo caligráfica en la parte de arriba), usando el tamaño, el color y las negritas para ayudar a que ciertos elementos (como su nombre y número de teléfono) resalten.

Funciona porque las elecciones de fuentes se complementan entre sí – no chocan, y no pelean por atención gracias a su clara jerarquía. Además, el texto en mayúsculas ayuda a mejorar la visibilidad para un diseño de tamaño más pequeño como una tarjeta de presentación.

La portada del libro de Atomicdust combina diferentes tipografías para el contraste en vez de sincronía. El estilo dibujado a mano de una contradice intencionalmente el diseño serif tradicional de la otra de manera que ilustra visualmente el título del libro y crea un punto focal claro.

El espacio en blanco o el espaciado en general es uno de los principios de diseño más descuidado. Pero también es uno de los más importantes.

Cuando olvidas planear para algo de espacio en blanco en un formato – quizás en un esfuerzo por incluir tanta información como sea posible –, te arriesgas a terminar con un diseño desordenado y confuso. Eso se debe a que el espacio en blanco es esencial para separar y organizar los elementos en tu diseño y para ayudar a que se vea ordenado y bien equilibrado.

Probablemente lo hayas visto antes: un sitio web o un volante que tiene tanta información, texto e imágenes que ni siquiera sabes por dónde comenzar a mirar. No crees uno de esos diseños que hagan que tus visitantes se den la vuelta porque es imposible de navegar a través de ellos.

Siempre planea para el espacio no utilizado. Es esencial para cosas como:

• Darle a los ojos del espectador un lugar donde descansar y un camino para recorrer el diseño
• Separar tu formato en secciones (el otro aspecto de esto es la proximidad – reducir el espacio para colocar elementos más juntos – también un aspecto de un buen espaciado)

El diseño editorial de David Salgado y Mariana Perfeito hace ambas cosas mencionadas arriba, dejando mucho espacio en blanco entre y alrededor de cada sección del formato, mientras que agrupan y unen los elementos relacionados. El resultado es un diseño limpio y equilibrado.

• Aislar puntos focales

Este empaque por Design Womb rodea el nombre de marca del producto con un espacio en blanco para dirigir tu enfoque ahí y volverlo altamente visible con fondos de patrones coloridos.

Puedes guiar a los espectadores a través de tu formato con algunas de las técnicas que ya hemos discutido, pero la mayoría de los diseños se benefician de una estructura general o principio de organización – a esto se le conoce como composición.

Los artistas se han apoyado en técnicas de composición por siglos, muchas de las cuales todavía se usan en la actualidad. Veamos algunas de las más comunes:

La regla de los tercios: Seguir la regla de los tercios es una de las maneras de crear una composición dinámica donde tu punto focal no está ubicado predeciblemente en el centro.

En cambio, esta regla divide un formato en una cuadrícula (tres líneas horizontales y tres líneas verticales espaciadas equitativamente) y coloca el punto focal ya sea en una de las líneas, o idealmente, en uno de los cuatro puntos donde las líneas se intersectan.

La regla de los impares: La regla de los impares a menudo también involucra tercios. La idea detrás de esta es que un número impar de objetos (tal vez el punto focal rodeado por otros dos elementos – o cuatro, como se muestra debajo) siempre es más interesante y agradable para la vista que un número par.

Movimiento implícito: Esta puede ser una técnica muy efectiva cuando se señala información importante y se ofrece un camino obvio a través del diseño. ¿Cómo crear este tipo de movimiento? Líneas guía.

Las líneas guía no tienen porqué ser líneas reales (aunque sí pueden serlo). También pueden ser objetos o formas, elementos de diseño repetidos, una interacción de espacio positivo y negativo, o cualquier otra cosa que cree una sensación de movimiento direccional.

Algunas de las variedades más comunes son las líneas guía horizontales, verticales y diagonales, así como curvas en s y formas en z. El formato con forma de z se beneficia de los patrones de lectura de izquierda a derecha y es una base popular para formatos de sitios web.

Debajo, puedes ver algo de movimiento implícito y líneas guía en acción:

Para más consejos sobre cómo crear composiciones dinámicas que le den a tus diseños un flujo excelente, dale un vistazo a losPrincipios del diseño: domina el flujo y el ritmo de composición.

Esperamos que esta guía haya demostrado la importancia de establecer una jerarquía visual clara en tus proyectos de diseño.

Muchas de las técnicas que hemos cubierto aquí son herramientas fantásticas para enfatizar partes seleccionadas de tu diseño. Sin embargo, ten cuidado: poner demasiado énfasis es la manera más sencilla de desintegrar la jerarquía visual.

La importancia visual no puede aplicarse a demasiados elementos del diseño, o todo se vuelve igual. Cuando todo sobresale, nada lo hace. El fundamento básico de una jerarquía es que algunos elementos necesitan enfatizarse, mientras que otros apaciguarse.

¿Pero qué ocurre si no estás seguro de que tu jerarquía visual esté funcionando como tú quieres? Hay una manera fácil de probar su efectividad y puedes hacerla en cualquier momento, no necesitas herramientas especiales. Se trata de la vieja y confiable “prueba de entrecerrar los ojos”:

Solo siéntate, observa la pantalla de tu computadora un poco y entrecierra los ojos mirando tu diseño para que todos los detalles sea vuelvan borrosos y solo veas formas generales. ¿Qué es lo que todavía resalta? ¿Es eso lo que quieres que vean primero los espectadores? Si es así, entonces estás bien – si no, entonces puede que necesites regresar a tu diseño y probar otra cosa.

Ahora tienes algunas herramientas y técnicas para empezar a crear jerarquías visuales efectivas. Ve y dales un buen uso y, como siempre, ¡feliz diseño!