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 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.
Przejrzyj 100 profesjonalnych teł, aby znaleźć odpowiedni wygląd dla swojego projektu.
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
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.
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.
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.
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.
Kolejna świetna kreatywna mini-paczka z 5 tapetami.
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.
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.
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.
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
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..
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 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.
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.
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 to czysty zestaw SketchUI dla finansowych aplikacji mobilnych. Zawiera 13 ładnie zaprojektowanych ekranów z różnorodnymi elementami.
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.
Ten darmowy zestaw UI do programu Photoshop to kolejny świetny i łatwy sposób na zaprojektowanie aplikacji mobilnej.
Crystallize to jasny zestaw UI, najlepiej nadający się do witryn na temat muzyka czy uroda. Jest dostępny w formacie .PSD.
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.
Ten zestaw UI zawiera wszystko do zaprojektowania aplikacji mobilnej.
Ikony w stylu material design
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.
Ten zestaw zawiera 6 szczegółowych płaskich ikon. Zostały one spakowane razem w jeden warstwowy plik .PSD.
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.
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.
Kolejny zestaw kolorowych płaskich ikon, tym razem - w stylu Android. Posiada 12 miniatur o płaskiej konstrukcji i długich cieniach.
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.
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+.
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.
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.
Ta freebie nie jest ikoną w konwencjonalnym sensie, ale raczej szablonem wektorowym w formacie Adobe Illustrator.
Frameworki w stylu material design
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 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.
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 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 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 to projekt Google, którego zakładka "Paper" (oznaczona jako Md) jest w pełni zorientowana na projektowanie w stylu material design
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.
Dla tych, którzy sądzą, że Bootstrap jest jedyną realną strukturą, prezentujemy ten temat Material Design for Bootstrap.
LumX to front-end framework oparty o Google Material Design.
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!