La proporción áurea: la guía definitiva para comprenderlo y usarlo


Los diseñadores de todo el mundo deben saber sobre la proporción áurea. Es una relación matemática que crea diseños estéticamente agradables. Dado que la Proporción Dorada existe con tanta frecuencia en la naturaleza, no es sorprendente que sus resultados sean de aspecto natural.

Proporción de oro

Proporción de oro

Foto de Bogomil Mihaylov en Unsplash

La Proporción Dorada también tiene otros nombres:

  • Proporción Divina
  • Media de oro
  • 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 Dorada de la manera más simple posible y sin entrar en los detalles que realmente no necesita saber. Si puedes mantenerte al día con las matemáticas, genial. Pero si no puede, está bien, aún podrá usar el concepto en sus diseños.

Para comprender la proporción áurea, primero debe comprender el rectángulo dorado

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:

Proporción de oro

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) además es igual a 1.618.

Volviendo 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. Ignora las líneas negras y mira los cuadros rojo y verde:

Proporción de oro

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, crea automáticamente otro rectángulo más pequeño (delineado en verde). Juntos, crean un diseño completo de Golden Ratio y una base para la Golden Spiral.

También puedes hacer un nuevo Rectángulo Dorado con el rectángulo más pequeño, como este que he delineado en azul:

Proporción de oro

Un diagrama tradicional de Golden Ratio tiene ocho rectángulos de oro:

Proporción de oro

Y aquí está el rectángulo dorado más pequeño, # 8:

Proporción de oro

Si comienzas en la parte inferior izquierda y haces un arco para conectar el lado más alejado de cada sección transversal de un rectángulo cuadrado y pequeño, obtendrás 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 una espiral dorada:

Proporción de oro

Fuente: Math is Fun

Los círculos de oro

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 recuadros de la superposición Golden Ratio, tendrán la relación 1: 1.618 con un círculo adyacente.

Proporción de oro

Fuente: Departamento de Limelight

Los logotipos de Pepsi y Twitter usan los Círculos Dorados:

Proporción de oro

Fuente: conversaciones híbridas

Ya has visto esto antes, Mucho

La naturaleza está llena de la proporción áurea. Está en flora, conchas, clima …

Proporción de oro

Fuente: Foto de Annie Spratt en Unsplash

Proporción de oro

Fuente: Foto de la NASA en Unsplash

Y como lo vemos con tanta frecuencia, nuestros cerebros lo prefieren. Esa atracción innata es la razón por la cual es un diseño tan poderoso para que lo usen 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:

Proporción de oro

Fuente: staceysdetailinginc.com

A veces se dice: "No tengo idea de lo que estás hablando … oh, espera. Ahora lo veo. Yo creo que."

Proporción de oro

Fuente: Marketing Insiders

Otras veces podrías volverte loco mirándolo …

Proporción de oro

Fuente: paredes anchas

… pero si te enfocas en el rectángulo dorado principal, se vuelve un poco más claro:

Proporción de oro

Echemos un vistazo a un ejemplo comúnmente referenciado: el Partenón

Proporción de oro

Fuente: Bloq Creativo

Al principio, puede ver esto y decir: “Eso me parece simétrico. ¿Cómo encaja lo que estoy viendo 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 se ajusta 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 se seccionaría en bloques más pequeños.

En cambio, la relación se usa para crear armonía y proporción, y eso se puede interpretar de diferentes maneras.

Si bien la Proporción Dorada se basa en las 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 de diseño. Además, hay varias formas de colocar diagramas de Golden Ratio sobre él:

Proporción de oro

Fuente: Archinect

Proporción de oro

Fuente: Esther Sugihto en Medium

Proporción de oro

Fuente: GoldenNumber.net

La proporción áurea y el diseño del sitio web

Ya sea que te interesen las matemáticas o que tu cabeza esté a punto de explotar, el Golden Ratio 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 perfecto de Golden Ratio, establezca las dimensiones en 1: 1.618. Por ejemplo, puede establecer el ancho en 960 píxeles y la altura 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 dorada donde puede establecer cualquier término (A, B o A + B) para encontrar los valores correctos de la 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.

Proporción de oro

Fuente: National Geographic

Lo uso en mi sitio web porque la página de inicio es una colección de mis publicaciones de 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 utilizamos en Elegant Themes es más moderno:

Proporción de oro

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 espacio negativo. Aquí hay un ejemplo simple, y casi puedes ver la superposición Golden Ratio sin siquiera tener que ponerla en la parte superior:

Proporción de oro

Fuente: Digiarts 2011

Así es como se ve cuando aplico la espiral de oro en Photoshop:

Proporción de oro

Una vez más, la proporción áurea se basa en las 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 está fuera de las 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 Golden Ratio para aplicarla a diferentes elementos del mismo diseño:

Proporción de oro

Fuente: Branding por Lemongraphic. Ejemplo de Canva.

La proporción áurea y el contenido

Cuando piense 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 Golden Ratio de Canva:

Proporción de oro

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 llevar la marca a casa que colocarla donde el ojo va naturalmente.

Aquí hay un gran ejemplo de cómo la Espiral Dorada puede guiarte por un diseño, incluso más allá de su componente principal. Esto es útil si tiene mucho contenido para exprimir en una página. También notará que incluso con un diseño tan completo y detallado, todavía hay espacio negativo allí.

Proporción de oro

Fuente: Diseño de Helms Workshop. Ejemplo de Canva.

Mención de honor: la proporción áurea y las imágenes

La proporción áurea también se utiliza en la composición de fotografía. En lugar de crear una espiral dorada, la proporción áurea divide la imagen en seis bloques. La misma proporción áurea se usa en este tipo de cuadrícula: los anchos y las alturas de las secciones son 1 o 0.618.

Proporción de oro

Fuente: Canva

Luego usa las intersecciones para componer la toma. El objetivo es colocar un sujeto o 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ía 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 manera mucho más simple y accesible de seguir esta regla es usar la cuadrícula Regla de los tercios, que probablemente tenga en la cámara integrada de su teléfono o en su DSLR.

Aquí hay una foto que tomé del hijo de mi primo. He colocado la cuadrícula de la Regla de los tercios sobre ella para mostrarle dónde el sujeto llena y no llena el marco.

Proporción de oro

Además, mira cómo la espiral de oro se ajusta casi perfectamente al tema:

Proporción de oro

La proporción áurea difiere de la regla de los tercios porque la cuadrícula de la regla de los tercios tiene secciones con igual longitud y ancho. Sin embargo, está tan cerca, y es 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 Dorada se puede usar tal cual o adaptada a sus propósitos y ajustarse para su 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 ha comenzado a diseñar para realizar ajustes y mejoras. El objetivo es que la proporción lo guíe, no forzar el ajuste de un diseño en él.

¿Estás listo para jugar con el diseño de tu sitio web aún más? Mira nuestro artículo sobre usando las nuevas opciones de altura y anchura de Divi para crear un diseño receptivo.