Sezione aurea e web design: come usarla e perché?
Se ne parla spesso come di un qualcosa di affascinante e sfuggente che ancora nelle nostre menti di web designer stenta a prendere forma in un concetto pratico: sto parlando della sezione aurea, ovvero di quel numero straordinario che, come in una leggenda metropolitana mai scongiurata, sembra essere portatore di intrinseche e meravigliose capacità.
Cosa si intende con sezione aurea?
La sezione aurea (indicata anche con la lettera greca Φ) é, in pratica, una proporzione matematica particolare che trova la sua soluzione nel seguente valore numerico:
1,618033988749895 ≈ 1,618
Il valore 1,618 (spesso approssimato a 1,62) é stato identificato come una vera e propria legge strutturale del corpo umano già dai tempi di Leonardo da Vinci e, a partire dal rinascimento, tali idee si sono tradotte in una vera e propria soggezione di tutte le discipline (botanica, fisica, architettura, pittura, musica, zoologia, geometria e non solo) alla filosofia della “Sectio Aurea” come universale detentrice della bellezza e dell’armonia estetica.
Vediamo come funziona a livello matematico questa affascinante teoria: Prendiamo una linea, che chiameremo X, e suddividiamola in due sezioni distinte, secondo i criteri della sezione aurea. In questo modo avremo una sezione più corta (B) che sta alla sezione più lunga (A) con la stessa proporzione con cui questa sezione più lunga (A) sta all’intera linea (X). La formula matematica di questo esperimento si traduce in:
A : B = X : A
Come potete notare, il rapporto che unisce le diverse sezioni tra loro é e sarà sempre di circa 1,62.
La sezione aurea in natura
La sezione aurea é quindi un semplice (per cosi dire) rapporto di numeri e proporzioni che trova il suo fondamento in ogni dove, dalla natura all’arte, e che ha da sempre impressionato la mente (e le sensazioni) dell’uomo.
In natura la sezione aurea prende spesso vita in una forma a spirale, rintracciabile ovunque, dalla traiettoria di volo di alcuni insetti alle galassie.
Sezione aurea in natura - Spirale di una conchiglia
Sezione aurea in natura - la forma a spirale di una galassia
Sezione aurea in natura - Semi di girasole
Sezione aurea in natura - Ragnatela a spirale
Sezione aurea in natura - Foglie di cavolfiore
Ma la sezione aurea ci tocca ancora più da vicino: nell’anatomia umana, infatti, questa sezione si trova nel rapporto tra l’altezza di un individuo e la distanza dal suo ombelico e la terra. Equilibrio che diviene evidenza nel celebre “Uomo vitruviano” di Leonardo Da Vinci.
Sezione aurea e Anatomia: L'uomo Vitruviano
La sezione aurea nell’arte
Diversi esperimenti dimostrano che la percezione umana rivela una spiccata sensibilità, scevra da ogni razionalità o logica, per le proporzioni della sezione aurea. Tale percezione farebbe si che gli artisti tendano istintivamente a disporre gli elementi di una qualsiasi composizione artistica secondo tali proporzioni, in modo da ricalcare i canoni di armonia e bellezza che la sezione aurea riesce a far emergere in modo del tutto naturale.
La Flagellazione di Piero della Francesca, dipinto del 1469. Il lato della scena nello sfondo (in secondo piano) ha un rapporto aureo (1 a 1,618) con la lunghezza dell’intero dipinto.
Nella Gioconda di Leonardo da Vinci la proporzione aurea é visibile nella disposizione degli elementi del viso, nell’area che va dalla testa al mento e in quella che va dal mento alle mani.
La sezione aurea nella fotografia
L’espansione a spirale tipica della sezione aurea nella fotografia prende il nome di “regola dei terzi” ed é il sistema più efficace –e semplice – da seguire per ottenere immagini d’effetto e accattivanti.
Sezione aurea e web design
Se le proporzioni e l’armonia della sezione aurea hanno un potenziale tale da riuscire a influenzare positivamente l’inconscio di ogni individuo, perché non riflettere tali proporzioni nel campo del web design?
In fin dei conti lo scopo principale di un sito web é di comunicare e di esprimere, anche attraverso il proprio design, informazioni. Potrebbe quindi essere una buona idea adottare le proporzioni auree per ottenere layout più armoniosi e gradevoli, tanto più che farlo é veramente semplice.
Come applicare la sezione aurea al web design?
Partiamo dal presupposto che il nostro sito sia composto da due sezioni, quella del contenuto a sinistra (che generalmente ha una dimensione maggiore) e quella laterale contenente una sidebar, come mostrato nella seguente immagine:
Piuttosto che definire le dimensioni delle due sezioni in modo del tutto casuale, con un piccolo calcolo possiamo ottenere le dimensioni proporzionali tra loro secondo i principi della sezione aurea.
Come?
Prendiamo la dimensione totale del nostro layout (960 pixel) e dividiamo tale valore per il “numerino magico” (1,62):
960 / 1,62 = 592 pixel (larghezza della sezione adibita al contenuto)
960 – 592 = 368 pixel (larghezza della sidebar)
Facciamo la prova della conchiglia?
Semplicemente perfetto!
Possiamo applicare le proporzioni auree anche ad altri elementi delle nostre pagine web, come banner, box pubblicitari o altre piccole sezioni. Dividendo infatti la larghezza di un box per il valore 1,62 possiamo ottenere la corretta altezza in proporzione:
Seguendo questa semplice formula ogni elemento delle nostre pagine web potrebbe avere una proporzione naturale ed equilibrata rispetto all’intera composizione; potremo cosi realizzare layout intrinsecamente più gradevoli e armoniosi per l’occhio e la percezione degli utenti che visiteranno i siti una volta messi online.
Conclusioni
Abbiamo visto come la matematica possa influenzare gli equilibri di una composizione di design e non solo. La sezione aurea é senza dubbio una delle proporzioni più affascinanti e misteriose che la natura ci regala e ci permette di elaborare capolavori di armonia e senso estetico.
Avete avuto modo di applicare le regole delle proporzioni divine ad un vostro progetto di web design? E se lo avete fatto, avete notato un miglioramento estetico del progetto? Sono curiosa di sentire le vostre impressioni su quest’argomento cosi controverso e curioso!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
35 commenti
Trackback e pingback
-
./lsd - Liquid Sky Design | Graphic Design Studio
[...] a proposito del nuovo background di Twitter parlavo della Spirale Aurea (o Proporzione Divina), argomento ripreso da Sara di ... -
sección áurea en diseño web | adrielmoran.com
[...] http://www.yourinspirationweb.com/2011/04/26/sezione-aurea-e-web-design-come-usarla-e-perche/ [...] -
Sección áurea y diseño web: cómo usarlo y por qué? | Adriel Moran
[...] aqui les dejo el link de la pagina original por si quieren darle una checada. http://www.yourinspirationweb.com/2011/04/26/sezione-aurea-e-web-design-come-usarla-e-perche/ [...]
Veramente un articolo interessante per coloro che seguono la Sezione Aurea come una vera e propria musa ispiratrice. Ho applicato ad un sito New Age che feci tempo fa questo concetto e piacque molto il sito.
Credo che a livello visivo il design prenda una certa armonia estetica che non puo’ non piacere ;)
Articolo molto interessante.. Nella creazione dei prossimi layout terrò sicuramente in considerazione la sezione aurea..!
Tentare non costa niente, e sperimentare qualcosa di nuovo e’ sempre stimolante, soprattutto nel nostro campo :) poi facci sapere come ti sei trovato!
Al prossimo giro ci proviamo! Grazie!
In bocca al lupo e facci sapere ;)
Ho sempre seguito la regola dei terzi per la fotografia, ma non avevo mai usato la sezione aurea per un sito fino al mese scorso.
La sto usando proprio ora su un nuovo progetto, l’ho applicata a delle pagine di specifiche dei prodotti: colonna stretta immagine prodotto, colonna larga dati tecnici. Niente male :)
Direi che da ora in poi sfutterò di più queste proporzioni.
Grazie per l’articolo :)
Adesso diventeremo tutti dei Leonardo Da Vinci del web design :D
ciao, leggendo i miei primi libri di web design (the principles of beautiful web design di Jason Beaird), mi è stato spiegato il numero d’oro o la proporzione divina o la sezione aurea (in base alla lingua cambia il nome ma non il rapporto.. per fortuna!). La spiegazione indicava che potevamo prendere in considerazione questo rapporto dal layout del sito, per definire le base di un corretto eqiuilibrio tra le sezioni della pagina.
Allego un video che ho visto su un cartoon della disney dove donald spiega tutto ;-)
http://www.youtube.com/watch?v=ACtjN4CSN50
Ancora grazie per avere parlato di questo argomento così interessante.
Aaaaaaaaaaaaaaaaaaah, Paperino nel mondo della matematica!!! Non sa quanti ricordi e quanta malinconia :)
Ps. ” The principles of beautiful web design di Jason Beaird”, bellissimo, BELLISSIMO libro! Complimenti per la scelta ;)
Fantastico articolo Sara, sono contenta che ci si interessi a questa pratica voodoo =)
Scherzi a parte, se ne parla davvero poco e spesso male, fortuna che ci sei tu =)
E ora andiamo con gli spilloni =P
Grazie Cla :)
credo che sia un argomento veramente affascinante di cui ancora si parla, soprattutto nel campo del web design italiano. Spero di aver innescato un po’ di curiosita’ ;)
Ciao ragazzi..bell’articolo come al solito Sarah complimenti :) Io ho iniziato ad applicare la sezione aurea da circa un’anno, in alcuni progetti. Direi che oltre a dare quel tocco in più al layout, aiuta anche a non perdere la testa durante la sua progettazione dando valori in pixel a caso ad ogni elemento.. :)
…anche se per ovviare a questo problema esistono anche le comodissime griglie :)
Ps. Ho cercato in lungo e in largo siti che ricalcano le misure della sezione aurea, ma non ho trovato niente. Se avete siti da segnalarmi, magari fatti da voi, mi farebbe piacere vederli :)
Ho adorato la sezione aurea fin dal mio esame di maturità, e continuare a vederla citata di articoli di webdesign è un’emozione! P.S. Cm esempio ci sarebbe stato bene anche il layout di twitter
Il vecchio layout di twitter aveva le proporzioni della sezione aurea, quello nuovo no..per questo non l’ho citato :)
Veramente c’è un articolo (se non sbaglio pubblicato proprio su YIW) in cui viene illustrato come il nuovo Twitter sia stato basato sulla sezione aurea e come adattare uno sfondo ad esso.
Il responsabile del design aveva postato l’immagine di riferimento:
http://www.flickr.com/photos/twitteroffice/5034817688/
poi certo, il sito essendo semi-fluido non la rispetta sempre.
@ sarah:
http://www.informationarchitects.jp/en/
Lettura utile e piacevole, grazie :)
@xp: grazie :)
@Dario: se era rivolto a me e all’articolo, grazie a te :)
conoscevo già e applicavo (si fa per dire) la legge dei terzi nella fotografia, ma la sezione aurea proprio ignoravo che esistesse, brava sarah mi hai mostrato la via verso un design più corretto =P
proprio ora devo farmi un layout, vediamo cosa salta fuori =)
Poi facci vedere, sono curiosa di quello che verra’ fuori da questi primi esperimenti con la sezione aurea :)
Molto interessante l’articolo, mi sfugge solo una piccola misura che è la distanza tra il contenuto e la sidebar (il gutter). In generale comunque la sezione aurea è applicata ai fogli standard da stampa a4, a3 etc…. in cui la diagonale del quadrato costruita sul lato corto corrisponde alla dimensione del lato lungo del formato. Ovviamente questo credo si sappia già. Non ho mai pensato all’utilizzo della sezione aurea nel design di un sito web, ma da oggi lo terrò in conto :). Thanks!
E’ bello vedere anche nel web design si possano utilizzare sinonimi di qualità ed equilibrio come la sezione aurea, lo terrò presente durante le prossime modifiche del mio sito, grazie!
Finalmente qualcuno che ne parla per bene, questo articolo è stato salvato in pdf ed è finito sul mio desktop ;)
Bell’articolo Sarah molto riflessivo, ti ho scritto sul tuo sito per avere informazioni visto ke mi piace il web ke libri e manualistica mi consigli. E per quelle belle immagini usi il 3d per fare come la lumachina?
Scusami ma mi piacciono le tue immagini e sono molto simpatiche tengono vivo il sito.
Buon lavoro Andrea
Non c’è che dire ottima intuizione, l’applicazione di tale regola nel campo del web posso affermare che è fondamentale per un ottimo equilibrio di immagine…
Complimeti
Io non l’ho mai adoperata e sono restio a farlo. A causa forse di precedenti esperienze in altro settore (creazione ambienti 3D per videogames) sono rimasto un fissato delle griglie e dell’uso di multipli del sistema base 8/potenza di 2, dato che si riporta alle risoluzioni dei monitor.
Trovo anche che l’adozione massiva di certi trend (perchè alla fine queste cose diventano trend) renda tutto più noioso, si parte in default a sbattere due guide a 960px di distanza in PS o ad impostare la stessa width sul wrapper, senza porsi il problema del contenuto. Idem per le proporzioni auree.
Come qualcuno ha fatto notare, non è poi chiaro come applicare spazi bianchi fra gli elementi.
Non fraintendetemi, non voglio dire che questi framework sono il problema, lo sono i designer che li adottano pedissequamente senza cognizione di causa.
Considerando questi vari aspetti, io preferisco esplorare soluzioni per conto mio, provando ad impostare varie griglie ecc. Non sono un esperto di Storia Del Design, ma da documentari che uno reperisce facilmente (tipo Helvetica) o libri che può capitare di sfogliare, si vede come i designer storici esplorassero la via delle griglie e che le composizioni fossero incredibilmente piacevoli.
Molto interessante!
:)
scusate… ma su un layout a tre colonne? come si applica questa regola?
anche io sarei curioso su come applicare il tutto in un layout a tre colonne
Articolo molto interessante, grazie. Ho trovato un programmino che genera la griglia con la proporzione aurea.
Non è gratuito, però per 15 giorni lo si può provare gratuitamente: http://www.phimatrix.com/download.htm e comunque non costa molto.
Massimo.