Flat Design o Flat UI

Allora, che cosa è il Flat Design?

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

Lampada CYMK

Quando il Design incontra la Grafica

Lampada Quadricromatica

La lampada del designer Dennis Parren “getta” una rete di ombre colorate.

Lamp CMYK

 

Tre diversi LED colorati alloggiati sulla parte superiore della piattaforma circolare, proiettano la luce su sottili barre metalliche bianche che dividono la luce gettando fasci ciano, magenta e giallo, ombre sulle superfici circostanti.

lamp 2

 

 

Ombre rosse, verdi e blu vengono create grazie ai diversi colori che si sovrappongono.

Il ciano, il magenta e il giallo insieme al nero, costituiscono il modello di colori sottrattivo CMYK utilizzato nella stampa, mentre il rosso, il verde e il blu compongono il modello cromatico additivo RGB comune a schermi elettronici.

Dennis Parren spiega come le proprietà delle lampadine a LED servano “a mostrare come i colori primari della luce – rosso, verde e blu – da un lato, ed i colori pigmento – ciano, magenta e giallo – dall’altro, interagiscono producendo l’effetto che può essere chiamato estetica della luce LED…Non si può dire davvero quella sedia è rossa…In realtà, la sedia sta riflettendo la luce rossa, assorbendo la luce verde e blu”.

La grande lampada a sospensione CMYK è stata nominata nella categoria di progettazione autonoma ai Dutch Design Awards, che ha avuto luogo nell’ambito della Dutch Design Week di Eindhoven.

Kickstarter: la rete ti finanzia

Come finanziare le tue idee

Kickstarter

Sei un aspirante designer , uno stilista emergente o qualsiasi altro creativo che non riesce a trovare un lavoro o un imprenditore intenzionato a finanziare il tuo progetto…Rilassati…
Ora ci pensa Kickstarter….

Kickstarter è un sito web di crowd funding, forse il più famoso, attraverso il quale si raccolgono fondi per produrre design, moda, musica, fumetti, videogames, e tutto ciò che di creativo vi possa passare per la testa, a patto che naturalmente abbiate le capacità per produrlo.

Inizialmente l’idea potrebbe suscitarti scetticismo soprattuto se posta in questi termini ma vediamo alcuni numeri.
Nei suoi 24 mesi di vita Kickstarter ha raccolto la strabiliante cifra di 80 milioni di dollari da circa 600 mila finanziatori. C’è poi un altro dato da tenere in considerazione. Il fenomeno del crowdfunding, diretta evoluzione del crowdsourcing, sta letteralmente esplodendo con la nascita di numerose piattaforme dissimili tra loro solo nei particolari.

Come funziona?
Allora, una volta iscritto l’utente potrà creare la pagina dedicata alla propria idea. Attraverso questa pagina di presentazione potrà mostrare il progetto agli utenti della community e cercare di coinvolgerli al fine di ottenere il finanziamento. Una delle caratteristiche di Kickstarter è quella di praticare, per quanto riguarda le donazioni, il sistema del “full or nothing“. Ciò significa che l’utente dovrà decidere la durata della campagna di finanziamento e che l’importo totale delle singole donazioni ricevute sarà erogato solo se il budget fissato verrà raggiunto. Una sorta di tutela nei confronti dei donatori.

Qualche consiglio: 

Penso che uno parametri di giudizio fondamentali per un finanziatore/donatore sia la fiducia. Oltre alla rappresentazione esteriore della tua idea sarà quindi indispensabile riuscire anche a comunicare la passione che muove la tua determinazione. Uno strumento utile è secondo me quello di creare un blog dove raccontarti e raccontare la tua idea.

I social media , come facebook e twitter, saranno uno strumento molto efficace per divulgare la tua campagna oltre i confini della community relativa alla piattaforma di crowdfunding che stai utilizzando. Attento solo a non abusarne, se usati con superficialità potranno avere l’effetto di un boomerang.