Contenuti perfetti, non solo a livello di performance. Il Visual importa. Un principio cardine della comunicazione che Google ha deciso di rendere uniforme, fruibile per tutti i professionisti secondo regole precise e universali. Se uno dei principali digital trends 2020 è il suo Material Design, l’azienda di Mountain View ne sta sviluppando una versione ancor più moderna. Semplice restyling o nuova rivoluzione? Google, come gli altri leader del settore, è sempre alla ricerca di qualità, innovazione, miglioramento. Alcune modifiche al linguaggio sono già state approntate, altre rimangono in attesa.

Design Matters: cos’è il Google Material Design

Stile o linguaggio di design. Insieme di principi di esteriorità grafica. Presentato il 25 giugno 2014 durante l’annuale Google I/O, questo codice ha dettato le basi di tutti i successivi prodotti del brand. Negli ultimi anni le più importanti aziende digital del pianeta hanno individuato le proprie linee guida, quasi obbligatorie per chi progetta utilizzando le loro tecnologie.

Nato in contrapposizione al Metro Style di Microsoft e al design scheumorfico inizialmente introdotto da Apple, possiamo considerare il Material Design un’evoluzione del Flat Design (design piatto) e una sintesi di tutte queste tendenze. Il termine che lo identifica è l’evocativo Material, una metafora che rimanda alla materia fisica di cui è fatto il nostro mondo. Interfacce grafiche che non sono più solo elementi astratti ma materiali reali, oggetti che si comportano in modo tridimensionale. Luci e ombre, colori intensi, spessori definiti, geometrie elementari come cerchi e quadrati ma anche forme organiche e sinuose che richiamano la natura, ampio spazio tra gli elementi grafici e i testi. Interfacce che si adattano ad ogni contesto e ad ogni dispositivo. La metodologia progettuale della carta stampata rivive nel web, che fa tesoro della storia del design e la reinventa in modo contemporaneo: una gerarchia visiva che parla di tipografia, spazi, griglie, scale, immagini, icons e colori. Con un obiettivo primario: semplificare e rendere indimenticabile l’immersione dell’utente nell’esperienza che sta vivendo.

I principi fondamentali del Material Design Google

Superfici tattili (quantum paper)

Un layout basato sul Material Design (paper) ne costituisce la superficie digitale, sulla quale vengono disposti gli elementi grafici che acquistano caratteristiche reali, con identità e tangibilità proprie. Il termine stesso quantum fa riferimento alla meccanica quantistica e rappresenta un’unità minima ed indivisibile. Questo tipo di design è paragonabile ad uno spazio 3D in cui gli oggetti sono dotati di 3 dimensioni: X, Y, Z. L’asse Z – utilizzato non in ottica di prospettiva ma di stratificazione – è colui che determina, grazie all’ombreggiatura, la profondità di ogni oggetto. Strutturati in maniera gerarchica, gli elementi dell’interfaccia grafica vengono ordinati a seconda del loro peso ed importanza, ognuno con la propria posizione sullo schermo. La suddivisione in livelli di queste superfici digitali implementa notevolmente la user experience, focalizzando l’attenzione dell’utente su ciò che riveste maggior rilievo all’interno della pagina, come i pulsanti o il menu di navigazione. Ecco dunque la principale differenza rispetto al Flat Design: pur rimanendo fedele alla semplicità delle linee, il Material introduce la tridimensionalità visuale.

Animazioni intelligenti

Nel Material Design tutte le animazioni presenti cominciano da un’interazione. Esse sono quindi conseguenze di un gesto – inserite in un quadro specifico – coerenti con l’esperienza dell’utente in quel momento. Sono animazioni non complesse, che muovono solo un certo numero di elementi. Sono inoltre naturali, armoniche, e non disturbano la navigazione. Si basano sul comportamento dei materiali nel mondo reale e il loro movimento ne definisce le caratteristiche fisiche, facendoci comprendere se un oggetto è pesante o leggero, piccolo o grande.

Adattabilità

Responsive è un aggettivo imprescindibile in ogni progetto di comunicazione digitale. Tutte le interfacce grafiche devono adattarsi in modo dinamico ed automatico ad ogni dispositivo: computer, smartphone o tablet. Nel Material Design l’adattabilità funziona grazie al passaggio da generale a specifico. Al ridursi della dimensione dello schermo, si riduce la quantità di singole informazioni mostrate sullo schermo stesso. Google illustra tramite le sue guidelines i fattori scalabili di ogni elemento, sottolineando come i margini tra le varie sezioni rimangano invariati, mentre cambia la larghezza dei segmenti.

Inchiostro digitale

La tipografia torna al design stampato. Per il suo Material Design, Google applica le necessità della stampa alle superfici digitali delle interfacce. Rimandando alla metafora, l’inchiostro diventa digitale e prende forma concreta. Il carattere ufficiale – Roboto – è un font lineare, pulito e moderno, di facile leggibilità. La comprensione immediata dei testi svolge un ruolo cruciale: il font ha 8 pesi e relative versioni in corsivo. Ne viene spiegato l’utilizzo per ogni componente, ma anche il giusto colore, al fine di non causare fastidi all’utente adottando un titolo o un paragrafo dalla tonalità troppo accesa.

Lo stile di Google: una risorsa preziosa per il web design

Il Material non è statico, ma progettato per aggiornarsi nel tempo. È un linguaggio collettivo e neutro, che esalta l’obiettivo principale di tutto il marketing: l’esperienza utente, la fruibilità, il comunicare qualcosa nel miglior modo possibile. La sfida è creare innovazione rispettando gli standard del web. Un’evoluzione che abbraccia il passato, attraverso un pensiero critico che evita il ripetersi degli stessi errori.

Il codice permette la realizzazione di visual che sintetizzano i principi classici del buon design unendoli a tecnologia e scienza, uniformando in un unico sistema la UX attraverso piattaforme web e devices, CTA e input. Grazie alla flessibilità, consente inoltre di personalizzare i contenuti come espressione del brand o del singolo progetto. Dal float menu che si comporta come un bottone galleggiante agli aspetti estetici di composizione delle scale cromatiche, il Material Design è una guida completa che aiuta la metodologia del designer nella progettazione di un layout grafico.

L’evoluzione del Material Design

Gli ultimi updates affiancano al Roboto un nuovo font: il Google Sans. Quest’ultimo, che apparirà sui materiali pubblicitari, ha dimensioni più elevate ma è simile al precedente. Non sarà tuttavia open source. Un’altra novità è rappresentata dall’aumento degli spazi bianchi, che darà maggior respiro agli elementi di colore più netto. Probabili aggiornamenti riguarderanno le barre di navigazione nella parte inferiore della schermata, il perfezionamento dei box sovrapponibili e degli oggetti fluttuanti, l’introduzione delle cards e dei pannelli espandibili.

Il Material Design, già punto di riferimento in ambito di web e interaction design, è oggi la nuova tendenza anche del graphic design per forme, struttura e colori. In Tecnostudi lo sappiamo e lo utilizziamo con successo per i nostri clienti. Contattaci!