Material Design, czyli filozofia designu

Material Design to język wizualny, dla którego został stworzony przez Google zestaw zasad.

Założenia twórców:

• Design ma być prosty i czytelny.
• Elementy tworzonych aplikacji mają przybierać realny wygląd, odzwierciedlać to, co widzimy na co dzień poza komputerowym światem.
• Składowe interfejsu nie mogą się przenikać ani zajmować tej samej przestrzeni jednocześnie – powinny sprawiać wrażenie, jakby były wykonane z fizycznego materiału.
• Efekt końcowy ma wywołać u użytkownika poczucie, że faktycznie dotyka poszczególnych elementów, wnika w prezentowany świat, choć wizualna kompozycja znajduje się wyłącznie na ekranie urządzenia elektronicznego.
• Aplikacja ma wyglądać spójnie na rożnych platformach i urządzeniach, działać właściwie bez względu na sposób interakcji (niezależnie czy używamy głównie myszy, klawiatury czy czytnika ekranowego).

Wrażenie namacalności prezentowanych treści uzyskuje się dzięki wykorzystaniu wirtualnego papieru, zwanego inaczej ,,papierem kwantowym” lub ,,smart paper”. Odzwierciedla on efekty właściwe dla realnych papierowych konstrukcji – np. odbicie światła, rzucanie cienia. Poszczególne elementy zaś „oddzielone” są od siebie w taki sposób, jakby wisiały nad sobą w przestrzeni. Co ciekawe, twórcy Material Design budowali z papieru makiety interfejsów, a następnie odwzorowywali ich wygląd w wirtualnej rzeczywistości .

Kluczowe wytyczne

Poniżej zgromadziłam kluczowe zagadnienia, których dotyczy Material Design. Nie są to wszystkie aspekty, które można znaleźć w specyfikacji. Dla zainteresowanych polecam przeczytanie całości na stronie https://material.io/design/

Kolor
Kolor jest bardzo istotnym elementem – Material Design używa jasnych, żywych barw.

Przykład: Zgodnie z wytycznymi ustalamy sobie paletę kolorów podając wartości liczbowe dla odcieni (od 50 do 900):

Główny kolor – 500
Główny ciemny kolor – 700
Akcent – zupełnie inny kolor, kontrastujący z głównymi kolorami

Przy doborze barw warto skorzystać z generatora palet kolorystycznych: https://www.materialpalette.com/.

Motyw
Do tworzenia motywu używamy koloru głównego, koloru akcentu oraz ciemniejszych i jaśniejszych ich wariantów.

Nowość w Material Design – Dark theme:

– sugerowany jako dodatek do podstawowego motywu i wymagający ograniczenia kolorowych elementów.

Ciemny motyw dobrze sprawdza się, jeśli strona/aplikacja jest używana w ciemnym pomieszczeniu, przy słabym oświetleniu. Wpływa na mniejsze zmęczenie oczu w takich warunkach, dodatkowo pozwala na oszczędzanie energii w przypadku ekranów OLED – wynika to z faktu, że czarne piksele nie emitują światła, a tym samym nie pobierają energii.

Typografia
W zależności od tego, gdzie zostają użyte, wyróżnia się następujące jednostki do określania rozmiaru czcionki:

Web – rem
Android – sp, minimum 12sp
iOS – pt

Domyślnym krojem używanym w Material Design jest Roboto, zaś dla języków z alfabetem innym niż łaciński – Noto.

Dozwolone jest, by dla nagłówków użyć bardziej wymyślnych czcionek, które potęgują i urozmaicają efekt oraz dodatkowo skupią uwagę odbiorcy. Przykłady różnych stylów można znaleźć na stronie: https://fonts.google.com/?category=Display,Handwriting

Istotne znaczenie ma także kolor tekstu – często stosuje się metodę rozjaśniania za pomocą przezroczystości.

Ikony

Product Icons
Ikony produktowe reprezentują zarówno produkty, jak i markę, np.:

Wszystkie ikony powinny być spójne dla danej marki.

W tworzeniu ikon można wykorzystać takie zasady Material Design jak warstwowość, cienie czy zagięcia, czego przykładem jest poniższy obrazek:

System Icons:
Ikony systemowe to po prostu kształty geometryczne, uproszczone rysunki, które mają dobrze wyglądać na każdym rozmiarze ekranu. Wskazują one akcje, pliki, katalogi, itp.
Mają stały rozmiar – 24 x 24 dp, a w specyfikacji dokładnie określone są wszystkie elementy, które mogą pojawić się w ikonie (promień narożny – 2dp, wewnętrzny kąt – niezaokrąglony, szerokość obrysu – 2dp, itd.). 

Poniżej przykłady:

Animacja

Ruch pomaga zrozumieć użytkownikowi, jak powiązane są ze sobą elementy interfejsu, sprawia wrażenie płynniejszego działania aplikacji. W Material Design bardzo ważna jest reakcja materiału – po dotknięcu/kliknięciu element reaguje, podnosi się, jakby palec/kursor przyciągał ten przycisk.

Komponenty

Najbardziej charakterystyczne dla Material Design komponenty to:

• Button – przyciski,
• Cards – karty – zawierają zebrane inne elementy w spoczynku (elevation 2dp, podniesione 8dp),
• Bars – pasek na górze/dole ekranu,
• FAB – Floating Action Button – przycisk zapraszający do akcji (call to action posiada określone parametry: ikona powinna mieć 24×24, średnica przycisku 56, elevation 6dp; Default 56x56dp; Mini 40x40dp), co zaprezentowano na poniższym obrazku:

Przykład informacji zawartych na paskach:

Jak zacząć używać?

Bardzo łatwo! Wystarczy dołączyć do projektu CSS i Java Script z Material Design.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Instrukcję można znaleźć na stronie: https://getmdl.io/started/index.html. Warto też zainteresować się frameworkiem/bibloteką korzystającą z Material Design, np. https://material-ui.com/. 

Warto spróbować!

Autor: Patrycja Adamczyk

Źródła:

Polecane strony:

• https://pay.google.com/about/#friends
• https://www.dropbox.com/business/
• https://rework.withgoogle.com/
• https://material.io/design/
• https://www.materialpalette.com/
• https://fonts.google.com/?category=Display,Handwriting
• https://getmdl.io/started/index.html
• https://material-ui.com/

Inne źródła:

• https://medium.com/beginners-guide-to-mobile-web-development/a-guide-to-google-material-design-977315149ea5
• https://getmdl.io/started/index.html
• https://material.io/design/
• https://material.io/design/components/