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!
Web design Trends 2021: Scrolling
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?
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.
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.
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.
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.
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.
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?
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.
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
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.
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.
Web design trends 2021: ekscytujące układy
Integracja cech fizycznych promowanego produktu.
Ora London sprzedaje między innymi lakiery do paznokci. Do zaprojektowania szaty graficznej swojej strony internetowej używają tekstury własnego produktu.
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.
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:
- Neumorfizm jest trudny do odtworzenia. Jeśli projekt nie spełnia określonych parametrów, bardzo szybko zacznie wyglądać nieprofesjonalnie.
- 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.
Tutorial: Jak tworzyć nowe elementy morfizmu
Kompozycje abstrakcyjne, kolaż i mixed media
Jak już wspomniano, strony internetowe mogą pokazać więcej osobowości. Jednym ze sposobów na osiągnięcie tego celu są kompozycje abstrakcyjne lub kolaże. Dozwolone jest także mieszanie różnych mediów - na przykład ręcznie rysowanych ilustracji z doskonałymi kształtami geometrycznymi.
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.
Web design trends 2021: Kolory
Organiczne i nie rzucające się w oczy
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
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
Webdesign Trends 2021: Efekty 3D
Ikony i obrazy
Podobnie jak w przypadku rzeczywistości wirtualnej (VR), długo czekaliśmy na to, by obiekty 3D w końcu dokonały wielkiego przełomu. Jak na początku każdego roku, elementy 3D i VR będą odgrywały coraz większą rolę. Nie przewiduje się, aby w 2021 roku było 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 i jako geometryczne elementy projektu.
Zobaczymy również 3D jako interaktywną część strony, jak w przypadku agencji Dogstudio.
Albo jako element statyczny, a dokładniej animowany, jak to widać w następnym przykładzie.
E-Commerce
W przeszłości rzeczywistość rozszerzona była sporadycznie wykorzystywana do celów handlu elektronicznego.
Diesel, z drugiej strony, polega bardziej na interaktywnej odmianie 3D.
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:
Web design Trends 2021:Treść
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.
Na stronie kontaktowej Madwell każdy element graficzny jest interaktywny.
Wiele opcji personalizacji oferuje strona Sennep .
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.
"*" wyświetla wymagane pola
Wnioski dotyczące trendów w projektowaniu stron internetowych 2021
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. Być może jednak dzięki obecnej sytuacji uczymy się rozróżniać między tym, co jest naprawdę ważnym spotkaniem, a tym, 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 w 2021 roku projektowanie mobilne, wydajność, użyteczność i tym podobne czynniki pozostaną ważnymi czynnikami przy tworzeniu stron internetowych.
Twoje pytania dotyczące trendów w projektowaniu stron internetowych 2021
Podziel się z nami swoimi pytaniami i przewidywaniami dotyczącymi trendów w projektowaniu stron internetowych 2021 w komentarzach - jesteśmy ciekawi. Chcesz być informowany o nowych wpisach w WordPressie? Obserwuj Raidboxes na Twitterze, Facebooku oraz poprzez nasz Newsletter.
