Advertisement
  1. Web Design
  2. Material Design Lite

Panoramica del Material Design Lite

Scroll to top
Read Time: 5 mins

Italian (Italiano) translation by Alberto Bonacina (you can also view the original English article)

Ho la sensazione che CodePen stia per essere assolutamente inondato di Material Design nei prossimi mesi. Perché? Perché Google ha appena rivelato il suo attesissimo Material Design Lite (MDL). Questa libreria di componenti per front-end consente agli sviluppatori web di implementare le specifiche del Material Design di Google utilizzando puro HTML, CSS e JavaScript. È un'implementazione leggera delle specifiche del Material Design (poche dipendenze, basso overhead, molto focalizzato) quindi definito "Lite".

Rilasciando MDL, Google ha risposto ad una domanda molto evidente. Hanno preso spunto del fatto che ci sono stati sforzi della community nel creare dei framework ispirati al Material Design, come Bootstrap Material Design, Materialize e Material UI per citarne alcuni. Con MDL, costruito in stretta collaborazione con il team di UX di Chrome, Google ha creato uno standard per come il Material Design dovrebbe essere implementato sui siti Web.

Diamo un'occhiata a cosa MDL ha messo sul tavolo con il suo primo rilascio!

Componenti del Material Design

A differenza degli elementi di Material Design di Polymer (noti anche come Paper Elements), che sono sviluppati per applicazioni e siti Web altamente interattivi e basati sui dati, MDL si concentra principalmente sui siti Web con contenuti più semplici come i Blog, pagine per il marketing e landing page.

In questa versione iniziale, MDL fornisce una manciata di componenti, tra cui:

Layout

I componenti di layout possiedono molti blocchi per la costruzione delle pagine. Ad esempio, la griglia: una feature fondamentale di qualsiasi framework per il front-end. La griglia di MDL è costruita con Flexbox e un piccolo aiuto dalla funzione calc() di CSS. Ha dodici colonne indicate per grandi finestre, otto colonne per quelle che si potrebbero chiamare finestre da tablet con dimensioni medie e quattro colonne per le finestre più piccole.

I componenti di layout di MDL comprendono anche la navigazione, le schede e i piè di pagina – ognuno dei quali è stato ottimizzato per le diverse dimensioni della finestra.

Bottoni

Come indicano i principi del Material Design, ci sono diversi tipi di visualizzazione per i bottoni, alcuni dei quali sono:

  • Pulsante normale: un pulsante rettangolare con uno sfondo differente dal colore del testo.
  • Bottone piatto: un pulsante senza lo sfondo.
  • Float Action Button (o FAB) proprio del Material Design: un pulsante circolare che galleggia sull'interfaccia, di solito indica l'azione principale della schermata corrente o, in questo caso, della pagina.

Ogni pulsante può essere migliorato con il familiare ripple effect.

Card

La card è un contenitore per la visualizzazione di contenuti, come testo e immagini, che di solito promuove un'azione. Ad esempio, un'immagine con il bottone "like" o "condividi", un elenco di brani con il tasto "play", o anche una nota con il pulsante "Salva".

Badge

Il badge è un piccolo cerchietto, posizionato vicino a un elemento dell'interfaccia utente, in genere contenente un numero (come per indicare nuovi messaggi non letti o le chat in arrivo) o un'icona. Al giorno d'oggi, dove le informazioni scorrono senza fine nei nostri dispositivi, un "badge" può essere considerato un elemento di interfaccia utente molto importante in qualsiasi design.

E molto di più

Altri componenti essenziali che troverete in MDL includono campi di input, slider, toggle, menu, descrizioni di comandi e le icone del Material Design.

Meet the componentsMeet the componentsMeet the components
Scopri i componenti

Inoltre, Google fornisce anche un paio di template che consentono di essere operativi rapidamente, con struttura e layout appropriati. Ci sono cinque tipi di modelli in questa versione iniziale:

  1. Un blog
  2. Un articolo
  3. Una landing page per il marketing o per una app
  4. Una dashboard
  5. Una pagina web con molto testo
The MDL blog layout templateThe MDL blog layout templateThe MDL blog layout template
Modello di layout per blog piuttosto accattivante con MDL

Personalizzazione

Gli stili MDL sono strutturati con Sass e la metodologia BEM. Gli stili possono essere personalizzati in molti modi, anche prima di scaricare il pacchetto del framework. Un modo è con la ruota dei colori nella pagina Personalizza. La ruota dei colori consente di selezionare i colori principali sulla base della selezione di un colore primario. Il customizer genererà quindi il foglio di stile, che si può scaricare o linkare direttamente dal CDN di Google.

Theme builderTheme builderTheme builder
Il generatore di temi di MDL

Il file risultante material.min.css è piuttosto piccolo (17,6 kB gzip), ma per coloro che hanno bisogno di un controllo completo per personalizzarlo al massimo, il codice sorgente è disponibile nel repository su Github.

Browser supportati

Dato che la maggior parte dei componenti in MDL sono sviluppati con le più recenti tecnologie web, quali calc(), Flexbox, querySelector e classlist, MDL funzionerà perfettamente solo nei moderni e sempreverdi browser: Chrome, Firefox, Opera, Microsoft Edge. MDL degraderà pian piano nei browser meno recenti, ad esempio di IE9, fornendo solo la versione CSS. Gli elementi interattivi (come il ripple effect nel pulsante, ad esempio) non sarà presente.

Detto questo, l'interfaccia utente è ancora notevolmente presentabile in IE8. Ad esempio, date un'occhiata i pulsanti e alle tabelle:

Considerazioni finali

Si dovrebbe essere perdonati nel pensare che ora abbiamo un altro di front-end da mettere nella nostra cassetta degli attrezzi al fianco di Bootstrap e Foundation. Tuttavia, MDL non intende sostituire o diventare un successore di Bootstrap. Il Material Design è parte della missione di Google di assicurare che le interfacce utente, come pure le esperienze utente nei loro prodotti siano coerenti, uniformi e consistenti.

Cerchiamo di ricordare l'idea di base per un momento:

"Abbiamo sfidato noi stessi per creare un linguaggio visivo per i nostri utenti che sintetizza i principi classici del buon design con l'innovazione e le possibilità della tecnologia e della scienza." – Introduzione al Material Design di Google

Quindi ricordate, mentre MDL si adatta bene con i prodotti Google, può essere fuori contesto quando viene utilizzato in un sito Web che non ha nulla a che fare con Google. Tuttavia, come abbiamo appena scoperto, Google fornisce il pieno controllo del codice sorgente, che ci permette di personalizzarlo nei minimi dettagli. Ed è questo ciò di cui parleremo nel prossimo articolo. Quindi, restate sintonizzati!

Approfondimenti

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.