El diseño web no sólo es crear algo bonito, sino algo bien pensado para que el usuario no tenga problemas al navegar en una página o bien en una app, pero para ello es básico manejar la jerarquía visual.

Notas relacionadas
Los 10 mandamientos de la tipografía web
Diseño web: 5 cosas que debes aprender de los videojuegos
Las 7 pesadillas de los diseñadores


La jerarquía visual es realmente un concepto simple en el que intervienen —y se organizan— diversos elementos como el color, contraste, textura, la forma, posición, la orientación y tamaño. Todo ello para crear en los usuarios una sensación de importancia visual, según explica Ryan Heath en su blog Formed Function.

Para comprenderlo este concepto se puede mirar este esquema, en el aparece una serie de círculos con igual tamaño y forma, pero si ese mismo esquema se repite con un cambio de color, entonces la mirada se irá al círculo sombreado, esto es gracias a la jerarquía visual.

ejemplo 1

ejemplo 2

Heath ejemplifica más la jerarquía visual con una serie de ejemplos en las que ha hecho borrosas las imágenes con el fin de hacer más notorios de la jerarquía visual.
El primer ejemplo muestra lo que no se debe hacer, pues guía mal al usuario.

ejemplo 3

En tanto que el segundo ejemplo guía mejor al usuario a través de la página.

ejemplo 4