Trendy w projektowaniu stron internetowych na rok 2022

Jeśli nauczyliśmy się czegoś w ciągu ostatnich dwóch lat, to tego, że zawsze będziemy musieli dostosowywać się do czegoś nowego. Dotyczy to zarówno życia, jak i projektowania, a gdy wkraczamy w rok 2022, projektanci zaczynają rozumieć chaos życia i wyrażać go poprzez swoje projekty.

Trendy na rok 2022 zmierzają w kierunku odważniejszych, bardziej kreatywnych i interaktywnych projektów. Twórcy skłaniają się do nieco większych zakłóceń i przesuwają granice tego, co uważa się za „dobre” projektowanie stron internetowych.

Rozbudź swoją kreatywność w nowym roku, wdrażając kilka trendów, których spodziewamy się więcej w 2022 r.:

• Interaktywne mini-strony
• Projekty inspirowane stylem retro
• Otwarte projekty koncepcyjne
• Więcej personalizacji
• Obiekty 3D, przewijanie 2D
• Brutalizm-lite
• Glassmorfizm
• Kreatywne efekty przewijania
• Ponadgabarytowa typografia
• Widoczne granice
• Elementy kolażu z abstrakcyjnymi grafikami

Interaktywne mini-strony

Jesteś świetny w tym, co robisz – pokaż to! Prezentowanie swoich umiejętności to mniejsze, bardziej kontrolowane środowisko z wysoce wyspecjalizowanymi treściami, a interakcje to jeden ze sposobów, w jaki projektanci przyciągają nowych klientów. Pokaż potencjalnym klientom, że możesz stworzyć naprawdę jedyne w swoim rodzaju doświadczenia, tworząc coś dla samego kreacji.

Południowokoreański deweloper Jungik Lee stworzył tę mini-witrynę, która pozwala użytkownikom wykonać jedno z trzech prostych zadań. Używa wielu kolorów i prostych wskazówek do tworzenia lub przenoszenia różnych obiektów, a wypełnianie strony kolorowymi kółkami jest naprawdę zabawne.

Projektantka stron internetowych z Amsterdamu, Victoire Douy, wykorzystuje interaktywność w swojej małej witrynie z portfolio, aby przyciągnąć Twoją uwagę. Po prostu przesuwając kursor, możesz zakłócać kolory, szarpać za sznurki, przesuwać obiekty i nie tylko.

Projekty inspirowane stylem retro

Przeciętny wiek projektanta stron internetowych w Stanach Zjednoczonych to 37 lat, co plasuje go mocno w pokoleniu milenialsów. Ponieważ milenialsi byli pierwszym pokoleniem, które naprawdę przyjęło Internet jako codziennych użytkowników, nic dziwnego, że wielu projektantów inspiruje się sztuką, typografią i kolorami, które były popularne we wczesnych dniach sieci.

Wild Souls ma witrynę eCommerce, która łączy kolorowe kształty z nakładającym się stylem, aby stworzyć zabawną, żywą estetykę, która pasuje do firmy spożywczej. Jest sprzedawcą specjalizującym się w orzechach, masłach orzechowych, miodach i marmoladach, a efekty najechania kursorem na ich produkty dodają nowe tekstury i kształty, gustownie nawiązujące do motywów wizualnych inspirowanych latami 90.

Sama Cartoon Network jest marką uwielbianą przez większość pokoleń Y i Z. Witryna internetowa studia wykorzystuje czarno-białą bazę w połączeniu z odważnymi kolorami i zachwycającymi animacjami, co sprawia, że ​​strona jest jednocześnie retro i bardzo modna.

Otwarte projekty koncepcyjne

Być może pandemia wpływa na nasze preferencje projektowe, a także na nasze osobiste zachowanie, ponieważ pojawia się trend pozostawiania dużej ilości otwartej przestrzeni w projektach. Może nie ma sześciu stóp, ale projektanci zostawiają coraz większą przestrzeń między sekcjami, skupiając się na nagłówkach, a czasem całkowicie pozbywając się zdjęć bohaterów, dając użytkownikom dużo miejsca do oddychania.

Wszelkiego rodzaju alkohole są ostre i rześkie, a strona internetowa destylarni Bear Creek w Denver w stanie Kolorado jest również wolna od dodatkowych dodatków. Koncepcja projektu ich strony internetowej jest tak czysta, jak udoskonalana przez nich wódka, bourbon, rum i whisky.

Atalson to firma zajmująca się projektowaniem produktów i opakowań, pozyskiwaniem materiałów i produkcją z siedzibą w Nowym Jorku. Zrównoważony rozwój leży u podstaw ich procesu, a idea czystej produkcji jest wizualnie odzwierciedlana w ich miejscu poprzez wykorzystanie białej przestrzeni. Ta otwarta przestrzeń sprawia, że ​​zaprojektowane przez nich produkty są w centrum uwagi, a efekty najechania na obrazy wyrażają ogólny zarys produktu lub wyjaśniają wartości firmy.

Więcej personalizacji

Ponieważ użytkownicy spędzają więcej czasu i pieniędzy w Internecie, dostawcy znajdują nowe sposoby na dotarcie do szerszej grupy odbiorców. Aby to zrobić, wielu zwiększa poziom personalizacji dostępnych w swoich witrynach i aplikacjach, w tym znaczne ulepszenia funkcji włączania, które wykraczają poza standardowe najlepsze praktyki ułatwień dostępu, których powinny przestrzegać wszystkie witryny.

Kategoria „uroda” na Pintereście jest jedną z najczęściej wyszukiwanych w witrynie, a firma dostrzegła potrzebę większej otwartości dla wszystkich swoich użytkowników. Pinterest tworzy teraz szybsze, bardziej spersonalizowane doświadczenia w tej kategorii, oferując funkcję „zakresu odcieni skóry”. Dla wielu użytkowników jest to odpowiedź na przesycenie jaśniejszymi odcieniami skóry w aplikacji, dzięki czemu wszyscy użytkownicy Pinteresta mogą szybciej i łatwiej znaleźć odpowiedni dla siebie styl.

Mastercard znalazł sposób, aby umożliwić większej liczbie posiadaczy kart wyrażanie swojej prawdziwej tożsamości podczas transakcji, tworząc system „True Name”. Dzięki temu posiadacze kart trans- i niebinarnych Mastercard mogą mieć swoje prawdziwe imiona wymienione na swojej karcie zamiast martwego imienia, niezależnie od tego, czy ich nazwisko zostało zmienione zgodnie z prawem.

Obiekty 3D, przewijanie 2D

Projekty z modelami 3D i płaską prezentacją treści 2D wyglądają przekonująco i całkowicie spójnie. Prezentacja łatwo przyswajalnej treści w przewidywalny sposób z interaktywnym elementem 3D w tle jest szczególnie pomocna, gdy pomagasz użytkownikom lepiej zrozumieć koncepcję fizyczną.

Witryna promująca tę nową dzielnicę biznesową w pobliżu serca Moskwy w Rosji jest doskonałym przykładem skupienia się na centralnym punkcie 3D, któremu towarzyszą proste, płaskie treści. Strona główna pokazuje ruchomy model Skolkovo Park, ale nie przysłania on wyraźnie umieszczonych treści.

One Ocean Science to szczyt wymiany wiedzy, którego celem jest połączenie światowych liderów w dziedzinie ochrony oceanów i badań z perspektywy multidyscyplinarnej. Strona główna ich witryny wita Cię przewijaniem 2D nad trójwymiarowym modelem kuli ziemskiej, który porusza się podczas przewijania, podkreślając różne obszary i prowadzone tam badania.

Brutalizm-lite

Brutalizm odnosi się do bardzo blokowego, geometrycznego, surowego stylu sztuki i architektury. W projektowaniu stron internetowych ten zuchwały, ale prosty styl wyróżnia się, ponieważ odchodzi od niektórych tradycyjnych zasad obowiązujących w witrynach internetowych na rzecz minimalizmu. Często zrobione w czerni i bieli, witryny w tym stylu zawierają niewiele dodatków i pogrubiony tekst, aby uzyskać surowe wykończenie.

Włoska agencja kreatywna Caroselling ma tożsamość marki, która polega na szczerości i otwartości. Wierzą w ustalanie realistycznych oczekiwań, przemyślenie konsekwencji swojej strategii oraz respektowanie ograniczeń czasowych i budżetowych swoich klientów. Brutalistyczna witryna pomaga im zilustrować ich historię jako bezproblemowego, bezproblemowego partnera agencji.

Mieszkający w Paryżu, urodzony w Kalifornii projektant Rick Owens opisał kiedyś swoją filozofię projektowania mebli jako „brutalistyczne futro na brutalistycznej skale obok brutalistycznego ognia w brutalistycznej jaskini”. Na stronie internetowej z jego ubraniami i akcesoriami nie znajdziesz mebli, ale znajdziesz wyraźną inspirację brutalistyczną w obrazach i układzie.

Glassmorfizm

Dokładnie tak, jak sama nazwa wskazuje, morfizm szklany to sztuka sprawiania, że ​​ekran wygląda tak, jakby był zrobiony ze szkła lub przykryty szkłem, zwykle używany do rozmycia tła w interfejsie użytkownika. W 2022 r. trend ten powinien nadal zyskiwać na popularności, ponieważ projektanci przesuwają granice front-endu, tworząc animowane obiekty i tekst przypominające szkło.

Agencja produktów cyfrowych Dovetail Studios animowała ten zestaw szklanomorficznych pierścieni, które obracają się pod różnymi kątami. Przyciąga wzrok i pokazuje umiejętności modelowania 3D ich zespołu. Inne ikony w witrynie również odzwierciedlają ten efekt.

Inna cyfrowa agencja kreatywna, Lo and Behold Studios, również wykorzystuje na swojej stronie głównej animowane obiekty Glassmorphic. Jednak lżejszy ogólny motyw nadaje ich witrynie zupełnie inny efekt niż użytkownik, który przegląda jaskółczy ogon.

Kreatywne efekty przewijania

Wielu projektantów rozszerza ubiegłoroczny trend przewijania poziomego i jeszcze bardziej eksperymentuje z efektami przewijania. Niezależnie od tego, czy jest to poziome, obok siebie, czy wielokierunkowe, zmiana kierunku podróży użytkownika przez witrynę jest łatwym sposobem na zapewnienie mu ogólnie bardziej dynamicznego doświadczenia.

Holenderska firma meblowa Moooi przenosi użytkowników coraz głębiej w swoje kolekcje podczas przewijania. Ich strona oferuje trzy doświadczenia: Beauty Blooms, Defy Gravity i Paper Play. W każdym z nich ekran otwiera się, pokazując kolekcje po kolekcji, a podczas przewijania zanurzysz się w nowe wzory i winiety.

Kayla Fisher, fotograf, o której stronie rozmawialiśmy wcześniej, używa przewijania obok siebie, utrzymując przyklejone menu po lewej stronie ekranu. Dzięki temu możesz zobaczyć jej pracę w atrakcyjny wizualnie sposób, nie tracąc z oczu dużych przycisków, które zmuszają użytkowników do głębszego nurkowania.

Ponadgabarytowa typografia

Twoja witryna powinna zawierać śmiałe oświadczenie o tym, kim jesteś jako firma. Wiele firm poważnie traktuje ten pomysł, używając zbyt dużej typografii w nagłówkach, a nawet zamiast wizerunku bohatera.

Kolektyw badawczy HUMAIN pracuje nad wypełnieniem luki między ludzkimi doświadczeniami a innowacjami technicznymi. Wspierany przez Cronos Group, ich celem jest znalezienie nowych sposobów wykorzystania nowych technologii w celu poprawy ludzkich doświadczeń zarówno w Internecie, jak iw życiu. Używając tekstu zamiast obrazu bohatera, ta firma o skomplikowanej historii wykrzykuje swoją misję od momentu wejścia na ich stronę.

Kiedy myślisz o słuchawkach, pomysły, które przychodzą do głowy, są w równym stopniu słuchowe, co wizualne. Nazwa firmy AIAIAI zajmująca się słuchawkami jest tyleż wykrzyknikiem, co nazwą i krzyczy odważne oświadczenie użytkownikom, którzy odwiedzają ich witrynę. Duży tekst przedstawia firmę, po którym następuje mniejszy, sąsiadujący z bohaterem film tuż pod zakładką, zaburzający tradycyjny schemat obrazu bohatera, a potem tekstu.

Widoczne granice

Widoczne obramowania nadają strukturę Twojemu projektowi i przyciągają uwagę użytkowników poprzez treści. Używając prostych linii, obramowania mogą pomóc w projektowaniu dla klientów, którzy potrzebują schludnej i uporządkowanej witryny. Z drugiej strony, zabawne, zabawne, interaktywne obramowanie może wywołać dodatkowe zainteresowanie wizualne dla odwiedzających online, używając odważnych kolorów lub interaktywnych efektów.

Niezależna agencja Bonjour Paris łączy widoczne obramowania z poziomym zwojem, dzięki czemu strona jest minimalistyczna, ale wciąż ma wiele intryg. Granice szkicu są kontynuowane w witrynie do sekcji projektu, gdzie przybierają nowy kształt, nie wyglądając na niejednoznaczne ani zajęte.

Australijska restauracja Curry Cafe ma dwie lokalizacje, a przewijana ramka ich witryny zapewnia solidną strukturę, dzięki której użytkownicy mogą korzystać z pozostałych bardzo kolorowych i angażujących treści.

Elementy kolażu z abstrakcyjnymi grafikami

Przeszliśmy długą drogę od początku istnienia sieci. Tam, gdzie niektórzy projektanci przyjmują estetykę strukturalną, inni idą w przeciwnym kierunku. Odważne kolory, nakładające się obrazy i wiele tekstur mogą łączyć się ze sobą płynnie, gdy każdy z elementów jest przemyślanie zaprojektowany.

Illuminating Radioactivity to edukacyjna strona internetowa stworzona wspólnie przez Stimson Center, projekt Reinventing Civil Defense oraz Bombshelltoe Policy x Arts Collective. Opowiada historię i znaczenie słowa „radioaktywność” oraz nasze skojarzenia z nim, a także jego rolę w nauce, rozrywce, medycynie i nie tylko. Podczas przewijania jesteś zasypywany starymi obrazami, które pomagają opowiedzieć historię w połączeniu z jasnymi, abstrakcyjnymi kształtami.

Australijska firma The Loved Up Co pomaga urozmaicić wieczory randkowe dzięki poręcznym zestawom, które zapewniają wszystko, czego potrzebujesz na noc z partnerem. Na ich stronie głównej znajdują się ludzie w stylu kolażu, na których ciała są zaczerpnięte z czarno-białych zdjęć, a głowy są nałożone na uśmiechnięte usta, kwiaty i koktajle! Abstrakcyjne kształty, okręgi i zawijasy pojawiają się w całym projekcie, aby kontynuować poruszanie wzrokiem po ich zawartości.

Projektowanie przyszłości sieci

Obserwuj te trendy i wypróbuj kilka pomysłów, które przykują Twoją uwagę. Jeśli masz oko do śledzenia trendów, być może zauważyłeś nawet, że niektóre z trendów w projektowaniu stron internetowych w 2022 roku są rozszerzeniami lub kombinacją trendów z zeszłego roku.

Widzisz kogoś, kogo kochasz? Coś, co pominęliśmy? Daj nam znać w komentarzach poniżej i pamiętaj: style, które przetrwają i te, które przemijają, wszystko zależy od tego, co projektanci tacy jak Ty zdecydujesz się stworzyć ze swoimi klientami w tym roku!