Composición y Diseño: la Proporción Áurea

A lo largo del tiempo, hemos desarrollado una comprensión cada vez más completa sobre lo que funciona y lo que no funciona en el diseño. Ya nos refiramos al diseño gráfico o al diseño web, la manera en la que un elemento visual está estructurado y organizado tiene un efecto sobre cómo los individuos responden hacia él. A veces, no somos completamente conscientes de porque reaccionamos de cierta manera a algo, ya que es un hecho casi subconsciente. Esto es algo que ya se sabía en la Antigua Grecia, cuando se empezó a escribir sobre la proporción áurea.

Aunque a veces no los tengamos en cuenta, el diseño está muy orientado hacia los detalles. Estos detalles nos sirven para elaborar de forma efectiva un mensaje o tono. Y para conseguir esto, a veces se trata de un trabajo que hay que ir perfeccionando a lo largo de un periodo prolongado. Como ya hemos dicho en alguna ocasión, hay que seguir ciertas pautas, para encontrar la creatividad cuando estamos diseñando.

Si nos gusta seguir el trabajo de algunos diseñadores, veremos como muchos de ellos se enfocan en algunos principios y fundamentos a la hora de trabajar. De ellos, uno de los más populares es la proporción áurea. Que aunque guarda ciertas similitudes con la regla de tercios, a la que dedicamos un artículo, sigue siendo una gran desconocida para algunos diseñadores.

¿Qué es la Proporción Áurea?

La proporción áurea, también conocida como el número áureo o la divina proporción, se conoce como 1 : 1.618. Este número viene de la Sucesión de Fibonacci, en la que cada número es la suma de los dos anteriores.

Este número áureo surge de la división en dos de un segmento que guarda las siguientes proporciones: el segmento a+b es al segmento más largo a, como a es al segmento más corto b. Escrito mediante una ecuación, sería:

(a + b) / a = a / b

Esto puede parecer un poco complejo al principio. Soy el primero que está en un constante lucha con las Matemáticas. Pero mediante el rectángulo áureo, podremos entenderlo mejor de una manera visual.

Creando un Rectángulo Áureo

La forma más sencilla de entender la proporción áurea es verla tal cual mediante un rectángulo áureo. Para ello, dibujaremos un rectángulo que se ajusta a los parámetros del número 1.618 de un lado respecto a otro. Dentro de este rectángulo dibujaremos un cuadrado. En el espacio sobrante, otro cuadrado. Y así hasta el infinito, al igual que la Secuencia de Fibonacci, solo que en sentido inverso. Obtendremos algo parecido a esto:

Es más fácil de construir el rectángulo áureo que explicarlo, como habéis comprobado. A la derecha de la imagen, hemos dibujado la conocida como espiral áurea dentro del rectángulo. Si os resulta familiar esta espiral no es de extrañar, ya que es seguro que la habéis visto en más de una ocasión, pero no os percatasteis de su presencia.

La espiral áurea en la naturaleza

La naturaleza es una fuente de inspiración a incorporar en nuestro workflow, si aun no lo haces. Y es que casi cualquier elemento natural nos puede servir como recurso para tomar algo de él, y aplicarlo a nuestros diseños.

Pero en el caso de la proporción áurea se cumple a rajatabla. Si observamos con detenimiento ciertos caparazones de caracoles o moluscos marítimos, veremos como es muy evidente que se forman siguiendo una espiral áurea. Por lo que, como comentamos anteriormente, que a la proporción áurea se le conozca como la divina proporción no es casual.

Ya en la Antigua Grecia se dieron cuenta que muchos seres vivos se formaban siguiendo esta ecuación matemática. El número de pétalos de las flores siguen la Secuencia de Fibonacci. La coliflor Romanescu se forma siguiendo una espiral áurea. Y así miles de ejemplos más.

Proporción Áurea en el Diseño

Diseñar pensando en el rectángulo áureo o la espiral áurea puede convertirse en un verdadero arte a lo largo de los años. Pero eso no quiere decir que no podamos usarlo nosotros, por muy novatos que seamos, en nuestros diseños. Nos servirá para ajustarlos y mejorarlos. Cuanto más usemos este recurso, empezaremos a descubrir las mejores partes de nuestras creaciones, y como potenciarlas.

A veces nos daremos cuenta que la proporción áurea encaja de forma perfecta en el proyecto que tengamos entre manos. En otras ocasiones no será tan explícito su uso, o directamente será mejor usar otros recursos compositivos. Pero como en este artículo nos estamos centrando en la proporción áurea, vamos a ver como podemos usarla, y algunos ejemplos ya existentes.

Uso en el Diseño Web

¿Que tamaño debe tener un sidebar con respecto al ancho total de una web? Si alguna vez has diseñado una web, seguro que te lo has preguntado. No es sencillo saber en que punto un contenedor es lo suficientemente ancho, o si está bien proporcionado con respecto al resto de la web. Y aquí es donde podemos echar mano del número áureo.

Al igual que construimos anteriormente el rectángulo áureo, podemos hacer con la plantilla que sirva de base en nuestro diseño web. No tenemos que acotarnos solo en las proporciones horizontales, como hemos visto en la imagen También se puede usar para saber el alto que debe tener un slider situado justo debajo de nuestro header, por ejemplo.

Tipografía  y Proporción Áurea

Para crear textos que mantengan una proporción áurea entre ellos, vamos a suponer que estamos creando un artículo, con su título principal, título de párrafo y párrafo. Cada uno de ellos con un tamaño de fuente diferente. Partimos del tamaño intermedio, que diremos que es de 20px. Para la fuente del título principal, multiplicaremos el tamaño del título de párrafo por el número áureo, obteniendo 32px aproximadamente. Y para el cuerpo del párrafo, dividiremos los 20px de nuevo por el número áureo, 1.618. Con esto, conseguimos que los tamaños de fuentes en un mismo texto se muestren armoniosos entre ellos, y no haya ningún tipo de aberración.

Si tienes en cuenta este tipo de composición, y haces un uso correcto en la estructura de tus textos, tienes prácticamente asegurado el éxito. En la imagen hemos usado la tipografía Pacífico, que puedes encontrar dentro del catalogo de Google Fonts.

Creando iconos usando la Proporción Áurea

En esta última sección, vamos a ver un par de ejemplos de como, usando la proporción áurea, conseguiremos iconos y logotipos más agradables a la vista. Con esto queremos mostrar como se puede usar este tipo de composición no solo en diseños con muchos elementos. También es posible usarlo en composiciones más simples, como las que tenemos al desarrollar un logotipo, ya sea uno nuevo o si tenemos que realizar un rediseño.

Posiblemente uno de los logotipos más reconocibles mundialmente. Y es que el marco amarillo que acompaña al nombre de National Geographic es inconfundible. Pero, ¿os habéis parado a pensar porque ese rectángulo amarillo tiene esas proporciones entre ancho y alto? En efecto, no es algo casual ni dejado al azar. Cumple a rajatabla la proporción del número áureo. Posiblemente el uso más simple que le podamos dar, pero no por ello deja de ser efectivo.

El logo de la compañía energética británica BP también hace uso del recurso gráfico del que venimos hablando, aunque quizás esté mas escondido en un primer vistazo. Si hacemos una circunferencia que rodea completamente al logotipo, veremos que encaja perfectamente con las circunferencias interiores usando el número áureo. Muy ingenioso, y basado en la forma de muchas flores que también cumplen con esta proporción. Como pasa en muchas ocasiones, la naturaleza va varios pasos por delante.

Como habéis podido ver, el uso de la proporción áurea dentro del diseño está mucho más extendido de lo que pueda parecer en un primer momento.  Y es que, a pesar de que puede parecer algo complejo al principio, una vez que lo incorporemos a nuestro flujo de trabajo, lograremos crear unos diseños mucho más armoniosos y amigables para nuestros usuarios. Como recomendación, aconsejamos que busquéis ejemplos de la proporción áurea en la naturaleza, ya que seguro que os proporciona una casi infinita fuente de inspiración para vuestros proyectos.

Lo importante no es conocer una sola forma de composición y usarla siempre. Debemos tener un amplio abanico de recursos en nuestra mano, y saber decidir cual será el adecuado en cada momento. Esto es lo que nos hará grandes diseñadores.