La ricerca di un equilibrio tra gli elementi di una pagina web gioca un ruolo fondamentale per stabilire un dialogo con l’utente. Una disposizione caotica avrà sulla user experience un feedback negativo e pregiudicherà le finalità comunicative del sito. La simmetria del layout appiana un senso estetico comune e facilita l’interazione. Oggi poi il design delle pagine è votato al minimalismo e, al grido di “Less Is More”, si tende a semplificare l’interfaccia grafica in modo da non dirottare l’attenzione dell’utente in zone d’ombra inefficaci e improduttive.

 

Design non è solo bellezza e avanguardia, ma in egual misura produttività ed efficacia.

 

Quando si lavora all’impaginazione dei contenuti è necessario stabilire una gerarchia degli stimoli visivi immaginando il layout finale non come una semplicistica sommatoria dei suoi elementi. Questo approccio è in linea con i precetti della psicologia della Gestalt, corrente nata agli inizi del XX secolo in Germania da cui la famosa massima: “Il tutto è più della somma delle singole parti”. Per questo motivo non bisogna prestare attenzione solo ai singoli elementi che compongono un oggetto, ma soprattutto alla percezione che si ha di quell’oggetto.

 

 
 

Equilibrio e simmetria, dalla realtà alla progettazione grafica

Il concetto di equilibrio si lega indissolubilmente a quello di armonia trovando già un chiaro indizio nell’etimologia latina della sua parola, aequilībrium, unione di aequus, uguale, e lībra, peso. I due piatti della bilancia, per effetto del medesimo peso, si dispongono orizzontalmente rimanendo perfettamente allineati, in equilibrio appunto. Nella realtà accade in ogni momento. Osserviamo oggetti che rimangono perfettamente in equilibrio, in una condizione che sembra votata quasi al perenne immobilismo. Basta però una piccola sollecitazione che quell’alchimia viene a mancare e tutto si sbilancia rompendo un ordine che vigeva sino ad un attimo prima.

Prendi l’esempio proposto da Steven Bradley in Design Principles: Compositional Balance, Symmetry And Asymmetry. Due bambini giocano su un’altalena e dando per scontato che siano coetanei, si bilanceranno facilmente purché seduti alla stessa distanza dal centro.

esempio di design simmetrico
 
E’ un’immagine che l’occhio percepisce come familiare e che non richiede uno sforzo cognitivo per la codifica. La variazione invece di dimensione di una figura produrrà un cambiamento che dovrà riflettersi sul bilanciamento dell’altalena. Per questo motivo la figura qui sotto non appare veritiera rompendo l’equilibrio visivo della composizione.

 
esempio non rispettato di simmetria
 
Dal punto di vista della progettazione grafica accade la stessa cosa. Nel layout ogni elemento ha un proprio spazio definito sulla base dell’importanza che gli viene attribuita dallo spettatore. A questo si aggiunge una direzione visiva, un movimento che definirà la sua capacità di spostamento, come se si trovasse in condizioni reali e quindi soggetto a forze che agiscono su di esso. Il bilanciamento del layout si può ottenere attraverso soluzioni simmetriche o asimmetriche.

 
 
 

Equilibrio simmetrico

La distribuzione uniforme degli elementi grafici produce un equilibrio simmetrico che si traduce in un layout dall’impatto gradevole che non appesantisce la vista. Il rispetto della simmetria si ottiene posizionando gli elementi grafici in modo equidistante rispetto ad un’asse centrale (equilibrio orizzontale) o disponendoli su un ipotetico asse verticale centrale (equilibrio verticale). La disposizione può anche avvenire attorno ad un punto centrale (equilibrio radiale).

La simmetria sviluppata orizzontalmente costituisce la soluzione più familiare, basti pensare ad una perfetta immagine speculare. Uno sviluppo radiale torna invece utile per donare movimento alla composizione indirizzando l’attenzione dell’utente dal centro verso l’esterno e viceversa.
 
simmetria orizzontale nel web design
 
simmetria verticale nella progettazione web
 
simmetria radiale nel layout di una pagina web
 
 
 

Equilibrio asimmetrico

Una progettazione asimmetrica dona al layout un carattere più deciso e dinamico suscitando maggiore curiosità rispetto a quello simmetrico. Il bilanciamento avviene mettendo in relazione elementi grafici diversi tra loro che con il giusto mix possono apparire ugualmente armoniosi. Questo è il caso, ad esempio, di due sezioni opposte, una costituita da un blocco di grandi dimensioni e l’altra da tanti piccoli blocchi utili a bilanciarne il peso. Oppure un’altra soluzione è la contrapposizione di un’immagine con un blocco di testo, un semplice escamotage per catturare l’attenzione e allo stesso tempo veicolare un’informazione.
 
design asimmetrico
 
asimmetria nella grafica di un sito web
 
esempio di equilibrio asimmetrico
 
 
 
Il tema dell’equilibrio ha origini antiche che affondano nello sviluppo della civiltà umana. L’occhio è attratto dalle simmetrie della natura e l’uomo le ricerca costantemente elevando la propria immagine a quella divina perfettamente inscritta nelle due figure perfette del cerchio e del quadrato.

 

L’immagine dell’articolo è di Elliott Erwitt, fotografo statunitense conosciuto nel mondo pubblicitario per i suoi ironici scatti in bianco e nero capaci di cogliere l’attimo.

Lascia un commento

© 2015-2019 DIRTY WORK
Web Design Grafica Comunicazione