2021. (Czy nie jest dobrze dodać „1?!”)

Podczas gdy świat dostosowuje się do nowego roku, projektanci również rozpoczynają nowy rok projektowania. Po roku tak wielu niewiadomych zaczynamy dostrzegać trendy, które przenoszą nas z powrotem w wygodną przeszłość, jednocześnie kładąc nacisk na wrażenia użytkownika zorientowane na przyszłość.

Od pracy online przez zakupy online po kontakty towarzyskie online, ludzie wchodzą w interakcję z Internetem bardziej niż kiedykolwiek wcześniej, a projektanci stosują odważne projekty, aby przekraczać granice tego, czego możemy wspólnie doświadczyć.

Chociaż nie jest to wyczerpujące, oto 11 najważniejszych trendów w projektowaniu stron internetowych, które obserwujemy w 2021 roku:

1. Układy stron z przewijaniem w poziomie
2. Kursory niestandardowe
3. obiekty 3d
4. Doskonałe doświadczenia eCommerce
5. Widoczne linie siatki z grubymi grubościami linii
6. Opcje preferencji użytkownika w witrynach (nie tylko w aplikacjach)
7. Przejście od budowania stron internetowych do budowania rozwiązań
8. Zabawne ilustracje
9. Typografia jako projekt, a nie tylko słowa
10. Kształty geometryczne jako elementy tła
11. WordPress jako CMS

1. Układy stron z przewijaniem w poziomie

Długie przewijanie stron internetowych i projekty paralaksy są popularne od kilku lat. Zbliżając się do 2021 r., zaczynamy dostrzegać zmianę orientacji projektantów, którzy wykorzystują ruch poziomy, aby „skrócić” długość strony.

Podczas gdy wrażenia fizyczne nie różnią się dla użytkownika (zwykle nadal przewijasz mysz w górę iw dół), wrażenia wizualne zapewniają coś nieoczekiwanego i interesującego. Tworzy podróż po witrynie, w której użytkownik nie do końca wie, dokąd go zaprowadzi, co jest rzadkością teraz, gdy opracowaliśmy tak normalne wzorce dla witryn.

Ta strona internetowa Jony Guedj, niezależnej reżyserki filmowej, używa poziomego przewijania do głównej sekcji swojej witryny, aby wyświetlić jej prace. Kolorowy pasek na dole porusza się wraz z myszą, co jest pomocnym sposobem orientacji „gdzie” jesteś na stronie.

LinkSture, agencja zajmująca się projektowaniem i rozwiązaniami eCommerce, używa przewijania w poziomie, aby wyświetlać swoje portfolio również na swojej stronie głównej. Jest jednak dalej na stronie, używając kombinacji ruchów pionowych i poziomych podczas przewijania.

We Virtually Are, studio rzeczywistości wirtualnej, wykorzystuje ruch poziomy, aby sprawić, że poczujesz się, jakbyś przebywał w tym samym miejscu na ich stronie, podczas gdy cała zawartość się zmienia. To zupełnie inne niż to, czego oczekujesz od większości stron internetowych, odpowiednie doświadczenie dla firmy VR, która specjalizuje się w tworzeniu nowych rzeczywistości.

2. Kursory niestandardowe

Szczególnie podoba mi się ten trend, ponieważ wydaje się zarówno znajomy, jak i nowy. Ukłon w stronę niestandardowych kursorów z połowy 2000 roku (przyznaj, że użyłeś jednego na swoim profilu Myspace!), niestandardowe kursory stanowią elegancki powrót.

Od minimalnych kształtów geometrycznych po w pełni interaktywne strony internetowe, dostosowywanie kursora myszy staje się małym sposobem na dodanie powtórzeń do Twojej marki. Wiele agencji używa go do powtarzania kształtów lub kolorów ze swoich logo lub jako sposobu na zaangażowanie użytkowników w witrynie.

W tym przykładzie Rox Studios, butikowej agencji projektowej, mysz jest żółtym kółkiem. Zmienia się w zależności od zawartości tła, nad którą najedziesz, zmieniając się w sam przycisk CTA do „Wyświetlenia” projektu.

Widzisz tę zabawną twarz na pierwszym zdjęciu? To Twoja mysz, gdy wylądujesz na stronie internetowej Concept Studio. Zobaczysz kilka podobnych stworzeń w całej witrynie, a także zobaczysz, jak kursor zmienia się w różnych sekcjach.

Na drugim zrzucie myszka zmienia się w różdżkę, która upuszcza nawet małe cząsteczki podczas poruszania się. Nigdy nie zakłóca treści, a zamiast tego dodaje element fantazji i interaktywności podczas korzystania z ich witryny.

Widzisz to małe białe kółko? To twoja mysz na stronie Etienne Pharabot, front-end developera z Francji. Jest w tym jednak coś więcej niż na pierwszy rzut oka. Gorąco polecam przewijanie różnych zdań w witrynie. (Niektóre niespodzianki emoji czekają!)

Impero, agencja kreatywna, używa dużego żółtego kółka jako kursora, które ładnie znajduje się za każdym tekstem, na który najedziesz kursorem. Wykorzystują to również jako okazję do pomocy użytkownikom w poruszaniu się po witrynie, na przykład wyświetlając „przeciągnij” nad sekcją przewijania w poziomie. (Dobry sposób na połączenie kilku z tych trendów!)

3. obiekty 3d

Podczas gdy płaski projekt rządził przez jakiś czas, zaczynamy dostrzegać trójwymiarowe zmiany elementów w projektach internetowych. Może to być zainspirowane pojawieniem się wirtualnej i rozszerzonej rzeczywistości, przenikającej do naszych dwuwymiarowych doświadczeń przeglądania.

Ten kolorowy przykład z Chip&Byte, agencji z siedzibą we Włoszech, dodaje zabawny element do ich witryny. Gdy poruszasz kursorem (małe szare kółko!), kształty również się poruszają, dodając poczucia wymiaru.

Wydaje się tylko słuszne, że firma o nazwie „Żółty Teleskop” ma na swojej stronie internetowej trójwymiarowy, żółty teleskop z dumą! Kiedy po raz pierwszy wejdziesz na stronę, zobaczysz, jak „sam się buduje”, gdy każdy element układa się na swoim miejscu, co być może jest synonimem tego, jak pomagają swoim klientom budować niezawodne praktyki.

Agencja Beans wykorzystuje trend 3d, aby ożywić swoje ziarna, wyświetlając je w kilku scenach w witrynie. Ten trend to świetny sposób na wprowadzenie ruchu do postaci lub nadanie „realistycznego” wrażenia w porównaniu z abstrakcyjną, płaską ilustracją.

Nie w całości sprzedawany zgodnie z trendem 3d? Zawsze można było zastosować subtelne podejście, jak C-HM Conseil. Elegancka faza i poświata na monochromatycznym tle wtapia się w materiał, nie narzucając się.

4. Doskonałe wrażenia z handlu elektronicznego

Nic dziwnego, że sprzedaż internetowa wzrosła dramatycznie w ciągu ostatniego roku, co doprowadziło również do bardziej celowych, lepszych doświadczeń zakupowych. W końcu, gdy coraz więcej konkurentów spieszy się z umieszczeniem swoich witryn w Internecie, nie jest już dopuszczalne, aby sklep istniał tylko w Internecie; musi być zoptymalizowany i traktować priorytetowo wrażenia użytkownika, aby zapobiec odbijaniu się kupujących.

Minsom, sklep zoologiczny, ułatwia kupowanie zarówno produktów, jak i usług bezpośrednio z ich strony głównej. Dzięki dużym przyciskom i prostym kategoriom nawigacja jest łatwa, dzięki czemu możesz szybko dokonać płatności, zamiast spędzać zbyt dużo czasu na przeszukiwaniu witryny.

Ten sklep z winami, Molly Dooker, to nie tylko piękne i artystyczne doświadczenie, ale także sprawne zakupy. Przeglądanie win, podgląd zawartości koszyka, a następnie kupowanie jest łatwe, a wszystko to przy zachwycającym wyglądzie witryny.

Zoya's Pantry, sklep ze zdrową i ekologiczną żywnością, optymalizuje zakupy, dodając wiele produktów do koszyka. Kiedy klikniesz „Dodaj do koszyka”, Twoje okno się nie zmieni, więc możesz kontynuować przeglądanie, nie tracąc swojego miejsca na stronie. Następnie, aby wyświetlić swój koszyk, wystarczy najechać kursorem na ikonę w górnej nawigacji (zamiast klikać na osobną stronę).

Na stronie The Cool Club zauważysz kilka trendów w projektowaniu z 2021 roku. Od łatwego doświadczenia w handlu elektronicznym po wyświetlanie 3D jednego z ich produktów (gra karciana!), łatwo jest zobaczyć dokładnie, co kupujesz, a następnie umieścić to w koszyku. (Nawet tuż nad zakładką na stronie głównej!)

5. Widoczne linie siatki z grubymi grubościami linii

Siatki są przydatne w projektowaniu stron internetowych od dawna, ale zaczynamy dostrzegać tendencję do nadawania im wyrazistego koloru lub grubej grubości linii. Zamiast ograniczać je do minimum, projektanci skłaniają się do naturalnych kształtów, które tworzą na stronie i wyróżniają linie siatki, aby uzyskać odważny, geometryczny wygląd.

Eat Sleep Work wykorzystuje kolorowe linie, aby ożywić pulpit przypominający system Windows. Chociaż nie są zbyt grube, pogrubiony niebieski sprawia, że ​​siatka się wyróżnia i tworzy celową strukturę w całej witrynie.

To studio rozwoju oprogramowania, OSM, wykorzystuje linie siatki na kilka interesujących sposobów w całej witrynie. Jak widać z tła, skłaniają się do grubej linii i geometrycznego stylu ze swoją marką i powtarzają to na wiele różnych sposobów, w tym z układami siatki.

Nie masz pewności, czy pogrubione linie siatki są odpowiednie dla Twojej witryny? Możesz spróbować podejścia „negatywnej przestrzeni”, takiego jak Rui Ma, projektant i dyrektor artystyczny. Jest to bardziej subtelne niż podkreślanie siatki kontrastowym kolorem, ale szerokie odstępy nadal pozwalają przebić się przez geometryczne wrażenie.

6. Opcje preferencji użytkownika w witrynach (nie tylko w aplikacjach)

Tworzenie unikalnych, spersonalizowanych doświadczeń staje się coraz bardziej popularne, a jednym ze sposobów, w jaki robią to projektanci stron internetowych, jest wbudowanie opcji w projekt witryny. Od preferencji, takich jak tryb jasny lub tryb ciemny, po opcje ułatwień dostępu, takie jak używany język, ten trend polega na zapewnieniu użytkownikowi większej kontroli nad tym, jak wygląda jego witryna.

Od razu po załadowaniu witryny Hoang Nguyen zobaczysz opcję dźwięku. Domyślnym ustawieniem jest „wyłączone”, więc nawet jeśli witryna załaduje się, zanim dokonasz wyboru, nie przestraszy cię (chociaż nawet jeśli byłaby ustawiona na „włączone”, tak by się nie stało; to bardzo uspokajająca muzyka!) . Dzięki temu możesz od razu dostosować swoje wrażenia, a jeśli zmienisz zdanie później, istnieje opcja dźwięku tuż obok jego logo u góry strony.

Witryna Sofii Papadopoulou jest podobna pod tym względem, że oferuje ustawienia dźwięku, ale są one przyklejone w prawym dolnym rogu (gdzie tradycyjnie można znaleźć przyklejony przycisk od tyłu do góry). dźwięk zawierający tylko uspokajające instrumenty (nic szalonego).

Ten przykład od Studio OUAM, agencji kreatywnej z Francji, ułatwia wybór języka, którego chcesz używać podczas przeglądania ich witryny. Wymienione na samej górze menu, dają opcję francuskiego lub angielskiego, dostosowując swoją witrynę do swoich dwóch głównych odbiorców.

7. Przejście od budowania stron internetowych do budowania rozwiązań

Chociaż projektowanie stron internetowych jest tak samo ważne jak zawsze (jeśli nie nawet bardziej krytyczne w dobie koronawirusa), agencje zaczynają koncentrować się na sprzedaży pełnych rozwiązań, zamiast na pojedynczych produktach. Na przykład, zamiast nazywać siebie agencją projektowania stron internetowych, studio kreatywne może nazywać siebie „partnerem w zakresie doświadczenia marki” lub czymś innym, co odnosi się do pełnej wartości tego, co zapewnia (nie tylko namacalnych części).

To jest Soda Studios, „partner innowacji, studio projektowe i laboratorium”. Nie przejmują się zbytnio wymienianiem poszczególnych świadczonych przez siebie usług, ale raczej skupiają się na holistycznych rozwiązaniach dla swoich klientów.

Grupa BORN jest „globalną agencją cyfrową napędzaną doświadczeniami skoncentrowanymi na człowieku”. Mają stronę usług, na której można bardziej szczegółowo zapoznać się z tym, co oferują, ale nawet to koncentruje się na szerszym obrazie dzięki usługom, takim jak doświadczenie marki, projektowanie usług i innowacje.

Kappow to agencja cyfrowa, która koncentruje się na projektowaniu stron internetowych, ale niekoniecznie znasz to z ich strony głównej. Zamiast tego dzielą się wartością tego, co naprawdę zapewnia swoim klientom: rozwój biznesu, udane premiery produktów i przewagę nad konkurencją. (Kto nie chce tego wszystkiego?!)

8. Zabawne ilustracje

Liczba ilustracji rośnie już od kilku lat i nie widzimy jeszcze, żeby nigdzie się to udało. To świetny sposób na dodanie elementu „ludzkiego” do witryny, zwłaszcza jeśli nie masz dostępu do świetnego fotografa i chcesz uniknąć zdjęć stockowych. Lub jeśli Ty/Twoja agencja specjalizujecie się w ilustracjach, to doskonały sposób na pokazanie swojej pracy!

Cóż za wspaniały świat do przeglądania na stronie RUYA, agencji brandingowej i cyfrowej. Dali swojej ilustracji pełną szerokość swojej strony głównej, co sprawia, że ​​jest to całkiem udane, gdy tylko załadujesz stronę. Co więcej: gdy najedziesz kursorem myszy na części obrazu, odkryjesz, że służy on jako element nawigacji, pomagając ci dowiedzieć się więcej o ich agencji, usługach i pracy.

Te dziwaczne ilustracje od UPQODE, ​​agencji zajmującej się projektowaniem stron internetowych, są połączone z animacją, aby naprawdę je ożywić. Możesz oglądać, jak zmieniają kolory, rozmiary i wchodzą ze sobą w interakcję, co sprawia, że ​​strona główna jest zabawna.

Jeśli pełne ilustracje nie pasują do Twojej marki, zawsze istnieje możliwość wykorzystania ich jako akcentów, tak jak robi to No Clima. Na zdjęciach w całej witrynie znajdziesz „doodles”, co nadaje jej ręcznie wykonanego, artystycznego charakteru. Jest to również świetny sposób na połączenie ilustracji i fotografii, jeśli jesteś zainteresowany używaniem obu!

9. Typografia jako projekt, a nie tylko słowa

Czasami słowa mają być praktyczne, czasami mają być sztuką. A dzisiejsi projektanci stron internetowych nie boją się używać ich do drugiego celu, jako bardziej elementu projektu niż akapitu lub tekstu.

Tekst na stronie głównej Dystopian Creatives, choć wciąż czytelny, w przekonujący sposób zaciera granice między praktycznością a grafiką. Wygląda bardziej jak wzór tła niż akapit i wchodzi w interakcję z innymi obrazami na stronie w interesujący sposób.

Loop, agencja kreatywna oferująca pełen zakres usług, używa tekstu jako elementu tła na swojej stronie głównej wraz z czytelnym akapitem na górze. Ponieważ czcionka tła jest tak duża (i ładny odcień żółtego), twoje oczy mogą czytać oba zestawy tekstu bez pomyłki. Uwielbiam też sposób, w jaki zachęca użytkowników do przewijania, aby odpowiedzieć na pytanie „Projektuj dla… czego?”

Podczas przewijania strony Stone & Style zobaczysz każdy nagłówek jako normalny blok tekstu, ale także w dużej czcionce szeryfowej w tle, która wylewa się ze strony. To świetny sposób na powtórzenie wiadomości bez powtarzania i dodaje stronie elegancką tajemnicę, gdy próbujesz przeczytać, co mówi tekst w tle (zanim odkryjesz wzór).

10. Kształty geometryczne jako elementy tła

Jeśli chodzi o projekt witryny, nie zastanawiaj się nad tym. Chociaż kształty geometryczne mogą wydawać się zbyt „proste”, są one znajome i nieskomplikowane (obie cechy są dobre dla wygody użytkownika!). A przy tak mocnych elementach konstrukcyjnych możesz zrobić wiele, aby umieścić na nich markę swojej agencji, aby nie były proste.

Ten przykład z czterech filarów wykorzystuje proste kształty (zasadniczo tylko bloki i kropki!) w połączeniu z ruchem opartym na zwoju użytkownika, aby stworzyć dynamiczne, geometryczne wrażenia. Przewijając stronę w dół, zobaczysz, jak bloki budują się i rozkładają, ciągle się zmieniając, aby dalej opowiadać historię. (Może być tam również wielkanocna gra „Pong”, jeśli szukasz małej przerwy!)

Chociaż kolorowe, owalne kształty na Oh Happy Dani mogą technicznie nie być geometryczne, z pewnością dają ten sam zabawny efekt. W połączeniu z kolorami jej marki tworzą świetną ramkę za jej wizerunkiem bohatera, a zobaczysz, jak powtarzają się na nowe sposoby w całej witrynie.

Blab, studio komunikacji, również wykorzystuje na swojej stronie głównej niemal geometryczne kształty. Te wzory w kształcie okręgu / owalu / jajka rosną i kurczą się, gdy spoczywasz na stronie, a następnie przesuwają się na bok, gdy zaczynasz przewijać. Przypominają mi dźwięk wydobywający się z głośnika, który idealnie komponuje się z tekstem na stronie „Twój głos głośniej”.

To kolorowe studio, illo, wykorzystuje geometryczne kształty tuż za ich głównym przesłaniem na stronie głównej. Gdy najedziesz kursorem na podkreślone frazy, jeden z kształtów przesunie się, aby odsłonić obraz w środku, w sprytny sposób na pokazanie pierwszego skupienia — projektowania ruchu.

11. WordPress jako CMS

Ostatnim, ale z pewnością nie mniej ważnym, jest sposób budowy tych witryn. (W końcu, jeśli back-end nie służy celowi, do którego jest potrzebny, nie ma znaczenia, jak świetnie wygląda front-end!)

WordPress obsługuje teraz ponad 40% internetu. To prawie połowa wszystkich stron internetowych (w tym te, które nie są oparte na CMS) i jest to prawdopodobnie spowodowane tym, jak elastyczny CMS naprawdę stał się na przestrzeni lat.

Nie sprzedałeś na nim? Wszystkie witryny w tym podsumowaniu są obsługiwane przez WordPress, aby dać Ci świetny przykład wszystkiego, co możesz za jego pomocą zbudować! Od pięknych motywów, które pomagają szybko rozpocząć pracę, po ponad 55 000 darmowych wtyczek, które pomagają rozszerzyć funkcjonalność, WordPress może zrobić prawie wszystko.

Co sądzisz o tych trendach w projektowaniu stron internetowych na 2021 rok? Czy zgadzasz się z pojawieniem się niestandardowych kursorów, czy uważasz, że projekty 3d to tylko fanaberia? Daj nam znać w komentarzach poniżej, które trendy lubisz lub których Twoim zdaniem brakuje na tej liście!