Pillole di Flat Design: Principi e linee guida del design “piatto”

Flat Design
Tempo stimato di lettura: 5 minuti, 55 secondi
Pubblicato il 19 settembre 2013

Nell’articolo precedente, abbiamo visto le origini del Flat Design e i concetti che si nascondono dietro questo nuovo trend, teorizzandolo quasi come una “medicina” che ci porterà ad un web più efficiente e facile da usare.
Andiamo ora ad analizzare nel dettaglio le caratteristiche grafiche che lo contraddistinguono creando una sorta di “foglietto illustrativo”.

Modo d’uso – Il ruolo dei colori

I colori sono uno degli elementi essenziali del Flat Design, anzi possiamo affermare che rivestono un ruolo fondamentale.
La prima cosa che possiamo notare è che le palette sono caratterizzate da colori luminosi e brillanti, usati così come sono, senza sfumature, grazie ai quali gli elementi più importanti vengono messi in risalto.
Inoltre mentre le palette tradizionali utilizzano 2-3 tonalità, nel Flat Design si arriva ad usarne anche 6-8 creando combinazioni mai viste prima.
Il blu, il rosso e il giallo sono molto comuni tuttavia non vengono utilizzati come colori primari ma c’è una ricerca accurata per ottenere il giusto equilibrio di tono e saturazione tra tutti i colori utilizzati.

Il sito FlatUIColors.com offre una selezione dei colori più utilizzati, da questa pagina possiamo scegliere il codice colore che preferiamo e copiarlo per utilizzarlo nei nostri progetti.

Inizialmente il Flat Design, seguendo l’impronta di Windows, è caratterizzato dall’uso di colori vivaci con sfondi bianchi, neri o grigi. In questo modo si mantiene un certo equilibrio e si genera un forte contrasto molto piacevole per gli occhi e che aiuta a dare più luce ai contenuti.

experiential
envato

In seguito questa tecnica è stata mantenuta ma si sono sviluppate altre tendenze con schemi di colori monocromatici e retrò.

Le tavolozze monocromatiche sono utilizzate soprattuto per le interfacce mobile e usano un colore di base e due o tre tinte contrapposte al bianco e al nero. Oppure partono da un colore e con lievi variazioni di tonalità arrivano ad un altro. Ad esempio si può iniziare con il blu ed aggiungere tinte di verde per creare uno schema di colore blu-verde.

flat design monotone
flat design monotone

Le tavolozze retrò sono invece caratterizzate sempre dall’uso di colori vivaci ma meno saturi, mescolati con toni chiari come il bianco e il grigio. Vengono prediletti i colori caldi come l’arancio, il giallo e il rosso, ma anche particolari tonalità di blu, verde e viola. Sono tra le più utilizzate e popolari perché a mio parere aiutano a rendere un po’ meno rigido e meno freddo il layout.

flat design retrò
flat design retro

Somministrazione – L’importanza dei testi

Seguendo l’ideale di semplicità e di eliminazione di tutto ciò che è superfluo, nel Flat Design non si usano lunghi blocchi di testo, ma frasi semplici e dirette.
Le parole sono importanti, devono comunicare un messaggio e allo stesso tempo far capire al visitatore come funziona il sito, perciò ogni parola conta e va scelta con cura.
Questo rende molto importante anche la tipografia e la scelta del carattere che deve essere in tema sia con il layout generale del progetto sia con quello che si vuole trasmettere.

flat design typography

Si utilizzano un massimo di due famiglie, molto spesso anche una sola, per un intero progetto e si prediligono generalmente font sans serif, dal disegno semplice, che offrono una varietà di pesi perché danno la possibilità di creare una buona gerarchia visuale, fattore molto importante in un layout dove non ci sono bottoni, ombre, sfumature, smussi o altri effetti a creare distinzione tra gli elementi.
Molti siti utilizzano caratteri in grassetto e testi maiuscoli per gli elementi di navigazione e i titoli principali, perché presentano una maggiore consistenza visiva e sono più facili da leggere.

In alcuni casi vengono utilizzati anche font serif, ma sono meno comuni in quanto tendono ad avere un aspetto meno semplice e più formale.

Invece è molto in voga l’utilizzo di caratteri personalizzati che, benché mantengano linee pulite ed uniformi, danno un tocco in più al layout e contribuiscono a dare una identità al progetto. In questo caso il carattere personalizzato è utilizzato per i titoli principali, mentre per i blocchi di testo viene scelto un carattere più semplice.

flat design typography

Per quanto riguarda i colori i testi sono in genere in bianco o nero che generano contrasto e funzionano bene sia su sfondi piatti che su fotografie e immagini
Potete approfondire l’utilizzo dei font nell’articolo Flat Design and Fonts di DesignModo dove la scrittrice Carrie Cousins ha selezionato una raccolta di font gratuiti da utilizzare per i vostri progetti.

Composizione – Un equilibrio perfetto tra gli elementi e lo spazio

Il Flat Design si distingue per il look pulito e minimalista ed utilizza elementi molto semplici, come rettangoli, cerchi o quadrati, quasi sempre separati tra di loro, che rivestono il ruolo di contenitori o pulsanti.

flat design scheme

Accanto a questi elementi possiamo trovare icone e illustrazioni vettoriali che, essendo costituite da forme piatte e zone ben distinte di colore, si adattano bene all’approccio flat ed aiutano l’interpretazione del sito.

flat design vector

Allo stesso tempo, nonostante non siano propriamente flat, ma abbiano un certo spessore naturale, vengono utilizzate anche le foto. Spesso si trovano nella parte superiore del sito come sfondi panoramici sopra i quali vengono inserite le frasi chiave, con un forte impatto visivo. In alcuni casi per non distrarre troppo l’occhio dall’elemento principale i designer le rendono sfocate oppure monocromatiche.

flat design foto

Tutti questi elementi sono disposti in modo molto preciso all’interno di una rigida griglia. Non troviamo mai testi disposti in verticale o in obliquo, perché sarebbero difficili da adattare ai diversi dispositivi.
Per lo stesso motivo si tende a lasciare molto spazio tra gli elementi e a dare più padding ai testi.

Seguendo una una gestione corretta dello spazio si possono utilizzare testi più grandi così da dare maggiore risalto alle singole parole ma anche porre l’attenzione sugli elementi più importanti e garantirsi che siano facilmente visibili e usabili perfino sullo schermo di uno smartphone.

Effetti – Piatto ma vivo

Per contrastare la rigidità del layout e renderlo dinamico, sfruttando le nuove opzioni offerte dall’HTML5, è molto diffuso l’uso di transizioni, animazioni e altri effetti, che in alcuni casi garantiscono un vero e proprio spettacolo visivo.
Il sito Codrops offre tantissimi esempi di animazioni che possiamo inserire nel nostro layout flat. Guardate per esempio la pagina Creative Link Effects, una serie di effetti sofisticati e moderni per i collegamenti o le voci di menu che possono rendere la navigazione molto più interessante.

Altre Indicazioni d’uso – L'”Almost” Flat Design

Accanto al Flat Design si sta diffondendo uno stile definito “Almost” Flat Design caratterizzato dall’aggiunta di alcuni effetti come lievi sfumature o ombre al layout. I progettisti di solito scelgono un effetto e lo usano in maniera poco marcata su tutto il progetto.

almost flat design

almost flat design

In questa tendenza rientra anche il “Long Shadow Design” letteralmente “Design dall’ombra lunga“, in cui le ombre sono allungate in modo da ottenere una maggiore profondità.

long-shadow-designs

Sovradosaggio

Non sono stati riscontrati problemi gravi in caso di sovradosaggio. Tuttavia è bene tenere in considerazione che stiamo parlando di una tendenza e quindi bisogna sempre analizzare se potrebbe essere adeguata per il nostro tipo di progetto o se è meglio scegliere un altro stile, e che non vanno mai posti limiti alla creatività.

Avvertenze Speciali

Visitate fltdsgn.com che raccoglie una serie di siti in Flat Design da cui prendere ispirazione.

  • Aggiungo un sito dove trovare N esempi di flat design : http://fltdsgn.com/

    Un saluto dal DON

    • Laura Volpe

      Grazie Claudio… se ne conosci altri condividili pure 🙂

  • Alessandro

    brava Laura! articolo molto utile! Personalmente apprezzo molto questo genere di design perchè appunto contiene meno “disturba” ed il “content is the king!” 🙂

    • Laura Volpe

      Grazie Alessandro 🙂

  • Brava Laura. Bel post complimenti.

    • Laura Volpe

      Grazie Vittorio!

  • Il flat design mi piace da morire.
    Ma i clienti sono pronti per il flat design?
    I siti in flash piacciono ancora a molti!

    • Laura Volpe

      Ciao Marco, penso per quanto riguarda l’estetica del flat che siano pronti o no non è molto rilevante, perchè riguarda più che altro il gusto personale. Come web designer però abbiamo il compito di far capire al cliente che certe scelte non riguardano solo l’estetica, ma anche e soprattutto l’usabilità e la comunicazione. Come visto anche nell’articolo l’HTML5 ha introdotto tante novità per le animazioni e le transizioni, senza considerare tutte le funzioni che offre jQuery, che nella maggior parte dei casi possono sostituire tranquillamente l’uso di Flash.

      • Oh, certo!
        Io non sono un web designer.
        Curioso solo 🙂

  • dsfas

    test

  • Antonio

    Salve Laura e complimenti, un post molto interessante. Un appunto: perchè negli articoli non c’è la data? Il lettore non capisce se quello che stai dicendo è attuale o è ormai datato. Saluti.

Shares