Para la tercera y última parte del artículo he usado dos fuentes diferentes, una es del post Golden Ratio in modern CSS publicado de CSS Globe, y la otra de Applying Divine Proportion To Your Web Designs de SmashingMagazine, y ha salido el revuelto que apare a continuación.

Lo que significa la relación del número áureo en nuestro trabajo

Vamos a ver de alguna manera podemos utilizar en nuestro diseño esa proporción. En primer lugar tenemos que empezar con lo más básicos, los contenedores de información. En un ejemplo sencillo podemos aplicar esa proporción (1,618) en el único contenedor dividido en dos partes (principal y lateral). Porque no podemos jugar con la altura de estos elementos, pues no siempre el volumen de información lo permite, tenemos que centrarnos sólo en la anchura.

Digamos, por ejemplo, que nuestra página el ancho es de 960 píxeles, si que queremos dividirla utilizando la proporción de oro. Nuestra principal zona de contenido será 960÷1,62 = 593 píxeles y la barra lateral será por tanto 960-593 = 367 píxeles.

Ahora que hemos encontrado la proporción en nuestras columnas, es hora de darle atención a la tipografía básica. La propuesta guardará las siguiente relaciones:

• distancia entre líneas base de texto (line-height) = tamaño del tipo de letra (font-size) × 1.62
• margen lateral del párrafo = ancho de párrafo × 1,62 ÷ 2
• margen superior de la cabecera = distancia entre líneas base de texto (line-height) × 1.62

Después de tener presente en mente esta lógica, podemos resolver cualquier problema en cualquier tamaño. Otro ejemplo es la forma dentro de los elementos, donde la entrada de etiqueta width = ancho × 1.62. La misma relación se puede presentar en cualquier rectángulo que queremos que sea  “perfecto”. Su anchura × altura = 1,62

Esta es la idea que existe detrás de la proporción del número áureo. Lo mismo cabe decir de los diseños con fluido elástico.

Un ejemplo de diseño

Por supuesto, un diseño web no tiene que ser organizados de acuerdo a la Divina proporción. Sin embargo, en algunos casos se puede mejorar no sólo la comunicación de su diseño, sino también mejorar aún más los detalles de sus diseños. podemos considerar el ejemplo de 404 Blog. El diseño en sí es atractivo visualmente, ofrece la calma, se apoyar en un correcto esquema de color y tiene una bonita composición.

Sin embargo, el diseño no se corresponde exactamente con el de  la Divina proporción, como se puede ver en la imagen que aparece a continuación. La composición está divida en dos bloques separados de 583px de ancho (630px – 31px – 31px) y 299px (330px – 31px). La razón es que los espacios en blanco principal de la zona es pasiva (tres columnas, cada uno de 31px de ancho), que apoya claramente el contenido junto a él en lugar de ser el contenido en sí.

La relación entre el diseño de bloques es 630: 330 px 1,91 ≈ ≠ 1,62, y la relación entre el contenido de los bloques es 583: 299px ≈ 1,92 ≠ 1.62.  La razón por la cual el diseño parece casi perfecta a pesar de que no se adhieren a la divina proporción, es que simplemente es equilibrada – tanto el diseño de bloques y el contenido de los bloques tienen la misma proporción.  De ahí que el diseño proporciona cierto sentido de cierre estructural y armonía.

Lo interesante es, sin embargo, que debido a un óptimo diseño la longitud de los párrafos es de más de 90 caracteres por línea. Sin embargo, el  número óptimo para una cómoda lectura se encuentra entre 60 y 80 caracteres por línea. La mejora de la disposición, por lo tanto está en conseguir la legibilidad del contenido, aunque también puede ser útil el efecto secundario que puede proporcionar el hacer las cosas de acuerdo con las leyes de la naturaleza.

Para algunos proyectos puede ser interesante utilizar el coeficiente 5:3, que no es exactamente la Divina proporción, pero puede resultar útil en el caso de que no tengamos una calculadora cerca.  La Divina proporción por lo general proporciona estándar que se puede incorporar perfectamente en casi todos los de diseño.

Otra ayuda para cuando trabajamos en un nuevo proyecto, es la posibilidad de utilizar las siguientes herramientas para calcular el ancho “sobre la marcha”:

• Phiculator. Es una herramienta sencilla que, dado cualquier número, calculará el número correspondiente de acuerdo a la proporción de oro. La herramienta es gratuita y está disponible tanto para Windows como para Mac.
• Golden Section Ratio Design Tool . Es un programa que nos evita la rutina de las operaciones en los cálculos, la planificación de la agrupación y de las formas. Podemos ver y cambiar la armoniosa formas y tamaños, al tiempo que se ve directamente en el proceso a tiempo real, del proyecto.

Conclusión

Muchas personas argumentan que esta técnica es una utopía, y no podemos perder el tiempo junto a nuestra calculadora, cuando tratamos de alcanzar nuestros plazos, pero ese no es el punto de este artículo. El punto es tratar de pensar en el 62% y el 38% para todo lo que necesitamos dividir.

En algunos casos, la aplicación de la Divina proporción mejorar significativamente la comunicación de su diseño a sus visitantes. Ofrece a sus usuarios casi un equilibrio natural en proporción 1: 1,62 literalmente que imponer el orden natural en él y de ese modo esté bien estructurado el diseño.

Información adicional

Cuando queremos dividir una cantidad en tres partes, en primer lugar lo dividimos en dos (62% – 38%), luego tomamos la más grande y dividirlo en dos partes de nuevo con la misma analogía.

• Actualización (8/enero/2009): Otro artículo que acabo de leer sobre el tema lo tenemos en el tutorial The Golden Ratio in Web Design, de Jarel Remick, publicado en Nettuts. Si decimos que las matemáticas son bellas, quizás eso suene algo extraño para algunos diseñadores, pues nos resultan rígidas y muchas veces aburridas. Es posible que nos sorprendamos al saber que la mayoría de los diseños estéticos, obras de arte, objetos e incluso personas tienen mucho en común con las matemáticas. Específicamente, el número áureo (golden ratio), también conocido como la divina proporción, que es designada por la letra griega Φ (phi). En dicho cubrirá la anatomía y el diseño de un sitio web y cómo se relaciona con dicho número.