Principios de jerarquía visual para diseñadores

Los principios de jerarquía visual para diseñadores son un concepto de diseño que se utiliza para guiar cómo se mueven los ojos del espectador a través de un diseño y determinar qué elementos son más importantes o visualmente atractivos.

Al principio había tablillas de piedra, rollos de papiro y papel. Luego vinieron las pantallas de ordenador y las tabletas electrónicas. A medida que evoluciona la tecnología de visualización de páginas, los diseñadores tienen una forma clara de organizar el contenido. ¿Pero cuál es mejor? En fin , jerarquía visual.

Aquí está la definición de jerarquía visual: La jerarquía visual es la disposición elementos gráficos en diseño en orden de importancia de cada elemento. El peso visual determina importancia del elemento en la jerarquía del diseño, diciéndole al espectador en qué enfocarse y en qué orden.

Recursos para diseñadores. 50 gratis

Esto se está convirtiendo en un tema cada vez más importante a medida que los marcos responsivos obligan a los diseñadores a pensar en muchas páginas diferentes a la vez. Ante un texto denso y períodos de atención breves, los diseñadores desarrollaron seis principios para dirigir la atención del lector hacia la información más importante.

Estos 6 principios de jerarquía visual lo ayudarán a diseñar todo, desde folletos hasta aplicaciones, garantizando que el usuario final tenga una experiencia de lectura positiva para los diseñadores.

Todas las culturas se leen de arriba a abajo y la mayoría de las culturas se leen de izquierda a derecha. Pero aunque este conocimiento es importante para diseño de página, los diseñadores saben que la tarea es mucho más difícil.

Estudios recientes han demostrado que las personas primero escanean una página para ver si están interesadas en ella antes de leerla. Los patrones de escaneo tienden a tomar una de dos formas, "F" y "Z", y puedes aprovechar esto en tu diseño.

Patrones F. Principios de la jerarquía visual

Plantillas F se aplican a páginas de texto tradicionales, como artículos o publicaciones de blogs. El lector escanea el lado izquierdo. página busca palabras clave interesantes en títulos alineados a la izquierda o en oraciones temáticas iniciales, luego se detiene y lee (hacia la derecha) cuando encuentra algo interesante. El resultado parece una F (o una E, o algo con aún más franjas horizontales; pero el término "F" se quedó).

Como puedes usar esto? Alinee la información importante a la izquierda y utilice títulos breves y en negrita, viñetas y otros elementos similares que llamen la atención para dividir los bloques de párrafos.

Modelo Z. Principios de la jerarquía visual

patrones Z se aplican a otros tipos de páginas, como anuncios o sitios web, donde la información no se presenta necesariamente en párrafos en bloque. El lector primero escanea la parte superior de la página, donde es probable que se encuentre información importante, luego pasa a la esquina opuesta en diagonal y hace lo mismo en la parte inferior de la página.

Los diseñadores web suelen diseñar sus páginas para que coincidan explícitamente con este comportamiento, colocando la información más importante en las esquinas y orientando otra información importante a lo largo de las barras superior e inferior y conectando la diagonal.

En el siguiente En el diseño de la asamblea de la conferencia de 2010, elementos importantes son el logo (arriba a la izquierda), un botón de "registrarse ahora" (arriba a la derecha) y una lista de oradores (abajo), que están estratégicamente ubicados en bonitos lugares con forma de Z.

2. El tamaño importa. Principios de la jerarquía visual
_

Es bastante simple: la gente lee primero las cosas importantes. Si sus ojos se sienten atraídos por "la actuación" antes de "dividirse" en el anuncio a continuación del Young Vic, debe comunicarse con un psicólogo perceptivo de inmediato: probablemente podría ganar mucho dinero haciéndose la prueba como una anomalía poco común.

Lo interesante es que esta tendencia es en realidad lo suficientemente fuerte como para rechazar la regla de arriba hacia abajo. En la imagen de arriba, "hack" anula "tiempo para actuar" porque es más grande y está a la izquierda (por lo que la regla de izquierda a derecha ayuda).

Pero en la página siguiente del Informe Anual: Campaña de Derechos Humanos 2012 (desarrollado en la quinta columna de medios) leemos en grande tipo de letra “La lucha por la igualdad en la campaña electoral” antes del texto directamente encima “Elección 2012”. Principios de la jerarquía visual

"Elección 2012" es el orden de información de más alto nivel: nos dice el tema general al que se relaciona la información a continuación. Pero el diseñador decidió que el título del artículo era más interesante para los lectores y, por lo tanto, lo calificó para que se leyera primero.

3. Espacio y textura. Principios de la jerarquía visual

Otra forma de llamar la atención es dar al contenido suficiente espacio para respirar . Si hay un espacio negativo significativo alrededor del botón o si las líneas del bloque de texto se siguen ampliamente, estos elementos serán más fácilmente visibles para los lectores.

Como puede ver en la imagen a continuación (parte del sitio de DrawtoClick), el espaciado puede ser una alternativa elegante o un complemento al uso del tamaño. Aquí, el argumento de venta, “Notre agence vouscompagne...”, está escrito en letra muy pequeña, pero está rodeado por una gran cantidad de espacios en blanco, lo que indica su importancia. Debajo, las frases “Le Compendre”, “Le Réaliser” y “Le Partager” reciben un énfasis adicional, alejándose del espacio circundante.

Cuando la gente habla de "textura" en relación con la jerarquía visual, no se refiere a los efectos gráficos de la textura. Más bien, este tipo de "textura" se refiere a la disposición o estructura general del espacio, el texto y otros detalles de una página. Este ejemplo de Bright Pink ilustra bien el concepto:

En la primera imagen, la palabra "Deporte" está más arriba en la jerarquía que "bádminton" porque es más alta, más grande y más audaz. En la imagen 2, las dos palabras son aproximadamente equivalentes, gracias al rectángulo negro que resalta "bádminton" y lo coloca en su propio espacio.

En la tercera imagen, el garabato de fondo interrumpe el espacio "Deportes" pero no el espacio "bádminton", y por lo tanto da como resultado una inversión donde "bádminton" es el más alto en la jerarquía. Este desarrollo es difícil de predecir, por lo que los diseñadores a menudo lo asocian con un sentido holístico de "textura".

4. Peso y emparejamiento de fuentes. Principios de la jerarquía visual

La selección de fuentes es fundamental para establecer una jerarquía visual. Entre los atributos más importantes de una fuente se encuentran el peso, el ancho de los trazos que componen sus letras y el estilo, como serif y sans serif. Otras modificaciones, como la cursiva, también pueden influir.

Date cuenta cómo auriculares influye en el orden de la jerarquía de palabras en el diseño web siguiente para The Tea Factory: "tés perfectos para ayudarte a calentar" es el nombre del juego, pero las diferencias en el peso de la fuente y las cursivas, además de la ubicación de las palabras, crean una imagen más experiencia de lectura dinámica y menos lineal. "://azbyka.com.ua/foto/tea-factory.jpg" />

En algunos casos, el objetivo es presentar una variedad de información como igualmente urgente. Poner a todos al mismo tamaño y peso garantizará la equivalencia, pero también hará que parezca monótono. La diferenciación de fuentes es una forma de evitar esto, como la portada de la revista Trendi a continuación. Principios de la jerarquía visual

Preparación de un folleto para imprimir.

Aquí, los cinco avances alrededor de la periferia de la página son iguales en jerarquía, pero logran variedad cambiando dos fuentes bien emparejadas: una con serifa de peso medio y la otra con una sans-serif liviana pero alta.

5. Color y matiz. 

Aquí hay otra obviedad: los colores brillantes se destacan de los colores apagados o los tonos de gris, mientras que los tonos más claros parecen más "distantes" y, por lo tanto, caen más abajo en la jerarquía que los tonos más ricos y oscuros. El sitio web Where Are They contrasta la luz brillante y la retroiluminación de colores con un efecto de cuadrícula en blanco y negro para lograr el efecto de luminosidad:

El sitio web del Guggenheim utiliza el color para resaltar información importante como la selección de la ubicación, una lista de las exposiciones que se están viendo actualmente y enlaces a exposiciones especiales. Principios de la jerarquía visual

La mejor fuente para embalaje personalizado

El sitio web del Museo Whitney, por otro lado, establece una jerarquía dentro de una fuente, peso y tono (negro) usando tinte (lo que significa agregar blanco al tono base, haciéndolo más claro). “Cory Archangel on Pop Culture” está claramente debajo de “New on Whitney Stories” en la jerarquía visual, no solo porque es más bajo, sino también porque su tono es más claro, lo que lo hace menos llamativo contra el fondo blanco. Principios de la jerarquía visual

El color tiene un significado especial en diseño móvil aplicaciones donde el tamaño de pantalla pequeño limita su capacidad para utilizar otras estrategias, como la variación de tamaño y el espaciado amplio. En la aplicación Grainger Industrial Supply, el botón "Continuar con el pago" está coloreado en rojo, lo que lo hace resaltar en cualquier página donde aparezca. El panel Resultados de búsqueda restringidos, por el contrario, es gris, lo que lo hace aproximadamente equivalente en jerarquía a otros elementos como la barra de búsqueda y los enlaces de productos.

6. Dirección para diseñadores.

Los diseños de página generalmente están diseñados para seguir una cuadrícula de líneas verticales y horizontales, tanto por convención como porque es el formato más legible. En un sistema así, existe una nueva forma de establecer jerarquía: romper la red.

El texto que se coloca a lo largo de una curva o diagonal se destaca automáticamente contra el texto bloqueado en la cuadrícula circundante, ocupando un lugar central. Esta ha sido durante mucho tiempo una estrategia eficaz en publicidad, como el cartel de parada de autobús de Frost Design.