Trendy w projektowaniu stron internetowych na 2021r: scrollytelling, efekty 3D i więcej interakcji z użytkownikiem

Sonja Hoffmann Ostatnia aktualizacja 14.07.2021
10 Min.
Trendy w projektowaniu stron internetowych 2021
Ostatnia aktualizacja 14.07.2021

Po roku takim jak ten, który jest już za nami, snucie wizji nadchodzących trendów przybiera niemal utopijny wymiar. Kto na początku 2020 roku byłby w stanie przewidzień, jak dynamicznie może i będzie zmieniał się świat? I jak szybko potrafimy dostosować się do tych zmian. Przyjrzyjmy się wspólnie trendom w projektowaniu stron, które będą obowiązywały w roku 2021!

Nowa normalność trzyma nas wszystkich mocno w garści: technologiastała się dla nas ważniejsza i bardziej zintegrowana z naszym codziennym życiem. W rezultacie, nasza technologia musi zmierzać w kierunku, który pozwoli na większą personalizację, integrację i interakcję. I dla nas wszystkich. 

Lockdown, home office i podobne rozwiązania przesunęły naszą uwagę w kierunku technologii cyfrowych. Trend ten powoduje gwałtowny wzrost popularności wszelkich produktów cyfrowych - to samo dotyczy sektora e-commerce. Nowe realia wymagają od nas większej indywidualności i elastyczności, aby wybić się na tle większej konkurencji.

W tej chwili ważne jest, aby skupić się na użytkownikach końcowych. Chodzi o to, by ich zadziwić, zintegrować i spersonalizować internet. I aby zawsze skupiać się na maksymalnej funkcjonalności.

W nowym roku widzimy więc więcej możliwości personalizacji. Coraz częściej spotykamy się z możliwością przełączania pomiędzy trybem Dark/Light, a nawet dostosowywania kolorystyki samego projektu.

Widzimy projekty, które są bardziej śmiałe i mniej symetryczne. Utrzymuje się kontr-trend w kierunku integracji kolorów i elementów organicznych. Osiągamy więcej osobowości poprzez kolaże, mieszane media i integrację efektów animacji. Przyjrzyjmy się teraz szczegółowo trendom w projektowaniu stron internetowych na rok 2021!

1. przewijanie

Paralaksa i animacje przewijania paralaksy

Paralaksa, zwłaszcza z prostymi obrazami, to coś, co stosujemy od kilku lat. Ostatnio dodaliśmy złożone animacje parallax scroll. Odpowiednio użyte, przekształcają stronę z płaskiego tła 2D w interaktywny cyfrowy świat - porównywalny do sceny teatralnej.

Co to jest efekt paralaksy?

Efekty paralaksy występują, gdy elementy znajdują się w różnych odległościach od siebie. Jeśli poruszają się one poprzez przewijanie, postrzegamy ich ruch jako różne prędkości.

Proszę zwrócić uwagę: Dla użytkowników, którzy cierpią na zawroty głowy, zbyt duży ruch na stronie może powodować dyskomfort.

Kilka wskazówek, jak skutecznie zintegrować efekt paralaksy:

  • Upewnij się, że ważne informacje są zawsze prezentowane w jasny sposób i nie są tłumione przez efekt.
  • Upewnij się, że wszystkie funkcje Twojej strony są zachowane na wszystkich urządzeniach - nawet w nieoptymalnych warunkach, takich jak słaby zasięg Internetu.
  • Zminimalizuj użycie efektów paralaksy.
  • Rozważ możliwość włączenia opcji wyłączenia efektu.
Trendy w projektowaniu stron internetowych 2021

Strona gry Firewatch wykorzystuje osiem różnych obrazów PNG w nagłówku, które są animowane razem, aby oddać wrażenie prawdziwego krajobrazu. W wersji mobilnej natomiast efekt paralaksy zastąpiony jest statycznym obrazem.

Animacje przewijania

Rozległe animacje przewijania również nie są czymś zupełnie nowym, ale do tej pory poświęcano im mniej uwagi - zapewne nie tylko dlatego, że ich komponowanie wymaga umiejętności rysowania. Jak zawsze, mniej znaczy więcej. Dobrze użyte, animacje przewijania nadają stronie harmonijny przepływ. 

Trendy w projektowaniu stron internetowych 2021

ToyFight jest agencją kreatywną z siedzibą w Manchesterze. Dzięki sprytnemu wykorzystaniu animacji wyzwalanych przez przewijanie, agencja dodaje swojej stronie życia i osobowości. Nawet na mniejszych urządzeniach animacje działają - nawet jeśli czas ładowania jest nieco zakłócony.

Trendy w projektowaniu stron internetowych 2021

Firma Prevint oferuje całościową koncepcję przeciwdziałania przemocy seksualnej. Poprzez minimalne wykorzystanie animacji przewijania, trzy najważniejsze środki ostrożności w celu zapobiegania są wizualizowane. Szczególne jest tutaj zastosowanie przewijania w pionie i poziomie: Główna nawigacja znajduje się na poziomie pionowym, natomiast przewijanie poziome pozwala zagłębić się w dany temat.

Strzałki nawigacyjne na dole ekranu zapewniają dodatkową orientację. Po stronie mobilnej, nawigacja odbywa się poprzez samo stukanie w przyciski.

Przewijanie poziome

Mimo, że opinie na temat przewijania poziomego były w przeszłości bardzo zróżnicowane, coraz częściej widzimy strony internetowe, które z niego korzystają. Szczególnie z punktu widzenia doświadczenia użytkownika, ich zastosowanie było wcześniej uważane za raczej wątpliwe.

Trendy w projektowaniu stron internetowych 2021

Strona Home Société, zbudowana jako one pager, działa całkowicie w orientacji poziomej. Przyklejona nawigacja, którą zazwyczaj znajdujemy na górze, znajduje się po lewej stronie. Działa to w ten sam sposób z Anchor Linkami, jak w pionowo zorientowanym One Pagerze. Na urządzeniach mobilnych strona wyświetla się w pionie.

Trendy w projektowaniu stron internetowych 2021

Strona Kwok Yin Mak to portfolio projektowe, które przewija się poziomo przez wszystkie zintegrowane strony. Różnica w stosunku do Home Société polega na zastosowaniu Infinite Scrolling: jeśli dojdziesz do końca strony, zostaniesz niezauważalnie przeniesiony z powrotem na jej początek. Ta strona również nie wymaga przewijania w poziomie na urządzeniach mobilnych.

Kilka wskazówek, jak skutecznie zintegrować przewijanie w poziomie:

  • Daj swoim użytkownikom plan B, taki jak strzałki lub lepkie menu, aby mogli poruszać się po Twojej stronie.
  • Zastanów się, które treści na Twojej stronie skorzystają na przewijaniu poziomym.
  • Staraj się trzymać jednego kierunku tak bardzo, jak to tylko możliwe. Zbyt częste przełączanie się pomiędzy kierunkami będzie dezorientować użytkowników.
  • Uważaj na mieszankę długich tekstów i poziomego przewijania. Taki układ może spowodować, że teksty będą mniej czytelne.
Jaka czcionka pasuje do mojej strony?

Odpowiednia czcionka sprawia, że strona staje się o wiele bardziej interesująca, nie tylko wizualnie. Czcionki mają decydujący wpływ na to, czy fragmenty tekstu są ignorowane czy czytane. W tym Post Pokażę Ci jak znaleźć idealną czcionkę dla Twojej strony!

Scrollytelling

Scrollytelling oznacza wizualne opowiadanie historii poprzez animowane przewijanie. Nadaje to stronie osobowość i poczucie interaktywności. Długie treści prezentowane są w przystępny sposób. Historie są budowane w ciekawszy sposób i przekazywane w bardziej atrakcyjny sposób. Internet jest coraz częściej wykorzystywany jako medium do interaktywnego opowiadania historii. 

Trendy w projektowaniu stron internetowych 2021

New York Times stosuje tu stosunkowo minimalistyczne podejście. Obraz nagłówka składa się z efektu paralaksy, po którym następuje duża ilość tekstu. Jest to zapakowane w przejrzyste akapity i jest wizualnie wspierane przez paralaksę w stylu komiksowym.

Najlepsze praktyki, wskazówki i wytyczne w projektowaniu stron internetowych

Co decyduje o dobrym projekcie strony internetowej? A co w ogóle definiujemy jako standard projektowy? Najważniejsze wskazówki dotyczące udanych stron internetowych można znaleźć w moim artykule na temat najlepszych praktyk w projektowaniu stron internetowych.

Trendy w projektowaniu stron internetowych 2021

Ciekawym przykładem jest również Webflow. Strona zaprasza w podróż przez historię sztuki w poszukiwaniu trendów web designu przyszłości.

Trendy w projektowaniu stron internetowych 2021

Efekt ten nie traci na atrakcyjności również w ruchu.

Trendy w projektowaniu stron internetowych 2021

Canals-amsterdam.nl łączy w sobie scrollytelling z nawigacją poziomą, animacją i paralaksą. Szczególny szczegół: menu przyklejone zmienia kolor tła w zależności od koloru bieżącej pozycji. Więcej informacji na ten temat można znaleźć w Przewodniku Scrollytelling.

Przewijanie kart

Przez przewijanie kart rozumiemy przewijanie w pionie lub poziomie, które powoduje przejście do następnego okna, zanim przejdziemy dalej. Można to wizualnie podkreślić, np. poprzez kolorowe separacje, które oddają wrażenie kart, jak w przykładzie Green Meadow.

Trendy w projektowaniu stron internetowych 2021

Inne cechy szczególne to animacje tekstu, które ciągle się przeładowują, a także nieskończone przewijanie, które daje nam poczucie nieskończonej strony.

2. Kompozycja i układ projektu

Integracja cech fizycznych promowanego produktu.

Trendy w projektowaniu stron internetowych 2021

Ora London sprzedaje między innymi lakiery do paznokci. Do zaprojektowania szaty graficznej swojej strony internetowej używają tekstury własnego produktu.

Trendy w projektowaniu stron internetowych 2021

Na stronie internetowej Main Squeeze Juice znajdują się plamy nawiązujące do barw soków owocowych tej marki. Efekt ten jest również wykorzystywany w przypadku niektórych nagłówków.

Trendy w projektowaniu stron internetowych 2021

Ora The Floral Agency wizualnie podkreśla swoją stronę internetową kwiatami z ich oferty. 

Neomorfizm

Neumorfizm lub nowy morfizm jest już od dłuższego czasu uznawany za trend. Powody, dla których minimalistyczne projekty zostały potraktowane z niechęcią w kręgach kreatywnych są dwa:

  1. Neumorfizm jest trudny do odtworzenia. Jeśli projekt nie spełnia określonych parametrów, bardzo szybko zacznie wyglądać nieprofesjonalnie.
  2. Ze względu na delikatne cienie i niski kontrast, rozróżnienie poszczególnych elementów projektu neumorfistycznego może być trudne dla end-usera. 

W 2021 roku trend Neumorphism ma się dalej rozwijać. Szablon Neu Vision pokazuje przyjazną dla użytkownika twarz Neumorfizmu.

Trendy w projektowaniu stron internetowych 2021
Tutorial: Jak tworzyć nowe elementy morfizmu

Dzięki narzędziu Neumorphism.io możesz spróbować swoich sił w Neumorfizmie. Pakiet zawiera w sobie również odpowiedni kod CSS. Więcej informacji na ten temat znajdziesz w tym artykule.

Kompozycje abstrakcyjne, kolaż i mixed media

Jak wspomniano wcześniej, strony internetowe mogą pokazać więcej osobowości. Jednym ze sposobów na osiągnięcie tego celu są abstrakcyjne kompozycje lub kolaże. Dozwolone jest również mieszanie różnych mediów - np. ręcznie rysowanych ilustracji z perfekcyjnymi geometrycznymi kształtami.

Trendy w projektowaniu stron internetowych 2021

City Circus na całej swojej stronie internetowej wykorzystuje wyłącznie kolaże.

Efekt rozmycia i oszronionego szkła

Efekt oszronionego szkła jest idealny do zwiększenia czytelności tekstu na obrazach. Może być również używany jako efekt hover. Tutorial jak zaimplementować efekt oszronionego szkła w CSS można znaleźć tutaj.

Trendy w projektowaniu stron internetowych 2021
Źródło: Codepen.io

3. Kolory

Organiczne i nie rzucające się w oczy

Trendy w projektowaniu stron internetowych 2021

Strona pureorganix.ca ma tendencję do używania niewielu i jasnych, naturalnych kolorów. Odcienie zieleni pojawiły się już jakiś czas temu i pozostaną tematem przewodnim również w 2021 roku.

Czerń i biel

Trendy w projektowaniu stron internetowych 2021
strona internetowa: Baza danych UX

Zupełny brak kolorów sprawia, że strona wygląda minimalistycznie i czysto, bez zbędnego bałaganu. Poważny akcent stworzony przez pominięcie przyjaznych odcieni został dobrze zrównoważony dzięki wykorzystaniu ilustracji przez UX Database.

UX Design & Web Usability

Dlaczego jako projektant stron internetowych powinieneś/łaś interesować się użytecznością i doświadczeniem użytkownika? Jak naprawdę osiągnąć wartość dodaną dla użytkowników dzięki dobremu UX? O tym i o wielu innych rzeczach opowiem Ci w tym artykule.

4. 3D

Ikony i obrazy

Podobnie jak w przypadku wirtualnej rzeczywistości (VR), już od dłuższego czasu czekamy na przełom w dziedzinie obiektów 3D. Jak na początku każdego roku, elementy 3D i VR będą odgrywać coraz większą rolę. Nie przewiduje się, aby w 2021 r. miało być inaczej.

Elementy 3D będą coraz częściej wykorzystywane w 2021 roku: na przykład jako zamiennik ikon i ilustracji 2D, do przedstawiania produktów oraz jako geometryczne elementy projektowe.

Zobaczymy również 3D jako interaktywną część strony, jak w przypadku agencji Dogstudio.

Trendy w projektowaniu stron internetowych 2021

Albo jako element statyczny lub animowany, co ilustruje kolejny przykład.

Trendy w projektowaniu stron internetowych 2021
Strona internetowa: https://www.yaya.co/

E-Commerce

Rzeczywistość rozszerzona była już w przeszłości sporadycznie wykorzystywana do celów e-commerce. Tak jak w przypadku aplikacji IKEA.

Trendy w projektowaniu stron internetowych 2021

Diesel, z drugiej strony, polega bardziej na interaktywnej odmianie 3D.

Trendy w projektowaniu stron internetowych 2021

Oba podejścia mają sens dla danego produktu. Możliwość wirtualnego przetestowania mebli w przyszłej aranżacji nie tylko niweluje szanse na dokonanie złego zakupu. Aplikacja jest również zabawna i zachęca do dekorowania i robienia zakupów.

Diesel, z drugiej strony, stara się stworzyć rodzaj trójwymiarowego odczucia , pozwalając użytkownikom na zbadanie i wirtualne dotknięcie produktu przed jego zakupem.

W przeszłości integracja elementów rozszerzonej/wirtualnej rzeczywistości i elementów 3D była często bardzo kosztowna i dlatego zarezerwowana dla większych firm. Dzięki nowym narzędziom integracja rzeczywistości rozszerzonej (AR) stała się możliwa również dla mniejszych przedsiębiorstw.

Oto dwa przykłady:

5. Content

Sieć staje się bardziej osobista, bardziej interaktywna i dostosowuje się do nas

Google oferuje przykład interaktywności ze swoją Operą Blob. Własne kreacje mogą być również nagrywane i w ten sposób udostępniane wszystkim.

Trendy w projektowaniu stron internetowych 2021

Na stronie kontaktowej Madwell każdy element graficzny jest interaktywny.

Trendy w projektowaniu stron internetowych 2021

Wiele opcji personalizacji oferuje strona Sennep .

Trendy w projektowaniu stron internetowych 2021

Webdesign for Causes

Co więcej, rok 2020 właśnie pokazał, że wszyscy możemy, a nawet częściowo musimy, połączyć się ze sobą w sieć. Sieć stała się bardziej ludzka. Projektowanie stron internetowych dla celów społecznych staje się coraz bardziej istotne. Etyczne strony internetowe, zielone strony internetowe, strony internetowe, które stają w obronie nas samych i naszych bliźnich (aby wymienić tylko kilka tematów) znacznie zyskały na znaczeniu w ubiegłym roku. Możemy się spodziewać, że ten trend będzie się silnie utrzymywał co najmniej do 2021 roku.

Wnioski

Kontakt z przyjaciółmi z całego świata, praca zdalna, marketing produktowy i usługi online - to nic nowego. Do tej pory był to element rzeczywistość raczej dla wąskiej części społeczeństwa. 

Wiele firm i osób w tym kraju podchodziło ma raczej tradycyjne podejście: Mamy możliwości obecności w sieci i nawiązywania kontaktów, ale korzystamy z nich tylko w drugiej kolejności. Na pierwszy plan wysuwał się kontakt osobisty. 

Funkcjonalność naszych produktów online jest zatem szczególnie ważna - również dlatego, że w tych realiach konkurencja znacznie wzrasta. W przyszłości nie możemy już pozwolić sobie na ignorowanie kwestii dostępności.

Oczywiście, rozmowa wideo nie zastąpi ważnego spotkania twarzą w twarz. Ale być może dzięki obecnej sytuacji nauczymy się rozróżniać, co jest naprawdę ważnym spotkaniem, a co można załatwić za pomocą telefonu. Takie podejście często znajduje odzwierciedlenie w jakości naszej obecności cyfrowej. 

Sformułowania typu "Jeśli ktoś chce wiedzieć, to do nas zadzwoni lub skieruje do nas pytanie" były obecne w przeszłości przy planowaniu projektów internetowych. W czasach homeoffice i izolacji, nie mamy już tego komfortu.

Dlatego też projektowanie mobilne, wydajność, użyteczność i tym podobne czynniki pozostaną ważnymi czynnikami przy tworzeniu stron internetowych w 2021 roku.

Trendy w projektowaniu stron internetowych 2021
Twitter

Wczytując tweeta, akceptujesz politykę prywatności Twittera.
Dowiedz się więcej

załaduj treść

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04
Państwa pytania dotyczące trendów w projektowaniu stron internetowych 2021
Podziel się z nami w komentarzu własnymi pytaniami przewidywaniami dotyczącym trendów w projektowaniu stron internetowych na 2021 rok. Chcesz być informowany/a o nowych postach w tematyce WordPress? Zaobserwuj RAIDBOXES na Twitterze Facebook oraz poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.