La jerarquía visual supone la manera en la que la página web será leída.
Normalmente, el modo normal de ver documentos es de izquierda a derecha y de arriba hacia abajo.
Por eso las cosas de mayor importancia deben ponerse en la parte superior izquierda.
Sin embargo, cambiando elementos como el tamaño, el contraste o el color, la mirada del usuario se dirige primero a los elementos de mayor de tamaño, de más contraste o de color más llamativo.
Así, al estructurar los elementos en la página de forma jerárquica se dota de una importancia relativa a cada uno de ellos.
Lo primero que identifica el usuario es la estructura: los bloques de color y el espacio en blanco.
En cuanto va enfocando la mirada, identifica algunos gráficos y el texto de mayor tamaño.
Es importante que estos elementos que sirven de punto de entrada sean efectivos, atrayendo la atención del lector.
Cada vez más a menudo se utilizan animaciones como puntos de entrada.
Una jerarquía visual consistente a lo largo de las páginas del sitio web facilita la navegación.
Se suele desarrollar una página como plantilla para la realización de las diferentes páginas.
El foco visual, es, por tanto, la combinación de gráficos, tipografías y layout, elementos que trabajan junto para guiar el ojo del lector por la página web.
Permite identificar la estructura al instante y guía hacia la información más importante.
Los ingredientes para que una jerarquía visual funcione bien son:
- Pocos gráficos y de buena calidad. Los gráficos atraen la mirada rápidamente.
Tienen mucho peso visual, con lo cual, demasiados gráficos complican el camino visual.
Los gráficos introducidos en un bloque cuadrado o rectangular tienen menos posibilidades que los gráficos con lados asimétricos para ayudar en el foco visual. - El buen uso del alineado. Si la página incluye mucho texto, este va sobre una cuadricula, dividiendo la información en columnas.
Romper esta cuadriculas con algún elemento proporciona frescura y ayuda a conseguir una estructura visual fuerte, siempre que se haga con sutileza y elegancia.
Si tenemos más de dos columnas puede resultar interesante variar los anchos para ayudar a diferenciarlas. - Abundante espacio en blanco. El espacio en blanco es el espacio sin textos ni gráficos y juega un papel importante, pues crea la estructura, el contraste, y ayuda a dirigir la mirada entre los diferentes elementos.
El diseño web es una actividad multidisciplinar y en constante evolución, hemos pensado en este artículo para aquellos que se inician en este campo y que pueda ser de ayuda a la hora de empezar un proyecto nuevo de página web.