9 Abril 2008

La Divina Proporción y el diseño web

Escrito por Mexside en: Diseño Web .

La divina proporción o proporción aurea, es considerada como la proporción perfecta. Se encuentra en figuras geométricas, partes del cuerpo y naturaleza, como relacion de porporciones morfológicas armoniosas. Su uso data desde la antigüedad, existe indicios desde hace más de 2000 años. Los griegos lo utilizaron para diseñar las proporciones de sus templos. Platón consideró a la sección aurea como la relación matemática perfecta.

Durante el renacimiento, el uso de la proporción áurea se extendio entre las artes, uno de los artistas que más uso le dio fué Leonardo Da Vinci. Sus obras se apegaban a una reticula basada en la proporción aurea, en la Gioconda, el rostro encaja perfecto en un rectángulo áureo y las partes de la cara a su vez se componen de rectangulos o proporciones aureas.

Pero ¿Que es la proporción áurea?

El número áureo representa la proporción que existe entre dos segmentos, tales que el segmento menor es al mayor lo que el mayor es a la totalidad.

La fórmula es: (A/B)=(A+B)/A

Tal proporción corresponde al Número Áureo o Phi: 1,618. De suerte que el segmento AB es 1,618 veces A, y A es 1,618 veces B. Inversamente, B es 0,618 veces A, y A es 0,618 veces AB.

Una forma facil de entender es dibujando un cuadrado y agregar un punto medio en uno de sus lados, luego lo unimos con uno de los vertices del cuadrado y por ultimo llevamos esta distancia hacia alguno de los lados a partir del punto que dibujamos, obtenemos gráficamente un rectángulo con proporciones áureas.

Que es lo mismo que multiplicar la recta AB por el numero Phi y nos resultara igual a la recta AC. Esta proporcion equivale aproximadamente a dos segmento desiguales, uno de 62% y otro de 38% de una recta por tamaño 100%.

¿Que ventajas ofrece esta proporción?

Se dice que si a una linea recta le agregamos un punto en un lugar que no sea el centro, la mayoria de las veces lo agregaremos acercándonos a la proporción de 62% y 38%. Esto nos permite ofreces composiciones mas armoniosas que puedan enfocar la atención en un punto deseado. Una de las formas para trabajar con el número áureo es dimensionando el soporte. Esto no es otra cosa que utilizar un área de trabajo que tenga proporciones áureas.

El rectángulo dibujado anteriormente es un area de trabajo áurea, si esto lo aplicamos al diseño web obtenemos que para una intefaz 1024 x 768 con un ancho de 1010 pixeles visibles (le restamos 14 pixeles, que es lo que usan las barras de deslizamiento laterales) le corresponderia una altura de 624 pixeles. Aqui surge un problema, ya que en el diseño web generalmente podemos saber la anchura de un contenido, pero no la altura, ya que depende de la cantidad de contenido que estará en la página. Pero gracias a esta área de trabajo podemos crear una reticula proporcionada, para ajustar los elementos principales del diseño de un sitio web y ajustando los restantes con proporciones aureas.

En este caso hemos dividido el area total en dos areas, de la cual el rectangulo del lado derecho es un rectángulo áureo. ¿Como resultaron esas medidas? de multiplicar el ancho total (1010 px) por Phi dando como resultado 624px, asi el rectángulo queda dividio en un cuadrado y otro rectángulo áureo que a su vez vamos a dividir.

Si seguimos dividiendo infinitamente y luego trazamos un arco por la diagonal de cada cuadrado, se obtiene la espiral logarítmica, que aparece frecuentemente en la naturaleza y su ejemplo mas clásico la concha de un nautilus.

Con estos rectángulos aureos que hemos conseguido, podemos diseñar la reticula básica para hacer el diseño de nuestro sitio web.

Esta reticula es básica, pero sirve de ejemplo para ilustrar lo que se puede hacer utilizando la proporción áurea para diseñar, las posibilidades son infinitas, se puede cambiar la orientacion de los rectangulos al lado derecho, hacer tres columnas, etc. En este caso es una retícula a dos columnas orientada al lado derecho con cabecera y un pie de página, cada una de las secciones encaja en un rectangulo aureo, habrá ocasiones en que esto no sea posible, porque, como habiamos comentado anteriormente, muchas veces no se puede tener el control total sobre el contenido, y la altura es la que se ve afectada, pero si definimos bien la anchura de las secciones, la proporción se seguirá manteniendo en gran medida. En caso de que sea un diseño líquido, se trbaja con porcentajes en lugar de pixeles.

Si quieren saber más sobre la sección áurea, aqui hay unos links interesantes:

La Divina Proporcion

Composición Divina

Espiral Logarítmica

Número Áureo

Espero que esta pequeña guia les sea util, Espero sus comentarios!!

Articulos relacionados

• Sets de iconos gratuitos
• Bienvenidos a Mexside
• Convocatoria
• Flock, el navegador para las redes sociales
• Guía para redactar un contrato para un desarrollo web

26 Comments so far...

Deja un Comentario

Nombre (required)

E-Mail (no será publicado) (required)

Website