Flat Design o Flat UI

Allora, che cosa è il Flat Design?

Come indica il nome, il Flat Design o “design piatto” è costituito dalla piattezza di stile: semplificare l’interfaccia rimuovendo elementi extra come ombre, smussi, texture e sfumature che creano un aspetto 3D.

L’idea è quella di creare un disegno finito che vive in due sole dimensioni, senza perdere le funzionalità di un’interfaccia “normale”. Questo crea una nuova sfida per il progettista, perché diventa più difficile definire le azioni principali e gli elementi del disegno.

Il design piatto deriva dalla volontà di creare interfacce più immediate e usabili per l’innovazione dei dispositivi digitali. Un buon esempio di design piatto è questa collezione di design per Mac OSX, dove alcune tra le più celebri icone di Mac sono state re-immaginate come versioni piatte di se stesse. Si può facilmente vedere come le icone mantengano il loro stile e la forma anche se sono prive di dettagli, ombre e texture.

Evoluzione di Flat design

Storicamente, nel design come nella moda, le tendenze si spostano continuamente tra il complesso e il semplice. Questo sta diventando sempre più evidente nel campo del design visivo, soprattutto nel web, dove i design sono più effimeri e hanno vita molto breve rispetto alla stampa tradizionale. Il termine “Flat Design” è stato coniato e reso popolare da Allan Grinshtein. Nel suo post “L’Era del Flat Design”, Allan spiega che “le interfacce eleganti sono quelle che hanno il maggiore impatto con il minor numero di elementi”. L’idea è che un’interfaccia minimalista può essere più adatta alla sua funzione rispetto ad un’ipotetica versione più complessa. La comunità ha accettato questa nuova modalità, dopo essere stata bombardata con interfacce skeuomorfiche nel corso dell’anno passato.

Da allora, il design piatto ha fatto passi da gigante. Gli schemi progettuali si distinguono per varie caratteristiche ricorrenti: design semplice per gli elementi di interfaccia utente, focus sulle scelte tipografiche, focus sui colori e un approccio minimalista complessivo. Si può scoprire di più su queste caratteristiche nel post di Designmodo dedicati ai principi di Flat design.

flat-design-01

Come creare in Flat Design?

Pulsanti

Quando si crea un pulsante, l’utilizzo di un bordo, di un gradiente e di un’ombra per risaltare rispetto allo sfondo, rendono l’elemento facilmente identificabile come “cliccabile”.

Quando si crea un pulsante piatto, però, per scelta stilistica si sceglie di non utilizzare questo tipo di approccio “classico”, quindi il fulcro della progettazione diventa il contrasto di colore e una griglia di elementi semplici. È possibile utilizzare smussi, ombre e gradienti fintanto che si riesce a mantiene un aspetto piatto del pulsante, ma è necessario mantenere sotto controllo questo tipo di interventi.

Stili

Le forme sono un elemento cruciale per ottenere un corretto design piatto. Le aree di testo, gli elementi a dropdown etc. non dovrebbero utilizzare ombre, come fanno di solito di default. È possibile modificare gli stili degli elementi del form con i CSS. O, se si vuole avere un controllo completo sugli elementi, è necessario utilizzare un plugin che supporti i temi come uniformjs o crearne direttamente di nuovi.

Tipografia

La tipografia è un elemento molto importante nel flat design. Dal momento che l’interfaccia è minimalista, le scelte tipografiche giocano un ruolo fondamentale per ricreare il giusto stile e il mood “flat”. È importante selezionare un un typeface semplice, sans-serif, che non appesantisca la grafica e che anzi contribuisca all’immediatezza e all’assoluta leggibilità della UI.

Colori

Quando si sceglie la tavolozza di colori, bisogna ricordare che i colori sono pensati per aiutare gli utenti a navigare sul sito, o utilizzare la app… Bisogna identificare un colore per le azioni principali: ad esempio, i pulsanti principali come “Invia”, dovrebbero essere tutti dello stesso colore, meglio se vivido e a forte contrasto con lo sfondo. Se il vostro logo ha un colore principale, questo potrebbe essere utilizzato per i comandi principali. Non eccedere nell’uso dello stesso colore, o si rischia di renderlo meno importante agli occhi dell’utente.

Si dovrebbe anche scegliere un colore secondario (di solito un grigio chiaro). In questo modo è possibile allineare due pulsanti, per esempio “Invia” e “Annulla” (con “Invia”, come il principale e “Annulla” il secondario). La scelta del colore è particolarmente importante nel design piatto, perché quando si utilizzano bottoni piatti, questi colori saranno uno dei principali identificatori riconoscibili dall’utente.

Forme

Di solito, meglio fare pulsanti quadrati o quadrati con gli angoli arrotondati, a seconda dello stile del sito. Si può anche cercare d’essere più creativi e utilizzare altre forme semplici come cerchi, triangoli o forme personalizzate, ma bisogna tenere presente che potrebbe essere un po’ rischioso. Bisogna essere sicuri di mantenere la giusta coerenza in tutti gli elementi dell’interfaccia e di organizzare i contenuti in modo tale che l’utente sia in grado di identificare e riconoscere i titoli, i contenuti e così via.

Qui di seguito potete vedere la differenza tra un normale tasto Bootstrap Twitter e lo stesso tasto realizzato in uno stile piatto su Flatstrap, una versione flat design di Twitter Bootstrap. Il pulsante normale ha gli angoli arrotondati e una sottile sfumatura con ombra, mentre la versione piatta è completamente spoglia di questi effetti, cambiando semplicemente da una tonalità più chiara a una tonalità più scura al passaggio del mouse.

pulsanti flat design