Diseño gráfico y la sucesión de Fibonacci: mi método

Kandinsky proporciones diseño gráfico

Como reza el refrán “Cada maestrillo tiene su librillo”, y esto es una verdad absoluta en todas las disciplinas, incluido el diseño gráfico. En este post he querido hablaros de algunos de los aspectos que he ido aprendiendo durante mis años como diseñador, y que con el tiempo me han ayudado a definir una forma de trabajo de la que estoy bastante orgulloso.

Cabe decir que si algo me obsesiona en cualquier diseño que hago (obsesión casi equivalente a la del arquitecto Frank Ghery con la escama de pez), es en darle naturalidad al diseño, y sobre todo a su composición.

Pero para conseguir esta naturalidad, no vale diseñar a ojo. Hay que saber bien cómo diseñar y establecer unas normas propias para ello. A continuación incluyo algunas referencias que se pueden tener en cuenta, y que constituyen la base de mi propia metodología de diseño:

1. Definición de las zonas de peso en el lienzo

Aquí cojo la base de Kandinsky en su libro “Punto y línea sobre el Plano” (benditas “Romanas” que me lo hicieron leer). Se definen cuatro zonas, dividiendo en horizontal y vertical el lienzo y se establecen dos zonas de peso.

Normalmente las zonas de peso son la superior izquierda y la inferior derecha. Esto es bastante útil en diseño gráfico impreso, pero también aplicable al diseño web profesional. Si habéis visto alguna web diseñada por mí, veréis que siempre sitúo el logo en la parte superior izquierda y los iconos de las redes sociales en el footer, parte inferior derecha.

2. Definición de la cuadrícula o columnas

Para este punto me baso en el Canon de Vignelli, pero con una variación en cuanto a número de división horizontal y vertical. En este caso hago uso de la sucesión de Fibonacci en cuanto a números de columnas y filas.

La sucesión de Fibonacci, una sucesión que viene dada desde la observación de la naturaleza, se basa en que un término es la suma de los dos términos anteriores, empezando con cero y uno. Curiosamente se asemeja a la proporción áurea y la norma DIN del papel.

Comparativa fibonacci aurea DIN

Para los puristas, decir que Jan Tschichold en su “Die neue Typographie”, libro que pretendía estandarizar el diseño, ya estableció tamaños parecidos y proporcionales a la sucesión de Fibonacci dentro de sus estándares de papel. También mencionar que Google Design usa una norma/canon parecido en el diseño de apps y sus propias webs. Y por último, y según tengo entendido, este también es un recurso muy utilizado en arquitectura.

3. Implementación de tamaños y espacios

Una vez tengo la retícula o columnas, uso otra vez la sucesión de Fibonacci pero aplicada según el soporte para el que voy a diseñar. Por ejemplo, en papel, mi 1 en la sucesión se convierte en 5mm, en web mi 1 es 1em, es decir 16 píxeles. En el caso de web, también hago una excepción en la sucesión y por en medio uso el tamaño de 20 píxeles. En definitiva, ¡también hay que saber cuando saltarse las normas!. Este punto lo aplico a márgenes y tamaños de texto.

Una vez establecidas las normas anteriormente mencionadas, el diseño se convierte en un juego, un puzzle para saber en qué situación lo soluciona un tamaño u otro, un margen u otro.

El poder haber generado mi propia base para diseñar en web y además que sea multidisciplinar, hacen que en vez de diseñar con amor (que sí lo hago), también pueda diseñar con orgullo.

Juan Gavilán
Juan Gavilán
Director de arte
Mandarina Brand Society Mandarina Brand Society

We are in Palma, we are in San Sebastian, Ibiza, Madrid, or Barcelona…
We are on the other side of the telephone, or replying you an email. Because what it really matters is to be where you are and whenever you need us.