Caratteristiche grafiche e strutturali di un sito dal design flat

19 Agosto 2013

Vediamo insieme quali sono le caratteristiche grafiche e strutturali di un sito dal design flat a partire da font leggibili, colori nitidi, icone chiare e molto altro ancora

Ho già trattato l’argomento flat site design in un precedente post (tra i più letti del nostro blog n.a.) dove mi concentravo però più sul concetto in se e sugli aspetti che fanno del flat site design, un vero e proprio trend. Per molti sembra quasi che la metro-style di Windows 8 e l’aggiornamento grafico di molti servizi e dell’interfaccia stessa di Google, abbiano contribuito al diffondersi di questo trend. Sarà vero?

Ma quali sono poi i principali aspetti del design di tipo flat? Riassumendo in tre parole direi: usabilità, scalabilità e velocità.

Ma prima di proseguire oltre…

Vediamo ora quali sono le caratteristiche grafiche e strutturali di un sito flat. Su cosa dobbiamo concentrarci per far si che il nostro prossimo sito sia realmente un sito dal design flat? A mio avviso i 5 elementi caratterizzanti sono:

La Struttura grafica

Diamo l’idea di sfruttare tutto lo spazio disponibile ed eliminiamo, se possibile, vincoli strutturali come bordi, riquadri e ombre. Evitiamo inutili texture o l’uso improprio di “pesanti” immagini di fondo. Diamo spazio a badge e icone chiare. Questo non vuol dire banalizzare il design, certo che no! Vuol dire sfruttare diversamente la creatività del vostro designer.

Ricordiamo poi sempre che la struttura del nostro sito deve essere fluida e adattarsi ad ogni risoluzione monitor. A tal proposito vi invito a testare il vostro sito con Responsinator, un utile e pratico tool online, che vi consentirà di verificare come il vostro sito appare nelle varie risoluzioni monitor.

I Font

Se in un tempo non tanto lontano i font erano minuscoli e i testi poco importanti rispetto alla grafica, oggi la tendenza del flat design è dare molto spazio a font leggibili e per alcuni versi anche “ingombranti” nelle dimensioni. L’utilizzo di soluzioni come font-face o i google-font ci consentono poi di spaziare tra centinaia e centinaia di font-type, senza limitarsi ai soliti Arial, Verdana, Helvetica o altri font ormai abusati in rete.

I Colori

Spazio a colori nitidi e palette dai toni “aspri” dove verde, azzurro, arancio, viola o magenta vengono utilizzati senza timore. Questa è una delle caratteristiche dei siti internet dal design flat

Le icone

Forse il segno più caratteristico di un design di tipo flat. Le icone sono chiare e piatte per l’appunto. No a ombre o effetti 3D. Le icone devono essere soprattutto di facile interpretazione. Quello che è sempre stato fino ad oggi per la segnaletica stradale e non solo, viene ora tradotto in icone web. Non sono vietati i colori, anzi …. sempre all’insegna però di colori nitidi.

I Bottoni o Tasti Azione

Altra caratteristica del design flat sono la quasi totale assenza di bottoni dagli angoli arrotondati. Nella maggior parte dei casi i bottoni si sono fatti spigolosi, dal colore pieno e dalle dimensioni “importanti”. In fin dei conti se è una call-to-action ciò che vogliamo, dobbiamo pur invitare l’utente a cliccare o tappare, no?!

In questa raccolta di siti web elencata su Splashnology (ma ne troverete certamente molte altre su Google) sono stati elencati alcuni interessanti esempi di siti flat. Dateci un’occhiata se vi va, e buon flat design!