Na temat stylu Material Design od dłuższego czasu mówi się bardzo dużo. Jest to obecnie najpopularniejszy styl, trend i wyznacznik w projektowaniu stron internetowych. Czym on w sumie tak konkretnie jest i dlaczego mówiąc o nim, wspomina się także o firmie Google?
Pisanie o stylu projektowania Material Design nie jest łatwe, głównie ze względu na to, że teoria brzmi dość skomplikowanie. Osobiście jestem zwolennikiem upraszczania wszystkiego, natomiast w tym temacie może to być trudne… ale spróbuję. 🙂
Generalnie rzecz biorąc pierwsze wzmianki na temat tego stylu pojawiły się w 2014 roku, kiedy to Google ogłosiło światu informację, że styl Material Design będzie oficjalnym stylem googlowskich aplikacji, a niedługo później styl ten pojawił się u wielu innych twórców aplikacji, a po jakimś czasie także stron internetowych, a obecnie jest to prawdopodobnie najpopularniejszy trend w projektowaniu interfejsów.
Cechy charakterystyczne dla Material Design
Podobnie jak inne style projektowania, tj. Flat, minimalistic, tak i styl Material Design ma swoje cechy charakterystyczne.
Wielowymiarowa płaszczyzna
Wielowymiarowa powierzchnia. (źródło: material.io)
Jednym z założeń stylu Material Design jest wielowymiarowość. Chodzi tutaj o to, że tło strony internetowej jest definiowane jako kartka papieru, a na niej znajdują się kolejne elementy. W zależności od tego co jest ważniejsze na danej stronie czy aplikacji, jest to położone wyżej, jest to lepiej widoczne i odbiorca ma wrażenie, że jest to bliżej niego przez zastosowane cienie.
W praktyce wygląda to tak:
Źródło: web.archive.com
Z reguły jednym z najważniejszych elementów na stronach czy aplikacjach w stylu Material Design, jest okrągły przycisk nazywany FAB’em (od Floating Action Bar). Można się z takim przyciskiem spotkać w wielu aplikacjach, nawet najpopularniejsza na Androida aplikacja, jaką jest Facebookowy Messenger ma taki przycisk i pozwala on na szukanie osób czy grup do rozmowy. Są również inne ważne i ważniejsze elementy, tj. wysuwane z boku menu czy okna dialogowe.
Im ważniejsze tym wyżej położone i więcej zasłania. Źródło: material.io
Jak widzisz na powyższym obrazku, wszystko ma swoje odpowiednie położenie w przestrzeni. Na poziomie 0 jest kartka papieru, a nieco nad nią wystają switche, czyli przełączniki. Później są elementy tj. karty czy przyciski, które są na poziomie 2, ale… po naciśnięciu ich wyskakują na aż 8 poziom, także są znacznie wyżej, znacznie bliżej czytelnika, odbiorcy. Na samej górze, najbliżej odbiorcy są okna dialogowe czy elementy z możliwością wyboru, tj. wybór daty przy rezerwacji biletu – one z reguły zasłaniają wszystko, jeśli nie zajmują 100% szerokości i wysokości strony to pozostała część strony jest zaciemniona, przez co odbiorca wie, że to jest na tę chwilę najważniejszy element strony, na tym ma się skupić w tym momencie.
Żywe kolory
Czyli coś co osobiście uwielbiam i przez co nie jestem fanem stylu projektowania Flat. W stylu Flat z reguły kolory są… jakieś takie wyblakłe. Jeśli widziałeś, widziałaś jakieś moje projekty, może zdjęcia, być może zauważyłeś, zauważyłaś, że staram się zadbać o to, aby kolory na nich były wyraziste i nasycone – i dlatego też szanuję stylistykę Material Design.
Założenie z kolorami w MD jest takie, że powinno się używać do 2 kolorów – pierwszy jako główny, w którym powinny zawierać się kolory z zakresu 50-900 (Material Design Color Palette), a drugi jako dodatkowy, który będzie działał jako wyróżnik i będzie podkreślał ważniejsze rzeczy i są to kolory z zakresu A100-A700.
Proste ikony
Ikony, które są używane w stylu Material Design mają główne założenie takie, że mają być proste i zrozumiałe od razu. Odbiorca na pierwszy rzut oka ma wiedzieć czego może się spodziewać w danym miejscu.
Oczywiście możesz też stworzyć swoje własne ikony – tutaj, na stronie Material.io, masz kilka ważnych aspektów, które pozwolą Ci utrzymać swoje ikony właśnie w tej stylistyce.
Typografia
Kolejnym ważnym elementem projektowania w stylu Material Design jest wybór fontów, a właściwie fontu. Jest on jeden – Roboto. Alternatywą dla znaków chińskich czy japońskich może być Noto.
Roboto to prosty font używany właśnie na stronach opartych o styl MD, który zapewnia odpowiednią czytelność.
Roboto Font. Źródło: material.io
Zarówno Roboto jak i Noto możecie pobrać z Google Fonts: Roboto & Noto.
Kilka przykładów
Jeśli o cechy charakteryzujące styl Material Design, z ważniejszych rzeczy to tyle. Dla spragnionych wiedzy polecam stronę material.io/guidelines, na której znajdziecie wszystkie najważniejsze informacje i wskazówki.
Na zakończenie kilka godnych uwagi przykładów dobrze wykonanych stron w stylu Material Design.
MaterialDesignBlog.com
Prawdopodobnie wszystko o Material Design. Newsy, porady – warto zaglądać.
Angular.io
Strona popularnego frameworku JavaScript’owego, jakim jest AngularJS, który pomaga budować strony czy aplikacje w oparciu o Material Design.
MaterialWP.com
Strona – narzędzie. Gotowa podkładka pod tworzenie motywów do WordPressa w stylu MD.
Myślę, że w miarę jasno i czytelnie napisałem o tym czym jest styl Material Design. Jeśli jednak macie jakieś pytania czy sugestie, śmiało piszcie w komentarzach – postaram się odpowiedzieć. 🙂
