Ai più attenti di voi (leggasi: designer con deformazione professionale incurabile) non sarà sicuramente sfuggito il cambiamento che le interfacce utente di molte app e siti web stanno subendo negli ultimi tempi. Un esempio su tutti? Il nuovo design di Whatsapp, decisamente più fluido e colorato dei precedenti.
Che Google detti legge in materia di SEO è assodato, ma da un paio d’anni a questa parte il colosso di Mountain View sta rivoluzionando anche il mondo del web design grazie all’introduzione del material design.
Cos’è il material design
Contenuti
Si tratta fondamentalmente di un linguaggio di design sviluppato da Google e annunciato ufficialmente in occasione del Google I/O di giugno 2014.
Il material design si distingue per il suo utilizzo più libero delle griglie, per le animazioni e transizioni responsive e per gli effetti “di profondità” come luci ed ombre. L’usabilità e l’armonia quindi, sono alla base di questa nuova concezione di design.
Il suo scopo è quello di rendere la navigazione più fluida, simulando una continua transizione tra gli elementi che faccia apparire la pagina come in continuo movimento, anziché cambiare schermata repentinamente.
Il material design mira a diventare un punto di riferimento per il design delle app presenti sul Play Store di Google, migliorando e unificando l’esperienza utente.
Il designer Matías Duarte ha illustrato così il nuovo linguaggio:
A differenza della carta, il nostro materiale digitale si può espandere e riformare in maniera intelligente. Il “materiale” ha una superficie fisica e dei confini. Luci e ombre attribuiscono un significato a ciò che si può toccare.
Ad oggi, la stragrande maggioranza delle applicazioni mobile di Google per Android (Gmail, Youtube, Google Maps, Google Drive, Google+) ha adottato il material design.
Quali sono le sue regole?
Profondità
Il flat design, che fu il trend indiscusso del 2013, aboliva ombre e 3D per semplificare al massimo l’interfaccia.
Con il material design la tridimensionalità degli elementi torna in scena, attribuendo ad ogni componente una propria profondità che faccia intuire immediatamente la sua posizione nella pagina.
Ad esempio, un pulsante in primo piano avrà un’ombra più accentuata rispetto a quella di un menù posizionato dietro ad esso. Esattamente come se gli elementi fossero disposti su un foglio di carta. Due componenti non possono occupare lo stesso spazio, perciò saranno sempre sovrapposte.
Colori
I colori del material design sono parte integrante dell’esperienza utente: vivaci per catturare l’attenzione, accostati tra loro con contrasti molto evidenti e sfondi tenui per guidare il percorso visivo verso l’azione da compiere.
Animazioni, transizioni e forme
Nel material design nulla è lasciato al caso: gli elementi hanno sempre dimensioni variabili (misurate in dp) e uno spessore fisso. Per accentuare al massimo l’intuitività, la forma di un oggetto indica anche il suo comportamento: per questo i pulsanti in primo piano sono quasi sempre tondi e incentivano il tocco specialmente sui dispositivi mobili.
Ogni interazione con la pagina comporta un movimento (animazione) delle componenti presenti al suo interno: l’animazione di ogni elemento ne definisce il peso, la rigidità e la flessibilità, oltre a descrivere le relazioni spaziali e funzionali con transizioni incredibilmente d’effetto.
Font
Il font ufficiale del material design è il Roboto, disponibile gratuitamente su Google Fonts.
Per saperne di più: risorse e siti web
Google ha rilasciato una style guide molto dettagliata sul material design, comprensiva di spiegazioni e video sul funzionamento e il corretto posizionamento del “materiale digitale”.
Per restare sempre aggiornati sui trend e le applicazioni del material design, potete seguire i blog Material Up e Material Design Blog, oltre all’aggiornatissimo Wikipedia.
Se invece volete iniziare a sviluppare siti web con il linguaggio di Google, potete scaricare il framework Materialize. Nel caso in cui voleste approfondire l’argomento design, vi consigliamo questa lettura sulla differenza principale tra web design, UX e UI design.
Il design si sta avviando verso una nuova era?
