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


En las entradas anteriores te estuve comentando sobre los principales tipos de composición que utilizan hoy en día los diseñadores web, así como las relaciones compositivas que se establecen entre los elementos del diseño que siempre debes tener en cuenta.

Así que ahora, sabiendo todo esto, estás listo/a para comenzar a trabajar en la composición de tu página aplicando los principios o leyes generales del diseño, que es el tema sobre el que vengo a comentarte hoy para concluir esta sencilla guía.

¿Cuáles son estos principios? Muy simple: ritmo, equilibrio y unidad, los cuales harán que tu diseño sea mucho más atractivo, funcional y recordable. Ahora veámoslos con calma:

Ritmo

Es el resultado de la repetición de líneas, formas, volúmenes, tonos y colores. El ritmo permite unir los diferentes elementos de la escena para conferirles mayor unidad y fluidez, y además aumenta la armonía del diseño.

Toda composición posee ritmo aunque a veces no sea muy evidente, y el trabajo del diseñador es utilizarlo para darle cierta movilidad y equilibrio a lo que diseña. No obstante, las composiciones con ritmo excesivamente rígido, como el que nos encontraríamos en un terreno de cultivo por ejemplo, conviene romperlas con algún pequeño objeto discordante que atenúe su rigidez y proporcione un centro de interés.

¿Cómo utilizar el ritmo de forma armoniosa? Dale una ojeada a la web de Jordi Ensenyat Disseny para comprobarlo:

Aquí el diseñador utilizó una infografía cuyas líneas diagonales proporcionan un ritmo fluido y con gran fuerza visual, el cual se sustenta además en los tonos a escala de grises que posee toda la página. De esta forma, y utilizando el espacio en blanco para hacer descansar la mirada, se ha logrado un diseño bien equilibrado y con gran unidad.

Equilibrio

En una composición equilibrada los elementos se apoyan entre sí de tal forma que no parece posible realizar ningún cambio sin que todo el conjunto se resienta, por tanto, un diseño desequilibrado es rechazado de manera inconsciente por el usuario, con lo cual el mensaje puede quedar anulado.

Puedes conseguir equilibrio en tu diseño situando los elementos según su peso visual, que es la capacidad que posee un elemento de atraer nuestra mirada más que otros. Esto depende de varios aspectos, veamos:

  • El tamaño: un elemento grande pesa más que uno pequeño.
  • El color: los tonos brillantes tienen más peso visual que los tonos opacos, los colores cálidos más que los colores fríos, y los oscuros más que los claros.
  • La posición: un elemento situado en la parte derecha o arriba pesa más que uno colocado a la izquierda o en la parte inferior de la página.
  • El contraste: un elemento que genere contraste o rompa el ritmo del resto de los elementos siempre poseerá más peso visual.
  • La distribución: un elemento aislado posee más peso que uno que está dentro de un grupo.
  • La textura: los elementos con textura son más pesados que los lisos.
  • La forma: una forma reconocible posee más peso que una que no podamos identificar.

Apoyándote en esto no sólo puedes equilibrar tu composición, sino además resaltar aquellos elementos que consideres más importantes para tu diseño. Mira como lo ha hecho Gridle para que te lleves una idea:

Aquí el diseñador se apoyó en los colores y el tamaño de la tipografía para resaltarla a partir del contraste con las formas de la derecha, creando así una composición equilibrada y muy fácil de “leer”.

Unidad

Es la gran meta a lograr, pues significa que existe una armonía completa entre la forma y el contenido, o sea, entre el diseño y lo que éste debe comunicar. Se trata de que con sólo ver tu interfaz, y aún antes de leer nada, el usuario se lleve una idea del tema de tu página o los servicios que presta.

Esto se logra cuando existen relaciones compositivas coherentes entre los elementos de la página, ya sea en su disposición o en las similitudes y diferencias de sus propiedades. Además, debe existir un elemento o fuerza dominante que integre y resuelva la tensión entre los estímulos de la composición.

Para comprenderlo mejor, échale una ojeada a la interfaz de Graf von Faber-Castell:

Aquí el diseñador utilizó varios tonos y colores próximos en la gama cromática para lograr armonía, así como formas diferentes para crear contraste. Es además un diseño muy equilibrado, donde cada cosa está dispuesta de forma tal que existe claridad tanto en los significados como en la relación que existe entre los elementos.

Conclusiones

Cuando una composición posee ritmo, equilibrio y unidad, el resultado es un diseño bien atractivo y funcional donde cada detalle se suma de manera armoniosa para llevar el mensaje al usuario.

Por eso, ten siempre muy claros los elementos que vas a incluir en tu diseño y la forma en que los vas a ordenar, piensa en el tipo de composición que emplearás, las relaciones compositivas en las que te vas a apoyar y el resultado que deseas lograr. Realiza todas las pruebas que necesites para estar seguro/a y verás que el resultado final valdrá la pena.

Hasta aquí esta sencilla guía de composición en tres partes. Si te sirvió de ayuda y de estímulo, habré cumplido mi objetivo, así que déjame saber si fue así. Y si deseas ver más, aquí te dejo algunos sitios que considero cumplen con todos los requisitos:

  1. Bojeo
  2. Isofact
  3. MyCyberAcademy