I Migliori Framework Material Design

Da quando Google ha annunciato il suo nuovo linguaggio di design, il Material Design, si è creato molto entusiasmo attorno ai suoi componenti animati, i colori, le microinterazioni ed i principi di layout.
Abbiamo visto come il Material Design, introducendo una filosofia semplice, ma significativa a livello di progettazione dell’interfaccia utente, sia stato uno dei Trend del Web Design nel 2015.

Se non hai mai sentito parlare del Material Design, o non hai avuto il tempo di leggere la Documentazione ufficiale di Google, allora ti consigliamo vivamente di vederla ora per comprenderne meglio i suoi principi.

La domanda che ci poniamo in questo articolo è: se volessimo utilizzare il Material Design di Google su uno dei nostri progetti, quali sito web, ecommerce o piuttosto la UI di un’applicazione, quale framework o libreria dovremmo scegliere?

BrainGraph ha raccolto quelle che reputa essere, ad oggi, le migliori soluzioni disponibili per utilizzare il Design Materiale su uno dei vostri progetti:

Material Design Lite

Il framework ufficiale rilasciato da Google. È una versione “lite” perché il progetto è nato da poco ed è in continuo aggiornamento.
All’interno potete trovare:

– Layout Templates
– Componenti
– Palette Colori
– Icone

I componenti MDL sono creati con HTML, CSS e JavaScript. È possibile utilizzare i componenti per la costruzione di pagine web e applicazioni web attraenti, coerenti e funzionali.

Bootstrap Material Design

Se il tuo framework preferito è quello più utilizzato al mondo, BootStrap, potrai certamente apprezzare il tema basato sul medesimo framework, “BootStrap Material Design“.
Un Tema BootStrap abbastanza completo, che trasforma i classici componenti flat di BootStrap in Material Design.
Inoltre include il supporto per 740 icone originali Material Design prese dal Google Material Design Icons repository.

LumX

Per gli amanti di AngularJS, c’è LumX, un Framework Front End Responsive basato su tecnologie: AngularJS, il preprocessore SASS e la libreria jQuery.
Offre un buon numero di componenti CSS, direttive e servizi Angular. Comodo per progetti basati su AngularJS.

Materialize.css

Un framework CSS che rende la progettazione materiale, semplice, per le applicazioni basate su Ember.js.
Tra i componenti disponibili troviamo:

– Buttons
– Cards
– Loader
– Tabelle
– Parallax
– Tabs

e molto altro da scoprire.

Material UI

Material UI è un framework CSS che fa uso di componenti React per implementare la filosofia del design materiale. Anche se questo framework è abbastanza robusto, si potrebbe desiderare di non usarlo se non si è abituati a lavorare con React (il framework di Facebook). Alcuni neofiti di React trovano la sintassi JSX (JavaScript e XML) non convenzionale.

Il repository di questo framework ha una buona documentazione su come impostare il progetto e installare React con NPM (Node Package Manager). È possibile accedere al repository di Material UI da qui.

IONIC + Material

Utilizzare il Material Design nelle vostre applicazioni mobile (ibride) basate su tecnologie web, con Ionic, senza nessuna complessità.

Tra le caratteristiche principali troviamo:

– Layout pre-costruiti
– Estensione delle classi Ionic
– Integrazione con le direttive

Ionic Material è una biblioteca di estensioni per il framework Ionic, dunque non è necessario cambiare il modo in cui si è sviluppata l’applicazione ibrida Ionic, per trasformarla in Material Design.

Polymer

Polymer è un progetto Google che sostiene l’uso di componenti web dedicati allo sviluppo web.
Gli elementi principali di Polymer includono diversi elementi per il layout dell’applicazione, comprese le barre degli strumenti, la creazione di app-bar, tab e nav coerenti con le linee guida di progettazione del Material. La maggior parte dei numerosi componenti sono molto maturi.

Polymer mira a sostenere tutti i principali browser moderni come IE (10+), Chrome, Safari e Firefox. La documentazione e la guida introduttiva sono disponibili presso il sito ufficiale del Progetto Polymer.

Materialize

Materialize è un framework per la progettazione front-end basato su Material Design che è possibile utilizzare nella propria applicazione, in sostituzione al solito Bootstrap. Questo è senza dubbio uno dei più imponenti framework Material Design indipendenti. Esso fornisce sia file CSS che SCSS con JavaScript, icone Material e le varie versioni del font Roboto.

Per utilizzare questo framework basta importare la libreria CSS, proprio come Bootstrap e siete a posto.
I componenti inclusi sono quelli di base come le griglie, i pulsanti, barra di navigazione e le tab. Materialize è disponibile anche su GitHub.

MUI

MUI CSS Framework è un framework leggero che fornisce una soluzione facile all’implementazione del Material per tutte le esigenze legate al front-end. Dal momento che è stato progettato da zero, è leggermente più veloce di alcuni dei suoi concorrenti e si consiglia di utilizzarlo per piccoli progetti, in cui l’obiettivo principale non è l’esatta attuazione del Material Design.

MUI è disponibile anche su GitHub ed è aperto a contributi.

Essence

Il metodo consigliato per l’implementazione di Essence è di usarlo insieme a React ma non preoccupatevi, se sapete scrivere codice HTML sarete in grado di scrivere in maniera facilitata anche codice React perché gli sviluppatori assicurano di aver organizzato il tutto in modo molto semplice e intuibile.

Trattandosi di un progetto open source, Essence è disponibile su Github.

Angular Material

Angular Material è un’implementazione della Progettazione materiale in Angular.js. Probabilmente il progetto più robusto perché supportato internamente da Google. Il progetto prevede una serie di componenti dell’interfaccia utente riutilizzabili, ben collaudati e accessibili basati sul sistema di progettazione Material.

La documentazione, le demo e il riferimento alle API sono completi e ben scritti e rispecchiano in pieno tutte le caratteristiche che sono state specificate da Google attraverso la sua filosofia di design dei materiali.

Qual’è la scelta migliore?

Come al solito, per capire quale sarà la migliore soluzione per il vostro progetto, molto dipenderà dalle tecnologie che avete scelto di utilizzare e dalla tipologia del progetto.

Senza dubbio se state utilizzando AngularJs opterete per Angular Material o LumX; mentre se state utilizzando React meglio Material UI o Essence; oppure se avete bisogno di un framework completo come BootStrap che non sia BootStrap potete scegliere l’ottimo Materialize.

Solo il tempo ci mostrerà il successo e la penetrazione del Material Design in rete e su altre piattaforme. Una gran parte di essa dipende dall’interesse, nonché dalla disponibilità degli sviluppatori e dei strumenti presenti in rete. Sicuramente nel 2015 stiamo vedendo un certo slancio verso la costruzione di UI Web grazie all’utilizzo di questi framework e questo rappresenta senza dubbio un bene, soprattutto per l’esperienza degli utenti.