Material design, un nuovo strumento per creare esperienze digitali d’impatto

Material design, un nuovo strumento per creare esperienze digitali d’impatto

Il material design è una tecnica di design ideata da Google che pian piano ha rinnovato tutti i suoi prodotti  trasformandoli in design digitale innovativo, un linguaggio a metà tra flat design e skeumorfismo di Apple.
La parola chiave del material design è proprio “material” che vuol dire materiale cioè oggetto. L ’obiettivo del design materiale è di fare in modo che le interfacce si comportino come degli oggetti reali cercando di adeguarsi ad ogni situazione. L’ideatore di questo progetto Matias Duarte ha affermato che:

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 cucitore danno il loro significato di qualcosa che tocchi.

In realtà il material design è un’evoluzione del flat design perché utilizza alcune sue caratteristiche come le palette di colori forti, le forme geometriche primarie e lo spazio largo tra testi.

Il material design è nato qualche anno fà come nuovo strumento per creare esperienze ed emozioni differenti nella progettazione di siti web. Il Design è un modo di pensare, un’esplorazione per capire cosa funziona, richiede collaborazione di diverse figure nel web e persone che lavorano per costruire il material design. Design è un linguaggio di condivisione, una serie di elementi che parlano tra loro in modo chiaro, elementi flessibili tra loro grazie ad ogni dettaglio. Design è “Niente è mai fatto” perché siamo in un mondo di continua evoluzione e continui bisogni.
Material design è un sistema unificato, attraverso la combinazione di materie, risorse, e uomini che collaborano insieme per trovare soluzioni nuovi insieme.

Material.io  è un luogo virtuale dove sono inseriti tutti i lavori realizzati con il material design, con lo scopo di condividerlo e di farlo crescere. Il material Design ti permette di ridefinire gli aspetti della tua interfaccia, dai colori alle animazioni e di realizzarle in modo corretto su ogni dispositivo. Grazie a strumenti come REMIXER puoi fare modifiche in tempo reale grazie alla possibilità di ridefinire il design attraverso il cambiamento di colore, animazione e visibilità senza necessità di modificare il codice o di far ripartire la applicazione.

OBIETTIVI

Il material design ha l’obiettivo di far condividere una serie di principi che vanno dal buon design a quelli di innovazione, di scienza e tecnologia; Questo viene raggiunto attraverso sistemi che realizzano un’esperienza unica per diverse piattaforme e differenti dimensioni di ogni dispositivo. Le regole per i dispositivi mobili sono importanti, ma lo sono anche quelle riguardanti i touch, la voce, il mouse e la tastiera sono input fondamentali.

PRINCIPI

  1. Superfici tattili: le superfici digitali devono essere reali, tangibili, toccabili con uno spessore di 1 dpi (dot per inch). Utilizzando questo spessore unitario vi è la definizione utilizzata di quantum paper. In questo modo gli elementi acquisiscono ombre realistiche perché sono strutturali in modo gerarchico. La suddivisione in livelli migliora l’esperienza utente e fa spostare la sua attenzione su elementi importanti della pagina come i pulsanti o menù di navigazione. Questa è la differenza più importante con il flat design che come dice il nome stesso vuol dire piatto. Il design materiale invece introduce il concetto di profondità e tridimensionale delle superfici delle interfacce ma che rimane sempre semplice con le linee e le forme.
    A seconda della importanza i quantum paper sono disposti ad una diversa altezza facendone cambiare l’ombra generata. Per esempio i pulsanti di navigazione principali vengono messi in primo piano, mentre le strutture a blocchi dell’interfaccia sono posti  più in basso con un’ombra meno consistente.
  2. Animazioni intelligenti: le interfacce non sono statiche e devono però essere sensate e coerenti con l’esperienza dell’utente. Un’animazione deve essere una conseguenza di un gesto e di una intenzione dell’utente quindi devono essere intelligenti. Molto importante è anche che le animazioni partano dal punto in cui l’input è stato dato. Il movimento è significativo ed appropriato, e serve a focalizzare l’attenzione e mantenere continuità. Le transizioni sono efficienti e coerenti.
  3.  Adattabilità: le interfacce grafiche devono essere responsive e cioè adattarsi in modo dinamico ad ogni dispositivo, computer, tablet o cellulare. Un modo per strutturare un’interfaccia di un applicazione utilizzata da ogni dispositivo è creare diverse dimensioni per i blocchi, cioè le card che compongono la grafica. Per esempio al di sotto dei 700 pixel di larghezza dello schermo questo contenuto verrà mostrato in modo diverso rispetto agli schermi più grandi.
  4.  Inchiostro digitale: è la necessità della stampa alle superfici digitali delle interfacce. Tutto quello che viene applicato alle superfici digitali, diventa inchiostro digitale e prende forma reale. Così come avviene nel design stampato, la tipografia svolge un ruolo importante. Google utilizza solo un font di Roboto che ha 8 diversi pesi che ne garantiscono un ampio utilizzo ma non per questo è stato criticato. Dell’inchiostro digitale fanno parte anche i colori e le immagini utilizzate. Google consiglia di non scegliere più di 3 colori o di non utilizzare immagini che non spiegano bene il contesto oppure che non sono di alta qualità.

 

Gli elementi fondamentali di tipografia, griglie, spazio, scala, colore e uso di immagini sono la guida visuale del material design. Questi elementi sono elementi gerarchici. La scelta di colori particolari  hanno lo scopo di creare una superficie in bold che immergo l’utente nella loro esperienza.

LIBRERIA ICONE
Le icone materiali sono belle, deliziose, e facile da usare nei progetti web. Il modo migliore per usarle è quello di utilizzarle come icon-font poiché pesano poco, sono facili da usare, e sono ospitate da google web font.
Una varietà di icone di varie dimensioni e densità possono essere scaricate da questa libreria. Le icone sono disponibili anche

COMPONENTI MATERIALI
I componenti sono precisi, aggiornati periodicamente e open-sources e creano bellissime applicazioni con componenti UI modulari e customizzabili. I componenti sono aggiornati ogni volta e man mano che il Material design si evolve assicurando una programmazione ed implementazione con pixel perfetti. Sono disponibili anche i widget del material design.

STRUMENTI UTILIZZABILI
Ci sono diversi strumenti da poter utilizzare:

  • Gallery: facilitano l’utilizzo ripetitivo del design e ti permettono di catturare feedback sia visuali che di movimento. È possibile annotare e commentare su ogni immagine o video frame, per questo i progetti progrediscono a velocità incredibile;
  • Color tool: si possono creare e condividere palette di colori e misurare il livello di accessibilità  di ogni combinazione di colore;
  • Remixer: aiuta gli sviluppatori ed i designer a configurare e aggiustare il design delle apps in modo collaborativo. Permette facilmente di affinare il design cambiando il colore, le animazioni e la visibilità senza il bisogno di modificare il codice o di far ripartire l’applicazione;
  • Resizer: Vista interattiva che aiuta i designer a provare i breakpoint del design materiale attraverso i dispositivi desktop, mobile e tablet;
  • Device metric: È un esauriente risorsa per dimensioni, e risoluzioni e più dispositivi mobili;
  • Stage: definisce interfacce dinamiche con movimenti interattivi. Ti permette di cambiare il modo di fare design e di costruire esperienze interattive. Stage è uno strumento di design che supera i processi statici di design facilitando un flusso di lavoro più dinamico e sistematico per creare esperienze digitali;

Il material design sta diventando una tendenza molto di moda sia per le forme che per la struttura ed i colori. Google ha saputo creare un unico linguaggio nel mondo del design creando qualcosa di innovativo grazie alla metafora del materiale. Conosci altri siti web realizzati con la tecnica del Material Design? Segnalalo nei commenti.

alederobertis75
info@alessandraderobertis.it
No Comments

Post A Comment