La Divina Proporción y el diseño web


La Gioconda y La proporcion Aurea

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 comola 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.

Rectangulo aureo 01

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.

Rectangulo aureo 02

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.

Rectangulo aureo 03

Rectangulo Aureo 04

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.

Rectangulo Aureo y espiral logaritmica

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

Reticula aurea para 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.

FUENTE: Mixside.com

Anuncios

no tienes permiso de mandar mensajes

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s