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

Mobile UX e-commerce

Mobile Commerce. Dobry UX krok po kroku

Właściciele sklepów internetowych, którzy patrzą w statystyki, już wiedzą. Ci, którzy tego nie robią, dowiedzą się z tego artykułu. Coraz częściej większość ruchu, który odnotujesz na sklepie, będzie pochodziła z urządzeń mobilnych. Innymi słowy, jesteśmy już od jakiegoś czasu w erze mobile-first, a nasze sklepy powinny być projektowane w taki sposób, żeby w pierwszej kolejności […]

Czytaj więcej
potwierdzenie zamówienia w e-commerce banner

Potwierdzenie zamówienia w e-Commerce: jak zrobić to dobrze i zadbać o klienta po zakupie?

Zakup zakończony? Zamówienie zostało już złożone? Dla klienta to dopiero początek przygody z Twoim e-Commerce. Dla Ciebie również nie jest to koniec. Musisz przecież zrealizować jeszcze to zamówienie. A po drodze masz kilka innych kroków, które powinieneś zrobić. Jednym z nich jest potwierdzenie zamówienia. Niestety wiele firm bagatelizuje ten temat. Wrzucają byle jaką treść, napisaną […]

Czytaj więcej

Jak skrócić proces zakupowy B2B z 20 minut do 30 sekund? Szybkie zamówienia w e-Commerce B2B

Proces zakupowy w B2B potrafi być... męczący. Klikanie, filtrowanie, dodawanie po kolei produktów do koszyka - i nagle okazuje się, że minęło 20 minut. W tym nagraniu pokażę Ci, jak skrócić cały ten proces. Opowiem, dlaczego szybkie zamówienia to nie tylko wygoda dla klientów, ale też realna przewaga konkurencyjna dla Twojego sklepu. Dowiesz się m.in.: ➡ jak skrócić proces zamawiania w Magento (i podobnych platformach), ➡ jakie błędy najczęściej popełniają firmy przy projektowaniu interfejsu B2B, ➡ i co zrobić, żeby klienci kupowali szybciej, chętniej i częściej. Jeśli prowadzisz sprzedaż B2B online, planujesz wdrożenie platformy e-Commerce, albo po prostu chcesz, żeby Twoi klienci zamawiali szybciej - i wracali częściej, ten film jest dla Ciebie.

Czytaj więcej
Strona produktowa - banner

Strona produktowa w e-Commerce: 9 sklepów, które robią to świetnie 

Strona produktowa to jedno z najważniejszych miejsc w sklepie internetowym. To właśnie tam klient podejmuje decyzję „kupuję” albo „zamykam kartę”. Mimo to, wciąż wiele e-Commerce’ów traktuje tą podstronę po macoszemu, jako jedną z wielu i nie przykłada zbytniej uwagi do jej UX (User Experience). To niestety skutkuje wysokim współczynnikiem odrzuceń (ang. bounce rate) i, co […]

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