Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Una introducción a la jerarquía

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
Reducing the Bloat
Building Content Hierarchy Through Design

Spanish (Español) translation by Benjamín Porras (you can also view the original English article)

Asegurarte de que tus diseños presentan una clara jerarquía es muy importante, y algo a lo que debes aspirar en cada uno de tus diseños. Definitivamente hay un arte en eso, uno que se relaciona mucho con tu planificación de contenido y la etapa de estrategia.


¿Qué es la jerarquía?

Una jerarquía puede ser descrita como:

Un sistema u organización en el que las personas o grupos se clasifican unos sobre otros de acuerdo a su estatus o autoridad.

Y cuando traducimos esto a cómo funciona la jerarquía en el diseño, podemos adaptarlo un poco a algo como:

Un sistema u organización en el que los elementos de nuestro diseño están clasificados uno sobre otro según su estatus o importancia.

Al establecer una jerarquía, pretendemos mostrar todos los diferentes elementos de nuestro diseño de manera eficaz, según su importancia y el nivel de atención que hay que prestarles.

La jerarquía también tiene que ver con la narración de historias; tiene que ver con el viaje de nuestro usuario a través del sitio web y el flujo de usuarios que creamos. Podemos aprovechar una fuerte jerarquía cuando intentamos que nuestros usuarios vayan a donde queremos que vayan.

La jerarquía también se relaciona no solo con la disposición visual de nuestros elementos, sino también con la estructura del sitio, donde nos basamos en la planificación que hicimos en nuestras etapas de contenido. Es en este punto en el que podemos observar la jerarquía de contenido, cómo el contenido debe ser dividido y administrado y eso nos ayuda a pasar a nuestra jerarquía y estructura visual, donde observamos las principales disposiciones, cuadrículas, tipografía e imágenes como iconos, botones y fotos.

barley-1barley-1barley-1
In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.
En el diseño de Barley, se usa muy bien la jerarquía, usando tanto el contenido como las imágenes para transmitir sus mensajes.

¿Por qué es tan importante la jerarquía?

La jerarquía es importante porque ayuda a dar orden a un diseño y a asegurar que se proyecte un mensaje de marca más fuerte y unificado a los usuarios.

La jerarquía también nos ayuda a crear áreas que son visualmente interesantes para nuestros usuarios, a su vez nos ayuda a dirigir a los usuarios en su viaje por el sitio web. Cuando se usa de esta manera, tener una buena jerarquía visual en su lugar puede ayudar a resaltar las áreas en las que se quiere llamar la atención. Al crear una fuerte jerarquía y estructura visual, también estás enfatizando adecuadamente las áreas importantes e ilustrando por qué son importantes.

Cuando se usa correctamente, una jerarquía clara ayuda a establecer un patrón adecuado de interacción, ayudando a tu viaje de usuario. También puede facilitar a los usuarios la toma de decisiones y la comprensión adecuada de cómo deben interactuar con tu sitio web.

zendesk-1zendesk-1zendesk-1
The Zendesk uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.The Zendesk uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.The Zendesk uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.
El Zendesk utiliza mucho espacio, así como un buen uso de diferentes estilos de tipografía e imágenes, para ayudar a guiar al usuario a través de sus características clave.

Herramientas para establecer la jerarquía

Hay muchas herramientas y técnicas diferentes a tu disposición para establecer una buena jerarquía visual en tu diseño:

Todos ellos serán mencionados con mayor detalle, junto con la forma de utilizarlos correctamente, en los próximos artículos de jerarquía donde nos centraremos tanto en el contenido como en las estructuras jerárquicas visuales.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.