Material Design: rivoluzione o evoluzione dell’interfaccia?

0
410
material design

In queste ultimi mesi abbiamo visto una modifica nell’interfaccia di numerosi strumenti, siti e social, con il passaggio ad una grafica e a layout realizzati in Material Design.

A cascata si è aggiornato l’aspetto dei social del colosso di Mountain View Google+ e Youtube, del tool di analisi degli accessi ai siti web Analytics e della gestione delle campagne sponsorizzate Adwords e (non) in ultimo di social più usato al mondo, Facebook.

In realtà però tutta la piattaforma di Google, oltre ai servizi più conosciuti, migrerà verso il Material Design e perciò sarà possibile riscontrare un nuovo design per tutti i servizi offerti da Google (Google Font, Drive, News etc, etc). Anche il browser Chrome ha in fase di studio un nuovo layout declinato su questa grafica e chi utilizza il browser sperimentale Canary la può testare.

Analizziamo la nuova grafica per il web introdotta da Google: il #Material Design o Quantum Paper Condividi il Tweet

Il Material Design o Quantum Paper

layout Material DesignQuesta nuova tipologia di design, declinazione del nuovo logo del motore di ricerca, sviluppata da Google per i device Android e poi esportata al web per lo sviluppo di Web App, applicativi e siti, è una nuova modalità grafica che sfruttando appieno le regole e le possibilità offerte dai nuovi selettori forniti dai CSS3, dall’HTML5 e da Javascript, con l’uso di effetti grafici di profondità, migliora la user-experience grazie a ombre e illuminazione degli oggetti. Grazie a questa nuova modalità grafica l’utenza potrà comprendere meglio con quali elementi si potrà interagire, e quali invece sono statici.

L’obiettivo del Material Design sarà quello di permettere la realizzazione di materiali virtuali nelle tre dimensioni mediante oggetti, luci e ombre. Gli effetti di spostamento e trascinamento degli oggetti presenti sullo schermo diventeranno più funzionali e di più semplice comprensione per l’utenza.

Per gli sviluppatori e i grafici il sito di riferimento per comprendere nel dettaglio questo metodo grafico e cosa permette di realizzare è material.google.com, in cui è possibile trovare diversi tutorial, con esempi visivi, delle potenzialità di questo linguaggio visivo.

Sicuramente questa nuova tipologia di grafica permette di sviluppare prodotti molto usabili e realizzati interamente mediante codice, diminuendo i tempi di caricamento delle pagine, ma nel contempo appiattendo e rendendo più simili fra loro i diversi layout.

Il Material Design, evoluzione della grafica vettoriale

Come i grafici avranno già capito il Material Design è una diretta evoluzione della grafica vettoriale introdotta anni fa con le animazioni Flash, ad oggi quasi del tutto deprecate.

flat designNegli ultimi anni, infatti, grazie alla grafica vettoriale si sono incominciate a realizzare interfacce in Flat Design, dove l’interfaccia utente era contraddistinta dal minimo uso degli elementi di stile, grazie all’uso di elementi semplici e da colori piatti.

L’obiettivo dei layout realizzati in flat design, oltre di rendere più semplice la comprensione dell’interfaccia, è quello di sviluppare siti web o applicazioni per internet con tempi di risposta e caricamento altamente ridotti. Per questo motivo è stata introdotta la possibilità, prima mediante i CSS2 e poi con il CSS3, in sincronia con l’HTML5 di realizzare grafica mediante il codice di markup, come ad esempio:

La grafica vettoriale e le interfacce responsive

Un importante considerazione sulla grafica vettoriale, realizzata mediante codice, è la possibilità permettere una ridefinizione immediata delle dimensioni. Questa potenzialità, combinata alle media query dei CSS ha permesso di realizzare dei layout adattabili in funzione del monitor con cui vengono visualizzati e definiti responsive.

Il responsive web design o RWD infatti permette di aggiungere dei punti di controllo ai nostri CSS, dove impostare una modifica alle dimensioni degli elementi alle diverse risoluzioni del monitor su cui vengono visualizzate, ottimizzando così il layout per la visualizzazione su una moltitudine di device. Per le immagini inglobate nelle pagine a questo proposito vengono in aiuto i nuovi attributi del tag <IMG>, di cui ho parlato in passato nei diversi articoli relativi alle tecniche RWD:

Utilizzare il Material Design nei propri layout

Se vogliamo incominciare ad utilizzare questo “nuovo” metodo grafico nei nostri prodotti, applicando questa tipologia di layout ai nostri siti web, possiamo usare le librerie condivise da Bootstrap 4.

Molti riferimenti e i sorgenti CSS3 e HTML, da includere nei nostri progetti, li possiamo trovare in uno dei siti ufficiali del progetto, in cui ci viene anche spiegato nel dettaglio come usare le librerie per integrare la grafica in Material Design nei nostri siti WordPress.

Material Design: rivoluzione o evoluzione dell’interfaccia?
5 (100%) su 2 voti

CONDIVIDI
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL. Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale. Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

LASCIA UN COMMENTO