Trendy w projektowaniu stron internetowych 2021

Web design trends 2021: efekty 3D, scrollytelling i więcej interakcji

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ę razem 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 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, by skupić się na użytkownikach końcowych. Chodzi o to, by ich zadziwić, zintegrować i spersonalizować internet. I zawsze skupiać się na maksymalnej funkcjonalności.

Między wymiarem a interakcją

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!

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.

Uwaga: 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 używa ośmiu różnych obrazów PNG w nagłówku, które razem dają wrażenie prawdziwego krajobrazu, gdy są animowane. Natomiast w wersji mobilnej efekt paralaksy jest zastąpiony 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 - prawdopodobnie nie tylko dlatego, że ich komponowanie wymaga umiejętności rysowania. Jak zawsze, mniej znaczy więcej. Dobrze wykorzystane animacje przewijania nadają twojej 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, widzimy, że strony internetowe coraz częściej z niego korzystają. Szczególnie z punktu widzenia doświadczenia użytkownika, ich użycie było wcześniej uważane za dość 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.
  • W miarę możliwości staraj się trzymać jednego kierunku. Zbyt częste przełączanie się między kierunkami dezorientuje użytkowników.
  • Należy uważać na łączenie długich tekstów i przewijanie w poziomie. 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. To nadaje stronie osobowość i poczucie interaktywności. Długie treści są przedstawione w sposób łatwy do przyswojenia. Historie są budowane w bardziej interesujący 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, porady i wskazówki w Webdesign

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.

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.

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

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.

Ikony i obrazy

Podobnie jak w przypadku rzeczywistości wirtualnej (VR), długo czekaliśmy na wielki przełom w dziedzinie obiektów 3D. Jak na początku każdego roku, elementy 3D i VR będą odtą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 r.: na przykład jako zamiennik ikon i ilustracji 2D, do przedstawiania produktów oraz jako geometryczne elementy projektu.

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

Trendy w projektowaniu stron internetowych 2021

Albo jako element statyczny, a dokładniej animowany, jak to widać w następnym przykładzie.

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

E-Commerce

W przeszłości rzeczywistość rozszerzona była sporadycznie wykorzystywana do celów handlu elektronicznego. 

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:

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.

Zgoda*
To pole służy do weryfikacji i nie powinno być zmieniane.

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 więc 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 pomijanie 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 uczymy się rozróżniać, które spotkania są naprawdę ważne, 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 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

Państwa pytania dotyczące trendów w projektowaniu stron internetowych 2021

Przekaż nam swoje pytania i przewidywania dotyczące trendów w projektowaniu stron internetowych 2021 w komentarzach - jesteśmy ciekawi. Chcesz być informowany o nowych materiałach dotyczących WordPressa? Następnie śledź stronę Raidboxes na Twitterze, Facebooku i za pośrednictwem naszego biuletynu.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany.