Ostatnia aktualizacja:

1 września 2025

Opublikowano:

4 lipca 2017

Czym jest Material Design? Nieco o podstawach

Czym jest Material Design? Nieco o podstawach

Material Design to stworzony przez Google, łatwy do dostosowania, czytelny i prosty styl graficzny, który łączy zasady dobrego projektowania z innowacyjnością. Został zaprezentowany podczas premiery aplikacji Google Now, a następnie wdrożony w innych produktach Google.

W tym artykule dowiesz się:
  1. Jakie są kolory Material Design?
  2. Jaki jest krój pisma Material Design?
  3. Jak wyglądają ikony w Material Design?
  4. Jak używać cieni w Material Design?
  5. Podsumowanie

Jakie są kolory Material Design?

Ważna cechą tego stylu są kolory, które powinny być żywe oraz wyróżniające się. Google daje nam do dyspozycji palety dobrze dobranych kolorów, z których powinniśmy wybrać jeden podstawowy oraz drugi dodatkowy, dobrze odznaczający się na tle tego pierwszego, aby wyszczególnić ważniejsze elementy w aplikacji.

Kolory w material design
Kolory w material design

Podstawowe kolory w palecie oznaczone są liczbą 500, i to one powinny posłużyć jako kolory bazowe, od których następnie możemy tworzyć elementy w różnych odcieniach tego koloru ( < 500 jaśniejsze, > 500 ciemniejsze). Dzięki takiemu podejściu aplikacja staje się żywsza, a ważne elementy dobrze odznaczają się na tle innych, wciąż pozostając z nimi w harmonii.

Jaki jest krój pisma Material Design?

Podstawowym krojem pisma wykorzystywanym w większości produktów Google jest Roboto. Po raz pierwszy pojawił się w systemie Android Ice Cream Sandwich, a następnie zmodyfikowano go na potrzeby systemu Android Lollipop i w takiej formie obowiązuje do dziś.

Jak wyglądają ikony w Material Design?

Ikony nie powinny być skomplikowane, a wręcz przeciwnie — proste i intuicyjne, o jednakowych wielkościach zaokrągleń oraz kształtów, wynoszących 2dp.

  • Oto kilka przykładów zaprezentowanych przez Google:
Dobre ikony material design
  • Oraz jeden z przykładów pokazujących dobre i złe praktyki używania ikon:

Dobre i złe ikony

Google sugeruje dodawać proste ikony ukazane od przodu, bez wrażenia wielowymiarowości oraz zbędnych efektów.

Jak używać cieni w Material Design?

Dość istotnym elementem Material Design są cienie, które mają wskazywać na położenie elementów w przestrzeni trójwymiarowej i zarazem określają ich hierarchię. Elementy, które wydają się znajdować wyżej od innych, są odbierane jako ważniejsze do podjęcia akcji.

Cienie material design

Podsumowanie

Material Design to kolejny ciekawy styl graficzny, który zdecydowanie powinien zainteresować każdego projektanta. Mam nadzieję, że moim artykułem przybliżyłem go Wam trochę lepiej.

Ostatnia aktualizacja:

1 września 2025

Opublikowano:

4 lipca 2017

W tym artykule dowiesz się:
  1. Jakie są kolory Material Design?
  2. Jaki jest krój pisma Material Design?
  3. Jak wyglądają ikony w Material Design?
  4. Jak używać cieni w Material Design?
  5. Podsumowanie

Polecane artykuły

Porzucone koszyki w sklepie internetowym - baner

Porzucone koszyki w sklepie internetowym: Jak odzyskać klientów i zwiększyć sprzedaż? 

Porzucone koszyki to powszechne zjawisko w świecie handlu internetowego. Według danych Baymard Institute 70% użytkowników e-Commerce porzuca swoje zakupy po dodaniu artykułu do koszyka. Oznacza to, że 7 na 10 osób, ogląda produkt w Twoim sklepie, chce go kupić, ale… nie kupuje. Dlaczego się tak dzieje? Dlaczego klienci porzucają koszyki? Jak temu zapobiegać? I co […]

Czytaj więcej
Proces UX w ecommerce

Projektowanie UX sklepu internetowego. Proces krok po kroku.

Wdrażając e-Commerce, jego użyteczność mamy zawsze w centrum uwagi. Projektujemy wygodne ścieżki, po których poruszają użytkownicy. Kierujemy tym ruchem, prowadząc go delikatnie, ale stanowczo prosto do kasy. Tam, gdzie zbacza on z trasy, budujemy mosty, kładki i drogowskazy, by znów trafił do celu. Dziś opowiem Ci o procesie UX, który jako agencja Magento przechodzimy z […]

Czytaj więcej

Dobre zdjęcia produktowe opowiadają historię – Kamil Czaja

Dobre zdjęcia produktowe mogą zwiększyć sprzedaż, słabe - wręcz odwrotnie. Pytanie brzmi - jak odróznić jedne od drugich i robić te pierwsze? W tym odcinku moim gościem jest Kamil Czaja, ekspert w dziedzinie fotografii produktowej. Rozmawialiśmy o tym, jak tworzyć zdjęcia, które nie tylko wyglądają dobrze, ale też realnie wpływają na decyzje zakupowe klientów. Kamil podzielił się swoimi spostrzeżeniami na temat tego, jak najlepiej zaprezentować produkt, jakie ujęcia są kluczowe na karcie produktu i w jaki sposób AI zmienia branżę fotografii. Jeśli chcesz, aby zdjęcia w Twoim e-commerce nie tylko wyglądały świetnie, ale także sprzedawały, ten odcinek jest dla Ciebie!

Czytaj więcej
Wyszukiwarka w sklepie internetowym

Wyszukiwarka Produktów w sklepie internetowym, czyli jak zwiększyć konwersję?

Żeby klient kupił u Ciebie produkt, musi go najpierw znaleźć. Jednak jeśli w swojej ofercie masz tysiące produktów, to zadanie nie należy do łatwych. Z pomocą może przyjść wyszukiwarka w Twoim sklepie internetowym. Musi być jednak zrobiona dobrze, bo inaczej zamiast ułatwiać odnalezienie odpowiedniego produktu, staje się narzędziem tortur dla niecierpliwych klientów. Dlaczego wyszukiwarka produktów […]

Czytaj więcej

Skontaktuj się z nami

Opowiedz nam o swoich ambicjach związanych z e-commerce i pozwól nam wspólnie je zrealizować.

Skontaktuj się z nami