Cos’è Material Design di Google?

Un unico linguaggio visivo per la UX/UI delle app

In Dreamonkey progettiamo web app e app mobile seguendo le linee guida del Material Design di Google, ma di cosa si tratta esattamente? Scopriamolo assieme.

«Material Design è un linguaggio visivo che sintetizza i principi classici del buon design con l’innovazione della tecnologia e della scienza»

material.io di Google

Parafrasando Google, è un modo di concepire la user interface: è un linguaggio visivo ispirato dagli elementi classici della stampa (tipografia, griglie, spazio, proporzioni, colori e immagini) trasposti in un ambiente 2D digitale.
Tutti questi aspetti grafici e compositivi creano e veicolano la gerarchia e il significato dei contenuti disposti sullo schermo, mantenendo coerente la user interface a prescindere dal sistema operativo, dal browser e dal dispositivo (mobile o desktop).

Material Design si prefigge l’obiettivo di unificare la UX degli utenti tra diverse piattaforme e dispositivi (hai già letto la nostra panoramica sulla user experience). Allo stesso tempo, vuole essere un fondamento flessibile per l’innovazione e l’espressione delle brand identity.

Se sei familiare con i servizi web di Google forse riconosci già lo stile delle loro interfacce. Youtube, Gmail, Drive e la suite di Google Docs sono solo alcuni esempi, ma ce ne sono molti altri, anche tra i servizi web non di sua proprietà.

Screenshot di un video di Youtube

L’interfaccia di Youtube, discreta e funzionale, è un esempio eccellente di Material Design, utilizzata ogni giorno da milioni di persone.
A cosa serve Material Design

Material Design è particolarmente indicato per la progettazione del front end di applicativi web o mobile, per via del suo spiccato minimalismo formale che ben si sposa con la necessità di integrare tante funzionalità, mantenendo l’interfaccia accessibile e intuitiva. A tal proposito forse ti interessa leggere user interface: una questione di aspetti funzionali, non di gusto personale.

A livello pratico Material Design è un insieme di linee guida per gli UX/UI designer e gli sviluppatori. È l’equivalente di un grande manuale delle istruzioni, che spiega ai progettisti come approcciare la costruzione di un’interfaccia digitale funzionale ed esteticamente professionale (secondo i criteri che Google ritiene importanti).

Fornisce le specifiche di un nutrito gruppo di componenti essenziali standard (cards, buttons, lists, chips, ecc.) e i principi da seguire per personalizzarli o realizzarne di nuovi.

Una raccolta di componenti progettati secondo le linee guida di Material Design

Material Design comprende una lunga lista di componenti fondamentali, adatti a far fronte alle necessità base di tantissimi software. Qui potete vederne una piccola parte messa a disposizione dei designer direttamente da Google.

In un certo senso, adottare Material Design significa non dover reinventare la ruota ogni volta che si avvia un nuovo progetto. Siccome le basi del sistema grafico da utilizzare sono già definite in modo chiaro, chi progetta può concentrarsi maggiormente su aspetti più importanti, come la struttura di navigazione, le scelte di branding (colori, font, immagini…) e la creazione dei componenti personalizzati volti a far fronte a esigenze molto specifiche del cliente.

Le caratteristiche della user interface Material

La piattaforma dedicata di Google, material.io, fornisce un’ampia documentazione per conoscere in modo approfondito e dettagliato tutte le caratteristiche dei componenti standard che popolano una user interface Material.

Un esempio delle misure adottate da un componente progettato secondo Material Design

I componenti standard sono descritti in dettaglio per fornire agli sviluppatori tutte le informazioni per una programmazione front end adeguata.

Considerandolo su un piano più concettuale e meno legato al mero aspetto grafico, Material Design fornisce un metodo e una logica secondo i quali organizzare i contenuti.
Le finezze estetiche e stilistiche possono variare – gli angoli arrotondati, le icone, le animazioni, ecc… –, ciò che non varia è il criterio adottato per disporre le informazioni e i comandi.
Questo criterio fornisce uno scheletro che preserva l’intuitività della user interface, a prescindere dal suo aspetto esteriore.
Per questo motivo, nonostante l’apparente taglio grafico marcato dei componenti standard, il linguaggio di Google mantiene un buon livello di personalizzabilità.

Material Design è personalizzabile

Come accennato, il linguaggio visivo Material prende forma in una lista di specifiche per programmare i suoi componenti standard, ma c’è spazio anche per le personalizzazioni.

Il metodo solido e flessibile con il quale è stato sviluppato permette a designer e sviluppatori di fare proprie queste linee guida per creare componenti ad hoc, consistenti e coerenti, ma tarati sulle esigenze dei clienti, siano esse tecniche o più creative.

Differenti temi di Material Design

material.io offre alcuni temi grafici (es. Basil, Crane, Shrine, ecc.) con font, colori e componenti personalizzati, per mostrare le potenzialità di Material Design.

Per questo, come insieme di direttive, Material Design è più un riferimento teorico che non un pacchetto di strumenti operativi pronti all’uso.
Sebbene Google fornisca anche alcune librerie di componenti preconfezionati, i progettisti possono adottare Material in libertà, costruendo autonomamente i propri componenti da utilizzare, sia in fase di prototipazione, sia in fase di sviluppo (a proposito, sai già qualcosa di coerenza tra prototipo e software?).

Se vuoi progettare una web app, o se devi rinnovare il tuo vecchio software per renderlo uno strumento al passo con gli standard qualitativi di oggi, è probabile che Material Design faccia al caso tuo. Noi ne siamo utilizzatori entusiasti. Contattaci e parliamo assieme del tuo prossimo progetto.