Guida per designer alla sezione aurea

guida-per-designer-sezione-aureaHai mai sentito parlare della sezione aurea? Vuoi sapere perché è qualcosa che ogni designer dovrebbe conoscere ed utilizzare?

Questo articolo vuole essere una guida completa e definitiva a uno dei più potenti strumenti di ogni buon designer. Ti spiegherò che cos’è la sezione aurea, da dove cavolo spunta fuori e, soprattutto, come usarla per la grafica e il design attraverso esempi, esperienze, consigli e risorse.

Ok, sei pronto? Allora, procediamo!

Come avrai capito, questo articolo parla di quel particolare rapporto matematico che prende il nome di Sezione aurea ma anche di Rapporto aureo (in inglese Golden ratio, il nome più comune), Numero aureo, Costante di Fidia e addirittura Proporzione divina.

Si, ok, Lorenzo, mi fa piacere questo sfoggio di sinonimi però arriviamo al dunque, che diavolo è sta sezione aurea??

Il mio alter ego ha pienamente ragione, non perdiamo tempo e diamo un po’ di informazioni importanti. Partendo da quella principale: che cos’è la sezione aurea? Più avanti vedremo invece come puoi utilizzarla per i tuoi progetti e quali sono le migliori risorse da sfruttare, ma procediamo con ordine!

Che cos’è la sezione aurea?

Si può definire in molti modi ma, sostanzialmente, la sezione aurea è un rapporto tra due numeri. In particolare, è un rapporto tra due numeri che dà come risultato il numero irrazionale 1,618033 (e tanti tanti altri decimali dopo). Questo numero, essendo veramente unico e particolare, un po’ come il pi greco, prende il nome di Phi.

Un altro modo per definirla è prendere un numero a e un numero b e dire che a+b sta ad a come a sta a b.

Sezione aurea a+b

I famosissimi numeri della successione di Fibonacci (1,1,2,3,5,8,13,21,34,55,89,144…), il cui ultimo numero viene calcolato sommando i due precedenti, su wikipedia è spiegato meglio, sono strettamente legati alla sezione aurea. Infatti i rapporti tra due numeri qualsiasi, tra quelli affiancati, della successione danno come risultato la costante Phi della sezione aurea (1,61blablabla).

In pratica si può anche dire che la sezione aurea è la relazione tra due numeri consecutivi della successione di Fibonacci.

Ma cosa rende così speciale la sezione aurea? Cioè, perché cavolo io, Lorenzo Miglietta, graphic designer, dovrei mettermi a parlare di questo rapporto aureo??

Perché il rapporto aureo è alla base di molte delle forme più armoniose della natura. Lo stesso nome, “aureo”, indica il senso di armonia e di perfezione generato dalle forme che si basano su questo numero nel nostro cervello.

In natura

La sezione aurea in natura assume spesso la forma della spirale costruita su rettangoli che seguono il rapporto 1,618:1. La spirale aurea è infatti una spirale di tipo logaritmico che cresce seguendo un cosiddetto fattore di accrescimento pari a Phi.

Sezione aurea

Alcuni esempi della spirale aurea in natura possono essere alcune forme di conchiglie, la disposizione degli stami dei fiori, la forma delle galassie e dei cicloni e tantissime altre.

Invece di postare carrellate di immagini viste e riviste da tutte le parti ho deciso di postare questo meraviglioso video che mostra le correlazioni tra i numeri, in particolare il numerino che ci piace tanto, e la natura.

Quest’altro video mi piace un po’ meno (sarà la musichetta in stile servizio di Chi l’ha visto?), ma è ancora più esplicativo riguardo alle relazioni tra il rapporto aureo e le forme naturali (anche le impronte digitali!).

Nell’architettura e nell’arte

L’uomo, si sa, ha sempre copiato dalla natura per fare le sue opere d’arte, che siano pittoriche o architettoniche. Proprio il nome sezione aurea deriva dall’utilizzo greco di questa formula, che veniva utilizzata per calcolare le proporzioni armoniose tra le varie parti degli edifici o delle statue rappresentanti le figure umane.

Eh si, perché pure nell’uomo è largamente presente la golden ratio. Lo sapevano bene Vitruvio prima e Leonardo Da Vinci con il suo famoso “Uomo Vitruviano“. In particolare, nell’essere umano, il rapporto tra l’altezza totale e l’altezza dall’ombelico a terra indovinate che numero dà? 1,618, esatto!

Facendo una ricerca su Google immagini, ad esempio con la chiave in inglese “vitruvian man golden ratio” troverete decine e decine di possibili applicazioni a quel famoso disegno della sezione aurea e delle forme generate da questo rapporto.

Che comunque pure i greci la usavano piuttosto bene eh:

partenone sezione aurea

 

Ok, la prima parte della guida per designer alla sezione aurea è conclusa.

Prima di andare alle cose pratiche vedendo come la sezione aurea può essere utilizzata nel design, nella grafica, nel web-design e perfino nella fotografia ti chiedo di comprendere quante ore ho impiegato per scrivere questa guida nel modo più completo possibile.

Tranquillo non ti chiedo nulla in cambio! Se però questo articolo ti è piaciuto che ne dici di seguire Grafigata sul tuo social preferito? 😉

Grazie mille! Ma adesso continuiamo!

Come puoi usare la sezione aurea per il design

Ok, una volta spiegato il suo significato matematico e compositivo della natura, applicare la “sezione dorata” può apparire molto più difficile di quello che è in realtà. Ci sono infatti alcuni trucchetti che puoi usare per migliorare i tuoi progetti senza passare ore a fare calcoli astrusi.

Il primo trucco è molto famoso ed è chiamato la regola dei terzi. Essa consiste sostanzialmente nel suddividere la pagina, la foto o il layout su cui si sta lavorando in tre parti verticali e in tre parti orizzontali. I 4 punti in cui queste linee si incontreranno saranno quelli su cui andrà focalizzata l’attenzione.

Perché? Beh, perché così ragiona il cervello umano, siamo abituati a suddividere quello che vediamo in aree di interesse in base a come sono strutturate e a concentrarci sui punti focali posizionati nell’area centrale di quello che vediamo.

Un altro metodo per implementare la sezione aurea nei tuoi progetti è utilizzare le forme e le griglie della stessa. Ad esempio costruire delle grafiche basandosi sulla spirale aurea vista prima o sulla divisione dell’area di lavoro in base ai rettangoli e alle proporzioni del rapporto aureo.

Ma vediamo alcune applicazioni del numero aureo nelle varie categorie del design.

La sezione aurea nel logo design

Una delle applicazioni più comuni e più utilizzate è all’interno del graphic design, e in particolare nella costruzione dei loghi. Creare un logo non è una cosa semplice, esistono delle regole, ed esistono pure delle possibili applicazioni di formule geometriche come appunto quella del rapporto aureo.

Anche te puoi applicare le forme e le griglie quando disegni su carta o quando lavori con Photoshop o Illustrator (se stai lavorando su un logo, però, ovviamente su Illustrator, e qua spiego perché). Tra poco vedremo anche alcune utili risorse e tool per costruire forme auree su questi programmi.

Di esempi di loghi costruiti seguendo i principi e le forme del rapporto aureo ce ne sono moltissimi. Ti faccio vedere quelli che, secondo me, sono gli esempi più esplicativi.

Innanzitutto c’è il logo della National Geographic, le cui proporzioni sono un palese omaggio alle armonie auree. Il rapporto tra i due lati del rettangolo infatti non devo nemmeno dirvi quanto è, vero?

National geographic sezione aurea

Altro calzante esempio è il logo della Apple, composto interamente da cerchi i cui raggi danno i numeri della successione di Fibonacci.

logo apple sezione aurea

E infine il nuovo logo della Pepsi (ne hanno cambiati molti, seguendo le regole per fare un buon rebranding), composto anch’esso da alcune armoniose e “aureose” forme geometriche.

logo pepsi sezione aurea

La sezione aurea nella fotografia

Anche nella fotografia si possono applicare le stesse regole che si applicano alla grafica e al design. In particolare è molto utile la regola dei terzi. Ad esempio una regola non scritta per quando si fotografa frontalmente un viso è quella di far stare gli occhi all’altezza dei due punti di incrocio superiori.

Le forme, in particolar modo la spirale aurea, possono anche essere utilizzate per creare fotografie dalle proporzioni fortemente armoniche. Come in questo caso, occhi nel punto focale della spirale e foto che sembra svilupparsi lungo questa linea:

fotografia sezione aurea

La sezione aurea nel web design

Le proporzioni della sezione aurea sono largamente utilizzate anche nella costruzione dei layout dei siti web. Ad esempio si segue molto spesso il rapporto 1,618:1 tra la colonna dei contenuti e la sidebar (la barra laterale di un sito).

Qui un esempio di come può essere trovata una giusta proporzione all’interno di un sito web:

layout sito sezione aurea

In qualsiasi momento, se avete una larghezza totale di un layout potete utilizzare la formula scritta nell’immagine qui sopra per ricavare le proporzioni auree.

La sezione aurea nella formattazione dei testi

Già, persino nella formattazione dei testi il rapporto aureo viene utile. Ad esempio se si vuole ricavare la grandezza più armoniosa per il titolo di un paragrafo il cui testo ha un corpo di 14 punti, si può moltiplicare il corpo per 1,618.

14 x 1,618 = 22,652

Quindi un titolo di 22 o 23 punti sarà sicuramente perfetto per un paragrafo di corpo 14.

Alcuni strumenti utili

Come promesso, a conclusione di questa guida, ecco un elenco di strumenti, tool e risorse utili per calcolare e utilizzare la sezione aurea nel design.

La prima risorsa è un “must have” per ogni graphic designer: un pacchetto .rar che ho preparato per te e che contiene:

  • Il template della spirale aurea per Illustrator
  • I file con le griglie auree a 12, 16 e 24 colonne per Photoshop, Illustrator, Indesign e Flash.

Insomma, c’è tutto quello che ti serve per poter progettare con la sezione aurea! Ed è GRATIS! Basta iscriversi alla Newsletter di Grafigata per scaricarlo! 🙂

(Se invece sei già tra i tanti iscritti, basta semplicemente scrivere il tuo indirizzo e-mail e potrai scaricarlo immediatamente!)

Queste sono invece altre utili risorse per la progettazione:

  • goldenRATIO – app a pagamento per dispositivi Apple utile a progettare siti web, interfacce e layout con il rapporto aureo;
  • PhiCalculator – applicazione gratuita sia per Mac che per PC;
  • Golden Ratio Calculator Typography – sito web che permette di calcolare le proporzioni più armoniose tra dimensione di testi e larghezza del sito web
  • CalcoloAureo – sito italiano per calcolare in modo rapido e interattivo le dimensioni di un rettangolo in sectio aurea;
  • Atrise Golden Section – applicazione a pagamento (con versione trial di 30 giorni) che mette a disposizione griglie, layout e forme da applicare a fotografie e progetti vari.

Inoltre, se volete approfondire l’aspetto teorico e storico del numero Phi vi consiglio questi due ottimi libri:

Conclusioni

Siamo giunti a conclusione di questa guida per designer alla sezione aurea. Sei convinto adesso di quanto possa essere potente come strumento per creare cose belle? Cose armoniose ed equilibrate?

Personalmente la sezione aurea è una cosa che mi affascina incredibilmente e ogni qual volta ne ho la possibilità la cerco sempre di utilizzare.

 

Fammi sapere, nel box dei commenti qui sotto, che ne pensi di questo articolo. Come utilizzi il rapporto aureo? Hai altri esempi o risorse da consigliare?

Alla prossima,

Lorenzo.

  • Diego Ciocia

    Mi sto interessando proprio in questo periodo a come poter integrare tutto ciò nei progetti che faccio, grazie mille anche per le risorse!

    • Grazie a te per questo commento Diego!
      Spero di vederti ancora sul blog 🙂
      L.

  • alan zirpoli

    Ciao, gran bell’articolo. Recentemente sono ricaduto in fissa, come ciclicamente mi accade, per questa canzone. Decisamente a tema. Che tempismo https://www.youtube.com/watch?v=jY3wQtBOaeg

    • Ciao Alan, grazie mille per questo commento e wow, che figata! Una canzone costruita sulla successione di Fibonacci! 🙂
      So anche che la sezione aurea trova grandi applicazioni anche, ad esempio in certa musica classica e sulla sua composizione ma non ho mai approfondito la cosa 🙂
      L.

  • Marcel

    Il Templio e il logo Apple sono esempi fasulli!
    Mi sono disiscritto dalla newsletter dopo aver visto questi due esempi più volte sbugiardati dal web… EDDAI!

    • Ciao Marcel!
      Forse ne so meno di te sull’argomento ma dammi almeno qualche link così posso approfondire la cosa e magari correggermi! Da quel che risulta a me il Partenone è uno degli esempi più famosi dell’applicazione del numero Phi all’architettura ma non sono architetto, quindi potrei sbagliarmi così come si sbagliano le mie tante fonti.
      Comunque non mi risulta che tu ti sia iscritto alla newsletter né che quindi te ne sia cancellato, nel qual caso, comunque, mi spiace molto!
      Grazie,
      Lorenzo.

  • Grazie Lorenzo, mi hai aperto un mondo.

    • Ciao Matteo!
      Contento di esserti stato utile! 🙂
      L.

  • EleMeoww

    grazie! 🙂

    • Ciao Ele!
      Grazie a te per il commento! 🙂
      L.

  • Salvatore

    Interessante articolo, ma se dovessi utilizzare il tuo tempale su un progetto con altre misure come si applica mantenendo gli stessi principi della sezione aurea? Esempio un progetto 404*404