Jerarquía

Después de crear un punto de enfoque para captar la atención de tu usuario, el resto del contenido se tiene que organizar de manera que el usuario pueda fácilmente navegar tu página. Aquí es donde entra la jerarquía para crear una secuencia clara que guíe al usuario por el resto de la composición. ¿Sus ojos deberán de ir hacía abajo? ¿Hacía la izquierda? ¿De una sección a otra?

Cómo el diseño fluye del punto de enfoque hacia el resto de la composición es la clave, en tal sentido la mayoría de los diseños van a mejorar si tienen alguna estructura u organización general. En vez de simplemente ir colocando el contenido en donde haya espacio, hay que ser considerados y colocar las cosas con intención para lograr una composición más utilizable y visualmente atractivo. Algunas técnicas comunes son las siguientes:

Usar un grid

Alinear tu diseño con un grid es una forma fácil y efectiva de mantener todo organizado. Las posibilidades para layouts siguiendo con grid son casi infinitas. La página abajo usa un grid para darle una estructura a la navegación y contenido y así organizar y separar elementos. Resulta en una composición limpia y ordenada que establece una forma clara de explorar la página y encontrar lo que necesitas.

⁠

Usar la “regla de los tercios”

La regla de los tercios es una técnica de composición clásica de artes visuales y fotografía. Cuando el punto de enfoque está justo en el centro de una composición, el resultado es aburrido y predecible. Para crear una composición más dinámica e interesante, puedes desplazar el punto de enfoque hacia un lado. El grid que usa la regla de los tercios (abajo) es un atajo para crear una composición equilibrada pero dinámica. Divide un espacio en tres partes iguales horizontal y verticalmente con 6 líneas. Los 4 puntos en los que esas líneas se cruzan son buenos lugares para poner tus puntos de enfoque.

El anuncio abajo pone el punto de enfoque (el logo y nombre de la marca que promueve) en el primer tercio vertical de la composición. También noten cómo las carteras crean la forma de la bandera británica (el anuncio es para una empresa inglesa de productos de piel y también apuntan directamente hacia la marca. Esta es una técnica componente que se llama líneas de dirección.

⁠

Considera la simetría

La simetría es uno de los factores más importantes para lograr equilibrio en un diseño. Un diseño simétrico (aunque no sea exacto) mejora el equilibrio visual de un layout. El diseño abajo tiene simetría tanto vertical como horizontal entonces aunque sea de un diseño muy recargado, mantiene cierto equilibrio.

⁠

Deja algo de espacio vacío

Las áreas blancas de una página no es espacio desaprovechado — es más bien esencial para una composición equilibrada. Dejar espacio vacío suficiente es importante para evitar que tu diseño se vuelva desordenado. También ayuda a que el ojo tenga dónde descansar entre elementos o secciones de contenido. Esto es súper importante para que una composición con mucho contenido no abruma al usuario.

Por ejemplo, los espacios vacíos entre el contenido de esta página ayuda a que tu ojo vaya de una cosa a la siguiente. Fluye y mantiene un estilo limpio y moderno.

⁠

Líneas de dirección: crear movimiento para guiar al ojo

Líneas de dirección pueden ser literales o implícitas que llevan al ojo de tu usuario a donde quieres que miren — por lo general a un punto de enfoque pero a veces simplemente de una sección o elemento a otro. Líneas de dirección pueden variar en forma:

Líneas diagonales

Diagonales generan movimiento o insinúan dirección en un diseño, muchas veces de arriba a abajo o de izquierda a derecha, como en la lectura.

Otra técnica común es usar dos líneas diagonales que vienen de direcciones opuestas para enfocar el ojo del usuario en un punto singular. Si alguna vez has tomado una clase de arte, un ejercicio común es dibujar una calle que desaparece yendo hacía el horizonte: dos líneas diagonales provenientes de direcciones opuestas que empiezan ancho pero se va haciendo más estrecho hasta que se unen en algún punto del horizonte. Este punto se conoce como el punto de convergencia. Es un ejemplo muy básico de líneas diagonales en acción y es una de las formas más fáciles de crear profundidad y perspectiva en una composición.

La página abajo usa este concepto para organizar su galería de productos. Nota cómo las líneas diagonales formadas por la forma amarilla en el fondo crean una sensación de profundidad en el diseño.

⁠

En el siguiente ejemplo, noten cómo la ilustración principal en la portada del libro crea una línea diagonal que apunta hacia el título. Después tu ojo puede seguir el mismo camino hacía los subtítulos y el autor. Es una composición inteligente y eficaz, además de establecer visualmente el tema del libro.

⁠

Por otro lado, el movimiento diagonal en este ejemplo no se guía con una línea en sí, pero implícito por la colocación y la superposición de cada elemento. Resulta en una composición más interesante visualmente que un diseño basado en el grid tradicional.

⁠

Ayúdanos a seguir mejorando nuestro contenido🤩

Puedes dejarnos tu comentarios

aquí⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.