20 dominujących trendów w projektowaniu stron internetowych na rok 2022

Eksperymentalna nawigacja, efekty przewijania i typografia kinetyczna to tylko niektóre z trendów w projektowaniu stron internetowych dominujących w 2022 roku.

Zapoznaj się z pełną listą z przykładami najlepszych projektów stron internetowych w 2022 r., aby zainspirować się do realizacji swoich projektów internetowych w tym roku.

Jednym ze wspólnych tematów wśród tych trendów jest projektowanie ruchu. Gary Simon, doświadczony projektant UI/UX i programista frontend, wierzy, że projektowanie ruchu będzie wszędzie w 2022 roku. Aby zobaczyć kilka przykładów stron internetowych wykorzystujących animacje oparte na przewijaniu, efekty paralaksy, animowane pliki SVG i wiele innych, obejrzyj jego film:

1. Eksperymentalna nawigacja

Co lubimy: Eksperymentalna nawigacja może pomóc w zaangażowaniu i poprowadzić odwiedzających do przeglądania witryny w określony sposób.

Nawigacja eksperymentalna odnosi się do wzorców nawigacji, które obalają tradycyjny wzorzec ( nawigacja wielkimi literami w górnej części ekranu z typografią bezszeryfową). Te eksperymentalne wzorce mogą pomóc wzbudzić zainteresowanie i poprowadzić użytkowników do poruszania się po witrynie w określony sposób.

Weźmy na przykład witrynę portfolio Kim Kneippa. Jeśli klikniesz przycisk Menu w prawym rogu strony głównej, u dołu ekranu pojawi się menu, które wygląda jak spis treści w książce. Każda strona jest ponumerowana, co sugeruje kolejność czytania. Po prawej stronie projekty są również ponumerowane i posegregowane według rodzaju i koloru.

2. Efekty przewijania

Co lubimy: Efekty przewijania mogą stymulować odwiedzających i zachęcać ich do dalszego przewijania.

Efekty przewijania — animacje wyzwalane przez akcję przewijania — mogą tworzyć bardziej dynamiczne środowiska internetowe. Są one coraz częściej używane w interaktywnych witrynach internetowych, aby zaintrygować czytelników, aby przewijali, oznaczają przerwę w treści i tworzą trójwymiarowe wrażenia.

Engineered Floors robi to właśnie za pomocą kombinacji przewijania w poziomie i pionie oraz innych efektów. Na przykład, gdy użytkownik trafi na stronę główną, po prawej stronie zobaczy obraz przedstawiający krzesło. Gdy użytkownik przewija, ten obraz oddala się, ukazując salon, który stopniowo pokrywa się dywanem. To doświadczenie 3D jest zachwycające i pouczające.

3. Typografia kinetyczna

Co lubimy: typografia kinetyczna może zachwycić odwiedzających i pomóc im przetrawić Twoje treści.

Typografia kinetyczna — lub ruchomy tekst — to technika animacji, która istnieje od lat 60., kiedy filmy fabularne zaczęły używać animowanych tytułów początkowych. Może być używany w podobnym celu w projektowaniu stron internetowych, aby natychmiast przyciągnąć uwagę odwiedzającego, gdy trafi on na stronę główną.

Może być również używany do podświetlania ważnych sekcji, prowadzenia odwiedzających podczas przewijania i stopniowego ujawniania informacji, jak w Arcadii.

4. Interakcja przeciągania

Co lubimy: Interakcja przeciągania może zapewnić użytkownikom poczucie kontroli nad ich doświadczeniami.

Interakcje przeciągania mają na celu naśladowanie rzeczywistego, fizycznego działania. Zasadniczo umożliwiają odwiedzającym witrynę podnoszenie i przesuwanie obiektów na ekranie. Ten rodzaj interakcji gestami jest wdrażany w większej liczbie witryn, w szczególności w witrynach e-commerce i portfolio.

Weźmy jako przykład witrynę portfolio Robina Mastromarino. Oprócz klikania elementów sterujących suwaka strony głównej możesz przeciągać i upuszczać różne slajdy, aby przeglądać polecane projekty. Przejścia stron i animacje są oparte na szybkości przeciągania, aby zapewnić użytkownikom poczucie kontroli nad tymi efektami.

5. Retro typografia

Co lubimy: Typografia retro może wzbudzać u odwiedzających witrynę poczucie nostalgii i sentymentalizmu.

Coraz więcej firm używa dużych, odważnych typografii w stylu retro do nagłówków na swoich stronach głównych. Ten styl najlepiej sprawdza się w przypadku krótkiego słowa, a reszta strony jest minimalna i czysta.

Jest to część większego trendu o nazwie „Neue Nouveau”. W swoim raporcie Type Trends Report 2022 firma odlewniczo-technologiczna Monotype opisuje Neue Nouveau jako zwrot w kierunku secesji, który charakteryzował się dekoracyjnymi wzorami, ozdobionymi zakończeniami kresek oraz ukośnymi i trójkątnymi kształtami znaków. Jak wynika z raportu, niektóre z tych samych cech – jak organiczne formy i ozdobniki – widzimy dzisiaj w typografii.

Oto przykład z francuskiej restauracji Picky Joe. Nagłówek o psychodelicznym wyglądzie pasuje do retro wnętrza restauracji, jak widać na zdjęciu po prawej stronie.

Możesz sprawdzić inne projekty stron internetowych restauracji tutaj .

6. Kinografie

Co lubimy: Kinografiki mogą pomóc przyciągnąć uwagę odwiedzających po stronie, nawet w najbardziej skomplikowanych układach.

Kinografiki — wysokiej jakości filmy lub GIF-y, które działają w płynnej, ciągłej pętli — stały się popularnym sposobem na dodanie ruchu i wizualnego zainteresowania do statycznych stron.

Podczas gdy pełnoekranowe pętle były popularne w przeszłości, w tym roku zobaczysz mniejsze kinematografie wkomponowane w złożone układy, aby przyciągnąć wzrok i utrzymać czytelników w ruchu, jak w tym przykładzie ze studia projektowo-technologicznego Grafik.

7. Brutalizm

Co lubimy: Brutalizm stawia na prostotę i funkcjonalność, które są filarami doświadczenia użytkownika.

Aby wyróżnić się w morzu uporządkowanych, uporządkowanych stron internetowych, niektórzy projektanci wybierają bardziej eklektyczne, łamiące konwencje struktury. Choć na początku może to wydawać się niepokojące, wiele popularnych marek wprowadza teraz te agresywnie alternatywne elementy projektu do swoich witryn, takich jak Bloomberg.

Brutalizm pojawił się jako reakcja na rosnącą standaryzację projektowania stron internetowych i często charakteryzuje się surowymi, asymetrycznymi, nonkonformistycznymi wizualizacjami oraz wyraźnym brakiem hierarchii i porządku. Innymi słowy, ciężko to opisać, ale wiesz to, kiedy to widzisz — jak w poniższym przykładzie od Chrissie Abbott.

8. Gradienty monochromatyczne

Co lubimy: Gradienty monochromatyczne są interesujące wizualnie, ale nie rozpraszają.

Gradienty pojawiły się w całej sieci od kilku lat i nadal są bardzo popularne w 2022 roku. W tym roku wiele tła strony internetowej to gradienty, które są zarówno monochromatyczne, jak i pastelowe.

Kendra Pembroke, projektantka wizualna w Red Ventures, powiedziała: „Widzę wiele gradientów, zwłaszcza monochromatycznych, które dają poczucie głębi i wizualnego zainteresowania, nie rozpraszając zbytnio”.

Creative Studio Better Half ilustruje doskonały przykład tego, jak sprawić, by ten efekt wyglądał świeżo i nowocześnie. Łączy odważną typografię i animacje najechania z monochromatycznym, pastelowym żółtym gradientowym tłem.

9. Warstwy

Co lubimy: Nakładanie warstw może pomóc zwiększyć głębię witryny i opowiedzieć historię marki.

Nakładanie na siebie obrazów, kolorów, kształtów, animacji i innych elementów dodaje głębi i tekstury witrynie, która nie zawiera dużej ilości tekstu. Poniżej znajduje się stylowy przykład autorstwa piosenkarza i autora tekstów SIRUP.

10. Tylko tekst

Co lubimy: To minimalistyczne podejście zapewnia odwiedzającym dostęp tylko do najważniejszych informacji.

Niektóre witryny całkowicie wycinają obrazy i widoczne sekcje nawigacji, opierając się na kilku wybranych wierszach prostego tekstu, aby poinformować odwiedzających o ich firmie.

Duńska agencja B14 używa sekcji bohater na swojej stronie głównej, aby na przykład po prostu opisać swoją misję. Jest to nowoczesne, uporządkowane podejście do prezentowania informacji, które stanowi wyraźny kontrast w stosunku do sekcji portfolio, która wykorzystuje kinematografy, animacje najechania i animowany efekt kursora.

11. Animowane ilustracje

Co lubimy: animowane ilustracje pomagają w przekazywaniu złożonych pomysłów i nadają witrynie charakter.

Coraz więcej firm zwraca się do ilustratorów i grafików o tworzenie na zamówienie ilustracji na swoich stronach internetowych. „Ilustracja działa dobrze, aby przekazać bardziej złożone pomysły, których zdjęcia związane ze stylem życia nie zawsze są w stanie uchwycić” – wyjaśnił Pembroke.

W tegorocznych projektach stron internetowych te ilustracje są często animowane, aby dodać interaktywności.

Na przykład, jeśli najedziesz kursorem na jedną z ilustracji w witrynie NewActon (zaprojektowaną przez australijską agencję cyfrową ED), ilustracja i otaczające ją elementy będą się poruszać. Wtedy tylko ilustracja, nad którą się unosisz, będzie nadal poruszać się po małym okręgu. Ten projekt jest również funkcjonalny: każda ilustracja reprezentuje jedną z kategorii z menu nawigacyjnego po prawej stronie.

12. Ultra-minimalizm

Co lubimy: Ultra-minimalizm może pozytywnie wpłynąć na wrażenia użytkownika i wydajność witryny.

Doprowadzając klasyczny minimalizm do skrajności, niektórzy projektanci łamią konwencje dotyczące wyglądu strony internetowej, wyświetlając tylko to, co niezbędne. Ten trend, znany jako „ultra-minimalizm”, może być świetny dla wygody użytkownika i czasu ładowania.

Witryna projektanta Mathieu Bouleta skupia się wokół kilku wybranych linków do ich profili społecznościowych i informacji.

13. Mieszanie tekstu poziomego i pionowego

Co lubimy: Mieszanie tekstu poziomego i pionowego jest sprzeczne z konwencją i dlatego może zachwycić i zaintrygować niektórych użytkowników.

Uwolnienie tekstu od zwykłego wyrównania w poziomie i umieszczenie go na stronie w pionie dodaje trochę odświeżającego wymiaru. Weźmy ten przykład od producentów filmów sportowych Prime Park Sessions, który łączy wyrównanie tekstu w poziomie i w pionie na minimalnej stronie.

14. Geometryczne kształty i wzory

Co lubimy: Geometryczne kształty i wzory mogą skierować uwagę odwiedzających na określone produkty lub CTA.

Na stronach internetowych coraz częściej pojawiają się fantazyjne wzory i kształty, które dodają uroku krajobrazowi, w którym inaczej rządzi płaski i materiałowy design. Kanadyjskie studio projektowe MSDS używa na swojej stronie odważnych, wzorzystych liter.

15. Cienkie czcionki szeryfowe

Co lubimy: Ten trend dodaje marce wyrafinowania.

Ze względu na ograniczenia rozdzielczości ekranu i ogólny brak obsługi czcionek online projektanci przez lata unikali czcionek szeryfowych, aby strony internetowe były czytelne i czyste. Dzięki niedawnym ulepszeniom czcionki szeryfowe przeżyły wielki moment w 2021 roku.

Podczas gdy w zeszłym roku chodziło o duże i odważne szeryfy, 2022 wprowadza cieńsze, lekkie szeryfy, zgodnie z raportem Monotype 2022 Type Trends Report.

Jak widać w The Sill, smukły nagłówek szeryfowy dodaje wyrafinowania i stylu.

16. Nakładający się tekst i obrazy

Co lubimy: nakładający się tekst i obrazy maksymalizują przestrzeń na stronie.

Tekst, który nieznacznie nachodzi na towarzyszące zdjęcia, stał się popularnym efektem na blogach i portfolio. Niezależny dyrektor artystyczny i twórca front-end Thibault Pailloux sprawia, że ​​ich nakładający się tekst wyróżnia się kolorowym podkreśleniem pod każdym tytułem.

17. Zepsute siatki

Co lubimy: Ta łamiąca konwencję technika może sprawić, że standardowe strony lub sekcje witryny będą bardziej interesujące.

Podczas gdy siatki pozostają jednym z najczęstszych i najskuteczniejszych sposobów wyświetlania tekstu i obrazów na stronach internetowych, uszkodzone siatki nadal trafiają do głównych witryn i oferują odejście od normy. Sprawdź na przykład stronę internetową HealHaus. Jego strona główna zawiera obrazy i bloki tekstowe, które nakładają się na siebie.

18. Organiczne kształty

Co lubimy: Organiczne kształty dodają osobowości bez odwracania uwagi od treści.

Dawno minęły czasy rygorystycznych układów siatki i ostrych krawędzi — teraz chodzi tylko o zakrzywione linie i miękkie, organiczne kształty.

„Organiczne kształty mogą pomóc dodać trochę zabawy bez wpływu na sposób wyświetlania informacji” – powiedział Pembroke.

W poniższym przykładzie od Spring Invest organiczne kształty w sekcji bohatera są nie tylko dekoracyjne, ale i funkcjonalne. Żółte kropki działają jak kursor, rysując łzy tworzące logo firmy. Te kształty nie tylko dodają chwili zachwytu – pomagają również wzmocnić tożsamość marki i propozycję wartości, aby „kształtować przyszłość handlu”.

19. Tekstury internetowe

Co lubimy: Tekstury internetowe przyciągają uwagę do określonej sekcji witryny.

Tekstury internetowe to obrazy tła, które wizualnie przypominają trójwymiarową powierzchnię. Dobrze wykonane tekstury mogą zanurzyć widzów w witrynie, angażując zmysły dotykowe, jak pokazuje Color Of Change — tło przypomina teksturę przypominającą taśmę klejącą.

20. Linie siatki

Co lubimy: Ten trend podkreśla siatkę jako zasadę organizującą.

W ostatnich miesiącach linie siatki zaczęły pojawiać się coraz częściej i nie bez powodu. Linie siatki strukturyzują treść w sposób, który ułatwia czytanie i zrozumienie — ale dodaje też nowoczesnej estetyki. W witrynie internetowej Podstawy lepszego Oregonu linie siatki służą do tworzenia przejrzystego układu, który wygląda futurystycznie.

Trendy projektowe, które możesz wykorzystać w swojej witrynie

Oczywiście nie musisz uwzględniać wszystkich tych trendów, aby zbudować jeden z najlepszych projektów stron internetowych w 2022 r. — i tak wątpimy, czy jest to w ogóle możliwe. Jednak nawet dodanie kilku jako widocznych elementów lub subtelniejszych szczegółów może znacznie poprawić UX Twojej witryny, prowadząc do większego zaangażowania, większej liczby kliknięć wezwania do działania i lepszych wyników dla Twojej firmy online.

Uwaga redaktora: Ten post został pierwotnie opublikowany w styczniu 2018 r. i został zaktualizowany w celu zapewnienia kompleksowości.