W 2014 roku Google ogłosiło Material Design oficjalnym stylem swoich aplikacji mobilnych, a wkrótce potem przejęli go inny twórcy. Obecnie Material Design to jeden z popularniejszych trendów w projektowaniu. Na czym polega ten styl i dlaczego zdobywa coraz więcej zwolenników?

Podczas premiery usługi Google Now po raz pierwszy zaprezentowano publicznie Material Design. W założeniu miał to być prosty i czytelny styl graficzny, który będzie łatwo dostosowywany do różnych rozdzielczości. I tak rzeczywiście się stało. Dodatkowo styl przygotowany przez Google miał być odpowiedzią na popularny Flat Design. Obecnie Material Design dawno już wykroczył poza aplikacje mobilne koncernu z Mountain View i stał się globalnym stylem, który coraz silniej obecny jest także w nowoczesnych stronach internetowych. Sprawdźmy, czym się on charakteryzuje.

Google Material Design

Założenia Material Design?

Z pewnością możemy mówić przynajmniej o kilku charakterystycznych cechach Material Design. W stylu tym ważne jest przede wszystkim położenie w trójwymiarze. Chodzi tutaj o odpowiednie ustalenie hierarchii poszczególnych elementów, co jest określane za pomocą cieni (np. delikatniejsze w przypadku tego, co poniżej). Nie bez znaczenia jest także odpowiednie dobranie kolorów. Unika się tutaj raczej jaskrawych barw, ale stawia się na kolorystykę żywą. Do tworzenia palety kolorystycznej wykorzystuje się dwie podstawowe barwy. Na podstawie pierwszej z nich generuje się kolejne wariacje kolorystyczne (jaśniejsze i ciemniejsze). Natomiast druga barwa jest używana do oznaczania przycisków, linków i innych elementów interaktywnych. Warto także kilka słów poświęcić kolorystyce czcionki. Podstawowy font oparty jest na czerni, która zostaje w różnym stopniu rozjaśniana. Najciemniejszy (87% przeźroczystości) jest tekst główny, nieco jaśniejszy – dodatkowy (54%). Natomiast jeśli tło jest ciemne, konieczne jest użycie czcionki białej. Należy używać fontu Roboto.

Material Design to również odpowiednio dobrane ikony. Można tu wykorzystać zasoby udostępnione przez Google albo przygotować własne elementy. W tym ostatnim przypadku należy jednak pamiętać o kilku zasadach. Przede wszystkim ważna jest prostota i unikanie skomplikowanych kształtów, zakończenie linii musi być proste, natomiast rogi powinny być zaokrąglone w oparciu o proporcję 2dp. W Material Design unika się również stylizowania ikon na trójwymiarowe, czy posiadające głębię.

Ikony Material Design

Material Design, a strony internetowe

Google zadbało również o twórców stron internetowych, oddając im do dyspozycji uniwersalny framework Material Design Lite (MDL). Można go wykorzystywać w rozwiązaniach front-end. To nie tylko zbór zasad i styli, ale także biblioteka różnych elementów, które można wykorzystać we własnych projektach stron internetowych. Do dyspozycji otrzymujemy gotowe szablony, komponenty wraz z przykładami ich zastosowania. Material Design Lite posiada modułową budowę, można go wykorzystywać na przykład na pewnych etapach tworzonego projektu lub korzystać z jego zasobów od samego początku projektowania witryny www. Google zapowiedziało, że framework będzie nieustannie ewoluował zgodnie z sugestiami i uwagami użytkowników tak, żeby dostosować go jak najlepiej do ich potrzeb.

Niewątpliwie coraz większa popularność Material Design spowodowana jest dużą przejrzystością tego stylu i jego subtelną elegancją. Najważniejsza jest jednak łatwość, z jaką aplikacje i strony internetowe, zaprojektowane zgodnie z Material Design, dostosowują się do ekranów różnych urządzeń. Szczególnie ta ostatnia zaleta ma niebagatelne znaczenie w czasach coraz silniejszego trendu mobilnego.

Jeżeli interesujesz się web designem, tworzysz strony internetowe lub chciałbyś dowiedzieć się jak to robić, zajrzyj na naszą stronę i sprawdź co mamy do zaoferowania. Znajdziesz tutaj masę praktycznych szkoleń, które pomogą Ci rozwinąć umiejętności.