Dołącz do czytelników
Brak wyników

UX/UI

3 listopada 2020

NR 54 (Październik 2020)

Trendy w projektowaniu WWW 2020/2021 – ewolucja, zmiany i inspirujące przykłady

70

Walka o uwagę użytkownika osiąga coraz wyższy poziom. Niestety, nie znamy jednego magicznego triku, który podczas projektowania strony internetowej sprawi, że będzie ona zawsze aktualna, świeża i przykuwająca uwagę.

To trendy odzwierciedlają upodobania większości odbiorców dotyczące serwisu, biorąc pod uwagę zarówno ich stronę wizualną, jak i użyteczną. 
Nie możemy zatem zapominać o nich przy projektowaniu stron www. Gdzie powinieneś skierować swoje oczy, jakie rozwiązania wykorzystywać i czym się inspirować?
Badania pokazują, że dobry design jest głównym czynnikiem gwarantującym pierwsze pozytywne wrażenie. Atrakcyjność wizualna i łatwość obsługi strony nie tylko zwiększają jej wiarygodność, ale mają też znaczący wpływ na zaangażowanie użytkowników w serwisie www. Badanie Stanford pokazuje, że 75% konsumentów przyznaje się do oceniania wiarygodności firmy na podstawie projektu jej strony internetowej.

POLECAMY

Wciągające ilustracje i elementy 3D

Użycie 3D na stronie www nie przestaje fascynować. Przyciąga uwagę użytkowników i przekracza granicę między przestrzenią wirtualną a rzeczywistością. Popularność tego trendu w 2020 r. ciągle wzrasta, a rozwój technologii VR & AR, obfitość narzędzi i gotowych zasobów w połączeniu z nowymi pomysłami projektantów gwarantuje jego dalszy rozwój.
Możesz graficznie urozmaicić swoją stronę, stosując organiczne i abstrakcyjne kształty, zwiększyć jej przyjazność poprzez dodanie uroczych postaci czy też zachęcić potencjalnych klientów do dłuższego pozostania na stronie dzięki interaktywnym elementom — możliwości jest nieskończenie wiele, a ogranicza Cię wyłącznie Twoja kreatywność.
Użycie techniki 3D zapewnia też więcej informacji, zarówno w zastosowaniach edukacyjnych, jak i tych bardziej komercyjnych. Pojedyncza grafika 3D przekazuje większą wiedzę wizualną o produkcie niż pojedynczy obraz 2D.
 

Zainspiruj się:
www.matruecannabis.com/en/
www.windmillair.com
www.useplink.com/en/
www.coros.net
www.pitch.com/

 

Rys. 1. Grafiki 3D znajdują zastosowanie na stronach WWW w praktycznie każdej branży

 

Rys. 2. Królowa jest tylko jedna. Typografia była, jest i będzie obecna na stronach internetowych


Głębia, miękkie cienie, zaokrąglenia, warstwy i transparentność

Po analizie można określić ten trend jako Organic UI. Początków możemy szukać w Material Design od Google’a, następnie przenieść się do roku 2017 (kiedy Microsoft przedstawił nam Fluent Design), a dalszą ewolucję śledzić na bieżąco, patrząc na to, jakie zmiany w designie niosą ze sobą premiery iOS 14 i macOS Big Sur.
Czym w takim razie jest całe to Organic UI? To zabiegi mające na celu sprawić, że interfejs użytkownika będzie bardziej przyjazny i naturalny dla człowieka. To stosowanie bardziej organicznych kształtów nad ostre geometryczne bryły, odzwierciedlenie rzeczywistości przez dodanie głębi, zabawy cieniem i transparentnością mające na celu stworzenie hierarchii.

Typografia, typografia i jeszcze raz typografia

Oczywiście, że obraz bardziej przykuwa uwagę, ale to typografia zawsze miała fundamentalne znaczenie w projektowaniu. Ogrom swobody, miejsca na ekspresję i eksperymentowanie są dziś nieporównywalnie większe od tego, czym dysponowali projektanci chociażby 10 lat temu.
To koniec cierpienia z powodu niedostatku fontów, problemów z czytelnością i kompatybilnością. Dostępność tysięcy godnych uwagi rodzin o różnych stylach pozwoli Ci na przekazanie zupełnie odmiennych emocji i zbudowanie strony w oparciu wyłącznie o typografię. Nie chodzi już tylko o wybór samego fontu czy ich kombinacji, ale o użycie słów jako głównego elementu stylistyki. Teraz to słowa, fizycznie obecne w projekcie, są elementem konstrukcyjnym, wokół którego ułożona jest cała reszta kompozycji.

Variable Fonts

Variable font to wiele odmian fontu, które są spakowane w jeden plik. Poprzez manipulowanie wartościami CSS możesz płynnie zmieniać jego grubość, szerokość czy np. pochylenie.

Hero Images bez grafiki

Wyjdź naprzeciw schematom i usuń typową grafikę w tej sekcji. Odważny i unikalny font wystarczy, by szybko przykuć uwagę użytkownika.
Hero Images to najczęściej pierwszy element, jaki widzi użytkownik na stronie. Jest statyczną lub dynamiczną (np. slider) sekcją umieszczoną na samej górze serwisu www, składającą się zazwyczaj z grafiki i tekstu.

Pogrubiona typografia

Stosowanie pogrubionych fontów w 2020 r. nie jest żadną innowacją, ale trend ten ciągle nabiera rozpędu. Duży wyboldowany nagłówek znajdujący się w centrum uwagi lub wylewający się poza ekran szybko przyciągnie uwagę użytkowników.
Łącz różne style i grubości, korzystaj zarówno z delikatnych szeryfów, jak i krojów geometrycznych. Nie bój się eksperymentować, pozwól typografii grać pierwsze skrzypce.

 

Zainspiruj się:
www.weareowlsome.com
www.vorrel.design
www.mgcream.com/en/
www.essenceglobal.com/about
www.alitwotimes.com


Dark mode

Dark mode to jeden z najbardziej aktualnych trendów 2020 r. i nic w tym dziwnego. Jest po prostu ładny. Wprowadzenie trybu ciemnego na komputerach i telefonach przez Apple praktycznie wymusiło na innych twórcach oprogramowania zaimplementowanie czarnej wersji w swoich aplikacjach.
Droga tego trendu z aplikacji mobilnych do stron internetowych była bardzo szybka, a projekty na nim oparte wyglądają nowocześnie i są naprawdę dynamiczne, przy czym redukują obciążenie oczu. 
Pod względem estetycznym Dark mode doskonale uzupełnia się z innymi trendami w projektowaniu stron i pozwala podkreślić dane elementy na stronie poprzez przyciemnienie pozostałych.
 

Rys. 3. Prosty przepis na wyróżnienie czegoś jasnego lub kolorowego na stronie? background-color: #000000

 

Zainspiruj się:
www.apple.com/pl/airpods-pro/
www.sumi.fillinglife.co/en
www.thomasbosc.com/en


Customowe kursory

Niestandardowe kursory ciągle ewoluują i są używane coraz częściej. Wystarczy kreatywny kod developera, by zmienić klasyczny kursor myszki w coś wyjątkowego i niepowtarzalnego. Tak stworzony kursor często łączony jest z efektami, które zmieniają jego kolor, kształt i rozmiar podczas interakcji z innymi elementami na stronie, co nie tylko rozwija poczucie kreatywności, ale także wzbogaca doświadczenia użytkow...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy