Interfejsy użytkownika (UI) są kluczowym elementem sukcesu i akceptacji aplikacji i stron internetowych. Interfejsy użytkownika dotyczą wyglądu i języków projektowania, są podatne na zmiany panujących trendów i mody. Przez lata różne ewoluujące style wpływały na interfejs użytkownika. Skeuomorfizm ostatecznie ustąpił miejsca płaskim, minimalistycznym projektom. Potem przyszedł neumorfizm, którego inspiracją były przedmioty ze świata fizycznego. Najnowszym trendem, który szturmem podbił świat UI, jest Glassmorphism. Glassmorphism to nowy trend 2021 w interfejsach użytkownika, który szybko zyskuje na popularności. Jedno z bardziej popularnych zastosowań tego stylu pojawiło się w Apple macOS Big Sur, który pojawił się w 2020 roku.

Ale co to jest Glassmorphism?

Jak nazwa wskazuje, ma przezroczysty, szklisty wygląd. Użytkownicy mogą przeglądać warstwy. Warstwy te mogą pomóc wprowadzić hierarchię w strukturze. Cechy tego nowego stylu UI – jak wyliczał Michał Malewicz na swoim blogu, są następujące: Przezroczystość – jak wyjaśniono powyżej, ten projekt przypomina wirtualną szklankę z rozmyciem tła. Podejście wielowarstwowe, które wygląda, jakby obiekty unosiły się w przestrzeni. Rozmyty efekt podkreślamy żywymi kolorami. Subtelne obramowanie na półprzezroczystych przedmiotach.

Początki Glassmorpismu

Początki rozmycia tła sięgają 2013 roku, kiedy Apple po raz pierwszy wprowadziło go z iOS 7. Była to zupełnie nowa estetyka projektu, a minimalistyczny, płaski wygląd został dobrze przyjęty. Nowa warstwy były półprzezroczyste, a użytkownik widział obiekty za warstwą z rozmyciem. Jeśli warstwa przesuwamy powoli, ikony stopniowo rozmazują się, co daje bardzo ciekawy, dynamiczny wygląd, którego wcześniej nie widziano.

Glassmorphism nowy trend 2021

Podczas gdy wycofano rozmycie tła na iPhone’ach, Apple przywrócił je na pulpit z systemem macOS Big Sur. Jak zawsze, efekt rozmycia może kontrolować użytkownik poprzez ustawienia systemowe. Tło i szklisty wygląd zyskały na popularności i wpłynęły również na inne firmy i ich produkty. Fluent Design System, opracowany przez firmę Microsoft, również wykorzystuje Glassmorphism. Jest organicznie wbudowany w Fluent i nazywają go Akrylem. Jest to część wyglądu i działania wszystkich nowoczesnych interfejsów pulpitu Windows. Glassmorphism szturmem zdobywa branżę UI, zarówno Apple, jak i Microsoft przyjęły tę estetykę projektu w swoich systemach operacyjnych dla komputerów stacjonarnych. Interfejsy aplikacji i witryn internetowych już zaczęły wybierać Glassmorphism, a użytkownicy podzielają ten wybór.

Ten trend już nabiera rozpędu, a w 2021 r. planuje się jego mocny rozwój. Ponieważ nasze życie jest coraz bardziej splecione z aplikacjami i cyfrowymi ekosystemami, dynamiczny język projektowania pomaga utrzymać zaangażowanie i inspirację użytkowników. Nowe projekty pojawiają się co kilka lat i zmieniają branżę UI. Przez jakiś czas były to minimalistyczne, płaskie projekty. Wtedy neumorfizm był wiodącym trendem – a teraz powoli staje się nim Glassmorfizm.

Co na to projektanci i użytkownicy?

To ciekawy system projektowania, doceniany zarówno przez użytkowników, jak i projektantów. Z racji tego, że jest integralną częścią środowisk macOS, Microsoft Windows i iOS, nowe aplikacje wykorzystujące Glassmorphism są stale projektowane dla odpowiednich sklepów z aplikacjami. Od czasu do czasu tworzone są nowsze systemy projektowania, projektanci UI muszą być w czołówce tych zmian, aby zachować aktualność. Wraz z szerszym przyjęciem Glassmorphism-u w różnych systemach operacyjnych i ekosystemach aplikacji, projektując interfejs użytkownika należy nauczyć się wdrażać ten element we własnych projektach. Dribble, platforma prezentująca prace projektantów na całym świecie, jest już zalewana projektami wykonanymi z wykorzystaniem tego nowego trendu. To wyraźny dowód nie tylko jego popularności, ale także tego, jak wielu projektantów z całego świata faktycznie go wdraża.

Oto kilka wspaniałych przykładów projektów Glassmorphism z Dribble, które podkreślają trzy główne cechy tego stylu – przezroczystość (matowe szkło), żywe lub pastelowe kolory i jasne obramowanie.

Mechanika tworzenia efektu Glassmorfizm

To właściwie gra między rozmyciem tła, cieniem i przezroczystością. Chodzi o to, aby osiągnąć równowagę między tymi trzema elementami. Ponieważ interfejs opiera się na warstwach, obiekty bliżej użytkownika będą przyciągać więcej światła, co zwiększa jego przezroczystość. Innymi słowy, „obiekt” lub warstwa na wierzchu będą bardziej przezroczyste, a im głębiej pójdziemy, tym mniejsza przezroczystość. Wokół konturów warstw dodano subtelny cień, aby stworzyć wrażenie dodatkowej głębi.

Styl działa najlepiej, gdy na kolorowym tle pojawia się wiele półprzezroczystych warstw. Przejrzystość nie jest jednak pełna. Tylko wypełnienie musi być przezroczyste, a nie cały kształt. Stworzyłoby to pożądany efekt. Należy również starannie dobrać tło. Kolorowe tło działa najlepiej w przypadku Glassmorfizmu. Dlatego iOS 14 i macOS Big Sur używają żywych, kolorowych tapet domyślnych.

Podsumowując, nowe trendy w projektowaniu interfejsów będą pojawiać się w miarę upływu czasu. Ale to, czy te systemy zostaną szeroko przyjęte, będzie zależeć od tego, jak są intuicyjne i popularne. Wygląda na to, że Glassmorphism został zaaprobowany przez projektantów i użytkowników, a rok 2021 przyniesie jego rozwój.