Los 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 sorprende que sus resultados tengan un aspecto natural.
Foto de Bogomil Mihaylov en Unsplash
La proporción áurea también tiene otros nombres:
- Proporción Divina
- media áurea
- sección dorada
- Phi (letra griega)
Voy a explicar las matemáticas de la proporción áurea de la manera más simple posible y sin entrar en los detalles que en realidad no necesitas saber. Si puedes mantenerte al día con las matemáticas, genial. Pero si no puede, no hay problema: aún podrá usar 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 dentro. 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.
Tomas una línea y la divides 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 son iguales 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.
Volvamos 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:
El cuadrado rojo tiene cuatro lados de igual longitud, y esa longitud es igual a la longitud más corta del rectángulo. Al dividir en secciones ese cuadrado, creas automáticamente otro rectángulo más pequeño (delineado en verde). Juntos, crean un diseño completo de Proporción Dorada 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 opuesto de cada sección transversal cuadrada y rectangular pequeña, 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, prácticamente puede crear una Espiral Dorada:
Fuente: Las matemáticas son divertidas
Los círculos dorados
A veces, verá círculos dibujados en los cuadrados en lugar de la espiral o además de ella. Si dibuja círculos perfectos en los cuadros de la superposición de la 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 utilizan los círculos dorados:
Fuente: Charlas híbridas
Has visto esto antes, mucho
La naturaleza está llena de la proporción áurea. Está en la flora, las conchas, el clima…
Fuente: Foto de Annie Spratt en Unsplash
Fuente: Foto de la NASA en Unsplash
Y debido a que lo vemos tan a menudo, 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:
Fuente: staceysdetailinginc.com
A veces dices, “No tengo idea de lo que estás hablando… oh, espera. Ahora lo veo. Creo.»
Fuente: Expertos en marketing
Otras veces podrías volverte loco mirándolo…
Fuente: paredes anchas
…pero si te concentras en el Rectángulo Dorado principal, se vuelve un poco más claro:
Echemos un vistazo a un ejemplo de referencia común: 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 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 encaja completamente y solo en las secciones específicas. Si ese fuera el punto, el lado derecho del Partenón sería un gran bloque 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 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 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 que 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 la proporción áurea en la que 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 un poco más ancha que la otra columna. 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 puedes ver la superposición de la proporción áurea sin siquiera tener que ponerla encima:
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 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 para 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 proporción áurea para aplicarla a diferentes elementos del mismo diseño:
Fuente: Marca 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.
Miremos de nuevo el sitio web de National Geographic, esta vez con la superposición de la 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 floritura central de la espiral, verá un segundo logotipo de National Geographic: no hay mejor manera de impulsar la marca de hogar que colocarla donde el ojo se dirige naturalmente.
Aquí hay un gran ejemplo de cómo la Espiral Dorada puede guiar su vista 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 completo 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 Dorada divide la imagen en seis bloques. En este tipo de cuadrícula se utiliza la misma proporción áurea: los anchos y altos de las secciones son 1 o 0,618.
Fuente: Canva
A continuación, utiliza 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 de 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 usar la cuadrícula de la regla de los tercios, que probablemente tengas en la cámara integrada de tu teléfono o en tu DSLR.
Aquí hay una foto que tomé del hijo de mi primo. He colocado la cuadrícula de la regla de los tercios sobre él para mostrarle dónde el sujeto llena y no llena el marco.
Además, mira cómo la Espiral Dorada envuelve casi perfectamente el tema:
La proporción áurea difiere de la regla de los tercios porque la cuadrícula de la regla de los tercios tiene secciones con longitudes y anchuras iguales. Sin embargo, está tan cerca, y es mucho más fácil, que esto es lo que los fotógrafos suelen usar al componer o editar una foto.
Terminando
La proporción áurea puede usarse tal cual o adaptarse a sus propósitos y modificarse según 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 que haya 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 ella.
¿Listo para jugar aún más con el diseño de su sitio web? Consulte nuestro artículo sobre el uso de las nuevas opciones de alto y ancho de Divi para crear un diseño receptivo .