Jerarquía visual para principiantes

La jerarquía visual es la organización de objetos en un orden específico para llamar la atención sobre las áreas previstas.

Comúnmente utilizada en el diseño de UX, la jerarquía visual brinda al lector una navegación más fácil y ayuda a dirigir su atención hacia donde desea que esté.

El uso inadecuado o la falta de jerarquía visual pueden dejar a los visitantes del sitio web confundidos y perdidos.

La jerarquía visual prevalece en carteles y anuncios para ayudar a dirigir la atención a los elementos previstos.

Este blog proporcionará a los principiantes los conceptos básicos de la jerarquía visual.

Jerarquía visual desglosada

Desglosar la jerarquía visual en partes más simples ayuda a explicar cómo los diseñadores abordan el concepto de diseño.

Tres son tres roles principales en la jerarquía visual, dos de los cuales están muy relacionados.

Tamaño

Cambiar el tamaño de los objetos puede ayudar a llamar la atención sobre ellos o alejarlos.

Es imprescindible dejar el tamaño más grande para la información más importante que se desee expresar. El uso de demasiados elementos de tamaño similar eliminará este efecto, ya que nada se destaca tanto.

Escalar tamaños es vital para mostrar cómo se compara con otros objetos. Crear una sensación de equilibrio ayuda a escalar para enfatizar cómo su objeto más grande se compara con los más pequeños.

Si tiene información que no es importante, tenerla en un tamaño pequeño la mantendrá fuera del camino y la dejará donde los usuarios la verán por última vez.

Colores y Contraste

Los colores más brillantes captan mejor la atención que otros. Este efecto aumenta cuando combinas colores brillantes con fondos más oscuros. El resultado hace que su información destaque más y llame la atención con facilidad.

El color y el contraste son dos elementos de la jerarquía visual, pero ambos funcionan juntos a la perfección para captar la atención.

Una forma de usar este método es cambiar el color de un texto resaltándolo con un color llamativo; llamará la atención antes que cualquier otro texto de color apagado.

Cuanto mayor es el contraste, más fuerte se capta la atención. Agregar diferencias de color drásticas, como un fondo oscuro con una fuente de color rojo brillante, atraerá la atención del usuario y hará que sea lo primero que noten en cualquier imagen o página web.

Al crear colores contrastantes para llamar la atención, es mejor mantenerlos al mínimo. Demasiados objetos contrastados confunden al lector y crean un efecto indeseable y desagradable.

Otra forma de usar colores es elegir paletas similares para crear una correlación entre objetos específicos.

Es mejor reservar esta táctica solo para los elementos más necesarios en una página, ya que es allí donde desea que se dirija toda la atención primero.

Un buen diseño de UX incluye mucho contraste, y la mayoría de las estéticas usan un fuerte contraste para crear obras sorprendentes.

Los patrones F y Z

Cuando se trata de proporcionar información principalmente a través de texto, existen dos patrones principales que mejor aprovechan la forma en que procesamos la información visual.

Estos patrones funcionan para la mayoría de los idiomas, pero funcionan muy bien para el inglés, ya que las palabras se leen de izquierda a derecha y de arriba a abajo.

El patrón F

El patrón F es la elección perfecta para diseños que contienen texto extenso. El diseño sigue la letra que lleva su nombre, comenzando desde la parte superior izquierda y avanzando hacia la derecha.

Después de lo cual, el espectador escanea el lomo en busca de subtítulos o titulares.

El patrón se denomina alternativamente patrón E, aunque el patrón F es más icónico.

Para usar el patrón F, debe colocar toda la información vital en el lado izquierdo en pequeños titulares para llamar la atención.

Este diseño es excelente para eliminar el aburrimiento asociado con la lectura de grandes bloques de párrafos.

Los usuarios pueden escanear los titulares para detectar titulares llamativos o viñetas, ya que sirven para llamar la atención.

El patrón Z

Mientras que el patrón F es adecuado para sitios web con mucho texto, el patrón Z es diferente.

El patrón Z es perfecto para sitios web o anuncios que no tienen varios párrafos de texto.

El diseño comienza con la información de mayor prioridad en la parte superior izquierda, luego cae en cascada en importancia hacia la parte superior derecha, inferior izquierda e inferior derecha.

Los usuarios navegarán fácilmente por el patrón Z, ya que es un diseño de uso frecuente que es fácil de entender.

La sección superior izquierda generalmente se reserva para un logotipo, ya que será lo primero que notará la gente. En la parte superior derecha hay una llamada a la acción colocada después de que los usuarios hayan visto el logotipo de la empresa. La llamada a la acción en esta situación suele ser un aviso de registro.

El medio del diseño generalmente incluye una imagen para llenar la parte vacía.

La parte inferior izquierda y derecha incluye todo el texto o la información que desea mostrar a su visitante.

comprensión de la tipografía

La jerarquía tipográfica es fácil de entender y es aplicable a cualquier diseño que involucre mucho texto, que es la gran mayoría. Se puede dividir en tres partes, teniendo el orden de título, subtítulos y, finalmente, su texto.

Sus titulares contienen información esencial, se colocan en lo más alto de su diseño y son el contenido más visible.

Sus subtítulos funcionan para ordenar todo su texto y proporcionar orden al desorden de párrafos. Mantenga siempre sus subtítulos más pequeños que sus titulares, ya que no deben competir en prioridad.

Los subtítulos proporcionan una navegación sencilla para que los usuarios encuentren información específica.

Su última pieza es su texto, que generalmente involucra párrafos. El tamaño de la fuente debe ser pequeño pero mantener la legibilidad. Las dos secciones anteriores funcionan para proporcionar un tiempo más fácil para que los usuarios naveguen por sus textos densos.

La importancia del espacio

Para los sitios web que contienen información mínima, dejar mucho espacio alrededor de la información importante hará que la atención se centre en el centro donde se encuentra todo el espacio.

Este concepto también debe aplicarse a todos sus otros diseños, agregar demasiada información lo dejará con una experiencia de usuario desagradable.

El contenido circundante con espacio proporciona un diseño UX simple y fácil de seguir.

Abarrotar demasiada información y dejar poco espacio alrededor de las áreas lo dejará con un diseño que se siente abrumador y dejará a las personas desconcertadas. Cuando los usuarios están confundidos, siempre tienen la oportunidad de abandonar su sitio web, asegúrese de mostrar solo información importante.

Uso de la alineación

Es importante alinear sus diseños, ya que tener el texto colocado al azar creará una imagen agitada para mirar.

Los diseños de patrón F y Z incorporan el uso de la alineación. Los diseños de patrón F usan alineación izquierda, mientras que los diseños de patrón Z usan alineaciones izquierda y derecha, y alineaciones centrales.

Al hacer un diseño visual con texto como foco, es mejor alinearlo a la izquierda.

Para diseños estrictamente visuales con un enfoque simplista, alinear todos los elementos al centro tiende a crear un diseño atractivo.

Uso de cuadrículas

Al crear diseños, las cuadrículas son un método común para ayudar en el proceso de creación. El uso de la regla de los tercios permite agregar equilibrio a sus diseños.

Para usar la regla de los tercios, agregue una cuadrícula a su diseño y déjela descansar sobre dos líneas horizontales y verticales. El resultado proporciona un diseño que es agradable y agradable a la vista.

Los objetos más cercanos al centro llamarán la atención, mientras que los más lejanos atraerán la atención al final.

Proximidad y Relación

Cuando los elementos están más juntos, su lector asumirá que están relacionados.

Esto puede ayudarlo a organizar mucha información y hacer que sea más fácil de entender para su espectador.

Agrupar imágenes con texto significa que ambos están relacionados y los lectores los asociarán. Si una imagen y el texto están muy separados, el lector asumirá que ambos elementos no están relacionados y no tienen nada que ver entre sí.

Fuentes y jerarquía visual

Cambiar el tamaño de su fuente con fuentes más grandes reservadas para información importante ayudará a dirigir la atención hacia ellas.

Para un cartel, los nombres deben estar en una de las fuentes más grandes, mientras que elementos como una dirección deben escribirse en una fuente pequeña.

Pasando del tamaño de fuente, el uso de diferentes tipos de fuentes ayudará a dirigir la atención del usuario. Use una fuente diferente para títulos, subtítulos y texto de información. Este método de diseño ayudará a darle a tu trabajo la fuerza que necesita para captar y mantener la atención del lector.

Sugerencias de jerarquía visual

Antes de comenzar a crear su diseño, tomar algunas notas puede ayudarlo a organizar su diseño e incluso ayudarlo a crear diseños más estéticos.

Anote la información más importante que necesita priorizar y qué métodos utilizará para hacerlo.

Además, intente imaginar el viaje del lector e intente mejorar el diseño de UX, y elimine cualquier detalle desordenado.

El ROI de un buen diseño de UX siempre vale la pena el trabajo extra, así que no subestimes su importancia.

Envolver

La jerarquía visual se trata de dictar en qué orden quieres que vaya la atención de tu lector; desea que la información vital se vea primero, seguida de todo lo demás.

El uso del contraste puede crear colores que resalten y se conviertan en lo primero que noten los lectores en un diseño.

Saber qué información desea que los lectores vean primero le permitirá utilizar todos los elementos de la jerarquía visual para proporcionar a los demás un buen diseño de UX.