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

Il Social Media Team di Time Travel Experience

Blogger e special guest per il Palio della Balestra

Qualche settimana fa Advertigo ha lanciato il progetto Time Travel Experience con l’obiettivo di promuovere eventi e rievocazioni storiche del territorio nazionale attraverso la condivisione di esperienze in Rete. Un progetto che dal 6 al 9 settembre lancerà l’Edizione dedicata al Palio della Balestra di Sansepolcro, manifestazione d’eccellenza della Valtiberina che vanta origine e tradizione medievale. Per l’occasione Advertigo ha scelto il format del blog tour e insieme alla Società Balestrieri di Sansepolcro ha selezionato il Social Media Team composto da sei blogger che, in compagnia della special guest Valentina Piccini, alias Mamme a Spillo, andranno alla scoperta dei riti e delle Valentina-mammeaspillotradizioni legate a questa rievocazione storica e al territorio di Sansepolcro.

Ringraziamo tutti coloro che hanno inviato la propria candidatura attraverso il form online; la scelta è stata ardua, numerose le candidature presentate, tutte di alto livello e ci dispiace molto per chi non parteciperà, per questa volta, all’esperienza.

Ecco di seguito il Social Media Team di Time Travel Experience – Edizione Palio della Balestra composto da:

Ernesto de MatteisErnesto de Matteis, collaboratore di Trippando, blog di viaggi ma anche di attualità, cronaca, cucina, moda e tradizioni. Stanco della frenesia decide che la seconda parte della sua vita sarebbe stata più “slow” e per questo due anni fa apre la “Gianoteca” da lui stesso definita “la seconda casa di tutti”.

“Vivo per far conoscere al mondo questa parte di Paradiso in terra e per raccontare quello che mi hanno insegnato in questi 45 anni.”

Georgette Jupe del blog Girl in Florence è una curiosa “Tuscan Texan” che ha scoperto la città Georgette Jupedi Firenze dopo un anno di studio in Italia. Sul blog scrive della sua esperienza e di pensieri giornalieri su Firenze dal punto di vista di una persona giovane, normale che lavora in Italia.

“Amo la mia città, Firenze e spero di aiutare gli altri a scoprire il motivo per cui questa città rinascimentale è molto più di una cartolina!”

Gian Luca SgaggeroGian Luca Sgaggero, fotografo, ideatore e redattore del blog Sphimm’s Trip. Appassionato di viaggi fai da te, luoghi, tradizioni e culture lontane, sempre alla ricerca di qualcosa di nuovo, di autentico e di vero, pronto a sperimentare nuove esperienze, con la filosofia low cost in una realtà che, oggi, somiglia a un teatrino a misura di turista.

“Non importa dove, come o quando, l’importante è esserci e vivere fino in fondo!”

Milena Marchioni del blog Bimbi e Viaggi, parla di bambini che viaggiano e condivide onlineMilena Marchioni le esperienze e le emozioni vissute dai genitori che decidono di girare il mondo assieme ai loro piccoli esploratori. La sua grande passione è viaggiare assieme alla sua famiglia: Davide e Amanda.

“L’arrivo di Amanda non ha fatto altro che alimentare la voglia di muoverci e vivere questa passione assieme a lei.”

ramona pizzanoRamona Pizzano di Farina, Lievito e Fantasia appassionata di cucina e non solo. Ama la fotografia e i viaggi. Le piace scoprire tradizioni e culture diverse ed immortalarle in scatti fotografici. Le piace parlare di sé attraverso il food e le diverte molto preparare i piatti dei paesi che visita.

“Il piacere più grande è sicuramente quello di condividere questa passione con amici e parenti, a cui preparo sempre piatti nuovi e succulenti.”

Valentina Dainelli, alias TooMuchVale del blog Too Much Tuscany sulla Toscana non Valentina Dainelliconvenzionale, per raccontarla a chi davvero ne vuole scoprire la vera essenza. Racconta di eventi, tradizioni, luoghi e persone che sono al di fuori dei classici circuiti turistici attraverso foto e parole.

“There is too much about Tuscany & Tuscany is definitively too much.”

Seguite i canali social e gli hashtags ufficiali dell’evento #ttexperience e #ttpaliobalestra per restare sempre aggiornati!!!

Facebook: Advertigo e Società Balestrieri

Twitter: @advertigotw

Instragram: @advertigo @balestrieri_sansepolcro

La App Drink Test

Una nuova app per sensibilizzare i giovani

A chi, almeno una volta, è capitato di utilizzare un’applicazione mobile dedicata al calcolo del tasso alcolemico? Negli store online sono presenti numerose applicazioni che offrono questo tipo di “servizio” , ma i risultati non si possono considerare validi a tutti gli effetti.

Al recente Vinitaly è stata presentata una nuova App, proprio con questa funzione e con lo scopo di sensibilizzare gli italiani al consumo responsabile di bevande alcoliche. Si tratta di Drink Test, una App ideata da Federvini con il supporto tecnico di 3 Italia e quello scientifico della Fondazione Umberto Veronesi. Drink Test è un’applicazione per dispositivi iOS, Android e Windows che permette di calcolare in tempo reale il tasso alcolemico incrociando i dati di ciò che si è bevuto con peso e sesso. Se il tasso è troppo alto, consiglia di non mettersi alla guida e offre un link per chiamare i taxi della città in cui ci si trova.

App Drink Test

App Drink Test

Questa applicazione è abbastanza intuitiva ed è composta di 4 pagine principali con le quali l’utente interagisce:

Il test per calcolare il livello di sobrietà;
• I consigli della Fondazione Umberto Veronesi sull’alcol e i suoi effetti;
• I numeri dell’alcol che raccoglie quelli più significativi e curiosi;
• La legge in cui sono raccolte le tabelle che regolamentano il codice della strada

Come tutte le applicazioni di questo genere, il risultato che si ottiene è puramente approssimativo, calcolato sulla base di una simulazione matematica per cui non viene fornito nessun dato certo, se non una stima indicativa coerente o meno con i limiti di sicurezza vigenti.
Infine l’applicazione Drink Test fa parte di un progetto di comunicazione digitale più ampio promosso da Federvini. Tutto ciò si concretizza nella pagina Facebook “Io Vivo Mediterraneo”.