COS’È IL MATERIAL DESIGN?

Il Material Design è il design language di Google 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 Google. Evoluzione naturale del Flat Design, ha lo scopo di creare un unicuum di stile rigorosamente definito. Come ogni design language che si rispetti ha le proprie forme, i propri colori e il proprio font. Insomma una grammatica essenziale e inequivocabile, un linguaggio vero e proprio. Questo non ha solo influenzato l’aspetto visivo ma soprattutto l’aspetto funzionale nel suo utilizzo con i device mobili (per i quali è nato).

Ma approfondendo il concetto dietro il Material Design (uniformità, UX, dinamismo e semplicità) possono sorgere subito due domande: perché “material” e qual è l’obiettivo di Google?

LA METAFORA DELL’OGGETTO DIGITALE

Come è facilmente intuibile, il concetto chiave del Material Design è la parola material. Dove material, cioè il materiale, è una metafora. E material è un oggetto. La metafora del material è utilizzata per rendere realistico l’aspetto delle interfacce grafiche e, quindi, migliorare l’esperienza dell’utente.

Il Material Design (nome in codice Quantum Paper) si pone come obbiettivo quello di fare in modo che le interfacce grafiche si comportino come i materiali reali, come gli oggetti. Infatti, prende ispirazione dal mondo fisico e dalle sue texture, compreso il modo in cui sono riflesse le luci e proiettate le ombre. Tuttavia, il comportarsi come i materiali esistenti non vuol dire imitarne ciecamente le superfici, ma vuol dire avere la capacità di adeguarsi alle varie situazioni.

Il designer Matías Duarte ha spiegato che, a differenza della carta vera, il materiale digitale può espandersi e cambiare in modo intelligente. Infatti, il Material Design presenta bordi e superfici fisiche. Le sovrapposizioni e le ombre danno informazioni su ciò che si può toccare e come si muoverà. Google afferma che il loro nuovo linguaggio di design è basato su carta e inchiostro. Proprio come la carta, il materiale digitale si può espandere o restringere riformandosi in modo intelligente.

LE DIFFERENZE TRA FLAT E MATERIAL DESIGN

Il Material Design nasce in contrapposizione e allo stesso tempo come sintesi tra il Flat Design e lo Scheumorfismo dei primi iPhone della Apple. Infatti, utilizza alcune delle caratteristiche fondamentali del Flat, come l’uso di una palette di colori forti, delle forme geometriche primarie (quadrato e cerchio) per rappresentare le interfacce e lo spazio lasciato ai testi.

Però, in un certo senso, migliora il Flat Design unendo ad esso la metafora del materiale. Infatti, le regole di progettazione del Material Design si concentrano su un maggiore uso di layout basati su una griglia, animazioni e transizioni ed effetti di profondità come l’illuminazione e le ombre. Tuttavia, lo fa rimanendo comunque nella semplicità delle linee e delle forme. Questa è la differenza fondamentale con il flat design che, come dice il nome stesso, punta ad appiattire tutto quanto.

LE CARATTERISTICHE PRINCIPALI DEL MATERIAL DESIGN

Le caratteristiche fondamentali del Material Design sono 4: le superfici tattili, le animazioni intelligenti, l’adattabilità e l’inchiostro digitale.

LE SUPERIFICI TATTILI

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).

Grazie a questa struttura, gli elementi acquisiscono delle ombre realistiche perché sono strutturati in modo gerarchico uno sopra l’altro. Sostanzialmente, la suddivisione in livelli delle superfici digitali migliora l’esperienza utente e fa focalizzare la sua attenzione sugli elementi importanti della pagina. Ad esempio, i pulsanti di navigazione principali sono posti in primo piano, mentre le card (le strutture a blocchi primarie dell’interfaccia) sono posizionate più in basso e con un’ombra molto meno consistente.

LE ANIMAZIONI INTELLIGENTI

Ovviamente, le interfacce grafiche non sono statiche e i designer e gli sviluppatori di Google hanno puntato fortemente su questo aspetto. Un’animazione deve essere una conseguenza di un gesto e, quindi, di un’intenzione dell’utente. Insomma, devono essere animazioni intelligenti.

Il movimento focalizza l’attenzione e mantiene la continuità attraverso sottili feedback e transizioni coerenti. Quando gli elementi appaiono sullo schermo, trasformano e riorganizzano l’ambiente con interazioni che generano nuovi cambiamenti. Ad esempio, molto importante è che l’animazione parta esattamente dal punto in cui il dispositivo riceve l’input (il click o il tocco).

L’ADATTABILITÀ NEL MATERIAL DESIGN

Tutte le interfacce grafiche devono assolutamente essere responsive. Cioè, devono adattarsi in modo dinamico ed automatico ad ogni dispositivo da cui si accede a quell’interfaccia, che sia un computer, un tablet o uno smartphone.

Sostanzialmente, l’adattabilità funziona grazie al passaggio da generale a specifico. La quantità di singole informazioni mostrate sullo schermo si riducono in maniera proporzionale alle dimensioni dello schermo stesso. Ciò migliora incredibilmente l’esperienza dell’utente che potrà leggere o guardare video e immagini allo stesso modo su ogni dispositivo.

L’INCHIOSTRO DIGITALE

L’ultimo dei 4 principali componenti del Material Design è il cosiddetto inchiostro digitale, ossia l’applicazione delle necessità della stampa alle superfici digitali delle interfacce.

Come nel mondo del design “stampato”, la tipografia svolge un ruolo cruciale, così avviene anche nel design digitale del linguaggio material. Infatti, il Material Design si basa sui metodi di progettazione della stampa (griglie, spazio, scala, colori e immagini) per immergere gli spettatori nell’esperienza. In particolare, Google utilizza Roboto, un font che 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. Dell’inchiostro digitale fanno parte ovviamente anche tutti i colori e le immagini utilizzate.

L’INFLUENZA DEL MATERIAL DESIGN

Google ha saputo coniugare in un unico linguaggio di design quelle che sono state le due tendenze degli ultimi anni nel mondo della tecnologia e del design. Infatti, prendendo il meglio da ciascuna di esse, è riuscita a creare qualcosa di innovativo. Il Material Design è sicuramente un punto di riferimento e una tendenza in tutto l’ambito del web design e del design di interfacce grafiche, il cosiddetto interaction design. Inoltre, sta diventando la nuova tendenza anche nell’ambito del graphic design con le sue forme, la sua struttura e i suoi colori.

Ad esempio, noi di QuestionMark ci siamo lasciati ispirare dal Material Design per la realizzazione del nuovo sito de La Valle Degli Orti. Infatti, oltre alla realizzazione della loro social media strategy, il famoso brand di surgelati si è rivolto ancora una volta a noi per aggiornare la propria identità digitale. Seguire le linee guida del design materico è stata la nostra missione e pensiamo di averla portata a termine. Ora che ne conosci anche tu i principi, puoi valutare il nostro lavoro visitando il nuovo sito La Valle Degli Orti qui.

Pronti a cavalcare l’onda della novità e cercare di seguire questa tendenza?