15 cadre de proiectare a materialelor gratuite pentru dezvoltatori 2021

Designul materialelor Google a depășit cu mult ceea ce preziceau mulți designeri la început și este acum un standard de proiectare utilizat în mod obișnuit pentru dezvoltarea de site-uri web mobile, aplicații Android și, de asemenea, software desktop. Google a mers chiar până la implementarea aplicației de proiectare a materialelor native în propriul său constructor de site-uri web; unul care părea destul de urât și lent chiar recent, dar acum este capabil să producă site-uri web incredibil de frumoase.

Nu trebuie să urmați orbește instrucțiunile, deoarece cineva spune că este un lucru corect. Judecata ta ca designer este cel mai bun atu pentru realizarea de proiecte reale și unice care să iasă în evidență. Luați din designul material ceea ce credeți că va completa ideologiile dvs., apoi creați o acumulare de acolo. Puteți utiliza propriile alegeri personale pentru a perfecționa și mai mult experiența de design. Google are cu siguranță un talent pentru a discuta și a cerceta elemente de experiență de utilizator și interfață de utilizator de talie mondială, dar când te gândești la asta - proiectul tău este unic, datele demografice și tipurile de public sunt unice și, uneori, trebuie să urmezi acești pași până la creați un design care să scoată în evidență cele mai bune valori ale afacerii sau proiectului pe care îl construiți.

Cadrele despre care urmează să aflați mai multe sunt soluțiile perfecte pentru a încerca Designul materialelor. Poate că cel mai bun mod de a face acest lucru ar fi să creezi un proiect secundar pe care să îl poți distruge în weekend, astfel nu te deranjează din fluxul principal de lucru și apoi, dacă simți că există o conexiune acolo, începe să creezi foi de parcurs despre cum puteți implementa proiectarea materialelor în aplicațiile / site-urile dvs. web în viitor. Dacă am pierdut vreun cadru important / util pentru acest rezumat, dați-ne o mențiune în comentarii și ne vom ocupa de el.

Materializa

Materialize este un cadru de dezvoltare web front-end complet bazat pe specificațiile de proiectare a materialelor, este unul dintre principalele cadre de proiectare a materialelor, deoarece oferă un nucleu rapid, centrat și ușor de navigat pentru prototiparea rapidă a site-urilor web moderne. Cadrul ia ceea ce are de oferit designul materialului și îl pune într-un singur cadru care face ca toate elementele să fie accesibile rapid și fără probleme. Componentele bazate pe feedback vă vor îmbunătăți drastic experiența utilizatorului, deoarece utilizatorii pot înțelege mai bine semnificația elementelor individuale de design.

Și întrucât acesta este un cadru, vă veți aștepta să vedeți unele funcționalități CSS, cum ar fi grilele încorporate, iar acest lucru este corect în acest caz, Materialize vă oferă culori, grile, ajutoare, gestionarea media, fișiere sass, gestionarea tabelelor, optimizarea tipografiei și optimizări ale umbrelor elementelor, astfel încât să puteți crea rapid un schelet al ceea ce doriți să construiți, și apoi să utilizați componentele MD optimizate pentru a aduce la viață designul.

Rapid material

Sunteți un dezvoltator activ Swift, dar nu sunteți sigur cum ați putea implementa designul materialului în aplicațiile dvs. Swift? Materialul de la CosmicMind are grijă de toate acestea, fără efort. Cu acest cadru / bibliotecă Swift Material puteți utiliza componentele MD și puteți avea acces complet la configurație, există planuri de grilă furnizate care ar fi de obicei necesare de interfețele complexe de aplicații mobile, veți obține straturile și vizualizările standard care pot fi utilizate pentru a crea UI unică componente. Alte caracteristici includ posibilitatea de a controla navigațiile, pictogramele de proiectare a materialelor, butoanele, cărțile, comutatoarele și un sistem de meniu pentru construirea meniurilor de navigare animate. Swift Material se numește de fapt ca un cadru de animație, în afară de a fi un cadru tradițional de aplicații mobile și face o treabă minunată, permițând dezvoltatorilor să construiască machete care depind de animații fluide pentru a îmbogăți experiența utilizatorului.

Cadrul material

Material Framework face foarte ușor conectarea designului materialului la designul dvs. existent. Este un cadru complet receptiv bazat pe CSS pur. Tot ce trebuie să faceți este să atașați fișierele de foi de stil CSS la folderul principal de stilare a site-ului web și sunteți gata de plecare. Acest cadru oferă alegerea unei scheme de culori închise și deschise pe care le puteți aplica prin clasa CSS specifică sau puteți utiliza JavaScript pentru a seta tema pe care doriți să o utilizați.

Diferite efecte de animație pot fi utilizate, cum ar fi adăugarea unei riple la formularele dvs. existente pentru a crea o experiență de utilizator mai semnificativă. Aspectele tipografice pot fi personalizate după propriul dvs. gust și puteți regla aspectul conținutului, deoarece s-ar potrivi cel mai bine celorlalte elemente de design. Puteți modifica stilurile existente pentru a utiliza specificațiile de proiectare pentru butoane, intrări, bare de instrumente, pictograme, liste, meniuri, modele de carduri și lucruri cum ar fi comutarea. Nu este greu să îl puneți în funcțiune și ar putea fi un mod frumos de a testa dacă utilizatorii dvs. ar aprecia deloc designul materialului.

Esență

Essence combină două lucruri: Material Design & React.js - dacă doriți o performanță web rapidă cu o specificație optimă de design, va fi greu să se potrivească cu ceea ce oferă Essence pentru toți dezvoltatorii. Toate componentele UI pe care le are de oferit designul materialelor sunt reconstruite prin React.js dacă decideți să optați pentru Essence! Rezultatul final este o alegere uimitoare a elementului de interfață cu utilizatorul, care va crea o experiență de utilizator unică. Essence este ușor disponibil pe NPM, astfel încât să puteți instala și începe cu o comandă simplă de instalare. Componentele vor trebui instalate și utilizate separat, dar totul merge sub același folder, indiferent.

UI Onsen

Interfața de utilizare Onsen are mulți kilometri de reputație ca fiind unul dintre cele mai bune cadre hibride pentru construirea de aplicații mobile folosind HTML5. Această platformă open-source este complet gratuită și a fost întotdeauna, înțelegerea modernă a unui bun design a ajutat dezvoltatorii Onsen UI să creeze elemente de interfață cu utilizatorul care ajung să construiască experiențe de utilizator de neegalat. Ca cadru agnostic, puteți utiliza Onsen cu orice alt cadru și nu vă faceți griji cu privire la coliziunile sau problemele de cod. Acesta este, de asemenea, ceea ce se întâmplă în noul Onsen UI V2 - sunt componente de design material integrat, Angular 2 și React pentru a îmbogăți experiența. În prezent este încă candidat la eliberare, dar este folosit deja de mii. Dacă ați intenționat să lansați un produs mobil sau să începeți dezvoltarea software-ului mobil, învățarea modului de utilizare a Onsen UI ar putea adăuga un plus de pârghie CV-ului dvs.

CSS material

CSS material este o alternativă ușoară care folosește atribute pentru definirea stilurilor, în loc să folosească clase. Acest lucru facilitează un flux de lucru de dezvoltare și, cu siguranță, îl face mult mai simplu. Datorită naturii minime, veți juca literalmente cu componentele în sine, în principal, acestea includ culori, tipografie, umbre, ondulații, pictograme, intrări, formulare, butoane, suporturi media, cărți, panouri, bare de instrumente, liste, pagini, și ajutoare. Materialul CSS explică în detaliu fiecare componentă specifică din documentație cu privire la modul în care îl puteți utiliza.

Material Design Lite

Material Design Lite încă o altă soluție ușoară pentru optimizarea proiectelor dvs. cu o specificație a materialului. Funcționează cu ușurință pe site-uri web care se bazează pe conținut static, dar nici nu va fi o problemă de implementat pe site-uri dinamice. Este o bibliotecă CSS independentă care nu necesită resurse externe de niciun fel pentru a funcționa. Cu o optimizare multi-dispozitiv încorporată, aceasta se va retrage în mod natural dacă o versiune mai veche a unui browser încearcă să acceseze site-ul. Puteți alege între șabloane, cum ar fi șablonul de blog, pentru a începe blogul sau puteți utiliza versiunea simplă a temei pe care o folosește site-ul oficial Android, există și șabloane pentru tablouri de bord pe care să le implementați în spatele site-ului dvs. web, un portofoliu modern pentru a vă arăta cele mai bune lucrări, și șabloane optimizate pentru text pentru paginile de conținut. Toate celelalte lucruri, cum ar fi componentele și stilurile, sunt ceea ce v-ați aștepta deja de la un cadru care utilizează designul materialelor.

Suprafaţă

Se pare că o mulțime de dezvoltatori își exercită abilitățile de a face ei înșiși un cadru, Surface este încă un alt cadru ușor (în acest caz cu adevărat ușor) care ajunge să aibă o dimensiune de aproximativ 6kb atunci când este minimizat. De asemenea, se bazează pe CSS pur, astfel încât nu va trebui să vă conectați deloc cu JavaScript. Începeți accesând documentația Surface și aflați despre modul în care funcționează grila Surface, astfel încât să aveți un timp mai ușor de a obține toate componentele de pe placă. Componente precum animații, alerte, plăci, elemente pliabile, subsoluri, modale, suport media, utilitare și sfaturi de instrumente. Dezvoltatorii au făcut acest lucru perfect organizat și este mai ușor de configurat decât numărarea la 1 de la 100 înapoi.

Material-UI

Material-UI vă oferă o selecție de componente React.js pe care le-au personalizat deja din specificația Material Design. Există un singur lucru cel mai important despre Material-UI și ideea de utilizare a acestuia. Mai întâi ar trebui să aflați mai multe despre React.js și despre modul în care interacționează cu webul și mobilul în general. Deoarece componentele se bazează pe React, ar fi înțelept să înțelegem modul în care React este văzut în dezvoltarea web și tipul de rol pe care îl joacă în acesta. Echipa Material-UI a fost destul de amabilă să ofere și o gamă de șabloane, întunecate și deschise și ambele oferă un exemplu de modul în care diferite componente și elemente se încadrează în grilă.

Unele componente nevăzute anterior includ bare de aplicații, completare automată pentru formulare, avatare, ecusoane, jetoane, datapicker, casete de dialog, separatoare, sertare de meniu, liste cu grile, câmpuri de text, selectoare de timp și diferite varietăți de bare de instrumente; și acestea sunt doar câteva dintre componentele care sunt ușor disponibile în acest cadru.

MUI

MUI este un cadru CSS ușor și bogat, care vă condimentează desenele și designul materialelor Google. Oferă utilizatorilor săi diferite tipuri de aspecte demo: blog, pagină de destinație, meniu glisant și casetă de abonament la buletinul informativ HTML. Numai din aceste demonstrații, dezvoltatorii pot afla cât de eficient este designul materialului și cât de ușor este să îl implementați. MUI funcționează, de asemenea, cu cadrele React.js și Angular.js, astfel încât să vă puteți conecta aplicațiile cu materialul fără probleme. Există, de asemenea, diferite componente web individuale, toate gata de utilizare.

Material unghiular

Angular Material este versiunea oficială a Material UI pentru proiectele Angular 2. Aveți o pagină de documentare amănunțită și concisă. Vă poate arăta cât de frumoase pot arăta aplicațiile dvs. atunci când sunt infuzate cu interfața de utilizare Material. Toate componentele sunt furnizate cu exemple profunde și opțiuni suplimentare. Cu aceasta, puteți profita la maximum de ceea ce acest cadru are de oferit. O documentație API este furnizată dezvoltatorilor experimentați care doresc să ducă materialul la nivelul următor.

Design material pentru Bootstrap

Bootstrap este fără îndoială un favorit pentru mulți dintre dezvoltatorii front-end din lume. Bootstrap împuternicește milioane de site-uri web astăzi și încă mai sunt milioane. Designul materialului pentru Bootstrap este o temă Bootstrap eficientă care folosește designul materialului pentru a crea experiențe de design spectaculoase. Puteți alege dintre toate elementele Bootstrap existente, cele mai preferate. De asemenea, le puteți optimiza cu ajutorul interfeței de proiectare a materialelor, cât de mare este asta? S-ar putea să fie nevoie de un pic de ameliorare pentru a merge mai departe pentru cei care nu au folosit NPM înainte. Documentația pare să explice destul de bine procesul de pornire.

LumX

LumX este primul cadru front-end receptiv bazat pe specificațiile AngularJS și Google Material Design. Oferă un cadru CSS complet construit cu Sass și o grămadă de componente AngularJS. Pentru a utiliza LumX, va trebui să știți cum să utilizați Bower pentru instalarea bibliotecilor. Dacă nu sunteți familiarizați cu Bower, cealaltă alternativă este descărcarea individuală a tuturor dependențelor. Acestea includ icoane Angular, jQuery, Velocity, Moment, Bourbon și Material. LumX folosește, de asemenea, Flexbox pentru a crea sisteme de rețea standardizate și receptive utilizând proprietatea Flexbox. Componentele LumX acoperă orice zonă și parte a unui design tradițional de aspect al site-ului web.

Material ionic

Ionic este cadrul hibrid suprem pentru construirea de aplicații mobile HTML5. Și acum, toată acea putere remarcabilă poate fi adusă aplicațiilor dvs. cu infuzia de design material! Ionic vă oferă machete deja construite pentru aplicația dvs., inclusiv fluxuri de activitate și categorii. De asemenea, vă poate ajuta cu listele de funcții, galerii, liste generale, pagini de autentificare și pagini de profil. Puteți porni rapid o demonstrație a interfeței generale a aplicației și apoi să vă construiți software-ul deasupra. Materialul ionic este perfect temabil. Ionic Material este în primul rând o bibliotecă de comportament și folosește convențiile de denumire a culorilor și clasele de elemente ale lui Ionic. Detaliat până la pixelii din specificații, Ionic Material își propune să urmeze instrucțiunile Google pentru mișcare, cerneală și adâncime. Pe măsură ce componentele și aspectele noi sunt adăugate în bibliotecă, ați asigurat o atenție de calitate la specificațiile de proiectare a materialelor.

Phonon

Phonon Framework oferă o soluție concisă pentru construirea de aplicații mobile HTML5 folosind tehnologia hibrid framework. Latura puternică a Phono este intuiția sa bună pentru scalarea rapidă a aplicațiilor dvs. acolo unde doriți să fie. Este, de asemenea, o bibliotecă de interfețe cu utilizatorul care vă oferă instrumente rapide pentru crearea de interfețe din mers. Phonon ajunge la o dimensiune de aproximativ 24 KB atunci când este complet micșorat și optimizat. Acesta este unul dintre principalele motive pentru care dezvoltatorii de telefonie mobilă folosesc Phonon. Acesta este cu mult sub ceea ce ați vedea în cadre precum Ionic sau Onsen!