Primero fueron las tablillas de piedra, los rollos de papiro y el papel. Luego llegaron las pantallas de computadora y las tabletas electrónicas. A medida que evoluciona la tecnología para mostrar una página, el trabajo del diseñador sigue siendo organizar el contenido con claridad. Pero, ¿cuál es la mejor manera? En definitiva , jerarquía visual.
He aquí una 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 define la importancia de un elemento en la jerarquía de un diseño, comunicando a los ojos del espectador en qué enfocarse y en qué orden.
Es una pregunta 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 cortos, los diseñadores desarrollaron 6 principios para guiar los ojos 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 una experiencia de lectura positiva para el usuario final.
1. Patrones de lectura
Todas las culturas leen de arriba hacia abajo y la mayoría de las culturas leen de izquierda a derecha. Pero si bien ese conocimiento es importante para el diseño de páginas, los diseñadores saben que la tarea es mucho más compleja.
Estudios recientes han demostrado que las personas primero escanean una página para tener una idea de si están interesados, antes de comprometerse a leerla. Los patrones de escaneo tienden a tomar una de dos formas, «F» y «Z», y puede aprovechar esto en su diseño.
F-Patrones
Los patrones F se aplican a páginas tradicionales con mucho texto, como artículos o publicaciones de blog. Un lector escanea el lado izquierdo de la página, buscando palabras clave interesantes en encabezados alineados a la izquierda o oraciones temáticas iniciales, luego se detiene y lee (hacia la derecha) cuando llega a algo interesante. El resultado se parece a una F (o E, o algo con más barras horizontales, pero el término «F» se ha quedado).
¿Cómo puedes utilizar esto? Alinee su información importante a la izquierda y utilice títulos breves y en negrita, viñetas y otros elementos que llamen la atención para dividir los bloques de párrafos.
Z-patrones
Los 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 de bloque. El ojo de un lector primero escanea la parte superior de la página, donde es probable que se encuentre información importante, luego dispara hacia la esquina opuesta en diagonal y hace lo mismo en la parte inferior de la página.
Los diseñadores web comúnmente construyen 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 en diagonal de conexión.
En el diseño a continuación para la conferencia Build 2010 , los elementos importantes incluyen el logotipo (arriba a la izquierda), el botón «regístrese ahora» (arriba a la derecha) y la lista de oradores (en la parte inferior), todos los cuales están ubicados estratégicamente en los puntos clave de el patrón Z.
2. El tamaño importa
_
Este es bastante simple: la gente lee cosas más grandes primero. Si su atención se dirige a la «actuación» antes de «descomponerse» en el anuncio a continuación para el teatro Young Vic , entonces debe ponerse en contacto con un psicólogo perceptivo de inmediato: probablemente pueda ganar un buen dinero sometiéndose a pruebas como una anomalía rara.
Lo interesante es que esta tendencia es lo suficientemente fuerte como para anular la regla de arriba hacia abajo. En la imagen de arriba, «craquear» 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 a continuación del Informe anual: Campaña de derechos humanos 2012 (diseñado por Column Five Media ), leemos la letra grande «Lucha por la igualdad en la campaña electoral» antes del texto directamente arriba, «Elecciones 2012».
“Elecciones 2012” es el orden de información de más alto nivel: nos dice el tema general al que pertenece la siguiente información. Pero el diseñador decidió que el encabezado del artículo era más interesante para los lectores y lo dimensionó para que se leyera primero.
3. Espacio y textura
Otra forma de llamar la atención es darle al contenido un amplio espacio para respirar . Si queda un espacio negativo sustancial alrededor de un botón, o si las líneas en un bloque de texto están muy rastreadas, estos elementos serán más visibles para los lectores.
Como puede ver en la imagen a continuación (parte del sitio web de DrawtoClick ), el espaciado puede ser una alternativa elegante o una adición al uso del tamaño. Aquí, el punto de venta, “Notre agence vous accompagne…”, está en una fuente muy pequeña, pero está rodeada por un exceso de espacio en blanco que señala su importancia. A continuación, las frases «Le Compendre», «Le Réaliser» y «Le Partager» reciben un énfasis adicional al estar separadas del espacio circundante.
Cuando las personas hablan de “textura” con respecto a la jerarquía visual, no se refieren a efectos de textura pictórica. Más bien, este tipo de «textura» se refiere a la disposición o patrón general del espacio, el texto y otros detalles en una página. Este ejemplo de Bright Pink ilustra muy bien el concepto:
En la primera imagen, la palabra «Deportes» está más arriba en la jerarquía que «bádminton» debido a que es más alta, más grande y más audaz. La segunda imagen, las dos palabras son casi equivalentes, gracias a un rectángulo negro que resalta «bádminton» y lo coloca en su propio espacio.
En la tercera imagen, un garabato de fondo interrumpe el espacio de «Deportes» pero no el de «bádminton» y, en consecuencia, da como resultado una inversión en la que «bádminton» es el más alto en la jerarquía. Tal progresión es difícil de predecir, por lo que los diseñadores a menudo lo atribuyen a un sentido holístico de «textura».
4. Peso tipográfico y emparejamiento
La selección del tipo de letra es fundamental para establecer la jerarquía visual. Entre los atributos más importantes de un tipo de letra 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.
Tenga en cuenta cómo el tipo de letra afecta el orden jerárquico de las palabras en el siguiente diseño web para The Tea Factory : «los tés perfectos para mantenerlo caliente» es el punto focal, pero las diferencias en el peso del tipo y la cursiva, además de la ubicación de las palabras, producen un experiencia de lectura más dinámica, menos lineal. «Vea nuestra selección», la llamada a la acción, se enfatiza con más fuerza que el texto anterior debido al tamaño y al espacio.
En algunos casos, el objetivo es presentar una variedad de información como igualmente urgente. Establecer todo en el mismo tamaño y peso lograría la equivalencia, pero también lo haría monótono. Diferenciar los tipos de letra es una forma de evitar esto, como en la portada de la revista Trendi a continuación .
Aquí, los cinco teasers alrededor de la periferia de la página son todos iguales en la jerarquía, pero logran variedad al alternar entre dos tipografías bien emparejadas: una serif de peso medio y la otra sans serif liviana pero alta.
5. Color y tinte
Aquí hay otra obviedad: los colores brillantes se destacan de los colores apagados o la escala de grises , 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 de Where They At contrasta el resaltador amarillo y la iluminación de color contra una cuadrícula en blanco y negro con un efecto llamativo:
El sitio web de Guggenheim utiliza el color para acentuar información importante como la elección de la ubicación, la lista de exposiciones actualmente en exhibición y los enlaces a exposiciones especiales.
El sitio web del Museo Whitney, por otro lado, establece una jerarquía dentro de un solo tipo de letra, peso y tono (negro) mediante el uso de tinte (que se refiere a la adición de blanco a un tono base, haciéndolo más claro). «Cory Arcangel sobre la cultura pop» está claramente por debajo de «Novedades sobre las historias de Whitney» en la jerarquía visual, no solo porque se coloca más abajo sino porque su tinte es más claro, lo que lo hace menos llamativo a la vista contra el fondo blanco.
El color es de particular importancia en el diseño de aplicaciones móviles, donde un tamaño de pantalla pequeño limita su capacidad para utilizar otras estrategias como la diferenciación de tamaño y el espacio amplio. En la aplicación de Grainger Industrial Supply , el botón «continuar con el pago» es de color rojo, lo que hace que se destaque de cualquier página donde aparezca. La barra «Restringir los resultados de la búsqueda», por el contrario, es gris, lo que la hace más o menos equivalente en la jerarquía con otros elementos como la barra de búsqueda y los enlaces de productos.
6. Dirección
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, surge una nueva forma de establecer la jerarquía: romper la cuadrícula.
El texto que se organiza en una curva o en diagonal se destacará automáticamente contra el texto en cuadrícula que lo rodea, tomando el centro del escenario. Esta ha sido durante mucho tiempo una estrategia eficaz en anuncios como el siguiente cartel de la parada de autobús de Frost Design .
