Czas czytania: ok. 11 min.
Data publikacji: 05. 01.2022
Najnowsze trendy w web designie.
Co roku spotykamy się z przewidywaną listą popularnych rozwiązań w web designie. Już zapewne nie raz mogliśmy się przekonać, że niektóre z nich zostają na dłużej. O jakich trendach 2023 warto wiedzieć? Co praktykować u siebie na stronie, a co lepiej podziwiać z daleka? Sprawdźmy to!
Trendy w projektowaniu stron: 90’- 00’
Moda na motywy z lat 90’ i 00’ pojawiają się nie tylko w przypadku ubrań, ale także w projektowaniu stron internetowych.
Ich pojawienie się nie jest przypadkowe. O czym zresztą mogliśmy się przekonać już rok temu, ponieważ również wtedy w trendach sięgaliśmy do ubiegłych lat - przedze wszystkim 80’ i 90’. Tego typu rozwiązania projektowe są formą nostalgii. Nawiązania możemy zauważyć w teksturze, kolorystyce (w przypadku lat 00’ będą to raczej wyraziste kolory) i bezpośrednio związanych z danym okresem elementami (np. motyw płyt CD). Do całej oprawy dochodzi również typografia.
Typografia
Typografia sama w sobie jest bardzo obszernym tematem, któremu zadedykowaliśmy cały artykuł. Rozwiązań z jakich możemy skorzystać, jest wiele. Z pewnością spotkamy się z bardziej “ciężkimi” fontami (np. do projektów brutalistycznych) oraz oryginalnie zaprojektowanymi modelami, które będą miały jeszcze bardziej podnieść unikatowość strony. Kolejnym zagraniem może być mieszanie typografii z innymi elementami graficznymi (np. kształtami) lub po prostu różnymi stylami. Tak jak ostatnio możemy też zdecydować się na zastąpienie grafiki głównej/całgo layout’u tylko i wyłącznie tekstem. W przypadku rozwiązań minimalistycznych może to być również niewielki tekst z dużą ilością whitespace’u wokół siebie.
404
Strona błędu to trochę taki ślepy zaułek, z tym że nie bez wyjścia. Właśnie dlatego tworzymy jej projekt wizualny - ma on a pomóc użytkownikowi trafić tam, gdzie chciał lub ewentualnie polecić mu coś innego i przede wszystkim poinformować co się stało. Nie zwalnia to nas jednak z kreatywności. W najnowszych trendach web designu wyraźnie zwrócono na to uwagę. Projektowane 404 zaskakują swoją koncepcją artystyczną lub chociażby humorem. Oczywiście nie zawsze chodzi tutaj o to, aby były one przekombinowane. Jest to jednak szansa na dodatkowe pokazanie charakteru swojej marki (/firmy).
Parallax zoom scrolling
W ubiegłych latach pojawiały się trendy na dynamiczne przewijanie i scrollytelling (czyli opowiadanie historii poprzez stronę). Tym razem do czynienia mamy z udoskonaloną wersją tego rozwiązania. Parallax zoom scrolling zawiera w sobie obrazy, wideo i tekstury, aby nadać stronom poczucie głębi. Tło porusza się w wolniejszym tempie niż pierwszy plan w miarę przewijania strony przez odwiedzającego. Daje to wrażenie trójwymiarowości strony. Nie jest to jedynie sposób na stworzenie projektu, który będzie unikatowy, ale też na głębsze zaangażowanie użytkowników i zatrzymanie ich na dłużej.
Nakładanie tekstu na grafikę i odwrotnie
Ponownie wracamy do wątku typografii. W przypadku tego trendu próbujemy wkomponować tekst i obraz tak, aby otrzymać wrażenie, że wzajemnie się one uzupełniają - są w jednej scenerii. Nie szukamy alternatyw, aby jeden element nie nachodził na drugi, wręcz przeciwnie pozwalamy, aby tak się stało (oczywiście z zadbaniem o to, aby sam komunikat nie został w pełni zamaskowany). Oczywiście łamie on pewne podstawowe zasady przejrzystości, ale w zamian za to otrzymujemy projekt przykuwający uwagę (co ostatecznie może skłonić odwiedzającego do lepszego zapamiętania komunikatu), z kreatywnym rozwiązaniem stopienia tekstu z obrazem.
Claymorphism – dotykalne ilustracje
Przy ostatnim zestawieniu mówiliśmy o Neomorphismie. Tym razem przyszła pora na Claymorphism. To efekt nadający ilustracjom “dotykalności”. Łączy w sobie efekty 3D z kreskówkowym klimatem. Może być wykorzystywany do kreowania sylwetek postaci, ale też do mniejszych elementów, jak np. ikony/wyróżniki, czy informacje al’a pop-up.
Mini-animacje, w tym też tekstu (interaktywne fonty)
Mini-animacje, mini-interakcje, (subtelna) animacja tekstu. Wszystkie te elementy pozwalają ożywić stronę internetową. Mogą stać się elementem “zabawy” lub podkreśleniem oferty, jaką chcemy zareprezentować. Między innymi dzięki nim podnosimy poziom UX. Taka forma może sprawdzić się np. w przypadku e-commerce, ponieważ prezentowany produkt staje się bardziej atrakcyjny w odbiorze i ‘namacalny’ co tym samym znacznie łatwiej skłania do zakupu.
Social proof, czyli wiarygodność strony www
Social proof, czyli coś, czym budujemy wiarygodność wśród odbiorców. Trendy w web designie, to nie tylko wskazówki, które mówią nam jak mamy upiększyć naszą stronę. W wielu przypadkach łączą one w sobie elementy techniczne i marketingowe lub po prostu są to nowe rozwiązania UX/UI.
Tak też będzie w przypadku trendu na social proof. Poza tym, że (mimo wszystko) warto zaprezentować go na stronie w sposób estetyczny, to nie ma on zbyt wiele wspólnego z designem, w sensie sztuki.
Indywidualne wzory kursorów myszek
Teoretycznie niewielki szczegół, a jednak zapowiada się, że jednak możemy spotkać się z nimi coraz częściej. Indywidualne (oryginalne), wzory kursorów, czyli jeden z trendów web designie. Zazwyczaj spotykamy się ze strzałką. Na ten moment nieliczne strony mają swoje spersonalizowane motywy, ale jak zapowiedzieliśmy, może się to zmienić. Nie jest to jednak coś, co nazwalibyśmy zwykłym “bajerem”, ponieważ dobrze opracowany projekt może przyczynić się również do wzrostu zaangażowania na stronie - szczególnie jeśli poza samą zmianą wzoru kursora, dodane zostaną do niego interakcje. Zmiana taka musi być jednak odpowiednio dopracowana. Należy wybrać taki motyw, który będzie nawiązywał do identyfikacji strony lub też całej firmy - np. platforma z grami historycznymi mogłaby wykorzystać motyw miecza.
Retro w UX (Art-deco, brutalism etc)
O powrocie do przeszłości mówiliśmy już w przypadku lat 90’- 00’, ale to nie jedyne inspiracje, po jakie sięgniemy w najnowszych trendach web designu. Na liście ponownie znalazł się brutalizm. Ciężkie fonty oraz często zaskakujące połączenia kolorystyczne, to jedne z głównych elementów, którymi się charakteryzuje.
Z kolei w przypadku Art Deco jest trochę inaczej. Tutaj istotna jest symetria i kształty. Mimo wszystko do jego cech charakterystycznych wliczamy również wzorzystość/dekoracyjność z zachowaniem subtelności - “bogactwo” i minimalizm w jednym. Takie rozwiązania stylistyczne mogą sprawdzić się nie tylko w przypadku projektowania samych stron, ale też identyfikacji, czyli mi.in. logo.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Scrap book
Tworzenie albumów z wycinkami, to jedno z kreatywnych sposobów na spędzanie czasu. W zasadzie są to kolarze, z tym, że zamiast tworzenia ich na osobnych kartkach, kreujemy z nich wcześniej wspomniany album. Możemy spotkać się z tym, którzy obierają sobie jeden motyw przewodni oraz tymi, którzy stosują wręcz przeciwną taktykę - każda strona w innym stylu. Teraz tego typu kolarze mają szansę stać się popularniejsze również w świecie web designu. Kompozycje zdjęć imitujących polaroidy, połączenia motywów fotografii z elementami graficznymi imitującymi prawdziwe obiekty, przedmioty (np. kartki, kwiaty, rzeźby etc.)
Ikony w nawigacji
Z ikonami w nawigacji spotykamy się bardzo często w przypadku interface’u w wersji na mobile - m.in. dlatego, że pozwalają one na oszczędzenie znacznej ilości przestrzeni, pozostawiając w projekcie więcej white’space’ów. W rzeczywistości jednak ikony wykorzystywane są niemalże wszędzie. Część z nich jest na tyle uniwersalna, że niezależnie na jakiej stronie znajdzie się użytkownik, będzie wiedział, jakiej czynności tyczy się ikona. Przykładem jest tutaj m.in. lupa i koszyk. W związku z tym, że różne platformy, charakteryzują odmienną charakterystyką, przekazują inne informacje, zawierają inne oferty i funkcjonalności nie każde z symboli będzie dla odbiorcy proste do rozpoznania. W związku z tym w web designie pojawił się trend, w którym to do ikony dołączony jest tekst, który pojawia się po hoverze. Jest to rozwiązanie, które jest zarówno praktyczne, jak i estetyczne (a raczej nie psujące estetyki) - nie przepełniamy strony, ale też udoskonalamy przekaz informacji, jaki dostarczamy użytkownikom.
Nawigacja “na palec” (Thumb-Friendly Mobile Navigation)
Dobrze wiemy, że znaczenie telefonów komórkowych znacznie wzrosło od początków stron internetowych. Obecnie stanowią one wręcz wyznacznik standardów, o czym świadczy między innymi znaczenie projektowania z uwzględnieniem RWD oraz badanie stron przez Google Search Console nie z pozycji wersji na desktop, a na smartphone. Social media, zakupy online, przeglądanie materiałów (chociażby wpisów blogowych). Każda z tych czynności może być przez nas wykonywana z telefonu. To na co należy zwrócić uwagę, t fakt, że wykonując jakieś akcje, czy też po prostu scrollując, zazwyczaj robimy to kciukiem (ewentualnie palcem wskazującym). Jego zasięg jest ograniczony. Ważne jest więc aby stworzyć projekt tak, aby najważniejsze elementy znalazły się w strefie z najlepszym dostępem. Przykładowo: Umieszczając button, który ma nas przekierować do zakupu na samym skraju, wymagamy od odbiorcy większego zaangażowania. Z pozoru może to wydawać się drobną przeszkodą, która nie powinna wpływać na wyniki, ale takie elementy przekładają się właśnie na wrażenie użytkownika.
Szybkość ładowania strony
Szybkość ładowania strony - była, jest i będzie jednym ze stałych trendów. Z tym wyjątkiem, że z roku na rok prędkość ta będzie się znacznie zacieśniać. Już rok temu 2 s. były standardem. Oczywiście nie zawsze dłuższy proces wyświetlania materiałów na stronie, skłoni użytkownika do rezygnacji, ale w momencie, gdy nasza witryna www nie jest jedyną odpowiedzią na jego potrzeby, jest to jeden z czynników, który może skłonić go do wyboru innego rozwiązania. Rzecz jasna szybkość ładowania strony zależna jest od wielu czynników. Wpływają na nią, chociażby materiały, które się na niej znajdują - zdjęcia i wideo (np. czy są odpowiednio skompresowane) oraz “czystość” kodu (czyli co za tym idzie wybór narzędzia, za pomocą którego powstanie strona).
Inne trendy, z jakimi możemy się spotkać (3d, gradient, itp.)
-
virtualna rzeczywistość wykorzystywana do prezentowania sprzedawanych produktu
-
minimalizm
-
gradienty (również w wersji holograficznej)
-
voice optymalization - pod wyszukiwanie głosowe
-
projekty full page
-
lazy loading
-
3D
-
AI
Nowe trendy w web designie - podsumowanie
Nie da się ukryć, że część trendów, które omówiliśmy, była wspomniana już w poprzednich zestawieniach. Może to świadczyć o tym, że są one istotne dla jak najlepszego funkcjonowania strony i user experience (np. szybkość ładowania strony i projekt na “palec”) lub też przyjęły się ze względu na upodobania stylistyczne (np. minimalizm, który zawsze pozostanie w modzie, czy też projekty retro). Z częścią z nich spotkamy się również w następnych latach, ponieważ co prawda pojawiają się trendy, które znikają “po sezonie”, ale większość z nich częściej ewoluuje.
Przeczytaj także:
Autor: Kaja Rowicka
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.