Czym jest Material Design? Nieco o podstawach | Blog X-Coding
czym-material-design-nieco-o-podstawach

Czym jest Material Design? Nieco o podstawach

4.07.2017 / / Developers

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.

Kolory

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.

Krój pisma

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ś.

Ikony

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:

Wymiary ikon Wymiary ikon

  • Oraz jeden z przykładów pokazujących dobre i złe praktyki używania ikon:

Dobre i złe praktyki Co robić i czego nie robić

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

Cienie

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 Jak poprawnie cieniować aplikację

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.