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!

Nell’ultimo anno il material design è stato scelto come tema per tutti i suoi prodotti, da Gmail a tutte le app del sistema operativo Android.

Questo nuovo design è nato in contrapposizione tra il flat design e il metro style della Microfost e della Apple, puoi leggere l’articolo di approfondimento cliccando “Qui”.

Cos’è il material design?

Il material design è un linguaggio di design, Google lo ha scelto per rinnovare tutti i suoi prodotto, per gestirli meglio sotto una esteriorità grafica.

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, con lo scopo di  adeguarsi alle varie situazioni.

Matìas Duarte, il designer che ha gestito tutto questo processo creativo 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.

Ma non è la stessa cosa del Flat Design?

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 e il largo spazio lasciato ai testi.

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.

Le caratteristiche del material design

Le caratteristiche principali del material design sono 4: le superfici tattili, le animazioni intelligenti, l’adattabilità e l’inchiostro digitale.

(quantum paper)

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

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.

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.

Google ha puntato sul fatto che le animazioni all’interno di un’interfaccia grafica debbano essere fortemente sensate e coerenti con l’esperienza dell’utente in quel momento.

Per loro, è molto importante 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.

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, un sito web si dice “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 stesse.

Sostanzialmente l’adattabilità funziona grazie al passaggio da generale a specifico,riducendo 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 compongono 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.

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.

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

+ Le superfici tattili

(quantum paper)

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

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.

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.

+ Le animazioni intelligenti

Google ha puntato sul fatto che le animazioni all’interno di un’interfaccia grafica debbano essere fortemente sensate e coerenti con l’esperienza dell’utente in quel momento.

Per loro, è molto importante 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.

+ 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, un sito web si dice “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 stesse.

Sostanzialmente l’adattabilità funziona grazie al passaggio da generale a specifico,riducendo 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 compongono 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.

+ 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 ma 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”.

Un esempio del font “Roboto” di Google

La nuova tendenza

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 e riutilizzarli applicandoli ai propri progetti, quando serve.

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

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.

Risorse utili per la progettazione

In caso volessi approfondire l’argomento del Material Design, ti postiamo alcuni link utili:

  • Il brand manual del material design, qui potrete trovare un riassunto completo di quello che abbiamo scritto.
  • 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, 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.

Per qualsiasi dubbio, opinione, domanda ti invitiamo a commentare l’articolo, saremo entusiasti di rispondere!

Lascia un commento

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

show