El número en cuestión, 1.61803398874989484… , está en todos lados. Lo encontramos en la reproducción de los animales e insectos, en la forma de las plántas y los árboles, en el espiral de una galaxia o un caracol ( espiral logarítmica ), en las distancias entre diferentes partes de nuestro cuerpo, en figuras geométricas, hojas, etc. También lo podemos encontrar en el cuadro de Leonardo, La Gioconda, en sonatas de Mozart, en un atado de cigarrillos, en las tarjetas de crédito y en otros tantos diseños a través de la historia, ya que este número se usa desde hace miles de años en todos los campos del diseño.

¿Y cómo aplicarlo al diseño web?

En las proporciones de los diferentes elementos con los que construimos nuestro diseño. Por ejemplo dentro de un rectángulo áureo podemos contener un banner, un cuadro de imágen, un menú, etc.

Otro ejemplo puede ser el diseño de los elementos básicos un blog, la relación entre el contenido principal y una barra lateral. Si diseñamos un sitio para 800×600, el ancho máximo de nuestro diseño será 760px. Si dividimos 760 / 1.6180339887 nos dá 469, entonces el contenido principal va a ser de 469px de ancho y la barra lateral de 291px.

El problema de las diferentes resoluciones de pantalla

Un sitio web debe poder verse bien en diferentes tipos pantallas, con distintas resoluciones. Esto quiere decir que el espacio que tenemos para hacer todas las locuras que se nos ocurran, el lienzo, no es fijo, sino que su tamaño puede variar dependiendo de la pantalla del usuario.

Entonces si diseñamos para 800×600, en teoría nuestro diseño no se verá bien en resoluciones mayores, como 1024×768, 1280×900, 1440×900, etc.

La hora del espanto fue… ¡CSS al rescate!

Podemos ajustar el diseño a la pantalla usando porcentajes. En el caso del diseño de los elementos básicos de un blog, contenido y barra lateral, los números que corresponden a las medidas 469px y 291px son 62% y 38% respectivamente. Así podemos mantener una proporción en un diseño “líquido” (ver ejemplo), donde el ancho de nuestro diseño se adapta la pantalla del navegador.

Ahora, si bien la proporción de los elementos básicos estaría bien, el trabajo dificil para el diseñador será adaptar los demás elementos del diseño a este “layout” flexible, manteniendo las proporciones que lo hacen “bello”, según la “filosofía áurea”.

Distintos tipos de diseños.

En este otro ejemplo, agregué un contenedor para limitar el ancho a 780px y ubicar el diseño en el centro de la pantalla. El diseño dejó de ser líquido, pero se mantiene la relación entre el contenido y la barra derecha.

¿Y si aumentamos el tamaño del texto?, vemos que el que el tamaño de la letra aumenta, pero los elementos básicos del diseño siguen teniendo las mismas proporciones. Ahora, si al ancho del contenedor (780px) lo expreso en unidades tipográficas sería aproximadamente 78em ( con el tamaño de la fuente del cuerpo de la página al 63% ). Entonces cuando cambio el tamaño de la fuente, también cambia el tamaño del layout (ejemplo).

Para ir un poco mas allá, podemos crear un diseño donde el tamaño del texto y los elementos del layout dependan del tamaño de la pantalla. En este último ejemplo, agregué un JavaScript para calcular, a partir del ancho de la pantalla del navegador, el porcentaje que corresponde al tamaño del texto.

Más…

Si quieren saber más sobre cómo aplicar la divina proporción al diseño web les recomiendo este excelente artículo de Smashing Magazine.

Esta entrada fue publicada el Sábado, 26 de Enero de 2008 a las 19:51 0753 y está clasificada bajo: General, Diseño. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.