Image for Trendy w projektowaniu UX/UI 2021

Trendy w projektowaniu UX/UI 2021

Czas czytania:

Metody projektowania do┼Ťwiadczenia i interfejsu u┼╝ytkownika nieustannie ewoluuj─ů. Ka┼╝dego roku pojawiaj─ů si─Ö nowe zjawiska oraz przekszta┼écaj─ů istniej─ůce ju┼╝ trendy. Zebrali┼Ťmy 7 inspiruj─ůcych kierunk├│w w projektowaniu UX/UI.

1. Glassmorfizm

Trend ten skupia si─Ö na po┼é─ůczeniu rozmytego t┼éa, cieni i przezroczysto┼Ťci. Dzi─Öki temu osi─ůgany jest efekt tr├│jwymiarowo┼Ťci designu, kt├│ry jest jednocze┼Ťnie czysty, elegancki i futurystyczny. Wypuk┼ée elementy s─ů dobrze wyeksponowane, a przyciski same si─Ö prosz─ů o klikni─Öcie. Ma to pozytywny wp┼éyw na UX, tak┼╝e dlatego, ┼╝e niew─ůtpliwe walory estetyczne  stylu sk┼éaniaj─ů do interakcji.

Interfejs opiera si─Ö na kartach (oknach) otoczonych subtelnymi, jasnymi ramkami oraz cieniem. S─ů przezroczyste (efekt matowego szk┼éa), a t┼éo pod nimi rozmyte. Daje to wra┼╝enie g┼é─Öbi. Wykorzystuje si─Ö wyraziste kolory, ale subtelne t┼éa oraz gradienty i elementy geometryczne. 

2. Oryginalne ilustracje

Trend umieszczania w designie unikalnych ilustracji by┼é widoczny ju┼╝ w zesz┼éych latach, ale stawiano wtedy na minimalizm. Obecnie eksperymentuje si─Ö z bardziej odwa┼╝nymi projektami. Cechuj─ů je cz─Östo kontrastowe kolory oraz asymetryczno┼Ť─ç.

Zalet─ů stosowania oryginalnych ilustracji jest mo┼╝liwo┼Ť─ç zaznaczenia wyrazistego wizerunku marki. W ten spos├│b wyr├│┼╝nimy si─Ö na tle stosuj─ůcej jedynie zdj─Öcia lub proste ikony konkurencji. Nadajemy tak┼╝e stronie niepowtarzalny charakter, pozwalaj─ůc stworzy─ç indywidualny styl komunikacji marki (wprowadzaj─ůc np. brand hero).

Grafiki s─ů w stanie tak┼╝e w bezpo┼Ťredni albo metaforyczny spos├│b t┼éumaczy─ç np. zawarto┼Ť─ç okna lub czynno┼Ť─ç, kt├│r─ů mo┼╝e wykona─ç u┼╝ytkownik. Mo┼╝e to dzia┼éa─ç jako zach─Öta do podj─Öcia dzia┼éania. R├│wnocze┼Ťnie walory estetyczne ilustracji wp┼éywaj─ů pozytywnie na do┼Ťwiadczenie u┼╝ytkownika.

aplikacja mobilna
aplikacja mobilna Pocket

3. Animacje i mikrointerakcje

Ruch w spos├│b oczywisty sprzyja dynamizacji witryny. Za pomoc─ů prostych, osi─ůgalnych nieobci─ů┼╝aj─ůcymi urz─ůdze┼ä u┼╝ytkownik├│w technik (np. CSS), mo┼╝emy aktywizowa─ç u┼╝ytkownika. Wprowadzaj─ůc ruch, ilustrujemy tre┼Ťci strony doskonalej ni┼╝ przy u┼╝yciu statycznej grafiki.

Animacje, pojawiaj─ůce si─Ö  podczas przewijania strony, daj─ů wra┼╝enie, ┼╝e s─ů wywo┼éywane przez u┼╝ytkownika. Mog─ů tak┼╝e uzupe┼énia─ç si─Ö s┼éu┼╝─ůc do opowiadania historii snutej podczas scrollowania witryny. 

Zadanie aktywizacji u┼╝ytkownika spe┼éniaj─ů tym bardziej mikrointerakcje. Je┼╝eli grafika czy ikona porusza si─Ö po najechaniu myszk─ů, odwiedzaj─ůcy stron─Ö czuje, ┼╝e jego dzia┼éanie wp┼éywa na kszta┼ét witryny. Sk┼éania to do podj─Öcia dzia┼éania, jakim mo┼╝e by─ç np. klikni─Öcie okna. Poruszaj─ůce si─Ö elementy mog─ů te┼╝ wyst─Öpowa─ç w formie interaktywnych prze┼é─ůcznik├│w, animacji na pasku post─Öpu czy wyst─Öpowa─ç podczas wprowadzania danych.

Anga┼╝uj─ůce animacje mo┼╝na osi─ůgn─ů─ç tak┼╝e w trzech wymiarach, co jest obecnie popularnym trendem. Obracaj─ůce si─Ö obiekty daj─ů wra┼╝enie g┼é─Öbi w obrazie. Pozwalaj─ů przede wszystkim pokaza─ç produkt z wielu stron, ale tak┼╝e sk┼éaniaj─ů do interakcji przy bardziej abstrakcyjnych czy schematycznych projektach graficznych.

4. Asymetria

Projektanci przyzwyczajeni s─ů do zachowywania symetrii w projektach, aby da─ç u┼╝ytkownikowi wra┼╝enie ┼éadu na stronie czy w aplikacji. Harmonijne projekty ponadto nie prowadz─ů do nadmiernego rozproszenia u┼╝ytkownika, kt├│ry mo┼╝e skupi─ç si─Ö na najwa┼╝niejszych z punktu u┼╝yteczno┼Ťci cechach produktu cyfrowego. 

Z drugiej strony wprowadzenie asymetrii budzi zaciekawienie i przyci─ůga uwag─Ö u┼╝ytkownika. Pozwala te┼╝ designowi wyr├│┼╝ni─ç si─Ö na tle innych projekt├│w. Tworzenie wra┼╝enia zamierzonej przypadkowo┼Ťci mo┼╝e tak┼╝e by─ç sposobem na przedstawienie kreatywnego aspektu wizerunku marki.

Efekt ten uzyskuje si─Ö cz─Östo za pomoc─ů dzielenia ekranu, kontrastowych schemat├│w kolor├│w i wyra┼║nych linii. Trzeba jednak pami─Öta─ç, ┼╝e tego, jak u┼╝ytkownik b─Ödzie porusza┼é si─Ö po witrynie, nie mo┼╝emy pozostawi─ç przypadkowi. Wa┼╝ne jest, aby elementy uk┼éada┼éy si─Ö w logiczn─ů ┼Ťcie┼╝k─Ö prowadz─ůc─ů do realizacji celu witryny. Nale┼╝y tak┼╝e zachowa─ç r├│wnowag─Ö kompozycyjn─ů.

Istotne jest r├│wnie┼╝ fakt, ┼╝e asymetria nie b─Ödzie odpowiednia dla ka┼╝dej marki. Strony korporacyjne powinny zazwyczaj konotowa─ç stabilno┼Ť─ç i harmoni─Ö, aby budzi┼éy zaufanie. Warto tak┼╝e, by witryny e-commerce z kolei, gdzie podstawowe znaczenie ma optymalizacja ┼Ťcie┼╝ki zakupowej, ostro┼╝nie podchodzi┼éy do tego trendu.

5. Rzeczywisto┼Ť─ç rozszerzona (AR)

AR jest odpowiedzi─ů na mo┼╝liwo┼Ťci, kt├│re daj─ů urz─ůdzenia mobilne. Smartfony i tablety pozwalaj─ů u┼╝ytkownikom na korzystanie z kamer do robienia zdj─Ö─ç i przesy┼éania dynamicznego obrazu. Wykorzystanie ich do prezentowania swojego produktu mo┼╝e wznie┼Ť─ç interakcj─Ö na wy┼╝szy poziom.

S─ů to projekty oparte na perspektywie pierwszej osoby pozwalaj─ůce np. pokaza─ç wykorzystanie produktu w otoczeniu u┼╝ytkownika. Przyk┼éadem mo┼╝e by─ç tutaj aplikacja Dulux, pozwalaj─ůca wirtualnie ÔÇ×przemalowa─çÔÇŁ nasz─ů ┼Ťcian─Ö na kolor wybrany z oferty marki. Podobnie post─ůpi┼éa IKEA, kt├│rej aplikacja umo┼╝liwia umeblowanie swojego pomieszczenia za pomoc─ů produkt├│w firmy.

Rozwi─ůzania tego typu stosowane s─ů tak┼╝e przez e-commerce bran┼╝y odzie┼╝owej. Tworzy si─Ö wirtualne lustra, dzi─Öki kt├│rym mo┼╝na przymierzy─ç konkretne modele ubra┼ä. Prezentacje tego typu mo┼╝na szeroko wykorzysta─ç w handlu, a tak┼╝e nieruchomo┼Ťciach, edukacji, rozrywce czy mediach. Prowadz─ů do wi─Ökszego zaanga┼╝owania u┼╝ytkownika, kt├│ry mo┼╝e doceni─ç w┼éa┼Ťnie np. praktyczne metody zastosowania produkt├│w.

6. Wyrazista typografia

Wraz z pojawieniem si─Ö mo┼╝liwo┼Ťci obs┼éugi przez przegl─ůdarki niestandardowych font├│w, mog┼éy one zacz─ů─ç stanowi─ç wa┼╝niejszy (a czasem nawet g┼é├│wny) element designu. Oparcie produkt├│w na odwa┼╝nej, ponadwymiarowej typografii przyci─ůga uwag─Ö u┼╝ytkownika i dostarcza wra┼╝e┼ä estetycznych. Jednocze┼Ťnie teksty s─ů oczywi┼Ťcie sposobem na przekazywanie istotnych tre┼Ťci.

Za pomoc─ů kroju i wielko┼Ťci font├│w mo┼╝na stosowa─ç gradacj─Ö informacji. U┼╝ywa si─Ö do tego celu np. wersalik├│w oraz pogrubie┼ä. Aby wyr├│┼╝ni─ç dan─ů tre┼Ť─ç, stosuje si─Ö tak┼╝e czcionki bardziej odwa┼╝ne i wyraziste. Eksperymentuje si─Ö r├│wnie┼╝ z kolorystyk─ů. Wa┼╝ne, aby trafnie ustali─ç hierarchi─Ö informacji, gdy┼╝ zbyt du┼╝a ilo┼Ť─ç wyr├│┼╝nionych tekst├│w jest myl─ůca dla u┼╝ytkownika.

Konstruuj─ůc designy oparte na typografii, nale┼╝y mie─ç na uwadze u┼╝ytkownik├│w urz─ůdze┼ä mobilnych. Je┼╝eli stosujemy metod─Ö ÔÇ×mobile firstÔÇŁ, czyli rozpoczynamy projektowanie od wersji na smartfony i tablety, mo┼╝emy mie─ç pewno┼Ť─ç, ┼╝e zbyt du┼╝e litery nie b─Öd─ů problemem w przypadku mniejszych ekran├│w.

7. Sztuczna inteligencja (AI)

Obecnie narz─Ödzia do projektowania w coraz wi─Ökszym stopniu staraj─ů si─Ö u┼éatwia─ç prac─Ö designerom za pomoc─ů rozwi─ůza┼ä AI. Dowodem na to s─ů nowe, inteligentne funkcje w Photoshopie, Sketchu czy Figmie. Umo┼╝liwiaj─ů one inteligentn─ů edycj─Ö obraz├│w czy zachowanie sp├│jno┼Ťci kolor├│w i zaawansowan─ů prac─Ö z komponentami.

Du┼╝e mo┼╝liwo┼Ťci daje tak┼╝e rozwi─ůzanie projektowania generatywnego. Opiera si─Ö ono na analizie du┼╝ych ilo┼Ťci danych, kt├│re s┼éu┼╝─ů algorytmowi do tworzenia w┼éasnych rozwi─ůza┼ä. Mechanizmy odnajduj─ů wzorce i prawid┼éowo┼Ťci, co pozwala na tw├│rcze przetwarzanie istniej─ůcych rozwi─ůza┼ä.

Projektowanie generatywne mo┼╝na wykorzysta─ç do tworzenia layout├│w, materia┼é├│w marketingowych czy makiet prezentacji lub kontrol─Ö dost─Öpno┼Ťci designu. Wci─ů┼╝ tak┼╝e pojawiaj─ů si─Ö nowe zastosowania dla tej technologii. Interesuj─ůce rozwi─ůzanie firmy NVidia GANVerse3D pozwala np. na przekszta┼écenie obrazu 2D w model 3D. W zwi─ůzku ze wspomnian─ů wy┼╝ej popularno┼Ťci─ů element├│w tr├│jwymiarowych narz─Ödzie to mo┼╝e by─ç bardzo pomocne.

Trzymaj r─Ök─Ö na pulsie

Oczywi┼Ťcie wymienione przez nas trendy s─ů tylko jednymi z wielu obecnie popularnych lub pojawiaj─ůcych si─Ö. Wci─ů┼╝ aktualny jest minimalizm, du┼╝e znaczenie zyskuj─ů interfejsy g┼éosowe czy tryb ciemny designu. Do ┼éask wraca tak┼╝e onboarding. Obserwowanie i wykorzystywanie aktualnych zjawisk w projektowaniu mo┼╝e sprawi─ç, ┼╝e nasze rozwi─ůzania b─Öd─ů ┼Ťwie┼╝e oraz anga┼╝uj─ůce u┼╝ytkownik├│w.

To, co jest jednak najwa┼╝niejsze, to dostosowanie projektu do charakteru marki. Trendy traktujmy jak palet─Ö mo┼╝liwo┼Ťci, ale nie trzymajmy si─Ö kurczowo najnowszych rozwi─ůza┼ä. Mo┼╝e si─Ö bowiem zdarzy─ç, ┼╝e nie s─ů sp├│jne z dotychczasowym wizerunkiem marki, do kt├│rego powinni┼Ťmy nawi─ůzywa─ç, np. przeprojektowuj─ůc stron─Ö. Pos┼éugiwanie si─Ö w┼éa┼Ťciwym dla niej j─Özykiem ma podstawowe znaczenie a priorytet to oczywi┼Ťcie potrzeby u┼╝ytkownik├│w.  

Zainteresował Cię ten artykuł?

Oferujemy profesjonalne wsparcie programist├│w w technologii Web.
Mo┼╝e Ci─Ö r├│wnie┼╝ zainteresowa─ç:
Trendy w projektowaniu UX/UI 2021

Metody projektowania do┼Ťwiadczenia i interfejsu u┼╝ytkownika nieustannie ewoluuj─ů. Ka┼╝dego roku pojawiaj─ů si─Ö nowe zjawiska oraz… Read More

SSL płatne i bezpłatne, podstawowe i rozszerzone. Poznaj różnice

Obecnie posiadanie certyfikatu SSL dla domeny jest ju┼╝ niezb─Ödne. Sta┼éo si─Ö tak za spraw─ů ustawie┼ä… Read More