Guía de composición para el diseño web. Parte 2


En la entrada anterior te estuve comentando sobre los diferentes tipos de composición que utilizan los diseñadores web de hoy en día para crear interfaces bien logradas, y esta vez, siguiendo con el tema, vengo a hablarte sobre algunas relaciones compositivas que debes respetar y tener en cuenta.

¿Qué son las relaciones compositivas? Son las que se establecen entre los distintos elementos del diseño para, de conjunto, enviar el mensaje. Las más importantes son: “Unidad y variedad”, “Competencia y tensión”, “Complejidad y caos”, “Abstracción”. Veámoslas con detenimiento.

Unidad y variedad

Aunque parezcan opuestas, la unidad y la variedad van de la mano, pues la intención final es lograr una página que atraiga por su variedad y comunique de forma eficaz por la unidad expresiva de sus elementos. Por eso aquí la perfección está en el término medio, pues la falta de variedad puede provocar desinterés, pero su exceso lleva a la confusión; mientras que demasiada unidad provoca monotonía y muy poca causa dispersión.

¿Cómo solucionarlo? Explota la variedad en el color, el tono, el tamaño de los elementos, sus texturas y sus formas, pero no abuses de su cantidad y mantenlos a todos enfocados a enviar el mismo mensaje.

Por ejemplo, la web de Isobar utiliza la variedad en tamaños y colores para atraer la atención, mientras que mantiene la unidad compositiva de todos los elementos a partir del uso de formas similares (rectángulos) y la preponderancia de sus colores corporativos:

Competencia y tensión

La competencia se basa en introducir elementos dominantes en el diseño, los cuales, al poseer igual fuerza visual, compiten entre sí por nuestra mirada y crean tensión, manteniendo un juego visual constante dentro del diseño y haciendo que éste no pase desapercibido.

La competencia se logra jugando con los tonos, el contraste, las texturas y los tamaños. Esto resulta muy atractivo si se sabe emplear bien, y además logra resaltar aquellos elementos que consideras más importantes.

Observa cómo lo ha hecho de Herdade Joia do Sul:

Aquí existen dos elementos compitiendo por nuestra atención a cada lado de la página. Ambos nos ofrecen información, pero el más importante (el logotipo) ha sido colocado en el cuadrante superior izquierdo, que es el que primero buscan nuestros ojos, para aportarle equilibrio respecto a la imagen de la derecha, que posee mayor tamaño y formas más complejas.

No obstante, siempre ten en cuenta que debes ir con cuidado y mantener el equilibrio, pues un exceso de competencia puede romper la armonía del diseño y provocarle confusión al usuario.

Complejidad y caos

Un diseño “complejo” no es difícil de comprender, sino rico en significado. O sea, no sólo debes expresar un mensaje, sino que éste debe ser notable para atrapar la atención del usuario y estar apoyado por todos los elementos del diseño para expresar una idea clara y relevante.

Por ejemplo, Agence Voz Labs utiliza un diseño bien minimalista pero rico en significado:

Aquí el mensaje está enfocado a resaltar la calidad de los servicios que presta la empresa, pero se ha incluido una imagen de fondo que al mismo tiempo está diciendo que estos servicios son tan funcionales y cómodos que puedes utilizarlos tranquilamente mientras te relajas y disfrutas de un café. Es decir, aquí se ha incluido otro significado que apoya y enriquece el mensaje principal.

No obstante, cuando la relación o disposición de los elementos compositivos es demasiado compleja y se convierte en confusa, entonces encontramos una situación de caos, donde el mensaje es difícil de captar.

Esto no es un defecto cuando se utiliza intencionalmente, y puedes apoyarte en la sensación caótica para expresar variedad o movimiento, como ha hecho The Selective al seleccionar su imagen de fondo:

Abstracción

Sí, no necesitas que todos tus elementos tengan cualidades reconocibles para expresar un mensaje, pues la abstracción también funciona muy bien. A partir de lo abstracto podemos transmitir sensaciones, y de hecho aquí son más importantes las emociones que nos transmiten los elementos que la relación entre éstos.

Por ejemplo, la web de Carlo Barberis posee un diseño sencillo que da sensación de elegancia y pulcritud, y para ello no fue necesario emplear imágenes o formas de objetos reconocibles:

Conclusiones

Las relaciones compositivas son aquellas que se crean entre los distintos elementos del diseño para expresar el mensaje que se desea enviar, para lo cual debe existir una coherencia entre la elección de esos elementos, sus características formales y su disposición en el espacio.

Hoy te mostraé cuáles son las relaciones compositivas más importantes, en las cuales puedes apoyarte para concebir diseños bien estructurados y atractivos.

En la próxima entrada te comentaré los principios o leyes generales del diseño, y así completaremos esta pequeña guía de composición. Hasta entonces, déjame saber si te ha gustado.