Az anyagszerű megjelenés az utóbbi két év legforróbb trendjei közé tartozik. A Google-szolgáltatások útmutató sorozataként kezdődött, amely a felhasználói felületek egységesítését szolgálta. De ma már sok professzionális tervező alkalmazza ezen elveket - hiszen a felhasználhatóságra fókuszál és sokkal szebben mutat, mint az egyszerű flat dizájn.
Ha olyan anyagszerű weboldalakat és alkalmazásokat szeretnél kezdeni, mint egy igazi profi, először nézd meg, mit mond a Google erről a trendről, majd keresd meg ezt az ingyenes forrásokat tartalmazó galériát, és válassz valamit magadnak. Az itt megjelenő 40 freebie bármilyen horderejű projekthez használható.
A gyűjtemény 4 részre oszlik: hátterek, felhasználói felületek, ikonok és keretek. Mindegyik alapvető fontosságú, ha az anyagszerű tervezést szeretnéd elsajátítani. Ha netán el szeretnéd olvasni az eredeti angol bejegyzést, csak kattints ide: 40 Free Material Design Resources for Designers
Anyagszerű megjelenés hátterek
40+ Anyagszerű tervezés háttér
40 ingyenes anyagszerű tervezés háttérkép készlet nagy felbontásban. Raszteres (.JPG) és vektoros (.AI) változatokban is elérhető. Ezek a hátterek különböző formákban és színekben érkeznek, lehetővé téve bármilyen változtatás nélküli alkalmazásukat a webes vagy nyomtatott projektekhez.
***
Böngészd végig a 100 professzionális hátteret és találd meg a megfelelőt legújabb projektedhez.
***
Ezzel az ingyenes vektor letöltő keresőmotorral pár perc alatt találhatsz bármilyen dizájnt vagy bármilyen más freebie-t. A fájlok hatalmas adatbázisával mindössze annyit kell tenned, hogy megadod a keresési kifejezést és élvezed a találatokat!
***
10 anyagszerű megjelenés háttér
Ez a csomag 2 háttérmintát tartalmaz, szorozva 5 színkombinációval. Nagy felbontású (5000 * 3000 px) és (300 dpi), személyes és kereskedelmi használatra ingyenes.
***
Anyagszerű megjelenés hátterek
Ez az ingyenes készlet 5 elképesztő, kék, rózsaszín, zöld, narancssárga és sárga színű dizájnt tartalmaz, amelyek a .JPG formátumban állnak rendelkezésre.
***
30 anyagszerű megjelenés háttér csomag
Ez a hatalmas gyűjtemény 30 hátteret tartalmaz, gondosan kiválasztott színekkel, széles körű formákkal: négyzetek, téglalapok, háromszögek és körök. Elérhető .PNG és .AI formátumban.
***
Ingyenes anyagszerű megjelenés hátterek
Ezeket a háttereket javasoljuk a blogbejegyzések bannerekkel ellátott képeinek elkészítéséhez, gyémánt alakú területei tökéletesen megfelelnek erre a célra.
***
Ingyenes anyagszerű megjelenés háttér csomagok
Újabb kreatív mini-csomag, amely 5 elképesztő hátteret tartalmaz.
***
Színes, modern dizájnok vektoros háttérrel
Ez az anyagszerű megjelenés háttér .EPS formátumban a Creative Commons (Attribution 3.0) licence alatt jelenik meg. Mivel vektoros objektumokon alapul, könnyen testre szabható a formája és színe.
***
5 ingyenes anyagszerű megjelenés háttér
Egy kis ingyenes színes csomag, amely 5 nagy felbontású .JPG fájlt tartalmaz. Prémium verziója 40 ilyen hátteret kínál 5 dollárért.
***
5 anyagszerű megjelenés banner 1140x600px felbontásban. Használd kiemelt képek, fejlécek, hátterek készítéséhez, vagy akár asztali háttérképekhez.
***
Anyagszerű megjelenés minták ingyenes csomagja
8 rendkívül részletes mintázat. A listán szereplő más hátterekkel ellentétben ezek zökkenőmentesek, azaz bármely méretű felületre alkalmazhatók, anélkül, hogy feláldoznánk a minőséget.
***
Anyagszerű megjelenés UI készletek
Ez az ingyenes UI készlet számos felhasználói felület elemet kínál: menüket, gombokat, beszédbuborékokat, stb.
***
Ez a kis méretű UI készlet mind a Photoshop, mind a Sketch felhasználók számára használható. Élénk és energikus, így szabadon felhasználható a zenével kapcsolatos alkalmazásokhoz vagy a weboldal mobil verziójának megtervezéséhez.
***
A Cisco egy prémium PSD UI készlet, amely 30+ Android-képernyőt tartalmaz, 100% -os vektoros formában. A demó 10 képernyőt tartalmaz, és ingyen letölthető.
***
5 elképesztő infografika sablon
***
Az InvisionApp mögött álló srácok pontosan tudják, hogyan reklámozhatják szolgáltatásaikat freebieken keresztül: ingyenes UI készletük egyszerűen elképesztő. 130 képernyő, 10 előkészített téma és 250+ tervezőelem. És ez mind ingyenes, nem vicc!
***
A benne szereplő ikonok és sablonok nem csak gyönyörűen rajzoltak - konceptuálisak is, így a projekthez való alkalmazás rendkívül egyszerű lesz. Mi több, teljesen szerkeszthető és 100% -ban vektoros.
***
"BankTag" - ingyenes UI készlet
A BankTag egy tiszta Sketch UI készlet pénzügyi mobil alkalmazásokhoz. 13 szépen megtervezett, különféle elemekkel ellátott képernyőt tartalmaz.
***
DiscoMusica - ingyenes Web UI készlet
A DiscoMusica egy többcélú színes UI készlet, amely alkalmas mind a web, mind az alkalmazások számára. Szerkezetének köszönhetően internetes tanfolyamok oktatási weboldalának létrehozására használható. Ez a freebie elérhető a Sketchhez.
***
Komponens alapú anyagszerű dizájn UI készlet
Ez az ingyenes anyagszerű UI készlet Photoshopban egy újabb nagyszerű és egyszerű módja a mobilalkalmazás tervezésének.
***
Crystallize ingyenes Ui készlet
A Crystallize egy ragyogó, nõies UI készlet, amely kiválóan megfelel zenei és szépségipar weboldalaknak. .PSD formátumban áll rendelkezésre.
***
Ingyenes anyagszerű megjelenés UI készlet
Nagyszerű indító csomag a következő mobil design projektedhez.
***
Ez az UI készlet egy olyan palettával van megtervezve, amely nem szokványos az anyagszerű megjelenésben. Magában foglalja mindazt, amire szükséged van egy lenyűgöző mobil alkalmazás tervezéséhez.
***
Ikonok
A legtöbb anyagszerű ikon a Google-tól származik. A Google Material Icons alapértelmezett gyűjteménye több százat tartalmaz, folyamatosan új pixel-tökéletes piktogramokkal frissülve. Ezek az ikonok egyszerűek és hatékonyak, támogatják a tervezést.
***
Ez a készlet 6 részletes lapos ikonnal rendelkezik, amelyek különféle anyagi érzetekkel rendelkeznek. Összecsomagoltuk ezeket egy réteges .PSD fájlba a te kényelmed érdekében.
***
Egy lenyűgöző ikonkészlet, amely több mint 1000 különböző ikonból áll, 9 kategóriára osztva; és minden ikon 7 méretben kerül forgalomba.
***
Ez az egyszerű névvel rendelkező weboldal ingyenes hozzáférést biztosít 1000+ anyagszerű ikonhoz. Tartalmazza a Google Material Icons alapértelmezett készletét, valamint a felhasználó által megadott piktogramokat. az összes ikon letölthető többféle formátumban, beleértve a .PNG és .SVG fájlokat.
***
Egy másik színes lapos ikon, ezúttal - Android-témájú. 12 miniatúrával rendelkezik, lapos kialakítással és hosszú árnyékokkal.
***
Google Material Design – ingyenes ikon csomag
Ez az ikonkészlet 40 időjáráshoz kapcsolódó kerek formájú ikont tartalmaz mobilalkalmazásokhoz. 3 méretben érkeznek: 64x64, 128x128 és 256x256, és elérhetők .PNG formátumban.
***
Itt van egy ingyenes változata a Nova Icon csomagnak, amely megfelel bármilyen fejlesztési környezetnek, a fájlformátumok sokfélesége miatt: .Sketch, .AI, .SVG, .PDF, .EPS és .Iconjar. 350 ikonból áll, míg a fizetett verzió 4000+ darabot tartalmaz.
***
Szerver/Tárhely anyagszerű megjelenés ikonok
Ez a csomag színes ikonokat kínál a tárhely szolgáltatók számára. 12 hosszú árnyékot tartalmazó ikon, .PSD és .PNG formátumban áll rendelkezésre.
***
Ingyenes anyagszerű ikonok mester csomagja
Ez a készlet különböző alkalmazás- és fájlhoz kapcsolódó kerek ikonokat tartalmaz, mint például a Steam, az Adobe Illustrator, az Adobe Photoshop, a Google Chrome stb., És ezért alkalmas az alkalmazások fejlesztésére. Az archívumban 35 ikon található a .PNG, .ICO és. ICNS formátumokban.
***
Anyagszerű megjelenés ikon sablonok
Ez a freebie nem egy hagyományos értelemben vett ikon, hanem vektoros sablon Adobe Illustrator formátumban. Segítségével pillanatok alatt elkészítheted saját pixel-tökéletes anyagszerű megjelenés ikonjaidat.
***
Keretrendszerek
A Materialize egy rendkívül népszerű CSS keretrendszer azok számára, akik szeretik az anyagszerű tervezést. Átfogó dokumentációval rendelkezik és összességében nagyon felhasználóbarát, ezért vált gyorsan számos webfejlesztő kedvenc frontend keretévé.
***
A Material UI, valamint a Materialize a leggyakrabban említett keretrendszerek közé tartozik. React-on van felépítve - egy JS könyvtár a felhasználói felületek felépítéséhez, és fel van tuningolva, hogy könnyebb legyen az anyagszerű weboldalak létrehozása.
***
Mint a neve is jelzi, a Material Design Lite könnyű és használatában egyszerű megoldás. Ez a tulajdonság azonban nem korlátozza a funkcionalitást. Az összetevők könyvtára biztosítja az olyan modern tervezési elemek megvalósítását, mint a kártyák, a csúszkák, a váltógombok és még sok más.
***
Az MUI egy könnyű CSS keret, amely követi a Google Material Design irányelveit. Csakúgy, mint a Material UI, React JS könyvtáron dolgozik, így nincs probléma a MUI elsajátításában, ha ismered ezt az eszközt.
***
Az Angular Material egy UI keretrendszer a AngularJS felhasználók számára. Ez megadja a felhasználói felületek hatalmas gyűjteménye feletti irányítást.
***
A Polymer egy olyan Google projekt, amelynek tartalmi lapja "Papír" (Md jelöléssel) teljesen orientált a formatervezésben.
***
A ZURB Foundation egy különösen kedvelt keretrendszer a Magento fejlesztők körében. Ez a keret az anyagszerű megjelenés egy változata. Összevonja az eredeti ZURB kódolási elvét, de optimalizálva van az anyagi ihletésű webhelyek létrehozásához.
***
Anyagszerű megjelenés Bootstraphoz
Azok számára, akik úgy gondolják, hogy a Bootstrap az egyetlen életképes keretrendszer (igen, Bootstrap sovinizmus, de semmi baj nincs vele), bemutatjuk ezt az anyagszerű megjelenést Bootstrap témákhoz.
***
A LumX egy front-end keret, amely a Google Material Designon alapul.
***
Az Iconic Material az Ionic mobilalkalmazás keretrendszerének bővítési könyvtára.
***
Nehéz találni ingyenes (vagy prémium) anyagszerű megjelenés erőforrásokat, amelyek követik a Google irányelveit. De ez nem annyira fontos. Végül is a tervezés a kreativitásról szól, és nincs kreativitás, ha követünk minden szabályt.
Légy kreatív!