15 framework di progettazione dei materiali gratuiti per sviluppatori 2021

Il Material Design di Google è andato ben oltre ciò che molti designer inizialmente avevano previsto ed è ora uno standard di progettazione comunemente utilizzato per lo sviluppo di siti Web mobili, applicazioni Android e anche software desktop. Google è arrivato persino a implementare l'applicazione di progettazione dei materiali nativa nel proprio costruttore di siti Web; uno che sembrava abbastanza brutto e pigro solo di recente, ma ora è in grado di produrre siti Web incredibilmente belli.

Non dovresti seguire ciecamente le linee guida perché qualcuno dice che è la cosa giusta da fare. Il tuo giudizio come designer è la tua migliore risorsa per realizzare progetti reali e unici che si distinguono. Prendi dal design dei materiali ciò che ritieni stia già andando a completare le tue ideologie, quindi crea un accumulo da lì. Puoi utilizzare le tue scelte personali per perfezionare ulteriormente l'esperienza di progettazione. Google ha sicuramente un talento per discutere e ricercare elementi di esperienza utente e interfaccia utente di livello mondiale, ma quando ci pensi: il tuo progetto è unico, i dati demografici e i tipi del tuo pubblico sono unici e a volte devi seguire questi passaggi per crea un design che esalti i migliori valori della tua attività o del progetto che stai realizzando.

I framework di cui stai per saperne di più sono le soluzioni perfette per provare il Material Design. Forse il modo migliore per farlo sarebbe creare un progetto secondario che potresti hackerare durante i fine settimana, in questo modo non ti disturbi dal tuo flusso di lavoro principale, e poi se ritieni che ci sia qualche connessione lì, inizia a creare tabelle di marcia su come in futuro puoi implementare il design dei materiali nelle tue app/siti web. Se abbiamo perso qualche framework importante/utile per questa carrellata, dacci una menzione nei commenti e ce ne occuperemo noi.

materializzare

Materialise è un framework di sviluppo Web front-end completo basato sulle specifiche di progettazione dei materiali, è uno dei principali framework di progettazione dei materiali in quanto fornisce un nucleo veloce, centrato e facile da navigare per la prototipazione rapida di siti Web moderni. La struttura prende ciò che il design dei materiali ha da offrire e lo mette insieme ordinatamente in un'unica struttura che rende tutti gli elementi accessibili rapidamente e senza problemi. I componenti basati sul feedback miglioreranno drasticamente la tua esperienza utente poiché gli utenti possono comprendere meglio il significato dei singoli elementi di design.

E poiché questo è un framework, ti ​​aspetterai di vedere alcune funzionalità CSS come le griglie incorporate, ed è giusto in questo caso, Materialise ti fornisce colori, griglie, aiutanti, gestione dei media, file sass, gestione delle tabelle, ottimizzazione della tipografia e l'ottimizzazione delle ombre degli elementi in modo da poter creare rapidamente uno scheletro di ciò che si desidera costruire e quindi utilizzare i componenti MD ottimizzati per dare vita al progetto.

Materiale Swift

Sei uno sviluppatore Swift attivo, ma non sei sicuro di come potresti implementare il design dei materiali nelle tue app Swift? Il materiale di CosmicMind si occupa di tutto ciò, senza sforzo. Con questo framework/libreria Swift Material puoi utilizzare i componenti MD e avere accesso completo alla configurazione, vengono forniti layout di griglia che sarebbero tipicamente richiesti da complesse interfacce di applicazioni mobili, ottieni i livelli e le viste standard che possono essere utilizzati per creare un'interfaccia utente unica componenti. Altre caratteristiche includono la possibilità di controllare le navigazioni, icone di design dei materiali, pulsanti, schede, interruttori e un sistema di menu per creare menu di navigazione animati. Swift Material in realtà si definisce un framework di animazione oltre ad essere un tradizionale framework di app mobili e fa un ottimo lavoro nel consentire agli sviluppatori di creare layout che dipendono da animazioni fluide per arricchire l'esperienza dell'utente.

Struttura materiale

Material Framework rende estremamente facile collegare il design del materiale al tuo design esistente. È un framework completamente reattivo basato su puro CSS. Tutto quello che devi fare è allegare i file del foglio di stile CSS alla cartella principale dello stile del tuo sito web e sei pronto per partire. Questo framework offre la scelta di uno schema di colori chiaro e scuro che è possibile applicare tramite la specifica classe CSS, oppure utilizzare anche JavaScript per impostare il tema che si desidera utilizzare.

È possibile utilizzare diversi effetti di animazione come aggiungere un'increspatura ai moduli esistenti per creare un'esperienza utente più significativa. I layout tipografici possono essere personalizzati a proprio piacimento e puoi regolare l'aspetto del contenuto in modo che si adatti meglio agli altri elementi di design. Puoi modificare gli stili esistenti per utilizzare le specifiche di progettazione per pulsanti, input, barre degli strumenti, icone, elenchi, menu, design delle carte e cose come i toggle. Non è difficile farlo funzionare e potrebbe essere un buon modo per testare se i tuoi utenti apprezzerebbero il material design.

Essenza

Essence combina due cose: Material Design e React.js: se stai cercando prestazioni web veloci con specifiche di progettazione ottimali, sarà difficile eguagliare ciò che Essence offre a tutti gli sviluppatori. Tutti i componenti dell'interfaccia utente che il material design ha da offrire vengono ricostruiti tramite React.js se decidi di optare per Essence! Il risultato finale è una straordinaria scelta di elementi dell'interfaccia utente che creerà un'esperienza utente unica. Essence è prontamente disponibile su NPM in modo da poter installare e iniziare con un semplice comando di installazione. I componenti dovranno essere installati e utilizzati separatamente, ma tutto va comunque nella stessa cartella.

Interfaccia utente Onsen

L'interfaccia utente di Onsen ha molte miglia di reputazione per essere uno dei migliori framework ibridi per la creazione di app mobili utilizzando HTML5. Questa piattaforma open source è completamente gratuita e lo è sempre stata, la moderna comprensione del buon design ha aiutato gli sviluppatori dell'interfaccia utente di Onsen a creare elementi dell'interfaccia utente che finiscono per creare esperienze utente senza pari. Come framework agnostico, puoi utilizzare Onsen letteralmente con qualsiasi altro framework disponibile e non preoccuparti di eventuali collisioni di codice o problemi di sorta. Questo è anche ciò che sta accadendo nella nuova Onsen UI V2: sono integrati componenti Material Design, Angular 2 e React per arricchire ulteriormente l'esperienza. Al momento è ancora una release candidate, ma è già utilizzata da migliaia di persone. Se hai intenzione di lanciare un prodotto mobile o entrare nello sviluppo di software mobile, imparare a utilizzare l'interfaccia utente di Onsen potrebbe aggiungere ulteriore leva al tuo curriculum.

Materiale CSS

Il materiale CSS è un'alternativa leggera che utilizza gli attributi per definire gli stili, invece di utilizzare le classi. Ciò semplifica il flusso di lavoro di sviluppo e sicuramente lo rende molto più semplice. A causa della natura minimale, giocherai letteralmente con i componenti stessi per lo più, quelli includono colori, tipografia, ombre, increspature, icone, input, moduli, pulsanti, media, schede, pannelli, barre degli strumenti, elenchi, pagine, e aiutanti. Il materiale CSS spiega in modo approfondito ogni componente specifico nella documentazione su come utilizzarlo.

Design dei materiali Lite

Material Design Lite è un'altra soluzione leggera per ottimizzare i tuoi progetti con una specifica del materiale. Funziona facilmente su siti Web che si basano su contenuti statici, ma non sarà un problema nemmeno da implementare in siti dinamici. È una libreria CSS indipendente che non richiede risorse esterne di alcun tipo per funzionare. Con un'ottimizzazione multi-dispositivo integrata, eseguirà naturalmente il downgrade se una versione precedente di un browser tenta di accedere al sito. Puoi scegliere tra modelli come il modello di blog per avviare il tuo blog o utilizzare la versione lite del tema utilizzata dal sito Web ufficiale di Android, ci sono anche modelli per dashboard da implementare dietro il tuo sito Web, un portfolio moderno per mostrare il tuo lavoro migliore, e modelli ottimizzati per il testo per le pagine di contenuto. Tutte le altre cose come componenti e stili sono ciò che ti aspetteresti già da un framework che utilizza il design dei materiali.

Superficie

Sembra che molti sviluppatori stiano esercitando le proprie capacità nel creare un framework da soli, Surface è un altro framework leggero (in questo caso davvero leggero) che finisce per avere una dimensione di circa 6 kb quando viene minimizzato. È anche basato su puro CSS, quindi non dovrai assolutamente staccarti da JavaScript. Inizia andando alla documentazione di Surface e imparando come funziona la griglia di Surface, così avrai più tempo per ottenere tutti i componenti sulla scheda. Componenti come animazioni, avvisi, riquadri, elementi comprimibili, piè di pagina, modali, media, utilità e suggerimenti. Gli sviluppatori hanno organizzato tutto in modo ordinato ed è più facile da configurare che contare fino a 1 da 100 all'indietro.

Materiale-UI

Material-UI ti offre una selezione di componenti React.js che hanno già personalizzato dalla specifica di Material Design. C'è una sola cosa più importante su Material-UI e l'idea di usarlo. Dovresti prima imparare qualcosa in più su React.js e su come interagisce con il web e i dispositivi mobili in generale. Poiché i componenti sono basati su React, sarebbe saggio capire come viene visto React nello sviluppo web e il tipo di ruolo che svolge in esso. Il team di Material-UI è stato così gentile da fornire anche una scelta di modelli, scuro e chiaro, ed entrambi forniscono un esempio di come i diversi componenti ed elementi si inseriscono nella griglia.

Alcuni componenti inediti includono barre delle applicazioni, completamento automatico per moduli, avatar, badge, chip, datepicker, finestre di dialogo, divisori, cassetti dei menu, elenchi di griglie, campi di testo, selettori orari e diverse varietà di barre degli strumenti; e questi sono solo alcuni dei componenti che sono prontamente disponibili in questo framework.

MUI

MUI è un framework CSS ricco e leggero che arricchisce i tuoi progetti con il design dei materiali di Google. Fornisce ai suoi utenti diversi tipi di layout demo: blog, landing page, menu di scorrimento e casella di iscrizione alla newsletter HTML. Da queste sole demo, gli sviluppatori possono apprendere quanto sia efficiente il material design e quanto sia facile implementarlo. MUI funziona anche con i framework React.js e Angular.js in modo da poter collegare le tue app con il materiale senza problemi. Ci sono anche diversi componenti web individuali, tutti pronti per l'uso.

Materiale angolare

Angular Material è la versione ufficiale di Material UI per i progetti Angular 2. Hai una pagina di documentazione completa e concisa. Può mostrarti quanto possono essere belle le tue app quando vengono infuse con l'interfaccia utente di Material. Tutti i componenti sono forniti con esempi approfonditi e opzioni aggiuntive. Con questo, puoi ottenere il massimo da ciò che questo framework ha da offrire. Viene fornita una documentazione API per gli sviluppatori esperti che desiderano portare il materiale al livello successivo.

Design dei materiali per Bootstrap

Bootstrap è senza dubbio uno dei preferiti da molti degli sviluppatori front-end del mondo. Bootstrap supporta oggi milioni di siti Web e altri milioni devono ancora venire. Material Design per Bootstrap è un efficiente tema Bootstrap che utilizza il design dei materiali per creare esperienze di design spettacolari. Puoi scegliere tra tutti i tuoi elementi Bootstrap esistenti e preferiti. Inoltre, puoi averli ottimizzati con l'interfaccia utente del design dei materiali, quanto è bello? Potrebbe essere necessario un po' di ritocchi per farlo funzionare per coloro che non hanno mai usato NPM prima. La documentazione sembra spiegare abbastanza bene il processo di avvio.

LumX

LumX è il primo framework front-end reattivo basato sulle specifiche di AngularJS e Google Material Design. Fornisce un framework CSS completo costruito con Sass e una serie di componenti AngularJS. Per utilizzare LumX, dovrai sapere come utilizzare Bower per l'installazione delle librerie. Se non hai familiarità con Bower, l'altra alternativa è scaricare tutte le dipendenze singolarmente. Questi includono Angular, jQuery, Velocity, Moment, Bourbon e Material Icons. LumX utilizza anche Flexbox per creare sistemi di griglia standardizzati e reattivi utilizzando la proprietà Flexbox. I componenti LumX coprono qualsiasi area e parte del design del layout di un sito Web tradizionale.

Materiale ionico

Ionic è il framework ibrido definitivo per la creazione di applicazioni mobili HTML5. E ora tutto questo straordinario potere può essere portato nelle tue app con l'infusione di Material Design! Ionic ti offre layout già creati per la tua app, inclusi feed di attività e categorie. Può anche aiutarti con i tuoi elenchi di funzionalità, gallerie, elenchi generali, pagine di accesso e pagine del profilo. Puoi avviare rapidamente una demo della tua interfaccia generale dell'app e quindi creare il tuo software su di essa. Il materiale ionico è perfettamente tematizzante. Ionic Material è principalmente una libreria di comportamenti e utilizza le convenzioni di denominazione dei colori e le classi di elementi di Ionic. Dettagliato fino ai pixel delle specifiche, Ionic Material mira a seguire le linee guida di Google per movimento, inchiostro e profondità. Man mano che nuovi componenti e layout vengono aggiunti alla libreria, hai assicurato un'attenzione di qualità alle specifiche di progettazione dei materiali.

fono

Phonon Framework fornisce una soluzione concisa per la creazione di app mobili HTML5 utilizzando la tecnologia framework ibrida. Il lato forte di Phono è la sua buona intuizione per ridimensionare rapidamente le tue app dove vuoi che siano. È anche una libreria di interfacce utente che offre strumenti rapidi per creare interfacce al volo. Phonon arriva a circa 24kb di dimensione quando completamente minimizzato e ottimizzato. Questo è uno dei motivi principali per cui gli sviluppatori di dispositivi mobili utilizzano Phonon. Questo è molto al di sotto di quello che vedresti in framework come Ionic o Onsen!