Przejdź do treści

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

3d space
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:

considerations
Ź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.

elevation
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
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ć. 🙂



Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *