Il Material Design nel Web

Con il lancio di Android Lollipop e con l’aggiornamento della app di casa Google il Material Design è la nuova tipologia di interfaccia del momento, più precisamente un vero e proprio codice di comunicazione, una logica specifica che sta alla base della progettazione di questo tipo di UI.

Ma cos’è il Material Design?
Dopo che il Flat Design ha vinto la sfida contro lo stile Skeu di Apple, Google ha deciso di renderlo reale, materiale. Decide che non ci siano più delle improvvise sparizioni o apparizioni sui nostri schemi, ma che tutto sia ricondotto alla realtà, e che quindi ogni oggetto o pulsante dell’interfaccia si possa modificare, adattare, spostare ma non smaterializzare.

Per capire meglio guardate questo video:

Questo sistema fa si che anche persone che di solito non sanno utilizzare strumenti del web possano fruire di interfacce complesse, tutto perché ogni azione ottiene una reazione, che in qualche modo, possono riconoscere come reale.

Come si fa a disegnare il Material Design?
Abbiamo detto che nel Material Design ogni oggetto non scompare o appare, ma deriva sempre da una modifica di un oggetto presente in precedenza, oppure è un un uovo oggetto, spostato, che è sempre stato li, ma fuori dallo schermo. Possiamo dire che ogni interfaccia è riconducibile con dei fogli di carta.
Infatti l’analogia di Google è stata proprio con dei fogli di carta.

Per la prima volta, con il Material Design nel web, viene introdotta la terza dimensione, cioè gli elementi non si muovono sul stesso piano, ma hanno tutti uno spessore di valore unitario e si muovono ad altezze diverse. Questo concetto è rappresentato e sottolineato graficamente tramite le ombre, infatti in base all’altezza dell’oggetto esse cambiano dando un senso tridimensionale ma pulito e minimale, poiché il principio di base è sempre il Flat Design.

Parte fondamentale del Material Design nel web sono le animazioni intelligenti, cioè animazioni che interagiscono, danno una risposta al vostro click o stipe nel punto in cui è stato fatto e dal quel punto partirà la modifica materiale degli oggetti circostanti.

Ma nel Web?

Riprendendo l’analogia di Google con i fogli di carta, il Material Design rende la creazione del responsive dei siti web molto semplice, grazie anche all’introduzione dell’HTML5.
Questo tipo di design permette di rendere un sito molto simile ad una applicazione, sia in termini di grafica che di interazione e funzionalità, così che per chi non ha veramente bisogno di sviluppare una app per smartphone o tablet diventa tutto più semplice e veloce.
[:en]Con il lancio di Android Lollipop e con l’aggiornamento della app di casa Google il Material Design è la nuova tipologia di interfaccia del momento, più precisamente un vero e proprio codice di comunicazione, una logica specifica che sta alla base della progettazione di questo tipo di UI.

Ma cos’è il Material Design?
Dopo che il Flat Design ha vinto la sfida contro lo stile Skeu di Apple, Google ha deciso di renderlo reale, materiale. Decide che non ci siano più delle improvvise sparizioni o apparizioni sui nostri schemi, ma che tutto sia ricondotto alla realtà, e che quindi ogni oggetto o pulsante dell’interfaccia si possa modificare, adattare, spostare ma non smaterializzare.

Per capire meglio guardate questo video:

Questo sistema fa si che anche persone che di solito non sanno utilizzare strumenti del web possano fruire di interfacce complesse, tutto perché ogni azione ottiene una reazione, che in qualche modo, possono riconoscere come reale.

Come si fa a disegnare il Material Design?
Abbiamo detto che nel Material Design ogni oggetto non scompare o appare, ma deriva sempre da una modifica di un oggetto presente in precedenza, oppure è un un uovo oggetto, spostato, che è sempre stato li, ma fuori dallo schermo. Possiamo dire che ogni interfaccia è riconducibile con dei fogli di carta.
Infatti l’analogia di Google è stata proprio con dei fogli di carta.

Per la prima volta, con il Material Design nel web, viene introdotta la terza dimensione, cioè gli elementi non si muovono sul stesso piano, ma hanno tutti uno spessore di valore unitario e si muovono ad altezze diverse. Questo concetto è rappresentato e sottolineato graficamente tramite le ombre, infatti in base all’altezza dell’oggetto esse cambiano dando un senso tridimensionale ma pulito e minimale, poiché il principio di base è sempre il Flat Design.

Parte fondamentale del Material Design nel web sono le animazioni intelligenti, cioè animazioni che interagiscono, danno una risposta al vostro click o stipe nel punto in cui è stato fatto e dal quel punto partirà la modifica materiale degli oggetti circostanti.

Ma nel Web?

Riprendendo l’analogia di Google con i fogli di carta, il Material Design rende la creazione del responsive dei siti web molto semplice, grazie anche all’introduzione dell’HTML5.
Questo tipo di design permette di rendere un sito molto simile ad una applicazione, sia in termini di grafica che di interazione e funzionalità, così che per chi non ha veramente bisogno di sviluppare una app per smartphone o tablet diventa tutto più semplice e veloce.