Google na jednej konferencji prasowej w 2014 roku przedstawiło wiele ciekawych i wzbudzających wzmożoną uwagę wśród projektantów aplikacji pomysłów. Jednak największym echem odbiło się jedno wyrażenie – material design. To nowy na ten czas styl tworzenia aplikacji, stron i systemów operacyjnych dedykowanych na Androida oraz Chrome OS, który gigant z Mountain View będzie promował przez najbliższe lata (tak możemy przypuszczać, gdyż większa część konferencji była poświęcona właśnie temu zagadnieniu).
Czym tak naprawdę jest material design ? Jak samo Google zakomunikowało, nie będzie to wyłącznie zbiór dyrektyw dla programistów i webmasterów tworzących strony – będzie to zupełnie nowy styl, w jakim będą programowane i tworzone strony internetowe w przyszłości. Rzecz jasna, wszyscy, którzy chcą liczyć na przychylność Google będą musieli dostosować się do zmian i nowego stylu, który właśnie rodzi się w Mountain View.
Aby zaprezentować nowy styl i pomóc w zrozumieniu nowości. Google stworzyło poglądową stronę, która w 100% spełnia założenia nowego projektu. Oto ona: https://design.google.com/#resources
Przeglądając stronę oraz wczytując się w komunikaty Google możemy wysnuć kilka podstawowych zasad projektowania stron w tym stylu:
Strony podzielone na bloki
Jak sama nazwa wskazuje, material design będzie skupiał się na podzieleniu stron/aplikacji na bloki. Google argumentuje tą zmianę jako pomoc dla internautów w skuteczniejszym i szybszym przyswajaniu informacji osadzonych na stronach. Podział stron na bloki ma zapewnić także czytelność witryn.
Dostępne, pływające menu
Jak pokazano na przykładzie, Google zaleca stosowanie płynnego menu, czyli takiego, które będzie stale podążać za użytkownikiem. Dzięki temu internauta ma dostęp do podstron z każdego miejsca na portalu. Płynne menu nie jest nowością, ale dopiero teraz pojawiło się w oficjalnym przykładzie Google. Widać wyraźnie, że material design stawia na przyjazność względem internautów oraz na podwyższanie wartości UX, co jest krokiem ku lepszej przyszłości.
Treść
Wszyscy, którzy interesują się pozycjonowaniem w wyszukiwarkach Google nie będą zdziwieni, gdy w wytycznych dla material design wspomnimy o contencie. Treść na stronach ma być przyjazna dla użytkownika, przydatna i treściwa. Google podkreśla, że internauta nie może zgubić wątków głównych na stronie, ale również każda z odwiedzin na portalu ma dać mu wymierne korzyści pod postacią rzeczowych informacji.
Różnorodność na stronach
Chodzi oczywiście o stosowanie grafiki, mediów, animacji i nieszablonowego ułożenia treści. Na pierwszy rzut oka ta zasada może wydawać się błędem, który wprowadzi chaos, jednak spoglądając na przykład od Google dojdziemy do wniosku, że ma to sens. Stosowanie nieszablonowych rozmiarów bloków, wykorzystywanie grafik wplecionych w teksty, różnorodność kolorów – to wszystko w całości wygląda bardzo dobrze. Google argumentuje, że wprowadzanie różnorodnych materiałów zachęca internautów do dalszego przeglądania contentu na stronie.
Ograniczenie pływających przycisków
Gogole zauważyło problem pojawiających się nagle treści, głównie przycisków akcji. Dlatego w stronach material design mają one zostać wyparte. Przyciski będą tolerowane, ale tylko te, które będą na stałe wdrożone w design strony – bez nagłego pojawiania się. To tyczy się również okienek czy innych elementów stron.
A jak się ma styl material design do samego projektowania grafiki ? Otóż i tutaj możemy wyróżnić kilka cech, o które należy zadbać chcąc projektować w tym stylu.
Kolor
Jasno określona paleta kolorów to barwy żywe dopasowane do siebie. Jednak na tyle zrównoważone by nie były krzykliwe lub też odwrotnie, blade. Projektując w tym stylu powinniśmy postawić na wybranie jednego głównego koloru, który będzie przewodził w całym naszym projekcie. Do głównego koloru powinniśmy dopasować drugą barwę, która będzie wyróżniała najważniejsze informacje na stronie jak np. przycisk call action. Drugi kolor powinien być o wiele bardziej wyrazisty od podstawowego. Dla przykładu kilka barw dobranych pod ten styl :
Tworzenie palety i dobór kolorów ułatwi nam to narzędzie: materialpalette lub oficjalna paleta Googla.
Chcąc wybrać kolor dopełniający do koloru podstawowego powinniśmy wybrać go z palety oznaczonej literka A na początku. Jak widzimy kolory oznaczone literką A, są o wiele bardziej wyraziste. Barwy, które są mile widziane w tym stylu znajdziemy na tej stronie : materialui.co
Oczywiście możemy posiłkować się kilkoma kolorami tak jak np. w tym wypadku. Jak widzimy mamy tu dwa uzupełniające się ze sobą kolory fioletu oraz akcent w postaci zieleni. akcent dobrany z palety gdzie mamy literkę A na początku.
Tekst
Jeśli natomiast chodzi o tekst pisany na białym tle to należy stosować szarość, którą uzyskamy obniżając krycie czarnego koloru do 87% jeśli chodzi o tekst główny. W tekstach dodatkowych obniżamy krycie do 54% oraz do 38% dla tekstów nieaktywnych, podpowiedzi tekstowych. Gdy piszemy tekst na czarnym tle to zasada jest podobna z tym wyjątkiem, że obniżamy krycie białego tekstu. Pewnie padnie pytanie dlaczego nie używać kolorów szarości w tym wypadku odcień wypada na kolor #727272. Ponieważ obniżenie krycie daje o wiele lepsze rezultaty i tekst jest bardziej wyraźny niż przy zastosowaniu koloru szarego na tekście.
Ikony
Ikony powinny być proste i spójne. Muszą one być dobrze widoczne nawet po dużym pomniejszeniu. Zaokrąglenia na rogach powinny mieć 2dp, natomiast linie powinny być proste. Ikony nie powinny posiadać żadnych efektów trójwymiaru, uwypukleń itd. Fajne ikony pod ten styl znajdziemy np. tutaj webalys.
Typografia
Domyślna czcionka tego stylu to Robot, którą stosujemy na Androidzie natomiast na czcionką zastępczą może być Noto. Wysoka czytelność tych czcionek podyktowana jest oczywiście wyglądem tekstu na mniejszych urządzeniach mobilnych. Podstawowe wielkości czcionek to 12, 14, 16, 20 i 34.
Kilka inspiracji gdzie fajnie wykorzystano styl material design znajdziemy na blogu materialdesignblog
