material Design

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 ( Tookapic ), być może zauważyłeś, zauważyłeś, że staram się zadbać o to, aby kolory na nich były wyraziste i nasycone – i dlatego też szanuję stylistykę Material Design.

kolory
Przykładowe kompozycje w Material Design. Źródło: material.io

 

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 (patrz powyższy obrazek), 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. Kilka dni temu wrzucałem na Fanpage link do bazy 350 darmowych ikon w stylu MD, także możesz śmiało z nich skorzystać w swoim projekcie.

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.

Google Design

Nie może się obyć bez strony twórców! Google Design czyli zbiór newsów (i nie tylko) ze świata MD.

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




Polub fanpage BrainDesign na Facebooku aby być na bieżąco z nowymi wpisami
oraz cotygodniowymi wydarzeniami!


To co robi teraz jest lepsze od tego co robił pół roku temu, ale co będzie robił za pół roku będzie jeszcze lepsze niż to, co robi teraz – w każdej dziedzinie, którą się zajmuje, ponieważ jak twierdzi, jak się nie rozwija to się zwija. Uważa, że na wszystkim jesteśmy w stanie zarabiać, cokolwiek przychodzi nam do głowy, cokolwiek lubimy robić, jesteśmy w stanie mieć z tego zysk.

Artysta, autor bloga, projektant, grafik komputerowy, barista. Na codzień mieszka we Wrocławiu, prowadzi bloga BrainDesign, robi to co lubi i ma z tego frajdę. Fan pozytywnego myślenia, standupu, rozwoju osobistego oraz dobrej kawy. W wolnych chwilach łapie chwile na zdjęciach, czyta ciekawe książki, bawi się w Social Mediach, a także przegląda YouTube’a podziwiając występy sztuki Flair czy inspirujące wystąpienia z TED/TEDx’owych konferencji.

Wczytaj więcej

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sprawdź także

Loupedeck+ – Recenzja konsoli do edycji zdjęć

Od około miesiąca mam okazję korzystać z konsoli do edycji zdjęć, jaką jest Loupedeck+. Ja…