40 darmowych narzędzi do projektowania w stylu material design dla webdesignerów

Material design to jeden z najgorętszych trendów ostatnich 2 lat. Zaczęło się od zestawu wytycznych od Google, jako sposobu na ujednolicenie ich interfejsów użytkownika. Ale dzisiaj wielu zawodowych projektantów przyjmuje te zasady aby ogólny projekt wyglądał bardziej użytecznie i stylowo.

Jeśli chciałbyś projektować strony i aplikacji w stylu material design, najpierw sprawdź, co Google mówi na temat tego trendu, a następnie przejrzyj listę darmowych serwisów i narzędzi dla projektantów.

Nasza lista jest podzielona na 4 sekcje: tła, zestawy UI, ikony i frameworki. Każdy z nich jest niezbędny, jeśli chcesz opanować material design.


Tła w stylu material design

Zestaw 1

material design 01

Zestaw 40 z darmowych materiałów do projektowania tła w wysokiej rozdzielczości. Jest dostępny w obu odmianach rastrowych (.JPG) i wektorowych (.AI), więc możesz je edytować według własnego uznania. Te tła mają różne kształty i kolory, dzięki czemu można je zastosować do dowolnego projektu internetowego lub drukowanego bez żadnych zmian.


Zestaw 2

material design 02

Przejrzyj 100 profesjonalnych teł, aby znaleźć odpowiedni wygląd dla swojego projektu.


Darmowa wyszkiwarka wektorów

material design 03

Korzystając z tej darmowej wyszukiwarki wektorów do pobierania, będziesz mógł znaleźć dowolny element w stylu material design lub dowolną inną wersję freebie w ciągu kilku minut. Posiada ogromną bazę danych plików wystarczy dodać termin wyszukiwania i cieszyć się!


Paczka teł w stylu material design

material design 04

Ten pakiet zawiera 2 projekty tła pomnożone przez 5 kombinacji kolorów. Charakteryzują się wysoką rozdzielczością (5000 * 3000px) i wysoką rozdzielczością (300 dpi) i są bezpłatne do użytku osobistego i komercyjnego.

Zestaw 3

material design 05

Ten bezpłatny zestaw zawiera tła w stylu material design o jasnych kolorach - niebieskim, różowym, zielonym, pomarańczowym i żółtym, które są dostępne w formacie .JPG.


New Set

material design 06

Ta ogromna kolekcja wykorzystuje starannie dobrane kolory, stylowe tekstury i kształty: kwadraty, prostokąty, trójkąty i okręgi. Dostępny jest w formatach .PNG i .AI.


Zestaw 4

material design 07

Zalecamy użycie tych teł w stylu material design, aby banery zawierały ilustracje do postów na blogu, ponieważ ich obszary w kształcie rombów idealnie pasują do tego celu.


Zestaw 5

material design 08

Kolejna świetna kreatywna mini-paczka z 5 tapetami.


Zestaw 6

material design 09

To tło w formacie .EPS jest wydawane na licencji Creative Commons (Attribution 3.0). Ponieważ opiera się na obiektach wektorowych, możesz łatwo dostosować go pod względem kształtu i koloru.


Zestaw 7

material design 010

Mały, bezpłatny zestaw kolorowych elementów projektowych, zawierający 5 plików JPEG o wysokiej rozdzielczości. Jego wersja premium oferuje 40 takich teł za $5.

Zestaw banerów

material design 011

5 banerów ze wzorami w stylu material design w rozdzielczości 1140x600px. Używaj ich do tworzenia polecanych obrazów, nagłówków, tła dla swoich projektów lub po prostu jako tapet pulpitu.


Zestaw wzorów

material design 012

8 bardzo szczegółowych wzorów. W przeciwieństwie do innych środowisk na tej liście są one bezszwowe, co oznacza, że ​​można je zastosować na powierzchni o dowolnej wielkości bez utraty jakości.


Zestawy elementów UI w stylu material design

Zestaw elementów UI Kit do Androida dla Sketch

material design 013

Google jest głównym wyznacznikiem trendów w świecie projektowania, więc nic dziwnego, że siatki do projektowania są dostępne dla Sketch. Ten bezpłatny zestaw UI oferuje wiele elementów interfejsu użytkownika: menu, przyciski i wiele innych..


Zestaw 2

material design 014

Ten niewielki zestaw materiałów UI stanie się przydatny zarówno dla użytkowników Photoshopa, jak i Sketch. Można go swobodnie wykorzystać do projektowania aplikacji lub mobilnej wersji strony internetowej.

Cisco

material design 015

Cisco to zestaw Premium PSD UI zawierający ponad 30 ekranów Android opartych na 100% kształtach wektorowych. Wersja demonstracyjna zawiera 10 ekranów i jest darmowa do pobrania.


Szablony inforgrafiki

material design 016


Do App UI Kit

material design 017

Faceci za InvisionApp wiedzą dokładnie, jak promować swoje usługi za pośrednictwem gratisów: ich darmowy zestaw UI nazwany Do jest po prostu ogromny. Zawiera 130 ekranów, 10 gotowych motywów i ponad 250 komponentów.


150 Ikon + 24 szablony

material design 018

Zawarte w nim ikony i szablony są nie tylko pięknie rysowane i stylowe - są także pojęciowe, więc wybór tego, który pasuje do Twojego projektu, będzie bardzo łatwy. Co więcej, są w pełni edytowalne i w 100% wektorowe.


"BankTag"

material design 019

BankTag to czysty zestaw SketchUI dla finansowych aplikacji mobilnych. Zawiera 13 ładnie zaprojektowanych ekranów z różnorodnymi elementami.


DiscoMusica

material design 020

DiscoMusica to uniwersalny kolorowy zestaw UI odpowiedni zarówno do serwisów internetowych, jak i aplikacji. Ze względu na swoją strukturę może służyć do tworzenia edukacyjnej strony internetowej z kursami online.


Zestaw 3

material design 021

Ten darmowy zestaw UI do programu Photoshop to kolejny świetny i łatwy sposób na zaprojektowanie aplikacji mobilnej.


Crystallize

material design 022

Crystallize to jasny  zestaw UI, najlepiej nadający się do witryn na temat muzyka czy uroda. Jest dostępny w formacie .PSD.


Zestaw 4

material design 023

Ten zestaw ekranów z aplikacjami w stylu material design został zaprojektowany specjalnie z myślą o użytkownikach. Stanie się doskonałym podkładem startowym do projektu mobilnego.


Sepia

material design 024

Ten zestaw UI zawiera wszystko do zaprojektowania aplikacji mobilnej.


Ikony w stylu material design

Zestaw 1

material design 025

Kolekcja ikon w stylu material design od Google, która zawiera ich setki, stale aktualizowane za pomocą nowych piktogramów idealnie pasujących do pikseli. Ikony te są proste i wydajne, dlatego obsługują projekt i nie przerywają go.


Zestaw 2

material design 026

Ten zestaw zawiera 6 szczegółowych płaskich ikon. Zostały one spakowane razem w jeden warstwowy plik .PSD.


Zestaw 3 

material design 027

Imponujący zestaw ikon składający się z ponad 1000 różnych ikon podzielonych na 9 kategorii; a każda ikona ma 7 rozmiarów.


Zestaw 4

material design 028

Ta strona internetowa z prostą nazwą zapewnia bezpłatny dostęp do ponad 1000 ikon. Zawiera domyślny zestaw ikon Google plus piktogramy dostarczone przez użytkownika. wszystkie ikony są dostępne do pobrania w kilku formatach, w tym .PNG i .SVG.


Android Lollipop

material design 029

Kolejny zestaw kolorowych płaskich ikon, tym razem - w stylu Android. Posiada 12 miniatur o płaskiej konstrukcji i długich cieniach.


Zestaw 5

material design 030

Ten zestaw ikon zawiera 40 okrągłych ikon związanych z pogodą dla aplikacji mobilnych. Dostępne są w 3 rozmiarach: 64x64, 128x128 i 256x256 i są dostępne w formacie .PNG.


Nova Icons

material design 031

Oto darmowa wersja Nova Icon Pack, odpowiednia dla każdego środowiska programistycznego, z powodu różnych formatów plików, z których korzysta: .Sketch, .AI, .SVG, .PDF, .EPS i .Iconjar. Zawiera 350 ikon - zarówno zakreślone, jak i wypełnione, a płatna wersja ma ich 4000+.


Zestaw 6

material design 032

Ta paczka kolorowych ikon została zaprojektowana dla dostawców hostingu. Zawiera 12 ikon z długimi cieniami i jest dostępny w formatach .PSD i .PNG.


Zestaw 7

material design 033

Ten zestaw zawiera różne okrągłe ikony związane z aplikacjami i plikami, takie jak Steam, Adobe Illustrator, Adobe Photoshop, Google Chrome itp., I dlatego nadaje się do tworzenia aplikacji. W archiwum znajdziesz 35 ikon w formatach .PNG, .ICO i .ICNS.


Zestaw 8

material design 034

Ta freebie nie jest ikoną w konwencjonalnym sensie, ale raczej szablonem wektorowym w formacie Adobe Illustrator.


Frameworki w stylu material design

Materialize

material design 035

Materialise to niezwykle popularny framework CSS dla tych, którzy uwielbiają material design. Jest on dostarczany z obszerną dokumentacją i jest ogólnie bardzo przyjazny dla użytkownika, dlatego szybko stał się ulubionym środowiskiem frontendowym dla wielu twórców stron internetowych.


Material UI

material design 036

Material UI jest jednym z najczęściej wymienianych frameworków, wraz z Materialise. Jest oparty o React - bibliotece JS do tworzenia interfejsów użytkownika i dostosowany, aby ułatwić tworzenie materialnych stron internetowych.


Material Design Lite

material design 037

Jak sama nazwa wskazuje, framework Material Design Lite jest lekki i prosty w użyciu. Jednak ta cecha nie ogranicza jego funkcjonalności. Ta biblioteka komponentów daje ci rękę do wdrażania takich nowoczesnych elementów, jak karty, suwaki, przełączniki i wiele innych.


MUI

material design 038

MUI to lekki framework CSS zgodny z wytycznymi Google Material Design. Podobnie jak Material nterfejs, działa on w bibliotece React JS, więc nie będziesz miał problemów z opanowaniem MUI, jeśli znasz to narzędzie.


Angular Material

material design 039

Angular Material to framework dla użytkowników AngularJS. Zapewnia kontrolę nad ogromnym zbiorem komponentów interfejsu użytkownika zgodnych z wytycznymi Google dotyczącymi material design.


Polymer

material design 040

Polymer to projekt Google, którego zakładka "Paper" (oznaczona jako Md) jest w pełni zorientowana na projektowanie w stylu material design


Material Foundation

material design 041

ZURB Foundation to framework szczególnie popularny wśród programistów Magento. To jest material wersja tego frameworka. Łączy zasady kodowania oryginalnego ZURB, ale jest zoptymalizowany pod kątem tworzenia stron inspirowanych materiałami.


Material Design dla Bootstrap

material design 042

Dla tych, którzy sądzą, że Bootstrap jest jedyną realną strukturą, prezentujemy ten temat Material Design for Bootstrap.


LumX

material design 043

LumX to front-end framework oparty o Google Material Design.


Ionic Material

material design 044

Ionic Material jest biblioteką rozszerzeń do jonowej aplikacji mobilnej.


Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: 40 Free Material Design Resources for Designers


* * *

Trudno znaleźć wolne (a nawet najlepsze) materiały i serwisy do ​​projektowania w stylu material design, które są zgodne ze wszystkimi wytycznymi Google dotyczącymi projektowania materiałów. Ale z drugiej strony nie jest to takie ważne. W końcu projektowanie polega na kreatywności i nie ma kreatywności, jeśli przestrzegasz wszystkich zasad.

Bądź kreatywny!

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: