La sezione aurea: la guida definitiva per comprenderla e utilizzarla
Pubblicato: 2019-06-07I designer di tutto il mondo dovrebbero conoscere la sezione aurea. È un rapporto matematico che crea disegni esteticamente gradevoli. Poiché la sezione aurea esiste così frequentemente in natura, non è una sorpresa che i suoi risultati siano dall'aspetto naturale.
Foto di Bogomil Mihaylov su Unsplash
La sezione aurea ha anche molti altri nomi:
- Divina Proporzione
- Significato d'oro
- Sezione Aurea
- Phi (lettera greca)
La matematica dietro la sezione aurea
Spiegherò la matematica della sezione aurea nel modo più semplice possibile e senza entrare nei dettagli che in realtà non è necessario conoscere. Se riesci a stare al passo con la matematica, ottimo. Ma se non puoi, va bene: sarai comunque in grado di utilizzare il concetto nei tuoi progetti.
Per capire la sezione aurea, devi prima capire il rettangolo aureo
Il Rettangolo Aureo è un grande rettangolo che ha un quadrato al suo interno. I lati del quadrato sono uguali alla lunghezza minore del rettangolo:
Fonte: Wikipedia
La sezione aurea è un numero che è (in qualche modo) uguale a 1,618, proprio come pi greco è approssimativamente uguale a 3,14, ma non esattamente.
Prendi una linea e la dividi in due parti: una parte lunga (a) e una parte corta (b). L'intera lunghezza (a + b) divisa per (a) è uguale a (a) divisa per (b). Ed entrambi questi numeri equivalgono a 1.618. Quindi, (a + b) diviso per (a) è uguale a 1,618 e (a) diviso per (b) è uguale a 1,618.
Torniamo al Rettangolo Aureo, perché è molto più facile da capire
Quando posizioni un quadrato all'interno del rettangolo, ne crea un altro più piccolo. Ignora le linee nere e guarda le caselle rosse e verdi:
Il quadrato rosso ha quattro lati uguali in lunghezza e quella lunghezza è uguale alla lunghezza più corta del rettangolo. Sezionando quel quadrato, crei automaticamente un altro rettangolo più piccolo (delineato in verde). Insieme, creano un layout completo della sezione aurea e una base per la spirale aurea.
Puoi anche creare un nuovo rettangolo dorato dal rettangolo più piccolo, come questo che ho delineato in blu:
Un diagramma della sezione aurea tradizionale ha otto rettangoli aurei:
Ed ecco il rettangolo dorato più piccolo, n. 8:
Se inizi in basso a sinistra e crei un arco per collegare il lato opposto di ogni sezione trasversale quadrata e rettangolare, otterrai la Spirale d'oro.
La sequenza di Fibonacci
La sequenza di Fibonacci è piuttosto semplice da capire: inizi con zero e 1, quindi ottieni il numero successivo sommando i due numeri precedenti. 0 + 1 = 1, quindi 1 + 1 = 2, ecc. I primi numeri nella sequenza sono 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.
Se usi quei numeri per creare quadrati con quelle larghezze, puoi praticamente creare una spirale dorata:
Fonte: La matematica è divertente
I cerchi d'oro
A volte vedrai dei cerchi disegnati nei quadrati al posto o in aggiunta alla spirale. Se disegni cerchi perfetti nelle caselle della sovrapposizione della sezione aurea, avranno il rapporto 1: 1,618 con un cerchio adiacente.
Fonte: Dipartimento Luci della ribalta
I loghi Pepsi e Twitter utilizzano i Golden Circles:
Fonte: Hybrid Talks
L'hai già visto, molto
La natura è piena della sezione aurea. È nella flora, nelle conchiglie, nel tempo...
Fonte: foto di Annie Spratt su Unsplash
Fonte: foto della NASA su Unsplash
E poiché lo vediamo così spesso, il nostro cervello lo preferisce. Questa attrazione innata è il motivo per cui è un layout così potente da utilizzare per i designer.
La sezione aurea nell'arte e nel design
A volte la sezione aurea è super facile da riconoscere:
Fonte: staceysdetailinginc.com
A volte dici: “Non ho idea di cosa stai parlando... oh aspetta. Ora lo vedo. Penso."
Fonte: Marketing Insider
Altre volte potresti impazzire a guardarlo…
Fonte: Widewalls
…ma se ti concentri sul Rettangolo Aureo principale, diventa un po' più chiaro:
Diamo un'occhiata a un esempio comunemente citato: il Partenone
Fonte: Creative Bloq
All'inizio, potresti vedere questo e dire: "Mi sembra simmetrico. In che modo quello che sto guardando si inserisce in quella cosa della spirale del rettangolo dorato?"
La sezione aurea non riguarda il modo in cui ogni parte di un design si adatta completamente e solo alle sezioni specifiche. Se questo fosse il punto, il lato destro del Partenone sarebbe un grande blocco e il lato sinistro sarebbe sezionato in blocchi più piccoli.
Invece, il rapporto viene utilizzato per creare armonia e proporzione, e questo può essere interpretato in diversi modi.
Sebbene la sezione aurea sia basata sulla matematica, può essere adattata in modi creativi. Nel caso del Partenone, la sezione aurea determina l'altezza e il posizionamento dei componenti del design. Inoltre, ci sono diversi modi per sovrapporre i diagrammi della sezione aurea:
Fonte: Archinect
Fonte: Esther Sugihto su Medium
Fonte: GoldenNumber.net
La sezione aurea e il design del sito web
Che ti piaccia la matematica o che la tua testa stia per esplodere, la sezione aurea è un po' più facile da capire in termini di design. Hai fatto il lavoro pesante. Ora è il momento di prendere l'overlay di base e rendere i tuoi componenti web perfettamente piacevoli.
La sezione aurea e il layout
Se desideri un layout della sezione aurea perfetta, imposta le dimensioni su 1:1.618. Ad esempio, puoi impostare la larghezza su 960 pixel e l'altezza su 594 pixel. Il rettangolo aureo è di 594 pixel su ciascun lato e il rettangolo occupa il resto del layout (594 x 366).
Calcolatrice Soup ha un utile calcolatore del rapporto aureo in cui è possibile impostare qualsiasi termine (A, B o A + B) per trovare i valori corretti del rapporto aureo.
In alternativa, puoi semplicemente utilizzare questo tipo di layout a due colonne, in cui una colonna è un po' più larga dell'altra. È organizzato e mostra chiaramente la gerarchia.
Fonte: National Geographic
Lo uso sul mio sito Web perché la homepage è una raccolta dei post del mio blog e ritengo che questo sia uno dei layout più riconosciuti per i blog:
A mio parere, però, il layout simmetrico che usiamo su Elegant Themes è più moderno:
La sezione aurea e la spaziatura
La sezione aurea può aiutarti a determinare dove posizionare gli elementi del tuo design, le proporzioni da utilizzare e dove lasciare lo spazio negativo. Ecco un semplice esempio e puoi quasi vedere la sovrapposizione della sezione aurea senza nemmeno doverla mettere sopra:
Fonte: Digiarts 2011
Ecco come appare quando applico la Spirale d'oro in Photoshop:
Ancora una volta, la sezione aurea è basata sulla matematica, ma quando si tratta di applicarla al design, non è perfetta. Quel disegno non è stato creato su un rettangolo dorato, quindi la spirale dorata è fuori dalle normali proporzioni. Tuttavia, puoi vedere come può guidare un designer a scegliere dove posizionare l'elemento più grande del design, così come gli elementi più piccoli e lo spazio negativo.
Puoi anche sovrapporre la sovrapposizione della sezione aurea per applicarla a diversi elementi dello stesso disegno:
Fonte: marchio di Lemongraphic. Esempio da Canva.
La sezione aurea e il contenuto
Quando pensi al layout e alla spaziatura della sezione aurea, puoi iniziare a decidere dove posizionare i contenuti sul tuo sito web.
Diamo un'occhiata di nuovo al sito Web di National Geographic, questa volta con la sovrapposizione della sezione aurea di Canva:
Il layout è suddiviso in modo che il contenuto si allinei lungo la linea centrale della spirale. A sinistra, c'è un grande blocco di contenuti. A destra, il contenuto diventa più denso e c'è molto più spazio negativo. Verso il ricciolo centrale della spirale, vedrai un secondo logo del National Geographic: non c'è modo migliore per guidare il marchio di casa che posizionarlo dove va naturalmente l'occhio.
Ecco un ottimo esempio di come la Spirale d'Oro può guidare il tuo sguardo attraverso un disegno, anche oltre il suo componente principale. Questo è utile se hai molti contenuti da spremere su una pagina. Noterai anche che anche con un design così ricco e dettagliato, c'è ancora spazio negativo lì dentro.
Fonte: Design di Helms Workshop. Esempio da Canva.
Menzione d'onore: la sezione aurea e le immagini
Il rapporto aureo viene utilizzato anche nella composizione fotografica. Invece di creare una spirale aurea, la sezione aurea divide l'immagine in sei blocchi. Lo stesso rapporto aureo viene utilizzato in questo tipo di griglia: le larghezze e le altezze delle sezioni sono 1 o 0,618.
Fonte: Canva
Quindi usi le intersezioni per comporre lo scatto. L'obiettivo è mettere un soggetto o una parte principale di un soggetto su una delle linee che si intersecano: il soggetto non dovrebbe essere centrato e alcuni blocchi dovrebbero essere lasciati vuoti (nella maggior parte dei casi, almeno - macrofotografia e ritratti ravvicinati riempirà quasi tutto il fotogramma). In questo modo, crei un ritratto più interessante che se il soggetto fosse centrato.
Un modo molto più semplice e accessibile per seguire questa regola è utilizzare la griglia della regola dei terzi, che probabilmente hai sulla fotocamera integrata del tuo telefono o sulla tua DSLR.
Ecco una foto che ho scattato al figlio di mio cugino. Ho posizionato la griglia della regola dei terzi su di essa per mostrarti dove il soggetto riempie e non riempie il fotogramma.
Inoltre, guarda come la spirale d'oro avvolge quasi perfettamente il soggetto:
La sezione aurea differisce dalla regola dei terzi perché la griglia della regola dei terzi ha sezioni di uguale lunghezza e larghezza. Tuttavia, è così vicino - e molto più semplice - che questo è ciò che i fotografi usano comunemente quando compongono o modificano una foto.
Avvolgendo
La sezione aurea può essere utilizzata così com'è o adattata ai tuoi scopi e ottimizzata per le dimensioni: la matematica può avere regole rigide, ma la creatività no. Sebbene sia possibile utilizzare la sezione aurea fin dall'inizio per guidare la progettazione, è anche possibile utilizzarla dopo aver iniziato a progettare per apportare modifiche e miglioramenti. L'obiettivo è avere il rapporto che ti guida, non forzare l'inserimento di un design in esso.
Pronto a giocare ancora di più con il layout del tuo sito web? Dai un'occhiata al nostro articolo sull'utilizzo delle nuove opzioni di altezza e larghezza di Divi per creare un design reattivo.