Che cos’è il material design

Lorenzo MigliettaLorenzo Miglietta

30 COMMENTI

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. (twittami!)

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.

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 e 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:

Profondità del material design

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:

Material Design quantum paper

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.

tabs-clicks

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:

Movimento material design

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

3. L’adattabilità

Material Design responsive

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

Material design Tipografia

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 ma in realtà questo font ha ben 8 pesi (più le 8 versioni in corsivo) che garantiscono un ampio utilizzo.

Roboto family

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 in cui 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

Discussione:

Ci sono 30 commenti in “Che cos’è il material design”

  • Wow non ne sapevo niente di sta cosa! Anche se alcuni degli esempi si erano già notati usando Android. Grazie comunque!

    • Ciao Paolo!
      Sono contento di averti introdotto nel mondo del material design allora eheh 🙂 Si, infatti su android (ad esempio nell’applicazione di Google +) si possono vedere chiaramente le grafiche del material design!
      L.

    • Ahah mi sembra di sentire mia madre! 😀
      “Lorenzo ma obbiettivo è proprio brutto da leggere!”
      “Si però non è sbagliato e poi ormai sono abituato così!”
      “Mah…”
      Eheh 😀

  • Ottimo articolo, insieme a quello sullo scheumorfismo mi ha chiarito un pò di aspetti che conoscevo “di vista” ma non in maniera così esauriente.
    Credo che il material design avrà una lunga vita (per quanto possibile quando si parla di tendenze grafiche nel web, che cambino con grande velocità) perché è uno stile maturo che prende il meglio da quanto è già stato passato, e perché alla base ha una logica progettuale ineccepibile.
    Certo che Google ha fatto passi da gigante in ambito graphic design rispetto alle interfacce che proponeva 5-6 anni fa!

    • Assolutamente! La penso anche io allo stesso modo riguardo alla longevità del material 🙂 Per quanto possa essere longeva una cosa in ambito tecnologico eheh 🙂
      Comunque è vero anche che Google è migliorata enormemente a livello di grafica, ma quando si hanno i soldi per assumere designer di grosso calibro come ha fatto Google, si può fare tutto! 😀

  • Iscritto alla newsletter, consigliato ad un amico e anche incuriosito dal tuo blog! Il material design è fighissimo, prima non conoscevo nemmeno come si chiamasse questo stile ma grazie a te ora lo conosco! Grazie mille!

  • Ok, tutto bello e figo. Però dal punto di vista della UX è terribile : non si capisce cosa si può cliccare e cosa no.

  • Grazie! Con questo articolo approfondito ho capito cos’è i material design. Mi ha aiutato davvero tanto anche per prendere un po’ di ispirazione per i miei prodotti grafici.

  • Grazie! Con questo articolo approfondito ho capito cos’è i material design. Mi ha aiutato davvero tanto anche per prendere un po’ di ispirazione per i miei prodotti grafici.

  • articolo inutilmente articolato. un inutile spreco di energie, si potevano esprimere le stesse cose con un terzo delle parole.menomale che si parlava di immediatezza del design, non oso immaginare se il soggetto fossero state le tartarughe marine…

    • Ciao Daniela!
      Ti ringrazio per il commento. Tutto può essere riassunto sempre di più ma questo articolo serviva a spiegare bene cosa fosse il material design. Con tutte le parole necessarie per spiegarne gli aspetti.
      Per quanto riguarda le tartarughe marine, pensa che ci sono persone che ci hanno scritto libri interi. Questo, http://amzn.to/2q7LOds, ad esempio, ha 160 pagine. Chissà quante parole inutili! 🙂
      Un abbraccio

  • Complimenti davvero, ottimo articolo! Prenderò spunto da questo articolo per parlare del Material nella mia tesina di maturità.

  • Il material design mi è sempre piaciuto a pelle, adesso che me l’hai spiegato ancora di più! Parlo da semplice utente, non sono un’addetta ai lavori. Comunque è davvero geniale, spero che abbia lunga vita… Per me da quand’è nato, come grafica e usabilità non c’è paragone, Google ha davvero “bagnato il naso” all’interfaccia di tutti gli iPhone di questo mondo!

  • Ciao, l’articolo è interessantissimo come sempre.
    Non risco ad accedere al video di google e al suo manual brand (mi da 404) è un problema mio?
    Grazie Giada

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*