La Divina Proporción y el 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.

La Gioconda y La proporcion Aurea

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.

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!!

Be Sociable, Share!

Tags: , , , , , , , , ,

40 Responses to “La Divina Proporción y el diseño web”

  1. Colormono abril 14, 2008 at 8:25 am #

    Buen artículo! Bien explicado! Muchas gracias, me has sacado de una duda!

  2. jorge abril 14, 2008 at 10:24 am #

    Ah muy bien, muy buen artículo :)

  3. embolicar abril 14, 2008 at 12:59 pm #

    A que se refiere el diseño liquido?

  4. Gerardo abril 24, 2008 at 9:33 am #

    Buena explicación, gran artículo. Interesante para manejar visualmente una página de inicio estática, aunque como bien decís, habrá oportunidades en las que no pueda ser utilizado al pie de la letra.

    Gracias! Saludos

  5. ¿eres el de la foto? abril 29, 2008 at 10:47 am #

    Muy buen tip para un sitio web.

    Un saludo desde la Mixteca.

  6. alex junio 27, 2008 at 11:39 am #

    esta interezante el tema ,me sorprendo cada vez mas en los nuevos lugaes donde encuentro este nuemro

  7. alejandro agosto 12, 2008 at 4:33 pm #

    yo solo lo busque por divercion pero me dejo facinado el ver en donde se puede encontrar este numero

  8. LORENA LA GRANDE agosto 27, 2008 at 3:09 pm #

    ESTUVOMUY INTERESANTE TAL VES LE FALTO LA DECORACION MUY BIEN

  9. combarisa nossa maria fer. agosto 27, 2008 at 3:15 pm #

    waooooooooooooooooooooooooooooo me encanto por fin personas utiles los amo m e han sacado de muchos problemas

  10. LORENA LA GRANDE agosto 27, 2008 at 3:20 pm #

    ESTA MUY BONITA PERO LE HACE FALTA LA DECORACION LOS FELICITO

  11. mau octubre 25, 2008 at 1:25 am #

    Que buen post, muchas gracias.

  12. xxx noviembre 10, 2008 at 8:41 pm #

    io no veo q desaparece esa sonrisa

  13. JUAN ANTONIO J.R. abril 28, 2009 at 1:22 am #

    ツ esta muy bueno eso ツ
    “La Divina Proporción” Es la cuna de la vida…

  14. caro 3ero5 junio 16, 2009 at 4:23 pm #

    muy buen artículo q sirbe mucho los felicito
    nico te amo yo caro
    carolina perdomo+nicolas nuñez

  15. ricaldi agosto 22, 2009 at 2:36 pm #

    buenas tardes, los artículos que publican son interesante y nos ayudan a conocer más sobre el mundo del diseño. Les deseo lo mejor y sigan adelante.

    gracias por todo. cuidense y un abrazo

  16. Juan paniagua enero 22, 2010 at 3:29 am #

    Hola, podria haber puesto una referencia de donde ha sacado la foto de la gioconda, gracias.

  17. Salvador enero 26, 2010 at 3:18 pm #

    La proporción áurea me parece ligada definitivamente a todo el Universo, a la creación, a lo superior, a lo infinito y, ¿porqué no? a Dios. Tal vez por ésto le llaman también proporción divina.

  18. Leandro marzo 6, 2010 at 11:17 am #

    Donde dice multiplicando deberia decir dividiendo. Ej. 1010 dividido 1,618.
    Saludos.

  19. lucero marzo 8, 2010 at 11:31 am #

    bien echo

  20. carolina mayo 4, 2010 at 8:46 am #

    me podrian decir cual es el intervalo para inicializar en la seccion aurea.???

  21. queti junio 22, 2010 at 5:54 pm #

    emmmmmmm como que lo que salio no me sirvio para nada en mi tarea kuekkkk como no son capaces de poner la wea que lwe estan preguntando comoo tantooooooooo que les costaba a los shushetumareeeeeeeee haaa y carolina la aweona que esta arriba mio eso se busca en google po gila culia perejila y la concha…

    se despide con cariño quieti :).-

  22. phoenix julio 11, 2010 at 8:39 am #

    El número de Dios ! Dios es número…

    La divina proporción se revela para quienes saben ver y quienes buscan la verdad detras de las imágenes…

    Una info muy importante aqui …

    http://www.youtube.com/watch?v=j9e0auhmxnc

    In lak’ech !

  23. carito octubre 28, 2010 at 12:50 pm #

    yo tengo una pregunta!!!

    la secuensia fibonacci puede llegar a ser el origen del origami?

  24. Brenda noviembre 22, 2010 at 5:11 pm #

    Hola:) esta info. me ayudo mucho en mi tareaa, estaaba perdida!!! muchas Gracias!

  25. Khaliis septiembre 1, 2011 at 7:46 am #

    esta muii interesante el tema y mas si es de mate xD

  26. Ip marzo 12, 2012 at 5:53 pm #

    Bien, cuida los acentos y la ortografía. saludos

  27. Yisus mayo 21, 2012 at 11:12 pm #

    excelente explicacion amigo te felicito, me sivio mucho…quiero aplicarlo a arte sí…pero estoy seguro que esto me ayudará gracias y suerte!

  28. cherry agosto 7, 2012 at 7:44 pm #

    hola, tengo una duda… como podemos aplicar esto pero a lrevez?
    o sea… tener un espacio y empezar desde ahi?

  29. cherry agosto 7, 2012 at 7:58 pm #

    ademas todavia no entiendo como funciona… donde hay que poner lo mas importante?
    siguiendo la linea del espiral? al final? o al principio (donde esta mas cerrado)

  30. Francisco Cordova agosto 19, 2012 at 2:55 pm #

    interesante articulo.

Trackbacks/Pingbacks

  1. meneame.net - abril 9, 2008

    La divina proporción y el diseño web…

    Una miniguia sobre la construcci ón de una reticula para el diseño de un sitio web, basado en la divina proporción o proporción áurea…

  2. La Divina Proporción y el diseño web at Luis Alarcón, Blog - abril 21, 2008

    [...] apropósito de esto, buscando hace unos días me encontré por casualidad con el blog Mexside en donde magistralmente hace un paralelo entre la Divina proporción y el diseño web y en simples [...]

  3. Sección áurea en diseño web - octubre 13, 2008

    [...] Mexside (español) ejemplifican con una serie de esquemas las posibles aplicaciones de la sección áurea [...]

  4. La proporcion aurea y el diseño web | Adventure Graphics - julio 7, 2009

    [...]  La Divina Proporción y el diseño web [...]

  5. La Divina Proporción y el diseño web | Mexside « Jaky - septiembre 4, 2009

    [...] La Divina Proporción y el diseño web | Mexside webnode [...]

  6. Web áurea - Escala gráfica - enero 12, 2010

    [...] el sitio Mexside se atrevieron a aplicar todo lo anterior al diseño web. Practicando sobre una intefaz 1024 x 768 [...]

  7. La Proporción Aurea aplicada al Diseño Web de Hoteles - Blog Mirai - marzo 10, 2011

    [...] tanto, buscando información en la red, encontramos un post muy interesante que nos hizo probar sobre diferentes diseños [...]

  8. La Divina Proporción y el diseño web | Mexside « Prueba jaky - mayo 5, 2011

    [...] La Divina Proporción y el diseño web | Mexside webnode [...]

  9. Número de oro y la divina proporción « deSIGNALS - mayo 27, 2011

    [...] Fuente [...]

Leave a Reply