• Share on Google+

La belleza es una característica de una persona, animal, lugar, objeto o idea que proporciona una experiencia perceptual de placer, significado, o satisfacción. La belleza es estudiada como parte de la estética, la sociología, la psicología social y la cultura. Como una creación cultural, la belleza ha sido muy comercializada. Una “belleza ideal” es una entidad que es admirada, o posee características ampliamente atribuidas a la belleza en una cultura particular, para la perfección.” – descripción desde Wikipedia.

Siempre  he esquivado las matemáticas (también ilustración, pero no entra al caso) me aburrían mucho las encontraba cuadradas, fomes y pensaba que no me servirían en el futuro.

Sin embargo es raro descubrir que la mayoría de los diseños mas bellos, obras de arte, objetos e incluso personas tienen en común las matemáticas,esta teoría llamada proporción áurea, también conocida como razón áurea, razón dorada, media áurea y divina proporción, es un número irracional, φ = (1+√5)/2 ≈ 1.61803…  Y es considerada como la proporción perfecta. El ser humano ha demostrado una preferencia elemental y subconsciente por la estética de la proporción áurea. Normalmente elegimos como bellas las formas que respetan esta proporción, por encima de las que no lo hacen. Leonardo Da Vinci utilizó la proporción áurea con la Gioconda. Las pirámides de Egipto también fueron construidas manteniendo la proporción áurea y hasta la Torre Eiffel mantiene esta proporción.

mona lisa proporción aurea

Implementación en la Web

Para el contenido

Usar la proporción áurea es fácil. Podemos diseñar un sitio usando la proporción áurea con anchos fijos o flexibles. Por ejemplo partamos con la resolución mas usada 1024×768 entonces aplicamos esta proporción para 960px  se divide por 1.62, y el resultado “para este caso”, es593px este será el ancho del área de contenido y para sacar el el ancho del sidebar es (960-593= 367px).

Esta regla y formula no sólo sirve para definir el ancho o la proporción del contenido del sitio web, también se puede aplicar para la altura  y cualquier área o parte del sitio y así encontrar la proporción perfecta. Implementación en la Web 1

Implementación en la Web 2

Para el texto

Si el texto es de cuerpo 12 hay que multiplicarlo por 1,618  y obtendrá un tamaño de texto para el título de 19. La proporción áurea es un lenguaje que la mente entiende y al interactuar con ella, las ideas parecieran ser más eficaces. pero no hay para que adherirse a ella exactamente, con el principio básico es suficiente.

Estudios de comportamiento

Por otra parte hay estudios que han comprobado la existencia de patrones de lectura F, E o L . El cuadrante superior izquierdo recibe la mayor atención y luego el usuario desplaza su mirada hacia la izquierda y abajo. El primer estudio fue realizado por del Poynter Institute, en 1990 (www.poynter.org). Entonces… La organización de los elementos tienen que seguir esta tendencia. Aplicando la proporción áurea dividimos la web en bloques. 

Rectangulo Dorado: es un rectángulo que posee una proporcionalidad entre sus lados igual a la razón aúrea.

Mira!
Empresas grandes entienden la importancia de contratar a un diseñador web o estudios de diseño experimentados en UX.
Caso 1: Fastcompany.com

fastcompany

  1. Contenido principal.
  2. El sidebar se ajusta a la relación de 1/3 y el artículo destacado bajo el menú es aproximadamente 1/3 del tamaño de la publicidad que esta abajo.

Caso 2: Twitter.com

5034817688_458e4b75f1_b
El Director Creativo de Twitter Doug Bowman afirma en su Flickr que el diseño de Twitter  está basado en la llamada “sección áurea”.
Flickr Doug Bowman

Conclusión

La proporción áurea busca la armonía de las partes, donde cada crecimiento y/o decrecimiento de una figura brinda una relación de orden proporcional brindando una experiencia perceptual de placer, significado, o satisfacción.

Recursos:

Calculadora de proporción divina

Phicalculator

On-screen ruler and grid

 

Estudios:

Estudio sentido de la belleza innata

La mano y el pie

Applying the Golden Ratio to Web Layouts and Objects