Fundamentales para ordenar tu información y no marear al usuario.
Texto Original en Inglés: http://blog.visme.co/visual-hierarchy/
¿Qué hace a un diseño realmente bueno?
Incluso los principiantes o los no-diseñadores pueden crear una composición efectiva si saben como priorizar el contenido que van a mostrar. ¿Cuál es el elemento más importante de tu diseño?, ¿Qué queres que tu audiencia note en primer, segundo y tercer lugar?…
La jerarquía visual es un método de organizar los elementos de un diseño en orden de relevancia. En otras palabras,
son principios que influyen en el orden en que
vamos a «leer» aquello que estamos viendo.
Estas reglas de oro nos ayudan a componer un diseño estéticamente placentero y atraer la atención de manera correcta y efectiva.
utilizar algunos principios de jerarquía puede ayudar incluso a los que no son diseñadores a crear presentaciones visuales eficientes y efectivas. Mientras que el numero preciso de principios varía según la fuente, aquí decidimos dividirlos en 12 conceptos:
TAMAÑO Y ESCALA
El tamaño impacta en la visibilidad.
¿Cuanto más grande mejor, no? Mientras que este dicho clásico sigue siendo debatible, el tamaño es sin dudas la forma más efectiva de hacer énfasis visual de un elemento sobre otro. Es simple, elementos más grandes captarán más la atención (o captarán primero la atención) que los elementos más pequeños.
Es la razón por la que los encabezados en las noticias aparecen en fuentes más grandes, e incluso las notas principales tienen aun tamaños incluso más grandes que las notas secundarias. En cualquier diseño, los elementos más grandes (ya sea texto o imágenes) no solo van a ser mas notables, sino que además darán un mensaje más fuerte.
PERSPECTIVA
La perspectiva crea ilusión de profundidad.
Al utilizar este recurso, se puede crear la ilusión de profundidad (desde centímetros hasta kilómetros). Porque vemos ilusiones similares en la vida real, generalmente percibimos los objetos grandes como más cercanos respecto a los más pequeños y, por ende, llama nuestra atención primero que los otros objetos en la página.
Por ejemplo, la imagen de una ruta será más ancha en el pie de la misma e irá estrechandose a medida que se «aleja» mientras sube a lo largo de la imagen. Por lo mismo, un objeto próximo al espectador se percibirá más grande que el mismo objeto a la distancia. La perspectiva bien aplicada va a utilizar la escala y la proporción para comunicar de manera efectiva la noción de distancia.
COLOR Y CONTRASTE
Así como los elementos más grandes se perciben como más importantes que los elementos chicos, los colores brillantes usualmente atraen más la atención que los opacos. Por ejemplo, si una frase en un bloque de texto es resaltada con un color brillante, inmediatamente captará nuestra atención.
La combinación de colores en un diseño y cómo se combinan entre si se llama esquema de color o paleta cromática. La paleta de color puede crear unidad, armonía, ritmo y balance, pero también puede crear contraste y énfasis.
Un diseño que utiliza demasiados colores contrastantes puede parecer desorganizado e incoherente. Lo mismo puede suceder con un diseño que no respeta alguna teoría de color. Pero elegir la mejor paleta requiere mucho más que elegir de forma aleatoria una paleta monocromática, complementaria o triádica.
Colores similares pueden usarse para agrupar elementos relacionados en un diseño, y la elección de color puede incluso sugerir peso y distancia. Los colores más cálidos, como el rojo o amarillo, avanzan en un diseño predominantemente oscuro, mientras que colores más fríos, como el azul o el verde, se perciben más distantes en el mismo fondo. Ocurre lo opuesto en diseños con fondo claro: colores fríos aparecen más cercanos que los cálidos. Es como el ojo humano naturalmente los percibe.
Entonces, la elección de color puede afectar mucho la habilidad del espectador para identificar la figura del fondo en un diseño. Mezclar colores cálidos y fríos puede generar profundidad de la misma forma que la perspectiva.
La elección efectiva de colores no recae solo en su tono, sino también en su saturación y su luminiscencia respecto a los colores que lo rodean.
JERARQUÍA TIPOGRÁFICA
Piensen en una tabla de contenido, o la portada de un periódico. Generalmente estan compuestas por distintos tamaños tipográficos, con títulos y destacados en fuentes más grandes que el texto base que describe su contenido o detalles. Utilizar distintos tamaños no solo hace énfasis en lo importante, sino también organiza el diseño general.
La jerarquía tipográfica puede generarse no solo con el tamaño de la fuente, sino también controlando el peso y espaciado del mismo
(y una combinación de lo tres). Incluso si se usa la misma tipografía a lo largo de todo el texto, combinando tamaños y el peso visual, no solo capta la atención hacia dichos elementos destacados, sino que crea una composición visual general mucho más amena y fácil de leer que si todo el texto fuera monótono.
ESPACIADO
El espacio genera énfasis y movimiento.
REGLA DEL ESPACIO
Una de las desiciones más dificiles de tomar a veces es elegir ¿qué dejamos afuera de nuestro diseño?. De acuerdo con esta regla, un diseño estéticamente placentero requiere de una buena cantidad de espacio libre, usualmente nombrado como «espacio en blanco» (indistintamente del color de fondo de nuestro diseño).
Cuando acomodamos los elementos de nuestra composición, los diseñadores utilizamos el espacio libre alrededor de un elemento para captar la atención del espectador a este elemento (piensen en un objeto situado en una habitación vacía), o a veces para enviar un mensaje visual distinto, como la flecha en el logo de FedEx.
El uso estratégico del espacio en blanco puede manejar cómo el espectador se trasladará a lo largo de nuestro diseño (que parte mirará primero, segundo y tercero… ¿mirará primero la esquina superior derecha de la hoja o empezará por el centro?).
PATRONES DE ESCANEO DE LECTURA
Los lectores «escanean» visualmente la página de acuerdo a patrones observables de acuerdo al movimiento de sus ojos. Cuando los diseñadores quieren que la audiencia note elementos particulares en un cierto orden, frecuentemente utilizan estos patrones.
Las personas de habla hispana, por ejemplo, leemos de izquierda a derecha y de arriba hacia abajo. Por ende, frecuentemente usan ese patron de escaneo cuando se les presenta un texto. El árabe, por el contrario, se escribe de derecha a izquierda. Aquellos acostumbrados a leer de esa forma van a, naturalmente, buscar leer cualquier cosa en esa dirección.
A la hora de diseñar una página tenemos que tener en cuenta
estas cualidades de lectura de nuestro potenciar espectador.
EL PATRON F
El movimiento ocular más común en lectores hispanos e ingleses es este patrón. ¿Por qué? porque es la forma en la que leemos un libro, una carta o una página web. Escaneamos la página de izquierda a derecha y repetimos este sentido en cada línea de arriba hacia abajo de la hoja.
Diseñar en un sentido y orientación distinta puede resultar molesto e incómodo si no se hace a conciencia.
PATRON Z
Los diseños que poseen una mayoría de imágenes que de texto suelen tener un patrón Z. Porque el cerebro procesa las imágenes mucho más rápido que los textos, los lectores escanean la página más rápidamente al mirar desde arriba de izquierda a derecha, y luego bajando en diagonal hacia el borde inferior izquierdo y de nuevo de izquierda a derecha.
Los diseñadores podemos enfatizar ciertos elementos de una
composición al ubicarlos a lo largo de este movimiento visual en «Z».
PROXIMIDAD
La proximidad insinúa relación.
Proximidad, o cómo los elementos se posicionan en relación a los otros, es uno de los elementos más básicos de la composición. Hablando simple, ubicar elementos relacionados de forma próxima sugiere a los lectores que están, precisamente, relacionados.
Piensen en una pantalla en blanco con cinco puntos en un extremo y uno solo aislado en el otro extremo. Nuestra primera impresión siempre será que los cinco de un extremo están agrupados y que el punto aislado es «algo diferente» a los demás.
Agrupar elementos puede enviar otro mensaje. Por ejemplo, ubicar
elementos en distintas partes de un mapa puede darle a los lectores una sensación de distancia. Por supuesto, esto también depende del tamaño y
la escala del mapa.
Al ubicar elementos a una cierta distancia, podemos generar nuevas lecturas de estos elementos, no solo como individuos sino como grupo. Piensen con qué frecuencia percibimos círculos y una linea como una «cara» en lugar de solo estos elementos por separado. La imagen sugerida gana más peso que sus partes independientes.
ESPACIO NEGATIVO
Así como elementos ubicados en proximidad sugiere una relación, incluir espacio en blanco puede destacar información de forma independiente.
El espacio negativo, vacío, no solo ayuda a la lectura al organizar la información en partes, sino que además hace foco en elementos independientes.
Presten atención a la imagen de arriba. En la primera los elementos se perciben por separado y no se aprovecha el espacio negativo. En el segundo se aprovecha el espacio negativo para generar una figura y una lectura mucho
más interesante.
Composiciones que carezcan de espacios negativos amplios pueden resultar en lecturas confusas, caóticas o abrumadoras.
En otras palabras, menos es más.
ALINEACIÓN
La alineación da dirección a la vista. La alineación es parte de la estructura a mediante la cual se ubican los elementos en el diseño. Determina la posición de los textos e imágenes de forma que no estén ubicados de forma
aleatoria en la página.
Muchos diseños visuales estan centrados o justificados, lo cual significa que estan ubicados a lo largo de la página de forma tal que compartan ambos márgenes derecho e izquierdo).
Si las palabras estuvieran puestas de forma aleatoria a lo largo de la hoja en cualquier dirección, sería confuso y caótico poder entenderlo.
En diseños con patrón de lectura F, los objetos están ubicados a la izquierda, mientras que en patrones Z se combina posiciones de izquierda, centro y derecha.
La posición de elementos a la derecha en diseños pensados a la izquierda, suelen implementarse para generar balance o compensación de peso visual.
DISEÑO IMPAR
Diseños con un numero impar de objetos llaman la atención.
La regla de los impares permite a los diseñadores hacer énfasis en ciertos elementos al ubicarlos en el centro de un grupo. Al posicionar un numero equitativo de elementos alrededor del objeto principal (el cual será el numero impar de la totalidad de elementos), el resultado apuntará a resaltar el objeto central.
Las personas se sienten más a gusto con las figuras o formas balanceadas. Una imagen des balanceada (como lo es un mosaico con una figura fuera de lugar, un libro dado vuelta en una biblioteca ordenada, etc) va a llamar nuestra atención, nos va a «molestar» y este efecto es el utilizado para generar atención.
REPETICIÓN
La repetición unifica la composición.
Así como el contraste enfatiza y atrae la atención a los elementos del diseño,
la repetición crea unidad, lo cual favorece el reconocimiento y la asimilación
de la pieza.
Piensen en la mayoría de los textos publicados. Las páginas están planteadas de forma tal que el texto base esta dispuesto con la misma tipografía, tamaño y variable, los títulos y destacados están todos dispuestos de la misma manera (en un tamaño mas grande y quizás en negrita o mayúsculas). Esta consistencia y repetición de formato a lo largo de todo el texto da la sensación de cohesión, y reconoce al todo como parte del mismo.
Para un diseño unificado, se suele repetir algunos elementos (ya sea lógica de color, formas, tamaño, etc) a lo largo de toda la publicación. Un estilo consistente ayuda a diferenciar la jerarquía visual de una pieza gráfica.
La repetición también puede aportar nuevos significados. ¿Cuantas veces ves textos subrayados en azul que se destacan en un texto? La suficiente cantidad de veces como para reconocer que se trata de links a otras páginas, ¿no?. Esta repetición anuncia dónde se puede clickear para acceder a más información.
LÍNEAS DIRECCIONADAS
Las líneas sugieren movimiento.
El movimiento es una de las formas más efectivas de atraer la atención, sobre todo cuando está implícita en un diseño estático. Las líneas son un recurso efectivo para direccionar hacia nuestro elemento de interés (por ejemplo,
una flecha) pero no es necesario que su intención sea literal para que
cumplan su función.
Usar líneas paralelas y líneas perpendiculares, en horizontal o vertical, líneas que converjan en un punto… Existen muchos recursos que pueden utilizarse para que un diseño nos diga de forma subliminal en dónde priorizar nuestra lectura.
Así como puntos en un plano dan la sensación de estática, una secuencia de puntos se transforman en una línea don dirección y orientación.
GRILLAS
Las grillas ayudan a organizar el diseño.
Los diseños más efectivos están compuestos a partir de algún tipo de grilla. La más típica es la grilla modular, la cual está compuesta de líneas verticales y horizontales.
Artistas, fotógrafos y diseñadores gráficos usan frecuentemente la regla de los tercios para mejorar el balance general de sus composiciones. La regla implica dividir mentalmente la imagen en nueve secciones.
Los elementos de importancia son ubicados sobre las líneas, haciendo énfasis en las cuatro intersecciones de líneas. Las composiciones ubicadas fuera del cuadrante central son entendidas como más estéticamente placenteras que aquellas que ubican su diseño en el centro de la imagen. Esta regla incentiva el uso de espacio negativo, la proximidad intencional de elementos y el alineamiento efectivo.
No solo es la grilla más común, sino que también es la que presenta mejor legibilidad. De todos modos, a veces la mejor forma de crear énfasis es rompiendo las reglas.
GRILLAS ALTERNATIVAS
En lugar de la clásica grilla de líneas perpendiculares horizontal-vertical, los diseñadores suelen elegir grillas diagonales para asegurar que su diseño destaque por sobre las otras composiciones y atraiga la atención.
ROMPIENDO LA GRILLA
Algunos diseñadores elegirán romper la grilla del todo, colocando de forma aleatoria los elementos para generar una composición visualmente más caótica y dinámica.
No se dejen engañar por el concepto de aleatoriedad. Colocar elementos de forma indiscriminada no va convertir su diseño en una obra de Pollock de forma mágica. Cuando se rompe la grilla, cada posición debe decidirse de forma consciente y de forma meticulosa ya que los elementos de jerarquía ya mencionados comenzarán a competir entre sí.
La jerarquía visual es una de las estrategias más efectivas a la hora de enfatizar elementos de un diseño y permitir una lectura clara y contundente de nuestro trabajo.
Los diseñadores deben elegir de forma profesional cuales elementos utilizar para que su diseño no caiga en una lectura o énfasis distinto al intencionado. Si todo se destaca, entonces nada se destaca.
¿Dudas que tu elección de jerarquía sea la correcta?
¡Entonces hacé la prueba!.
Mira tu diseño, página, composición de forma que no prestes atención a ningun punto en particular, entrecierra los ojos de forma que todo el diseño se convierta en una mancha borrosa. ¿cual es la forma o la posición que se destaca?.
¡Espero que estos lineamientos básicos hayan sido útiles!
Este post fue una traducción literal de la publicación original http://blog.visme.co/visual-hierarchy/ .
Cualquier duda o consulta pueden dejarla en los comentarios, ¡Los Leo!
GamingUI 
Leave a comment