Come il Material Design sta influenzando il web

Il Material Design non è solo uno stile, ma è anche un codice di comunicazione preciso, una logica che deve stare dietro la progettazione di un’esperienza.

Questo è quello che esce fuori dai primi mesi di utilizzo di questa tipologia di interfacce, con il lancio di Android Lollipop e con l’aggiornamento delle app di casa google. Oggi cercheremo di chiarirvi una volta per tutte cos’è e perchè vogliamo parlarvi di una vera e propria rivoluzione non solo nel mobile, ma anche nel web.

Cos’è il Material Design?

Nel mentre che Apple e Microsoft si facevano guerra rispettivamente con gli stili Skeu e Flat, Google, accusata sempre di avere un os tanto open quanto poco appetibile sullo stile, in quanto ogni applicazione seguiva delle proprie regole e nessuno stile guida, silenziosamente ha preso tutto il buono dal Flat (il quale ha palesemente vinto la sfida del mercato su quello Apple) e ha deciso di renderlo reale, materiale.

Vi chiederete di cosa stiamo parlando. Bene, Google ha reso la parola material sia una metafora che realtà.

Il Material vuole essere esattamente quello che dice di essere, ossia materiale. Decide in maniera chiara che non ci siano più delle improvvise apparizioni o sparizioni sui nostri schermi, ma che tutto sia ricondotto alla realtà, e che quindi ogni oggetto o pulsante che si trova sul nostro schermo si possa adattare, modificare, spostare, ma non smaterializzare.

Guardate questo video per capire meglio:

Questo sistema permette anche a persone che non sanno normalmente utilizzare gli strumenti del web, di fruire di interfacce complesse. Il tutto perchè ogni azione che compiono ottiene una reazione che, in qualche modo, possono riconoscere come un qualcosa di reale.

Ma andiamo ancora più a fondo.

In che modo il Material è reale e come si fa a disegnarlo?

Nel Material ogni oggetto che si trova sullo schermo, dicevamo, non può scomparire o apparire, ma deriva sempre da una modifica di un oggetto presente in precedenza, o è un nuovo oggetto che però arriva da uno spostamento, come se fosse sempre stato lì, ma fuori dal campo visivo dello schermo. Riflettendoci, ogni interfaccia del material design è praticamente riproducibile con dei fogli di carta.

layout_structure_toolbars4

L’analogia di Google infatti è stata proprio con dei fogli di carta.

Cosa ha introdotto Google nelle interfacce? Per la prima volta viene introdotta palesemente una terza dimensione. Questo nuovo stile si basa sul fatto che gli oggetti sullo schermo non si muovono sullo stesso piano, ma hanno tutti uno spessore di valore unitario e si muovono ad altezze diverse. Le ombre che possiamo vedere nelle nuove schermate sono infatti a supporto di questa teoria. Ogni ombra è diversa dall’altra in quanto cambia al cambiare dell’altezza dell’oggetto che la proietta.

material design

Creare quindi app in Material Design è tutto tranne che complicato, bisogna semplicemente tornare a pensare in maniera naturale, come se si stesse giocando a tagliare e spostare fogli di carta, ma mi raccomando, sempre con forbici dalla punta arrotondata.

Lo stile

Lo stile che possiamo ritrovare, come detto in precedenza, è un’evoluzione del flat. Quindi troveremo gli stessi colori accesi e le stesse forme basiche. L’unica differenza è che a quelle forme avremo donato una terza dimensione.

material design vs flat

Un’altra importante caratteristica che rende possibile uno stile materiale sono le animazioni, finalmente intelligenti. Le animazioni risponderanno non in maniera fredda alla vostra interazione, ma daranno una risposta al vostro click o swipe nel punto in cui è stato fatto e da quel punto partirà la modifica materiale degli oggetti intorno. In questo modo per chiunque è facile comprendere che l’azione intrapresa è stata eseguita correttamente: parte dal punto in cui ho agito, modifica il campo partendo dalla mia azione, mi restituisce l’informazione richiesta.

Confido nel fatto che anche il più ostico nei confronti della tecnologia, con il Material, potrà tornare a non sentirsi un pesce fuor d’acqua e a sedersi al ristorante per utilizzare il suo smartphone piuttosto che parlare con la persona di fronte a lui! 😀

E il material nel web design?

Sia sempre lodata l’introduzione dell’HTML 5.

Un vantaggio del Material design è la precisione delle azioni che vengono compiute ad una data interazione. Tutto ciò riesce chiaro da sviluppare attraverso l’HTML 5, e anche grazie alla quantità di risorse che si trovano e di codici già sviluppati che permettono di dare ai nostri siti uno stile material in modo immediato. Ormai il web sta lentamente venendo conquistato dall’ordine Google delle cose.

La verità è che il Material, basandosi su elementi precisi, rende la creazione del responsive molto molto semplice.

material design responsive

Parlando chiaramente, ci sono siti web e servizi che non hanno bisogno della creazione di un’applicazione mobile. Le persone spesso scaricano app che disinstallano dopo un solo utilizzo, rendendo la fatica di sviluppo assolutamente inutile.

Un sito web può raggiungere esattamente gli stessi risultati se sviluppato in maniera corretta, ossia in maniera che sia visibile da tutti i dispositivi, perchè checchè se ne dica la percentuale di persone che naviga attraverso gli smartphone e i tablet è destinata ad aumentare in maniera esponenziale.

Il material potrebbe fornire la semplicità di sviluppo e, soprattutto, l’aspetto grafico e interattivo migliore per permetterci di fare a meno di un app e di avere ciò che vogliamo direttamente passando per un browser.

In conclusione

Se non vi siete ancora convinti, vi lascio qualche sito che adotta già il material design:

E se siete dei designer vi lascio qui la guida ufficiale di Google al Material Design.

Sperando di vedere delle app e dei siti sempre più puliti ed usabili noi vi salutiamo qui e aspettiamo di vedere la prossima evoluzione di stile.

I commenti sono chiusi.

Impostazioni privacy