La proporción áurea: la guía definitiva para comprenderla y usarla
Publicado: 2019-06-07Los diseñadores de todo el mundo deberían conocer la proporción áurea. Es una proporción matemática que crea diseños estéticamente agradables. Dado que la proporción áurea existe con tanta frecuencia en la naturaleza, no es de extrañar que sus resultados tengan un aspecto natural.
Foto de Bogomil Mihaylov en Unsplash
La proporción áurea también se conoce con otros nombres:
- Proporción Divina
- Media dorada
- sección dorada
- Phi (letra griega)
La matemática detrás de la proporción áurea
Voy a explicar las matemáticas de la proporción áurea de la manera más simple posible y sin entrar en detalles que en realidad no necesitas saber. Si puede mantenerse al día con las matemáticas, genial. Pero si no puede, está bien: aún podrá utilizar el concepto en sus diseños.
Para comprender la proporción áurea, primero debe comprender el rectángulo áureo
El Rectángulo Dorado es un rectángulo grande que tiene un cuadrado en su interior. Los lados del cuadrado son iguales a la longitud más corta del rectángulo:
Fuente: Wikipedia
La Proporción Áurea es un número que es (más o menos) igual a 1.618, al igual que pi es aproximadamente igual a 3.14, pero no exactamente.
Toma una línea y la divide en dos partes: una parte larga (a) y una parte corta (b). La longitud total (a + b) dividida por (a) es igual a (a) dividida por (b). Y ambos números equivalen a 1.618. Entonces, (a + b) dividido por (a) es igual a 1.618, y (a) dividido por (b) también es igual a 1.618.
De vuelta al rectángulo dorado, porque es mucho más fácil de entender
Cuando coloca un cuadrado dentro del rectángulo, crea otro rectángulo más pequeño. Ignore las líneas negras y observe los cuadros rojo y verde:
El cuadrado rojo tiene cuatro lados de igual longitud, y esa longitud es igual a la longitud más corta del rectángulo. Al seccionar ese cuadrado, automáticamente crea otro rectángulo más pequeño (delineado en verde). Juntos, crean un diseño completo de proporción áurea y una base para la espiral dorada.
También puedes hacer un nuevo rectángulo dorado a partir del rectángulo más pequeño, como este que he delineado en azul:
Un diagrama de proporción áurea tradicional tiene ocho rectángulos áureos:
Y aquí está el Rectángulo Dorado más pequeño, # 8:
Si comienza en la parte inferior izquierda y hace un arco para conectar el lado más alejado de cada sección transversal de un cuadrado y un rectángulo pequeño, obtendrá la Espiral Dorada.
La secuencia de Fibonacci
La secuencia de Fibonacci es bastante simple de entender: comienzas con cero y 1, luego obtienes el siguiente número sumando los dos números anteriores. 0 + 1 = 1, luego 1 + 1 = 2, etc. Los primeros números de la secuencia son 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.
Si usa esos números para crear cuadrados con esos anchos, puede crear prácticamente una Espiral Dorada:
Fuente: Math is Fun
Los círculos dorados
A veces, verá círculos dibujados en los cuadrados en lugar de o además de la espiral. Si dibuja círculos perfectos en los cuadros de la superposición de Proporción áurea, tendrán la proporción 1: 1.618 con un círculo adyacente.
Fuente: Departamento de Limelight
Los logotipos de Pepsi y Twitter usan los círculos dorados:
Fuente: Hybrid Talks
Has visto esto antes, mucho
La naturaleza está llena de proporción áurea. Está en la flora, las conchas, el clima ...
Fuente: Foto de Annie Spratt en Unsplash
Fuente: Foto de NASA en Unsplash
Y como lo vemos con tanta frecuencia, nuestro cerebro lo prefiere. Esa atracción innata es la razón por la que es un diseño tan poderoso para que lo utilicen los diseñadores.
La proporción áurea en el arte y el diseño
A veces, la proporción áurea es muy fácil de reconocer:
Fuente: staceysdetailinginc.com
A veces dices: “No tengo ni idea de lo que estás hablando… oh, espera. Ahora lo veo. Creo."
Fuente: Marketing Insiders
Otras veces podrías volverte loco mirándolo ...
Fuente: Widewalls
... pero si te concentras en el Rectángulo Dorado principal, se vuelve un poco más claro:
Echemos un vistazo a un ejemplo al que se hace referencia comúnmente: el Partenón
Fuente: Creative Bloq
Al principio, es posible que veas esto y digas: “Eso me parece simétrico. ¿Cómo encaja lo que estoy mirando en esa cosa de la espiral del rectángulo dorado? "
La proporción áurea no se trata de cómo cada parte de un diseño encaja completamente y solo en las secciones específicas. Si ese fuera el punto, el lado derecho del Partenón sería un bloque grande y el lado izquierdo estaría seccionado en bloques más pequeños.
En cambio, la proporción se usa para crear armonía y proporción, y eso se puede interpretar de diferentes maneras.
Si bien la proporción áurea se basa en matemáticas, se puede adaptar de manera creativa. En el caso del Partenón, la Proporción Áurea determina la altura y la ubicación de los componentes del diseño. Además, hay varias formas de colocar diagramas de proporción áurea sobre él:
Fuente: Archinect
Fuente: Esther Sugihto en Medium
Fuente: GoldenNumber.net
La proporción áurea y el diseño de sitios web
Ya sea que te gusten las matemáticas o tu cabeza esté a punto de explotar, la Proporción Áurea es un poco más fácil de entender en términos de diseño. Has hecho el trabajo pesado. Ahora es el momento de tomar la superposición básica y hacer que sus componentes web sean perfectamente agradables.
La proporción áurea y el diseño
Si desea un diseño de proporción áurea perfecto, establezca las dimensiones en 1: 1.618. Por ejemplo, puede establecer el ancho en 960 píxeles y el alto en 594 píxeles. El rectángulo dorado tiene 594 píxeles en cada lado y el rectángulo ocupa el resto del diseño (594 x 366).
Calculator Soup tiene una útil calculadora de proporción áurea donde puede establecer cualquier término (A, B o A + B) para encontrar los valores correctos de proporción áurea.
O simplemente puede usar este tipo de diseño de dos columnas, donde una columna es bastante más ancha que la otra. Está organizado y muestra claramente la jerarquía.
Fuente: National Geographic
Lo uso en mi sitio web porque la página de inicio es una colección de las publicaciones de mi blog, y siento que este es uno de los diseños más reconocidos para blogs:
Sin embargo, en mi opinión, el diseño simétrico que usamos en Elegant Themes es más moderno:
La proporción áurea y el espaciado
La proporción áurea puede ayudarlo a determinar dónde colocar los elementos de su diseño, las proporciones a usar y dónde dejar el espacio negativo. Aquí hay un ejemplo simple, y casi puede ver la superposición de Proporción áurea sin siquiera tener que ponerla en la parte superior:
Fuente: Digiarts 2011
Así es como se ve cuando aplico la Espiral Dorada en Photoshop:
Una vez más, la proporción áurea se basa en matemáticas, pero cuando se trata de aplicarla al diseño, no es perfecta. Ese diseño no se crea en un rectángulo dorado, por lo que la espiral dorada no tiene proporciones normales. Sin embargo, puede ver cómo puede guiar a un diseñador a elegir dónde colocar el elemento más grande del diseño, así como los elementos más pequeños y el espacio negativo.
También puede superponer la superposición Proporción áurea para aplicarla a diferentes elementos del mismo diseño:
Fuente: Branding de Lemongraphic. Ejemplo de Canva.
La proporción áurea y el contenido
Cuando piensa en el diseño y el espaciado de la proporción áurea, puede comenzar a decidir dónde colocar el contenido en su sitio web.
Veamos nuevamente el sitio web de National Geographic, esta vez con la superposición de proporción áurea de Canva:
El diseño se divide para que el contenido se alinee a lo largo de la línea central de la espiral. A la izquierda, hay un gran bloque de contenido. A la derecha, el contenido se vuelve más denso y hay mucho más espacio negativo. Hacia la curva central de la espiral, verá un segundo logotipo de National Geographic; no hay mejor manera de impulsar la marca del hogar que colocarla donde el ojo va de forma natural.
Este es un gran ejemplo de cómo la Espiral Dorada puede guiar su mirada a través de un diseño, incluso más allá de su componente principal. Esto es útil si tiene mucho contenido para incluir en una página. También notará que incluso con un diseño tan compacto y detallado, todavía hay espacio negativo allí.
Fuente: Diseño de Helms Workshop. Ejemplo de Canva.
Mención de honor: La proporción áurea e imágenes
La proporción áurea también se utiliza en la composición fotográfica. En lugar de crear una espiral dorada, la proporción áurea divide la imagen en seis bloques. Se utiliza la misma proporción áurea en este tipo de cuadrícula: los anchos y alturas de las secciones son 1 o 0,618.
Fuente: Canva
Luego usa las intersecciones para componer la toma. El objetivo es colocar un sujeto o la parte principal de un sujeto en una de las líneas que se cruzan; el sujeto no debe estar centrado y algunos bloques deben dejarse vacíos (en la mayoría de los casos, al menos, fotografías macro y retratos en primer plano). llenará casi todo el marco). Al hacer esto, crea un retrato más interesante que si el sujeto estuviera centrado.
Una forma mucho más sencilla y accesible de seguir esta regla es utilizar la cuadrícula Regla de los tercios, que probablemente tenga en la cámara incorporada de su teléfono o en su DSLR.
Aquí hay una foto que tomé del hijo de mi prima. He colocado la cuadrícula de la Regla de los tercios para mostrarle dónde el sujeto llena y dónde no llena el marco.
Además, mire cómo la Espiral Dorada se envuelve casi perfectamente alrededor del sujeto:
La proporción áurea se diferencia de la regla de los tercios porque la cuadrícula de la regla de los tercios tiene secciones con longitudes y anchos iguales. Sin embargo, está tan cerca, y mucho más fácil, que esto es lo que los fotógrafos usan comúnmente al componer o editar una foto.
Terminando
La proporción áurea puede usarse tal cual o adaptarse a sus propósitos y ajustarse para el tamaño: las matemáticas pueden tener reglas estrictas, pero la creatividad no. Si bien puede usar la proporción áurea desde el principio para guiar su diseño, también puede usarla después de haber comenzado a diseñar para realizar ajustes y mejoras. El objetivo es que la relación le oriente, no forzar el ajuste de un diseño.
¿Estás listo para jugar con el diseño de tu sitio web aún más? Consulte nuestro artículo sobre el uso de las nuevas opciones de altura y ancho de Divi para crear un diseño receptivo.