Oggi facciamo un po’ di chiarezza su alcuni dei principi del visual design, cosa sono e perchè servono.
Questi principi rappresentano dei punti di riferimento chiave per tutti coloro che lavorano alla parte più estetica di un progetto, non solo web, ma anche per i media tradizionali offline (poster, menu di un ristorante ecc).
La funzione di questi principi, in soldoni, è quella rendere un layout più chiaro da comprendere a livello visivo e, quindi, più semplice da utilizzare.
Contrasto
Che sia di colore, di proporzioni o di forma, il contrasto ha l’importantissimo compito di diversificare gli elementi in base all’enfasi che ciascuno di loro deve avere.
Il contrasto è uno tra i metodi più efficaci per creare un design di impatto.
Un esempio di utilizzo del contrasto possono essere differenti tipologie di CTA: stili differenti, assegnati in base all’importanza, guidano l’occhio dell’utente dove più serve.
Ripetizione
Ripetere gli elementi crea dei pattern e, di conseguenza, coerenza visiva all’interno del layout (nel web facilita, per quanto possibile, il lavoro agli sviluppatori).
Ripetere crea associazione tra i contenuti e unità all’interno di un progetto, suggerisce che oggetti differenti fanno parte di uno stesso gruppo o insieme.
Alcuni elementi che possono essere ripetuti sono: griglie di impaginazione, allineamenti, posizione, stile e gerarchia dei vari heading, filtri utilizzati o tipologia di immagini, forme, colori…
Allineamento
L’allineamento può sembrare un concetto basilare, ma è uno dei pilastri più importanti. Aiuta a guidare un utente nella scoperta dei contenuti e fa si che possa percepire un senso di ordine.
La connessione visiva che si va a creare tra gli elementi è invisibile, ma potente e porta a ridurre problemi di percezione.
Creare delle griglie a cui attenersi aiuta a strutturare un layout ben allineato e, di conseguenza, facilmente navigabile.
Prossimità
La prossimità aiuta a creare unità tra i vari elementi, raggruppandoli a livello visuale.
Distanza minore indica che fanno parte di uno stesso “contesto”. Distanza maggiore indica che non sono correlati.
Se posizioniamo una immagine vicino ad un paragrafo, comunichiamo visivamente che fanno parte di uno stesso contesto, che c’è un legame concettuale.
Gerarchia
Uno tra i più forti principi di visual design. Aiuta ad enfatizzare determinati contenuti o elementi. Se tutto è impostato con uno stesso stile, nulla avrà una posizione di rilievo.
L’organizzazione visiva che ne nasce costruisce a tutti gli effetti un percorso per recuperare informazioni, dalla più importante a quella meno di rilievo.
Per gli heading, ad esempio, è importantissimo agire su peso, stile e dimensione del carattere, in modo da indirizzare l’attenzione su ciò che vogliamo mettere in risalto.
Equilibrio
L’equilibrio è la distribuzione dei pesi all’interno del layout, è ciò che conferisce armonia alla composizione.
Può essere dato sia da una composizione simmetrica (che conferisce tranquillità), che da una asimmetrica (i pesi opposti sono comunque equilibrati e conferiscono movimento).
Spazio bianco
Ultimo, ma non meno importante, lo spazio bianco. Già analizzato tempo fa in questo post, torna sempre come elemento chiave di una composizione.
Lo spazio bianco pone in posizione di rilievo ciò che c’è di importante, semplifica la scansione degli elementi, mette in relazione oggetti correlati, “indirizza” l’attenzione e, più in generale, favorisce l’usabilità di un’interfaccia.
