Jedną z obietnic jaką wam złożyłem drodzy czytelnicy (ponad rok temu) był artykuł o systemie Material Design, czyli o technice projektowania graficznego, którą opracowali projektanci najbardziej znanej wyszukiwarki internetowej. Być może niektórych zdziwiłem, bo o Materializmie w web designie można powiedzieć że „it is so 2017” – i faktycznie wspomniałem o tej szkole projektowania w słynnych trendach tworzenia stron.
Z tym tematem specjalnie poczekałem aby dał jeszcze większą wartość. Po pierwsze, wszelkie treści, które tworzę dla was są przede wszystkim wynikiem praktycznej pracy i obserwacji. Źródła, które zamieszczam do artykułów to akademicki odruch, który ma uwiarygodnić to o czym piszę i aby czytelnicy zainteresowani danym tematem mogli poszerzyć informacje o danym zagadnieniu.
Czym jest Material Design?
Aby nie popełnić jednego z najczęstszych błędów podczas definiowania „ignotum per ignotum” (z łac. czyli nieznane przez nieznane) najpierw odpowiedzmy sobie na pytanie co to jest system projektowy (ang. Design System). System projektowy to zbiór zasad projektowania graficznego opartych o spójną ideę, zawierający implementacje graficzne powtarzalnych i często pojawiających się elementów wchodzących w skład projektu graficznego.
Po zaproponowaniu ścisłej definicji odważę się na porównanie, że design system dla grafika komputerowego jest tym, czym dla programisty jest framework. Aż by się chciało porównać go do „wzorca projektowego” ale wzorce projektowe nie narzucają programiście konkretnych implementacji a jedynie opis rozwiązania. Stąd framework (szkielet) uważam ostatecznie za lepsze porównanie.
Material Design jest właśnie takim systemem, który został stworzony z myślą o stronach internetowych i aplikacjach mobilnych. Autorami systemu są projektanci firmy Google.
W dokumentacji możemy znaleźć piękne zdanie, że Material Design jest „językiem wizualnym łączącym klasyczne zasady dobrego designu z innowacyjnymi możliwościami technologii i nauki”. Brzmi to troszkę ogólnikowo i marketingowo dlatego był to pierwszy i ostatni raz kiedy tłumaczę coś wprost z dokumentacji 🙂
Cele
Głównym celem Material Design jest dostarczenie podobnych doświadczeń użytkownikowi mobilnemu i korzystającemu z urządzeń stacjonarnych. Cel ma być osiągnięty poprzez standaryzację rozwiązań, które są stosowane zarówno w aplikacjach przeznaczonych na telefon, tablet, komputer typu Desktop, a może nawet TV i gadżety typu „wearables”.
Tytułowy „materiał” to inspiracja i odniesienie do świata fizycznego i tekstur oraz tego jak odbijają światło i rzucają cienie. Na szczególną uwagę w Material Design zasługuje papier jako nośnik informacji.
Material Design odnosi się do popularnych i znanych w drukarstwie metod projektowania. Każda siatka, zastosowana skala, kolory tworzą hierarchię, która ma coś konkretnego do zakomunikowania. Dzięki temu zwracamy uwagę użytkownika na istotne treści i elementy interakcji.
Ruch oraz wszelkiego rodzaju animacje za pomocą naturalnych przejść mają naśladować fizykę. Przykładowo animacją przycisku rozchodzi się od punktu interakcji do krawędzi, ma to udawać wciśnięcie połyskliwego przycisku do ekranu a rozwijane elementy mają swój pęd i przyspieszenie.
Powierzchnie w Material Design
Material Design ma trójwymiarowy charakter, który polega na stosowaniu tekstur, głębi i cieni. Odniesienia do świata fizycznego są w tym systemie widoczne praktycznie na każdym kroku. Elementy odbijają cienie oraz zachodzą (ale nie nachodzą) na siebie.
Głębia polega na niczym innym jak na nadawaniu elementom indeksu Z w znanym z matematyki i grafiki komputerowej trójwymiarowym układzie współprzędnych x,y,z.
Warstwy i elewacja
Dodanie głębi oraz wymiaru Z, który dał możliwość stosowania elewacji projektantom powoduje, że niektóre warstwy w projekcie mogą być bliżej a inne dalej.
Siatka zgodna z ideą Responsive Web Design
Na tym polu już chyba wszystko zostało wcześniej wymyślone. Material Design tak jak Bootstrap posiada kolumny marginesy i krawędzie boczne.
Szerokość kolumny jest definiowana przy użyciu wartości procentowych. Liczba kolumn wyświetlanych w siatce jest określona przez punkt graniczny (breakpoint). Filozofia siatki Material Design polega tak jak w klasycznym podejściu Responsive Web Design na dopasowywaniu siatki do treści a nie odwrotnie.
Kształty w Material Design
Rolą kształtu jest przyciąganie uwagi, ułatwienie użytkownikowi odróżnienia elementów jednej klasy od drugiej. Kształty mają też wyrażać charakter komunikatu.
Wszelkie powierzchnie w Material Design mają domyślnie kształt prostokątny z zaokrąglonymi narożnikami o promieniu 4dp. Ich kształt można personalizować za pomocą kątów narożnych oraz krzywych krawędzi. Zmiany kształtu, takie jak zaokrąglone lub przycięte narożniki mogą być delikatnie lub mocniej zaznaczone.
Nawigacja
Nawigacja to jeden z najważniejszych elementów w jakimkolwiek systemie projektowym. W Material Design położono nacisk na UX, wygodę użytkownika i intuicyjność. Material Design dostarcza gotowe elementy nawigacyjne zgodnie z wykorzystywaną w danym momencie platformą.
Na podstawie architektury informacji o aplikacji użytkownik może poruszać się w jednym z trzech kierunków nawigacyjnych:
- Nawigacja w bok – oznacza poruszanie się między interfejsami na tym samym poziomie hierarchii. Główny składnik nawigacyjny aplikacji powinien zapewniać dostęp do wszystkich miejsc docelowych na najwyższym poziomie hierarchii.
- Nawigacja w przód – oznacza przechodzenie między interfejsami na kolejnych poziomach hierarchii i w poszczególnych krokach różnych procesów w aplikacji. Nawigacja do przodu osadza zachowanie nawigacyjne w kontenerach (takich jak karty, listy lub obrazy), przyciskach, linkach lub za pomocą wyszukiwania.
- Nawigacja wstecz – odnosi się do przechodzenia wstecz przez interfejsy odwiedzone chronologicznie (mowa tutaj o obrębie jednej aplikacji lub kilku) lub też hierarchicznie. Możliwości i rozwiązania natywne konkretnej platformy określają dokładne zachowanie nawigacji wstecz. Tzn. mogą wystąpić różnice w Windows, iOS i w Androidzie.
Kolorystyka
Kolorystyka w Material Design jak każda kolorystyka w dowolnym systemie może zostać użyta do stworzenia motywu przewodniego, który odzwierciedli twój styl lub branding.
To co charakterystyczne dla palety Material Design, to sztywno ustalone i zorganizowane podejście do stosowania barw w UI. W tym systemie branding zaznaczamy jednym bądź dwoma kolorami (kolor główny i dodatkowy). Ciemniejsze i jaśniejsze warianty konkretnych kolorów można stosować na różne sposoby.
Dlaczego tak? Takie podejście ułatwia stworzenie harmonijnego motywu kolorów, zapewniający maksymalną czytelność tekstu i odróżnienie istotnych elementów interfejsu od podkładu. Aby wygenerować praktycznie gotową paletę kolorów zgodną z Material Design należy użyć specjalnego narzędzia: Material Design Color Tool.
Skoro elementy aplikacji używają kolorów z określonych kategorii w palecie kolorów Material Design, należy innym elementom ekranu (tekst, ikony) które pojawiają się na tych powierzchniach nadać taką barwę aby wyglądały wyraźnie i czytelnie.
Ta kategoria kolorów nosi nazwę kolorów „on”, odnosząc się do faktu, że kolorują elementy, które są umieszczane „na” kluczowych tłach, które używają koloru podstawowego, koloru dodatkowego, koloru powierzchni, koloru tła błędu itd. Są one oznaczone przy użyciu oryginalnej nazwy kategorii (np. koloru podstawowego) z predrostkiem „on”. Tego typu oznaczenia są stosowane przede wszystkim do tekstu i ikonek. A skoro o tekście i ikonkach mowa…
Typografia
Główny cel typografii w Material Design nie zaskakuje -treść ma być czytelna najbardziej jak to możliwe. Predefiniowana skala typograficzna zawiera kontrastujące z sobą kroje, która można użyć w dowolnym projekcie.
Ikony
Niejako narzucona fizyczność materiału znajduje odzwierciedlenie w projektowaniu ikon dla Material Design. Każda ikona jest wycinana i reprezentowana przez proste elementy graficzne. Ikony sprawiają wrażenie solidnych, ich krawędzie są grube i nie są nadmiernie skomplikowane.
Czy Material Design nadaje się do zwykłych stron internetowych?
To zależy od potrzeb. Jeżeli chcesz dostarczać rozwiązań jakie są stosowane przez projektantów Google to droga wolna. Material Design świetnie sprawdzi się przy skalowanych serwisach społecznościowych lub wieloplatformowych serwisach internetowych i wszelkich aplikacjach. Według mnie, wszystkie marki które mają być kojarzone z nowoczesnością mogą spokojnie czerpać garściami z Material Design. Pamiętaj też, że zasady są po to by je łamać i można np. tylko część z tego co proponuje Material Design zastosować na swojej stronie. Przykładem może być wykorzystanie wspomnianej trójwymiarowości ale też samej kolorystyki typografii lub modnych ostatnio ikonek: https://material.io/tools/icons/?style=baseline
Przykłady
Witryna Google Developers
Aplikacja Google Music
Serwis YouTube
Serwis Behance
Dokumentacja Material IO
Podsumowanie
Nie sposób omówić szczegółowo systemu Material Design w jednym artykule. Mam nadzieję, że mimo wszystko przybliżyłem jego charakter i podstawowe założenia. Czytaj więcej w oficjalnej dokumentacji, do której link jest umieszczony poniżej.
Odpowiedz lub skomentuj