Che cos’è il material design

Vuoi conoscere meglio una delle tendenze più in crescita nel mondo del design? Quello che è a tutti gli effetti un vero e proprio linguaggio di design? Vuoi sapere, insomma, che cos’è il material design e da dove nasce?

In questo articolo ti voglio parlare appunto del Material Design, di che cosa esso sia, da dove nasce e come viene applicato. Se già ne sai qualcosa vedrai che riuscirò comunque a stupirti con contenuti interessanti, se invece non ne sai nulla, allora hai una marea di informazioni da scoprire!

E allora, dai! Procediamo!

Allora, ti dico subito che c’entra Google in tutto ciò. C’entra Google proprio perché il material design è il linguaggio con cui Google, nel corso dell’ultimo anno, ha declinato la grafica di tutti i suoi prodotti, da Gmail fino al nuovissimo sistema operativo mobile Android Lollipop.

Il material design nasce innanzitutto in contrapposizione e allo stesso tempo come sintesi tra il Flat Design o Metro Style di Microsoft e lo Scheumorfismo dei primi iPhone della Apple. Se non hai idea di cosa io stia parlando, ho scritto un esaustivo articolo a riguardo su cosa siano flat design e scheumorfismo, ti consiglio di aprirlo in una nuova scheda, leggerlo e poi tornare qua, se non l’hai già fatto. Tanto questo articolo non scappa!

Ok, se invece conosci già flat e skeu, saprai anche come la lotta tra questi due stili sia stata principalmente una lotta tra due aziende, come detto, la Microsoft e la Apple (e mi spiace per i “melafan” ma l’ha vinta Microsoft senza alcun dubbio). In questa sfida si è inserito alla grande Google con il suo material design.

È il caso che io metta un po’ d’ordine in tutto ciò: ti spiego meglio cos’è sto cavolo di material design, dai!

Cos’è il material design

Il material design è uno stile, un codice, un linguaggio di design. È lo stile con cui Google ha deciso di rinnovare tutti i suoi prodotti e sotto il quale gestirli tutti quanti allo stesso modo, con gli stessi principi di esteriorità grafica.

È stato presentato il 25 giugno 2014 durante il Google I/O, l’annuale conferenza dell’azienda rivolta a tutti i vari programmatori e sviluppatori di applicazioni e dispositivi con software e sistemi operativi di Papà Google. Se ti interessa, sono presenti alcune parti salienti di questa conferenza su YouTube qui e qui.

Il concetto chiave del material design è la parola material. Dove material, cioè il materiale, è una metafora. E material è un oggetto. Qualcosa di molto più figo di un qualsiasi bottone o menu.

Perdonami se non hai capito nulla di quello che ho appena scritto, provo a spiegarmi meglio. Il material design si pone come obbiettivo quello di fare in modo che le interfacce grafiche si comportino come i materiali reali, come gli oggetti. Ma il comportarsi come i materiali esistenti non vuol dire imitarne in modo pacchiano e quasi kitsch le texture o le superfici come fa lo scheumorfismo. Vuol dire avere la capacità di adeguarsi alle varie situazioni.

Una spiegazione per “material”

Matìas Duarte, il designer che ha gestito tutto questo processo creativo (un genio) ha spiegato che:

Proprio come la carta, il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cuciture forniscono il significato di quello che tocchi.

Posso scrivere anche per dei chilometri, ma sono convinto che finché non ti faccio vedere qualche esempio di quello di cui io e Matìas Duarte stiamo parlando, non potrai comprendere appieno cosa sia il material.

Così come un’immagine spiega come cento parole, un video spiega come cento immagini, quindi guarda assolutamente questo brevissimo video fatto dagli sviluppatori di Google proprio riguardo al material design:

Visto che figata? Praticamente la metafora del material viene utilizzata per rendere realistico l’aspetto delle interfacce grafiche e migliorare quindi l’esperienza dell’utente.

Ok ma non è la stessa cosa del Flat Design?

Risposta breve: no. Il material design è un’evoluzione del flat design. Utilizza infatti alcune delle caratteristiche fondamentali del flat come l’uso di una palette di colori forti, delle forme geometriche primarie come quadrato e cerchio per rappresentare le interfacce, il largo spazio lasciato ai testi, eccetera.

In un certo senso, però, migliora il flat design unendo ad esso la metafora del materiale di cui ti ho parlato poco sopra. Quindi, di fatto, inserendo un po’ di scheumorfismo in tutto ciò. Ti invito ancora una volta, se non l’hai già fatto, a leggere questo articolo su flat design e scheumorfismo per capire nel modo migliore le differenze tra questi stili.

Agli albori del material design, nel 2013, quando Google iniziava a modificare la grafica di alcuni suoi strumenti, pur non giungendo ancora a codificare un nuovo linguaggio, il designer e blogger americano Matthew Moore seppe analizzare subito il cambiamento imminente e definì quello che sarebbe stato il futuro material design come almost flat design, quasi flat.

Era chiaro, quindi, fin dagli inizi dello stile quante e quali fossero le differenze, sia esteriori che di significato, tra flat e material.

Ma vediamo un po’ quali sono queste caratteristiche principali del material design.

Le caratteristiche del material design

Da quando ho letto le prime news su queste nuove interfacce grafiche di Google e su questo nuovo linguaggio di design mi sono subito affascinato all’argomento. Innanzitutto mi sono sfogliato e letto più e più volte tutto il brand manual che Google ha rilasciato riguardo al material design (consultalo qui), che tra l’altro è uno dei brand manual che possono aumentare la creatività del tuo processo progettuale.

Poi ho iniziato a cercare sempre più materiale per capire meglio quali fossero le linee guida e i principi fondamentali di questo “design materico”.

Sono giunto alla conclusione che i principi chiave, le caratteristiche fondamentali del material design siano 4: le superfici tattili, le animazioni intelligenti, l’adattabilità e l’inchiostro digitale. Tranquillo, ora le analizzo una ad una spiegando anche perché alcuni di questi aspetti rappresentano una gran bella innovazione.

1. Le superfici tattili (quantum paper)

La prima caratteristica fondamentale del material design è l’utilizzo delle superfici digitali o quantum paper. In pratica ogni elemento di un’interfaccia grafica diventa una superficie reale e tangibile, toccabile.

Tutte le superfici sono dallo spessore di 1 dpi (dot per inch, la misura minima nella grafica digitale). Dall’utilizzo dello spessore unitario deriva anche la definizione di quantum paper. Infatti la parola “quanto” in meccanica quantistica sta a rappresentare un unità minima ed indivisibile.

Gli elementi, così facendo, acquisiscono delle ombre realistiche perché sono strutturati in modo gerarchico uno sopra l’altro.

Quest’immagine fa comprendere per bene la gerarchia degli elementi in un’interfaccia grafica:

Sostanzialmente la suddivisione in livelli delle superfici digitali migliora l’esperienza utente e fa focalizzare la sua attenzione sugli elementi importanti della pagina come appunto i pulsanti o i menu di navigazione.

E questa è una differenza fondamentale con il flat design che, come dice il nome stesso (flat vuol dire piatto), punta ad appiattire tutto quanto. Il material design invece introduce la profondità e la tridimensionalità delle superfici delle interfacce. Ma lo fa rimanendo comunque nella semplicità delle linee e delle forme.

In questa immagine viene mostrata anche nel dettaglio la dimensione unitaria di 1 dpi dei quantum paper in relazione all’altezza totale della profondità dell’intera interfaccia:

I vari quantum paper vengono quindi posti ad una diversa altezza, con conseguente cambiamento dell’ombra generata, a seconda della loro importanza nella pagina. I pulsanti di navigazione principali, ad esempio, vengono posti in primo piano, mentre le card, cioè le strutture a blocchi primarie dell’interfaccia, vengono poste più basso e con un’ombra molto meno consistente.

2. Le animazioni intelligenti

Ovviamente le interfacce grafiche non sono statiche. Dico ovviamente ma in realtà non è così ovvio, ma deve esserlo per l’utente che utilizza un dispositivo. E i designer e gli sviluppatori di Google hanno creduto fortemente in questo aspetto.

Soprattutto hanno puntato sul fatto che queste animazioni all’interno di un’interfaccia grafica debbano essere fortemente sensate e coerenti con l’esperienza dell’utente in quel momento. Un’animazione deve essere una conseguenza di un gesto, e quindi di un’intenzione dell’utente. Insomma, devono essere animazioni intelligenti!

In questa gif si può capire quello di cui sto parlando. La parte superiore è un menu diviso in tre aree selezionabili, una volta che l’utente clicca a destra, al centro o a sinistra, viene cambiata la card seguendo un’animazione intelligente e guidata dalle intenzioni dell’utente stesso.

Molto importante è anche che l’animazione parta esattamente dal punto in cui l’input (il click o il tocco) è stato dato. Per esempio una finestra che si apre a partire da un angolo nel punto in cui si è cliccato o una sorta di “onda” come in questo video:

In quest’altro esempio, l’animazione parte dal pulsante giallo (che in linguaggio tecnico si chiama Floating Action Botton, FAB, e cioè pulsante d’azione galleggiante) che viene azionato al tocco o al click e quindi come conseguenza dell’azione dell’utente:

Chiaro no? Ogni animazione deve prima avere una motivazione nel material design!

3. L’adattabilità

Tutte le interfacce grafiche devono assolutamente essere responsive e cioè adattarsi in modo dinamico ed automatico ad ogni dispositivo da cui si accede a quell’interfaccia, che sia un computer, un tablet o un cellulare. Ad esempio, Grafigata è un sito web responsive perché se accedete da tablet o cellulare si adatterà a tali supporti modificando la grafica e la struttura della pagina ma non il contenuto della stess.

Sostanzialmente l’adattabilità funziona grazie al passaggio da generale a specifico e cioè nel ridurre la quantità di singole informazioni mostrate sullo schermo al ridursi della dimensione dello schermo stesso. Ciò migliora incredibilmente l’esperienza dell’utente che potrà leggere o guardare video e immagini allo stesso modo su ogni dispositivo.

Un modo per strutturare una pagina web o un interfaccia di un’applicazione perché sia utilizzabile da ogni dispositivo è quello di progettare diverse dimensioni per i blocchi, le card, che compngono la grafica. Ad esempio, al di sotto dei 700 pixel di larghezza dello schermo questo contenuto verrà mostrato in un modo diverso rispetto agli schermi più grandi e così via.

4. “Inchiostro” digitale

L’ultimo dei 4 principali componenti del “design materico” di Google è il cosiddetto “inchiostro” digitale ossia l’applicazione delle necessità della stampa alle superfici digitali delle interfacce.

Sostanzialmente, tutto quello che viene applicato a superfici digitali, all’interno della metafora del materiale su cui si basa il linguaggio, diventa quindi inchiostro digitale e prende quindi forma reale.

Così come nel mondo del design “stampato”, la tipografia svolge un ruolo cruciale, così avviene nel design digitale del linguaggio material. In particolare, Google è stato criticato per la limitata scelta del font, solo uno, il Roboto. In realtà questo font ha ben 8 pesi (più le 8 versioni in corsivo) che garantiscono un ampio utilizzo.

Tra l’altro il Roboto è un font che Google distribuisce gratuitamente e che si può scaricare qui.

Se sei interessato a quali linee guida vadano seguite nella scelta di un font ti consiglio di leggere questo articolo. All’interno ti spiego per bene come scegliere un font, o meglio, come scegliere il font più adatto ad ogni progetto.

Dell’inchiostro digitale fanno parte ovviamente anche tutti i colori e le immagini utilizzate. Google offre, sempre nel brand manual, che ti linko ancora una volta, alcune linee guida per gli sviluppatori (principalmente Android) molte linee guida su quali colori e/o immagini scegliere quando si applicano i principi del material.

Ad esempio consiglia di non scegliere più di 3 colori o di non utilizzare immagini che non spieghino bene il contesto rappresentato o che non siano di alta qualità e così via.

Cavalca l’onda

Il material design è sicuramente già un punto di riferimento e una tendenza in tutto l’ambito del web design e del design di interfacce grafiche, il cosiddetto interaction design. Ma il material sta diventando la nuova tendenza anche nell’ambito del graphic design con le sue forme, la sua struttura e i suoi colori.

Quindi perché non cavalcare l’onda della novità e cercare di seguire questa tendenza? Ovviamente non bisogna seguirla perché va di moda ma bisogna prendere gli aspetti e (specialmente) i concetti utili di cui ti ho parlato in questo articolo e riutilizzarli applicandoli ai propri progetti, quando serve.

Ad esempio, se sei un web designer puoi considerare (come immagino già fai), di strutturare ogni cosa in modo responsive, adattabile. O di utilizzare il cosiddetto “float menu” ossia il menu che ti segue come un bottone galleggiante (grazie alle animazioni intelligenti) nell’intera esperienza utente.

Se invece sei, come me, un graphic designer ti puoi concentrare su tutti gli aspetti estetici di come vengano composte le scale cromatiche o di come vengano utilizzate la tipografia o le immagini nelle varie applicazioni del material.

Risorse utili per la progettazione

Proprio per poter sfruttare il linguaggio del material design, ti posto alcuni utili link per approfondire l’argomento o scaricare utili risorse in merito:

• Innanzitutto il brand manual del material design, ne ho già parlato, l’ho già linkato, ma in questa fase di riassunto conclusivo non può mancare!
• Materialup, un intero sito dedicato al mondo del material, che posta continuamente esempi di animazioni, siti web o grafiche in tema con questo argomento.
• Materialdesignicons.com, un sito per scaricare tutte le icone delle applicazioni Google, che sono anch’esse strutturate seguendo le linee guida del design materico.
• Polymer Project, il sito di Polymer, ossia l’aspetto web del material design, pieno di risorse scaricabili e utili tutorial per implementare i codici sul tuo sito web.

Conclusioni

Google infine ha saputo coniugare in un unico linguaggio di design quelle che sono state le due tendenze degli ultimi 5 o 6 anni nel mondo della tecnologia e del design prendendo il meglio da ciascuna di esse e riuscendo a creare qualcosa di innovativo grazie alla metafora del materiale.

Spero che questo argomento ti abbia entusiasmato almeno la metà di quanto ha entusiasmato me quando ho scoperto di questo material design e che questo articolo ti sia stato utile per comprendere al meglio questo linguaggio.

Per qualsiasi dubbio, opinione, domanda o quello che vuoi, scrivimi pure qui sotto nel box dei commenti e sarò felice di risponderti!

Alla prossima,

Lorenzo