Gli addetti ai lavori ne parlano ormai da più di un anno, dalla sua presentazione alla conferenza durante il Google I/O di San Francisco, e oggi il material design ha stravolto i connotati di tutti i prodotti e servizi offerti da Google oltre a rappresentare la nuova veste grafica per il sistema operativo Android Lollipop.
 

Ma cosa significa material design?

 
Il material design è il frutto del lavoro di Google che, codificando delle linee guida per uno sviluppo del web in simbiosi con l’universo mobile, vuole proporre un approccio comunicativo diverso dove al centro di tutto non c’è l’utente ma la persona.
 

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.

 
Il material design è un nuovo linguaggio in cui convivono semplicità e tecnologia, in un’architettura che permette una comunicazione accessibile a tutti con un sistema di controllo di facile intuizione. Il material design si pone quindi l’obiettivo di assicurare una gradevole user experience su ogni piattaforma partendo dal presupposto che l’universo mobile oramai ha preso il sopravvento, nonostante tastiera e mouse rimangano strumenti tradizionali ancora ampiamente utilizzati, entrati a far parte del DNA dell’utente.
 
 

Il material design dei sensi

 
Il material design vuole offrire un linguaggio che non sia solo visivo, ma che implichi l’utilizzo dei sensi rendendolo reale, donandogli fisicità e concretezza. L’utente non sentendosi spaesato capirà dove mettere le mani con un semplice colpo d’occhio. Le forme convivono in un ambiente 3D giocando con luci e ombreggiature. Gli elementi grafici si dispongono su piani differenti, in modo da mantenere il focus su quello primario, e si muovono con animazioni naturali, mai fini a se stesse. Il material design asseconda le regole dello spazio e della fisica suggerendo percorsi logici e invitando a compiere un’azione.
La scelta degli elementi grafici non è casuale o puramente estetica, ma i colori, i caratteri utilizzati e la gestione dello spazio sono funzionali a favorire una moderna user experience. Soluzioni rielaborate e prese in prestito al flat design delineano uno stile comunicativo minimale e gerarchico (ti consiglio l’articolo di Lorenzo Miglietta pubblicato su Grafigata che spiega dettagliatamente cosa è il flat design). Le opzioni che l’utente ha a disposizione sono chiare e rendono la navigabilità intuitiva. Il layout cambia, azione dopo azione, con transizioni animate senza che le funzionalità base perdano di centralità. L’utente si orienta istintivamente in un ambiente in cui i movimenti ricalcano in modo naturale il comportamento di oggetti reali. Gli elementi più piccoli si muovono velocemente rispetto a quelli più grandi che necessitano di più tempo per accelerare. Le animazioni non sono mai brusche, gli oggetti cambiano direzione, accelerano e decelerano gradualmente in un moto che l’utente trova familiare, perché è un design che trae ispirazione dalla realtà.
 
 

La scelta dei colori nel material design

L’architettura contemporanea è fonte di ispirazione per il material design dove i colori decisi e vivaci rivestono un ruolo primario. Il colore deve invitare a compiere un’azione, rompere uno schema, svegliare l’utente, essere inaspettato e quindi misurato nella sua diffusione. Le palette dei colori infatti sono studiate e mai casuali. Quelle primarie servono ad armonizzare gli elementi presenti nel layout mentre le secondarie hanno una funzione di rottura e servono ad evidenziare pulsanti o accentuare piccoli elementi testuali. Se vuoi provare i tuoi accostamenti cromatici in perfetto stile material design ti consiglio Material Palette, un tool gratuito che genera un’anteprima online del layout.
 
 

Icone e simboli

Il material design ha sfruttato tutto il potenziale comunicativo delle icone, rivisitandole in chiave material con la consapevolezza che ogni simbolo deve trasmettere un concetto univoco, un’emozione non fraintendibile. Le icone hanno un design semplice e sono progettate seguendo forme geometriche che fanno della simmetria il loro punto di forza. I simboli di sistema o dell’interfaccia utente richiamano azioni entrate ormai nell’imaginario delle persone. L’icona del cestino, la lente di ingrandimento o le tre lineette parallele invitano da subito alla call to action senza il bisogno di ulteriori didascalie o spiegazioni. Le icone mettono in risalto solo alcuni tratti distintivi dell’elemento reale eppure, nonostante il minimalismo grafico proprio del moderno web 2.0, i simboli risultano chiari, leggibili e con un pizzico di eccentricità.
 
 

Le immagini nel material design

Del potere persuasivo e informativo delle immagini si è ampiamente discusso al punto che oggi tutto è veicolato da una fotografia o da una illustrazione. Il material design sposa questa filosofia sottolineando come le immagini e le illustrazioni possano convivere con le specificità che le contraddistinguono. Le immagini fanno la differenza nella user experience a patto che abbiano rilevanza personale, riflettano il contesto sociale e umano a cui si riferiscono, siano di impatto e catturino l‘attenzione. Il material design strizza l’occhio agli ultimi trend in fatto di colore e filtri di desaturazione, ma vuole preservare il senso originale della fotografia bandendo gli interventi eccessivamente invasivi. Poi, nell’era del responsive design, è di vitale importanza prestare cura alla risoluzione delle immagini e alla loro corretta impaginazione. Le illustrazioni nel material design devono avere un carattere informativo facilmente codificabile e fruibile da tutti a prescindere dal livello di scolarizzazione informatica, principio cardine di questo approccio comunicativo.
 
 

Il Font

Roboto è il font scelto per rappresentare il material design come spiega nel suo video Christian Robertson, interface designer di Google.

 
 

Il linguaggio del material design

Il material design non è solo un insieme di regole promosse da Google che riguardano la grafica e l’impaginazione, ma fornisce un approccio alla comunicazione in linea con il web 2.0, con le sue peculiarità e il suo aspetto social. Il testo deve essere chiaro e conciso, accessibile a chiunque indipendentemente dal livello culturale e dalla lingua. Il material design punta sul carattere informale instaurando un dialogo con l’utente dove quest’ultimo risulta al centro dell’attenzione. Il “tu” è d’obbligo, si cerca di utilizzare tempi verbali al presente, sono banditi i vocaboli con cui le persone non hanno familiarità e si predilige un tono amichevole ma efficace.
 
 

Accessibilità e User Experience

Il material design vuole imporsi come il linguaggio del web e per farlo deve assicurare alti livelli di accessibilità. Questo significa che deve garantire un sistema intellegibile da qualunque persona che senza difficoltà possa usare gli strumenti proposti. La sfida reale è confezionare un prodotto impeccabile sotto ogni aspetto considerando anche la user experience delle persone con disabilità. Google offre un buon punto di partenza e ricorda nelle sue linee guida come l’usabilità si misura senza audio ne colore, con lo schermo ingrandito, con il lettore di schermo e la modalità di visualizzazione a contrasto elevato e con tutte quelle tecnologie assistive che possono realmente abbattere le barriere che dal mondo reale si materializzano inevitabilmente in quello virtuale.
 
 
Quelli proposti sono solo alcuni cenni tratti dalle linee guida di Google, che con il passar del tempo, si arricchiscono di nuovi contenuti mentre il material design continua il suo cammino contagiando il restyling di App e servizi web secondo il diktat di Big G.

LASCIA UN COMMENTO

© 2015-2021 DIRTY WORK
Web Design Grafica Comunicazione