Principios de jerarquía visual para diseñadores.

Primero hubo tablillas de piedra, rollos de papiro y papel. Luego llegaron las pantallas de computadora y las tabletas electrónicas. A medida que evoluciona la tecnología de visualización de páginas, los diseñadores deben organizar claramente el contenido. ¿Pero cuál es mejor? Hablando brevemente , jerarquía visual.

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

Temas de WordPress

Esto se está convirtiendo en un tema cada vez más importante, ya que los marcos receptivos 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 6 principios para dirigir la mirada 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, asegurando que el usuario final tenga una experiencia de lectura positiva para los diseñadores.

Principios de jerarquía visual

1. Plantillas de lectura. Para 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 si bien este conocimiento es importante para el diseño de páginas, 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 les interesa antes de leerla. Los patrones de escaneo tienden a tomar una de dos formas, "F" y "Z", y puede aprovechar esto en su diseño.

Patrones F. Principios de jerarquía visual

F-patrones se aplican a las páginas de texto tradicionales, como artículos o publicaciones de blog. El lector hojea el lado izquierdo de la página en busca de palabras clave interesantes en encabezados u oraciones temáticas alineados a la izquierda, luego se detiene y lee (derecha) cuando encuentra algo interesante. El resultado parece una F (o E, o algo con más rayas horizontales, pero el término "F" está atascado).

plantillas de escaneo de página de jerarquía visual

¿Cómo puedes utilizarlo? Alinee la información importante a la izquierda y use encabezados breves y en negrita, viñetas y otros elementos llamativos similares para dividir los bloques de párrafo.

modelo Z. Principios de jerarquía visual

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

Lea también:  Interacción en red. 10 secretos para que sea sencillo, divertido y divertido

Principios de la jerarquía visual del patrón Z


 

Los diseñadores web suelen diseñar sus páginas para ajustarse explícitamente a 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 la construcción de la conferencia de 2010 que se muestra a continuación, los elementos importantes son el logotipo (arriba a la izquierda), el botón "regístrese ahora" (arriba a la derecha) y la lista de oradores (abajo), que están estratégicamente ubicados en bonitas ubicaciones en forma de Z.

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

Es bastante simple: la gente lee primero las cosas importantes. Si le llama la atención la "actuación" antes de ser "astillado" en el anuncio del teatro Young Vic a continuación, debe comunicarse con un psicólogo perceptivo de inmediato: probablemente pueda ganar mucho dinero haciéndose la prueba como una anomalía rara.

usando el tamaño de fuente para la jerarquía visual

Curiosamente, esta tendencia es lo suficientemente fuerte como para anular la regla de arriba hacia abajo. En la imagen de arriba, "hack" anula "time to act" porque es más grande y está a la izquierda (por lo que la regla de izquierda a derecha ayuda).

Pero en la siguiente página del Informe Anual: Campaña de Derechos Humanos 2012 (redactado en Media Column Five), leemos en letra grande "Lucha por la igualdad en la campaña electoral" antes del texto justo encima "Elecciones 2012". Principios de jerarquía visual

Principios de jerarquía visual


 

Elección 2012 es el orden de información al más alto nivel: nos dice el tema general al que se refiere la siguiente informació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 clasificó para que se leyera primero.

3. Espacio y textura. Principios de 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 en el bloque de texto se siguen ampliamente, estos elementos serán más visibles para los lectores.

Como puede ver en la imagen a continuación (parte del sitio DrawtoClick del sitio web), el espaciado puede ser una alternativa elegante o una adición al uso del tamaño. Aquí, el punto de venta, "Notre agency vouscompagne..." está escrito en letra muy pequeña, pero está rodeado por un exceso de espacio en blanco, lo que indica su importancia. Debajo, las frases "Le Compendre", "Le Réaliser" y "Le Partager" reciben un énfasis adicional, al estar aisladas del espacio circundante.

Lea también:  Liderazgo de Ventas – Habilidades de un Líder Efectivo

ejemplo de jerarquía visual

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:

Principios de Jerarquía Visual 2

En la primera imagen, la palabra "Deporte" está más arriba en la jerarquía que "bádminton" porque es más alto, más grande y más audaz. En la segunda imagen, las dos palabras son más o menos 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 "bádminton" y, por lo tanto, conduce a una inversión en la que "bádminton" es el más alto en la jerarquía. Este desarrollo es difícil de predecir, razón por la cual los diseñadores a menudo lo asocian con un sentido holístico de "textura".

4. Peso de fuente y emparejamiento. Principios de jerarquía visual
_

La elección de la fuente es fundamental para establecer la jerarquía visual. Entre los atributos tipográficos más importantes 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 desempeñar un papel.

Observe cómo el tipo de letra afecta el orden de la jerarquía de las palabras en el diseño web de The Tea Factory a continuación: "los tés perfectos para mantenerlo caliente" es lo principal, pero las diferencias en el peso de la fuente y la cursiva, además de la ubicación de las palabras, crean más experiencia de lectura dinámica, menos lineal. "Mira nuestra selección", la llamada a la acción se destaca más que el texto de arriba debido al tamaño y los espacios en blanco.

En algunos casos, el objetivo es presentar una variedad de información como igualmente urgente. Poner a todos en la misma talla y peso asegurará la equivalencia, pero también la hará uniforme. La diferenciación de fuentes es una forma de evitar esto, como en la portada de la revista Trendi a continuación. Principios de jerarquía visual

Preparación de un folleto para la impresión.

Aquí, los cinco teasers alrededor de la periferia de la página son jerárquicamente iguales pero logran diversidad al intercambiar dos fuentes bien emparejadas: una serif de peso medio y la otra sans-serif liviana pero alta.

Principios de jerarquía visual

5. Color y sombra. Principios de jerarquía visual


_

Aquí hay otra tarea fácil: los colores brillantes se destacan de los colores apagados o 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 más ricos y oscuros. El sitio web Where Are Them contrasta la luz brillante y los reflejos de colores con una cuadrícula en blanco y negro contra un efecto de brillo:

Lea también:  Margen de ventas. Lo que es ? y como calcularlo

color utilizado para la jerarquía visual


El sitio web de Guggenheim utiliza colores para enfatizar información importante, como la selección de ubicaciones, una lista de exposiciones que se están viendo actualmente y enlaces a exposiciones especiales. Principios de jerarquía visual

La mejor fuente para empaques personalizados.

Museo Guggenheim

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

Museo Whitney de Arte Americano


 

El color es de particular importancia en el diseño de aplicaciones móviles, donde el tamaño pequeño de la pantalla limita su capacidad para utilizar otras estrategias, como diferencias de tamaño y espacios amplios. En la aplicación Grainger Industrial Supply, el botón Proceder to Checkout es de color rojo, lo que hace que se destaque en cualquier página donde aparezca. La barra de búsqueda estrecha, por el contrario, está atenuada, lo que la hace más o menos equivalente en jerarquía a otros elementos, como la barra de búsqueda y los enlaces de productos.

Diseño de aplicaciones para los principios de la jerarquía visual de Grainger

Diseño de aplicaciones para Grainger


 

6. Dirección para diseñadores. Principios de jerarquía visual
_

Los diseños de página generalmente se diseñan de acuerdo con una cuadrícula de líneas verticales y horizontales, tanto por convención como porque este es el formato más legible. En tal sistema, hay una nueva forma de establecer la jerarquía: romper la cuadrícula.

El texto que es curvo o diagonal se destaca automáticamente del texto circundante bloqueado por la cuadrícula, tomando el centro del escenario. Esta ha sido una estrategia publicitaria efectiva durante mucho tiempo, como el cartel de la parada de autobús de Frost Design.