A veces miras un sitio que puede ser lo suficientemente atractivo, pero falta algo. Tiene excelentes colores, bonitos gráficos, alineación perfecta y una copia inteligente, pero hay algo un poco soso al respecto. A pesar de que todo se ve bien, nada realmente está pasando vívidamente en un nivel mayor que cualquier otra cosa. Esta solución a este problema es la jerarquía visual.
Los diseñadores suelen ser lo suficientemente intuitivos como para dar a los elementos de la página una jerarquía clara sin siquiera pensar, otras veces, la falta de intención en esta área lleva a un diseño como el que se describe anteriormente. Este artículo examinará algunos de los principios básicos del diseño con una jerarquía visual de información en mente.
Principios en el trabajo
La razón por la cual la jerarquía visual es tan importante es porque al dominarla, puede tener un inmenso control sobre cómo un visitante lee su página. En un mundo ideal, cada espectador leería toda la información en la página a fondo, permitiéndole infinito tiempo y espacio para transmitir su mensaje. Sin embargo, la realidad es que es probable que solo tengas unos segundos para llamar la atención de alguien y decirles de qué se trata el sitio antes de que desaparezcan y vayan a otro lugar.
Al establecer una clara jerarquía de gráficos e información, los lectores casi no pueden evitar seguir inconscientemente el camino que se les ha propuesto. Técnicamente, no hay dos personas que lean una página exactamente de la misma manera, pero puede crear fuertes tendencias hacia la forma que prefiera.
Esto se desarrolla en diferentes áreas y métodos. La jerarquía visual se puede establecer a través de la posición, el tamaño, el color y la complejidad de un elemento en relación con los otros elementos de la página.
Para estructurar su mensaje correctamente, deberá considerar todo, desde las fuentes que usa hasta el espacio en blanco alrededor de un objeto determinado. Siempre sea consciente de lo que está llamando la atención en su página y asegúrese de que sea intencional.
Posición
La posición es una de las formas más básicas para establecer una jerarquía. Considere el siguiente ejemplo:
Lo más probable es que, al mirar por primera vez esta imagen, no estabas seguro de lo que estaba pasando. Tus ojos probablemente se movieron un poco, buscando un patrón distinguible. Ahora mira este ejemplo, usando las mismas letras.
De repente, aunque el mensaje sigue distorsionado por el espacio físico y las formas innecesarias, se vuelve mucho más fácil de descifrar cuando se invierte el orden. Aunque ambos mensajes causaron que sus ojos vagaran alrededor de la imagen, el segundo hizo que las letras se juntaran para formar palabras mucho más fácilmente que el primero. Esto se debe a que estás acostumbrado a leer de izquierda a derecha. Cuando hay un caos visual incierto en una página, la primera forma en que su cerebro quiere tratar de organizar la información es en el orden que le enseñaron a leer: de izquierda a derecha, de arriba a abajo.
Esto no tiene la intención de sorprenderlo, es obvio que leemos de izquierda a derecha. Sin embargo, ser más consciente de esta tendencia te ayudará a estructurar tu contenido de manera adecuada. Recuerde que este principio se extiende más allá de las palabras en elementos gráficos en una página. Si presenta a sus usuarios una cuadrícula de objetos, bastante similar en tamaño, forma y color, tendrán una tendencia a leer la cuadrícula de izquierda a derecha a menos que se le solicite lo contrario.
¿No es esto aburrido?
Quizás se esté preguntando cómo serían sus diseños si se adhiriera firmemente al principio de lectura z que se encuentra arriba. La respuesta es increíblemente aburrida y poco original.
Entonces, el objetivo es poder alinear los objetos en una página de una manera más atractiva, mientras que el lector ignora su tendencia subconsciente a leer en una "z". Esto se logra mediante el uso de los otros principios de jerarquía visual que se analizan a continuación.
tamaño
En el mundo del diseño, el tamaño definitivamente importa. Al variar el tamaño de los elementos en una página, puede romper fácilmente la tendencia del patrón z.
A pesar del hecho de que la pregunta escrita es más alta que el cuadrado, el tamaño total y la audacia del cuadrado atrae su atención antes de las palabras. Echemos un vistazo a este principio prácticamente aplicado al diseño web.
Esta es una página extremadamente simple que utiliza una jerarquía visual clara. La cita en el centro de la página es lo suficientemente grande como para ser el primer objeto que llame su atención. Después de esto, el logotipo en la parte superior izquierda no solo es el lugar natural para restablecer las tendencias de lectura, sino que también es el siguiente elemento de contraste más grande en la página. El diseñador ha estructurado el sitio para que, si solo pasas unos segundos en la página, leas “Think Big”. Sé ágil. seguido de "Hobson Dungog + Davis".
Esta es la manipulación clásica de la jerarquía visual en el trabajo (observe que el espacio en blanco también juega un papel importante). Hubiera sido fácil configurar el presupuesto para que aparezca en la parte superior izquierda seguido del logotipo, pero el diseño no habría sido tan interesante o flexible.
Color
El uso inteligente del color puede ser una de las formas visualmente más interesantes para diferenciar elementos en una página y llamar la atención donde lo desee. La obsesión de su cerebro con el contraste hará que sus ojos se enfoquen en objetos que sobresalgan debido simplemente a su diferencia de color en relación con los objetos circundantes. Considere el siguiente ejemplo:
Este diseñador ha utilizado varios tonos de color que contrastan y complementan para establecer una jerarquía visual en lo que de otro modo sería un bloque de texto monótono. Las secciones más brillantes atraen su atención y hacen que sea fácil obtener la esencia del párrafo sin realmente tomarse el tiempo para leerlo.
El contexto también es muy importante aquí. Si se tratara de un diseño impreso, no pensarías nada en el texto de color más brillante más allá de lo que estaba destinado a llamar tu atención. Sin embargo, en la web, su cerebro esperará que estas áreas de enfoque obviamente intencionales signifiquen algo más significativo: en este caso, un enlace.Y convertir el texto más brillante en enlaces es exactamente lo que este diseñador ha hecho. A pesar del formato no tradicional representado por la falta de un área de navegación, puede descubrir rápidamente cómo funciona el sitio debido al uso de, usted lo adivinó, la jerarquía visual.
Complejidad visual
La última forma en que veremos para controlar la jerarquía visual es a través de la complejidad visual y los patrones discernibles. El principal aquí es que si quiere que algo se destaque en su página más que los objetos que lo rodean, hágalo considerablemente más o menos complejo. Incluso si los objetos tienen un tamaño y un color similares, la mayor complejidad aumentará el interés visual.
Este principio se relaciona fuertemente con patrones discernibles. Como se mencionó anteriormente, su cerebro está constantemente tratando de dar sentido y forzar el orden sobre el caos de píxeles que ve en la pantalla. Por lo tanto, se aferrará a las áreas que no solo son las más interesantes debido a su complejidad, sino también a aquellos elementos a los que puede imponer un esquema familiar.
El ejemplo básico anterior puede enseñarnos mucho sobre cómo enfocamos nuestra atención. Hay dos áreas de la imagen que más se destacan. La primera y más obvia área son las dos formas peculiares en la fila superior. No solo son más complejos visualmente que los objetos que los rodean, sino que también recuerdan algo familiar: un par de ojos. A pesar del caos que las rodea, estas formas atraen su atención porque las caras están entre los objetos más familiares, amigables o incluso amenazantes que encontramos. Si desea establecer un área determinada en la jerarquía visual sin importar dónde se encuentre en una página, no puede equivocarse con una cara.
Después de abandonar el par de ojos, su próximo objetivo probable son los dos triángulos repetidos en la fila inferior. Aquí nuevamente tu cerebro está tratando de imponer un orden. Entiende esta área un poco más que las otras debido al elemento repetido. El uso de la repetición selectiva en sus diseños es una excelente manera de agregar interés visual, conectar objetos distantes y guiar al espectador por el camino que desea que siga. Para usar la repetición de manera efectiva, simplemente implemente las variables que acabamos de analizar (tamaño, color y complejidad) como la base para el elemento repetido.
Conclusión
El objetivo de este artículo era hacerte más consciente de cómo utilizar los conceptos de jerarquía visual para controlar la prominencia de los objetos en una página y dirigir a los espectadores en la dirección que deseas. Espero haber logrado que usted aplique conscientemente una jerarquía clara e intencional en cada elemento que diseñe.
Use los comentarios a continuación para decirnos qué pensó sobre el artículo y si alguna vez ha pensado mucho en su uso de las jerarquías de información visual.