Material Design CSS Frameworks
Il Material Design è il rivoluzionario linguaggio di design sviluppato da Google. Già il fatto che sia qualcosa di nato dalla grande G, dovrebbe essere sinonimo di qualità ed attenzione ma la rivoluzione sta nel fatto che proprio Google, per prima, ha adattato il design di ogni suo prodotto a queste semplici regole, trasformando un buon esercizio di continuità di immagine in un vero e proprio standard grafico
Ma cos’è il Material Design nello specifico? Si tratta di una progettazione nella quale le forme passano da piatte a materiali, imitando oggetti concreti come ad esempio la carta che, tramite tagli e pieghe, luci ed ombre, acquisisce sfumature e cambia dimensioni.
Non esistono più quindi forme che vanno a creare elementi fini a sé stessi ma superfici fatte di materia concreta che si intersecano per creare nuovi elementi grafici.
Ovviamente questo genere di design si ripercuote anche nello sviluppo web.
Dover computare forme per la creazione di elementi può sembrare una cosa complessa ma in realtà è estremamente semplice, grazie all’immenso aiuto che apportano i framework.
Per i non addetti ai lavori possiamo definire un framework come una struttura che si pone tra il sistema operativo e il software che lo utilizza, funzionando come una piattaforma su cui costruire il proprio progetto web.
A prescindere dal grado di esperienza nello sviluppo, utilizzare un framework significa farsi aiutare da una struttura già predisposta per il nostro progetto. La difficoltà rimane solo nel capire quale sia il framework che meglio incontra le nostre necessità. Vediamone insieme alcuni.
Materialize css
Si tratta di d un framework css che, sulla base di quanto spiegato sopra, altro non è che un'intelaiatura di base sulla quale andare a costruire il nostro progetto web.
Immaginiamolo come uno scheletro composto da codice css che, con l'assemblaggio dei suoi elementi, crea una struttura funzionante che sarà il nostro layout.
Materialize Css permette di creare template basati sul Google material design. Permette la creazione di layout completamente responsivi, adattabili quindi allo schermo di qualunque dispositivo utilizzi il nostro utente, garantendo un'ottima leggibilità e la miglior fruizione possibile.
E' molto semplice da utilizzare ed è supportato da una buona documentazione che ci viene in aiuto in caso di dubbi o incertezze su come procedere. L'aspetto è quello degli standard attuali, molto moderno e attento al rispetto dei principi del material design. Si avvale inoltre dei vantaggi dell'open source, creando una community attiva che ne va ad implementare costantemente le caratteristiche e a correggere gli errori.
Fornisce inoltre un ampio quantitativo di esempi di codice da riutilizzare secondo le proprie necessità ed è estremamente leggero: solo 29kb.
Si tratta quindi di un framework flessibile e con un buon supporto.
Material Design Lite
Si tratta di una libreria di componenti per il front-end sviluppata e rilasciata da Google.
Lo sviluppatore avrà la possibilità di di creare il proprio template, nel rispetto di principi del Material Design, tramite del puro HTML, CSS e JavaScript.
È un'implementazione leggera, detta per l'appunto Lite per il basso numero di dipendenze necessarie e le poche risorse accessorie necessarie.
Anche in questo caso è un framework estremamente leggero (solo 213 kb) completamente responsive. Viene supportato più o meno da tutti i browser: con quelli più recenti si va tranquilli su tutto, un po' meno con le vecchie versioni di IE.
In questo framework si vede molto bene come vengano rispettati tutti gli aspetti del Material Design sia per quanto riguarda l'aspetto grafico che per le interazioni reattive, come ad esempio l'input tattile sui dispositivi touch enfatizzando la reazione al tocco.
Si tratta di un buon prodotto, soprattutto se si vuole iniziare un progetto dalla complessità medio bassa e senza grossi approfondimenti a monte: con Material design Lite non sono necessari, in linea con la filosofia di Google che abbiamo imparato a conoscere durante tutti questi anni.
Material-UI
Material-UI è un set di componenti, molto ben realizzato, che implementa il Material Design di Google, specificatamente indirizzato al framework React. Risulta essere estremamente flessibile nella configurazione,con una palette di colori predefinita, ma che permette di creare temi personalizzati per le proprie app. L’approccio alla definizione dei temi, comunque, non è proprio standard: viene utilizzata la libreria JSS come linguaggio descrittivo per lo stile del tema. JSS è una libreria, appunto, che crea un livello di astrazione sul linguaggio CSS tramite il Javascript, in modo da compilare i fogli di stile sia runtime sui client che sui server.
Con Material-UI è possibile creare davvero un’ampia gamma di siti web, non solo dei semplici siti vetrina o promozionali ma anche progetti più complessi.
articoli... che potrebbero interessarti
creare un sito web... articoli consigliati
Azioni Photoshop, la raccolta definitiva
La collezione di azioni photoshop che vi presentiamo sono un set di azioni che accorrono in aiuto degli utenti per realizzare progetti rapidi e ben fatti.
Web design & Video background
Presentare la propria homepage in modo efficace con video background e comunicare contenuti e temi con video che esprimono il cuore del tuo sito web!
Tipped: i tooltip più belli senza il minimo sforzo
Si chiama Tipped e rivoluzionerà lo user interface design del vostro sito. L'applicativo offre un'ampia gamma di tooltip, belli e fruibili su tutti i dispositivi.
Dropdown menu css. Un componente responsive e facile da personalizzare
Organizza la navigazione del tuo sito con un responsive mobile menu. MegaDropdown è ideale per gli ecommerce e i portali di grandi dimensioni.
Template WordPress Responsive Free – Minimaluu
Minimaluu è la soluzione ideale per il tuo portfolio su WordPress se cerchi una grafica minimale, pulita e compatta ma anche fluida ed efficiente.
Sei un Webmaster? Il tuo sito web ha bisogno di Best 4 Webdesign!
Best4WebDesign archivia i principali e i migliori strumenti per Webmaster e Web Designer.