Da qualche anno ormai abbiamo detto “ciao” alle animazione e agli effetti 3D.
La “nuova” tendenza, che sembrerebbe durare ancora per un po’, è il flat design.
Il flat design è un approccio semplice e bidimensionale che privilegia l’essenzialità e il minimalismo per migliorare l’esperienza dell’utente.
Certamente non è perfetto: ci sono alcuni problemi di UX che sorgono inevitabilmente con il design bidimensionale, ma quelle imperfezioni hanno lasciato il posto a nuove “tendenze”.
Cos’è il flat design?
È uno stile di design minimal che impiega elementi bidimensionali e colori brillanti, reso popolare con la versione di Windows 8, iOS 7 e Google Material Design. Ha sostanzialmente un obiettivo principale: utilizzare questa semplicità per ottimizzare la progettazione e rendere i siti web più veloci e funzionali.
È considerato una risposta allo skeuomorfismo, ovvero è un soggetto che presenta segni grafici non necessari che imitano il mondo reale.
Poiché gli elementi del mondo reale sono spesso irrilevanti nel mondo digitale, il skeumorfismo può limitare la creatività e la funzionalità, oltre a occupare spazio prezioso sullo schermo e aumentare il tempo di caricamento.
Il flat design, d’altra parte, abbraccia la filosofia per cui «nulla sullo schermo sembrerà mai tridimensionale o simile alla realtà», concentrandosi sulla bellezza e sulla funzionalità del design senza aggiungere decorazioni illusorie.
Pro e contro del flat design
Potremmo direi che è basato sul concetto di «less is more».
Anziché “distrarre” l’utente con animazioni o illustrazioni eccessivamente complicate, il flat design predilige un’interfaccia pulita e la massima usabilità.
I vantaggi derivati dall’utilizzo del flat design sostanzialmente sono:
- Minimalismo delle interfacce;
- Enfasi sulla funzionalità rispetto all’estetica;
- Forme semplici;
- Tipografia leggibile;
- Ottima gerarchia visiva;
- Colori vivaci e buon contrasto per migliorarne l’usabilità.
Tuttavia, il flat design non è perfetto: il problema più grande è l’assenza di elementi familiari all’utente, che potrebbero rendere più difficile la comprensione di alcuni elementi. La mancanza di effetti 3D, come le ombre esterne, toglie le indicazioni visive che mostrano come gli utenti dovrebbero interagire con il design.
Ad esempio, i pulsanti realizzati seguendo questo approccio hanno lo stesso aspetto di qualsiasi altro elemento, senza un’ombra che lo identifichi come pulsante: non appare quindi cliccabile.
I designer, infatti, aggirano questo pericolo seguendo una nuova “tendenza” (la mia preferita) chiamata flat design 2.0 o “semi-flat”, che riprende tutte le caratteristiche del flat design, aggiungendo però alcune qualità tipiche dello skeuomorfismo, come ombre e luci.
Esempi di flat design
Ecco alcuni esempi di flat design, dal tradizionale design bidimensionale all’interpretazione odierna del flat design 2.0.
Microsoft 8
Google Santa Tracker
L’annuale Tracker di Santa Claus, realizzato da Google abbraccia il flat design 2.0, con sfumature e ombre sottili sugli edifici e “pop-up” che appaiono quando si posiziona il mouse su alcuni elementi.
Eran Mendel è un’illustratore molto conosciuto che ha fatto del flat design un suo segno identificativo.
Nel suo profilo Dribbble, infatti, potrete vedere moltissime sue illustrazioni che sintetizzano perfettamente scene complesse di film (o serie tv come Game of Thrones) e vita quotidiana.
Un ottimo esempio da seguire in quanto illustrazioni “Flat”.
Best practice per l’utilizzo del flat design
Il flat design funziona al meglio quando si pensa ai desideri e ai bisogni dei propri utenti, piuttosto che lasciare che siano il gusto estetico a guidare la progettazione. Indipendentemente dal fatto che utilizzando questo approccio si rinunci a tutti gli effetti o aggiunte di ombre, sfumature di colore tenui, il flat design deve essere utilizzato per migliorare l’esperienza dell’utente.
Ecco alcuni consigli spassionati per adottare questo approccio:
- Scegli i caratteri giusti: per mantenere l’approccio minimalista del flat design, scegli i caratteri sans-serif.
I caratteri “Serif” hanno piccoli elementi grafici attaccati alla fine di ogni tratto (grazie) che aggiungono decorazioni inutili. - Usa il contrasto a tuo vantaggio: usa una palette di colori “vivaci” per assicurarti che il testo sia ben leggibile e visibile.
Il carattere grigio chiaro su uno sfondo grigio scuro, ad esempio, è popolare nel flat design, ma potrebbe essere difficile da leggere; sarebbe sicuramente meglio carattere bianco su sfondo scuro. - Link agli elementi correlati, in assenza di effetti 3D per indicare pulsanti cliccabili: è buona norma collegare tutto ciò che gli utenti considererebbero ragionevolmente cliccabile al contenuto interessato. Ad esempio, avendo titolo di un prodotto sotto la relativa immagine sarebbe bene far si che entrambi gli elementi portassero alla stessa pagina, lasciando così la libertà all’utente di cliccare dove preferisce, mantenendo comunque un’estetica minimale e funzionale.
Come iniziare ad utilizzare il flat design
Il modo migliore, secondo me, per cimentarsi con il flat design, è progettare un proprio set di icone (da questo sito potrete scaricarne alcune e prendere ispirazione per le vostre: Flaticon).
Le icone sono piccole e semplici da realizzare, spesso collegate tra loro con un tema specifico.
Dopo averci preso un po’ la mano, spostarsi sullo sviluppo di illustrazioni sarebbe un’ottimo modo per progredire e migliorare la tecnica.
