Google nieustannie rozwija swój design system, a przedstawienie kolejnej jego odsłony – Material 3 Expressive w maju 2025 – jest idealną okazją, aby przyjrzeć się jego ewolucji i co nowego ostatnia wersja wnosi do ekosystemu Androida i Wear OS.
Spis treści
Design systemu – poprzednie wersje
Material Design od momentu debiutu w 2014 roku wyznacza standardy w tworzeniu spójnych, intuicyjnych i estetycznych doświadczeń użytkownika. Celem powstania pierwszej wersji systemu było stworzenie fundamentu, który wyznaczy zasady łączenia estetyki z funkcjonalnością i zasadami dobrego projektowania. Wykorzystano układy oparte na siatkach, z zachowaniem ogólnie przyjętych zasad czyniących projekt czytelnym i łatwym w obsłudze. Główną inspiracją był papier i sposób, w jaki posługujemy się nim w realnym świecie, aby interakcje w cyfrowym interfejsie były jak najbardziej intuicyjne dla użytkowników. Twórcy założyli, że wykorzystując głębię, cienie i tekstury, stworzą iluzję cyfrowego materiału, który odda wrażenie obcowania z realną powierzchnią, ale „w przeciwieństwie do prawdziwego papieru, ten cyfrowy materiał będzie się rozszerzał i przekształcał inteligentnie”. Stworzony system był stopniowo rozszerzany na wszystkie platformy Google, tak, aby zapewnić użytkownikowi spójne doświadczenia w produktach mobilnych i internetowych marki.
Material Design 2 pokazał naturalną ewolucję standardów, z naciskiem na poprawienie użyteczności i przejrzystości, poprzez wykorzystanie większej ilości białych przestrzeni. Wraz z zaokrąglonymi rogami, kolorowymi ikonami i nowym fontem Google Sans estetyka interfejsów stała się bardziej nowoczesna i przyjazna użytkownikowi.
Powolne odejście od minimalizmu
Material 3 Expressive jest kolejną odsłoną zaprezentowanego w 2021 Material Design 3 (Material You). Był on znaczącym krokiem w rozwoju, poprzez położenie nacisku na personalizację i emocjonalne podejście do projektowania. Zerwał z minimalizmem, który celebrowały jego poprzednie wersje. System dynamicznie generuje palety kolorów na podstawie tapety użytkownika, co sprawia, że interfejs jest unikalny dla każdego urządzenia. Wprowadzono też elastyczne kształty i nową typografię, co pozwala na większą ekspresję wizualną. W porównaniu do poprzedników Material 3 to najbardziej maksymalistyczna wersja systemu, z bardziej swobodnym podejściem do projektowania.
Charakterystyka Material 3 Expressive
Material 3 Expressive przesuwa estetykę Material You ku jeszcze bardziej indywidualnej, emocjonalnej i ekspresyjnej formie, która lepiej odpowiada współczesnym oczekiwaniom użytkowników i różnorodności urządzeń. W cyfrowej rzeczywistości, w której prym wiodą TikTok i materiały video położono nacisk na bardziej dynamiczne animacje – tak aby łatwiej przyciągać uwagę użytkowników. Szczególnie interesujący jest odwrót od minimalizmu, który przez ostatnią dekadę przejmował wszystko w świecie projektowania, od brandingu po interfejsy.
Tonalne nakładki kolorów
Głównym sposobem wizualnego rozróżniania powierzchni i kontenerów jest stosowanie tonalnych nakładek kolorów zamiast tradycyjnych cieni. Oznacza to, że różne elementy są reprezentowane przez nakładanie kolorów o różnej tonacji, które są pochodną głównego koloru (primary color). Pozwala to również na subtelne podkreślenie hierarchii wizualnej i oddzielenie poszczególnych warstw, co zwiększa czytelność i komfort użytkowania. Algorytm porządkuje kolory z tapety użytkownika, tworzy z nich spersonalizowane motywy kolorystyczne, które następnie wykorzystuje w interfejsie i aplikacjach. Pozwala to na stworzenie unikalnego wyglądu interfejsu zgodnego z preferencjami posiadaczy urządzeń.
Komponenty i kształty
Nowy system wprowadził przede wszystkim wyraźnie większe elementy, przykładowo w Material 3 Expressive przycisk „Wyślij” w aplikacji e-mail jest większy, umieszczony bliżej użytkownika i wyróżniony dodatkowym kolorem, co ułatwia szybkie dostrzeżenie i interakcję. Takie rozwiązania pomagają użytkownikom szybciej i łatwiej korzystać z kluczowych funkcji.
Dodatkowo projektanci mogą wybierać spośród szerokiego spektrum narożników – od ostrych prostokątów, po całkowicie zaokrąglone formy. Pozwala to na nadanie interfejsowi różnorodnego charakteru: przyjaznego (okrągłe przyciski) lub bardziej formalnego (kwadratowe karty). Komponenty takie jak paski nawigacyjne, przyciski akcji czy karty zostały odświeżone, by lepiej organizować hierarchię treści i poprawić ergonomię.
Typografia
Typografia ma służyć podkreśleniu emocji i osobistego wyrazu w projektowaniu. Material Expressive zachęca do większej elastyczności w wykorzystaniu fontów, zabawy hierarchią, wielkościami stylami tekstów, tak, aby lepiej oddać intencje i nastrój komunikacji. Umożliwia to nie tylko lepsze zrozumienie treści, ale także wzbogaca interakcję, czyniąc ją bardziej angażującą i przyjemną. W rezultacie, typografia staje się nie tylko narzędziem komunikacji, ale również formą sztuki w cyfrowym świecie.
Animacje i haptyka
Animacja w Material Expressive stanowi istotny element, który wzbogaca interakcję użytkownika z aplikacjami, wprowadzając dodatkowy wymiar odczuwania. Dzięki zastosowaniu różnorodnych wzorów wibracji i sygnałów dotykowych, projektanci mogą tworzyć doświadczenia, które mocniej angażują zmysły użytkowników. Material Design 3 promuje świadome wykorzystanie haptyki, aby wzmocnić emocjonalne reakcje na działania, takie jak kliknięcia czy przewijanie. Różnorodność efektów, od subtelnych dotyków po intensywne wibracje, pozwala na lepsze przekazywanie intencji i kontekstu interakcji, co z kolei zwiększa satysfakcję użytkownika. W ten sposób haptyka staje się nie tylko dodatkiem, ale kluczowym elementem projektowania, który kształtuje nowoczesne, zintegrowane doświadczenia w aplikacjach.
Material 3 Expressive to kolejny ważny krok w ewolucji design systemu Google, który doskonale wpisuje się w zmieniające się potrzeby współczesnych użytkowników. Odejście od surowego minimalizmu na rzecz bardziej ekspresyjnej, emocjonalnej i spersonalizowanej estetyki pozwala na tworzenie interfejsów, które nie tylko są funkcjonalne, ale także angażują i inspirują. Ta odsłona design systemu pokazuje, jak ważne jest łączenie technologii z emocjami i indywidualnym stylem użytkownika.
Zajmuje się projektowaniem graficznym oraz animacją. Ożywia wizualne koncepcje, łącząc estetykę z ruchem – tak, aby grafika nie tylko przyciągała wzrok, ale również opowiadała spójną historię. Po pracy nadal tworzy – choć w innych formach. Maluje, szydełkuje, eksperymentuje z fakturami i materiałami.