Trendy w projektowaniu stron internetowych 2021: Scrollytelling, efekty 3D i więcej interakcji

Sonja Hoffmann Ostatnia aktualizacja 22.02.2021
.
. 9 Min.
Trendy w projektowaniu stron internetowych 2021
Ostatnia aktualizacja 22.02.2021

Po roku takim jak ten, którego właśnie doświadczyliśmy, snucie wizji nadchodzących trendów przybiera niemal utopijne rozmiary. W końcu kto by pomyślał w 2020 roku, jak szybko świat może i będzie się zmieniał? I jak szybko potrafimy dostosować się do zmian. Przyjrzyjmy się wspólnie trendom w projektowaniu stron internetowych na rok 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 tym podobne przesunęły naszą uwagę w kierunku technologii cyfrowych. Trend ten powoduje jednak również gwałtowny wzrost produktów cyfrowych. To samo dotyczy sektora e-commerce. Wszystko to wymaga większej indywidualności i umiejętności, aby móc się wybić na tle większej liczby konkurentów.

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. kompozycje i układ projektu

Integracja cech fizycznych produktu, który ma być sprzedawany

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 swojego produktu.

Trendy w projektowaniu stron internetowych 2021

Na stronie internetowej Main Squeeze Juice znajdują się plamy koloru, które mogą przypominać wyprane wersje ich soków owocowych. 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śliła swoją stronę internetową kwiatami z ich oferty. 

Neomorfizm

Neumorfizm lub nowy morfizm jest już od dłuższego czasu uznawany za trend. Ale dlaczego minimalistyczne projekty zostały potraktowane z niechęcią na scenie twórczej jest głównie z tych dwóch powodów:

  1. Neumorfizm jest trudny do odtworzenia. Jeśli nie jest stworzony poprawnie, projekt szybko wygląda dość nieprofesjonalnie.
  2. Ze względu na miękkie cienie i niski kontrast, elementy w nowym projekcie morfizmu mogą sprawiać problemy użytkownikowi końcowemu. 

W 2021 roku trend Neumorphism ma się jeszcze bardziej rozwinąć. Szablon Neu Vision pokazuje przyjazną w codziennym użytkowaniu integrację 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. Odpowiedni kod CSS jest zawarty w pakiecie. Więcej informacji na ten temat można znaleźć w tym artykule.

Kompozycje abstrakcyjne, kolaż i media mieszane

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 wykorzystuje kolaże na całej swojej stronie internetowej.

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. Organiczne odcienie pojawiły się już jakiś czas temu i pozostaną tematem przewodnim w 2021 roku.

Czarny Biały

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

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

UX Design & Web Usability

Dlaczego powinieneś interesować się użytecznością i doświadczeniem użytkownika jako projektant stron internetowych? A 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, jak pokazano w następnym przykładzie.

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 swoim przyszłym domu nie tylko zmniejsza 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 końcowym na zbadanie i wirtualne dotk nię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 firm.

Oto dwa przykłady:

5. zawartość

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

Z dużą osobowością Sennep oferuje swoje usługi.

Trendy w projektowaniu stron internetowych 2021

Projektowanie stron internetowych dla celów

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

Pozostawanie w kontakcie z przyjaciółmi z całego świata, praca zdalna, marketing produktów i usług online - to nic nowego. A jednak do tej pory była to rzeczywistość raczej dla mniejszości społeczeństwa. 

Wiele firm i osób w tym kraju podchodziło do tej pory do tego tematu raczej tradycyjnie: 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 konkurencja jest znacznie większa. A w przyszłości nie możemy już sobie pozwolić na ignorowanie takich tematów jak dostępność.

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 obecności cyfrowej. 

Sformułowania typu "Jeśli ktoś chce wiedzieć, to do nas zadzwoni lub nas zapyta" to coś, co w przeszłości częściej słyszałem przy planowaniu projektów internetowych. Z nowym naciskiem na izolację i biuro domowe, nie mamy już tego luksusu.

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
Powiedz nam swoje pytania i przewidywania dotyczące trendów w projektowaniu stron internetowych 2021 poniżej w komentarzach - jesteśmy podekscytowani. Chcesz być informowany o nowych postach wokół WordPress ? Następnie śledź 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 wymagane oznaczone są *.