3 Najważniejsze trendy w projektowaniu w styczniu 2022
Wtorek, 5 grudnia 2023
W miarę jak rok zaczyna się kończyć, wciąż jest wiele nowych i rozwijających się trendów w projektowaniu stron internetowych. Wiele z tego, co zobaczysz w tym miesiącu, jest kontynuacją tego, co widzieliśmy przez cały rok, ale z nowymi akcentami.
Od projektów typu peek-a-boo z ładnymi animowanymi elementami, przez pionowe paski, aż po brutalistyczne bloki - jest wiele trendów, z którymi można pracować.
Oto, co jest trendy w projektowaniu w tym miesiącu.
Od pewnego czasu projektanci eksperymentują z wycinaniem i nakładaniem elementów animacji, co ewoluowało w kierunku pełnych stylów peek-a-boo z dużą ilością wizualnego zainteresowania.
Każdy projekt jest inny. Niektóre z nich mają animację z tyłu, inne z przodu, a niektóre zawierają tekst jako część stylu. Nie ma prawie żadnego zestawu reguł, jak sprawić, by ten trend w projektowaniu działał.
Każdy z poniższych przykładów robi to nieco inaczej, z różnym skutkiem. Wspólne jest to, że jest to prawie jedna z tych wizualizacji, które albo widzisz i kochasz, albo nienawidzisz.
Jatco Insurance jest tu najbardziej oszałamiającym przykładem, z odważnym wyborem kolorów i elementem zerknij-na-książkę wewnątrz ponadwymiarowego "J". Ogólny efekt jest kojący i interesujący i naturalnie przyciąga użytkownika przez ekran od lewego górnego rogu do warstwy wideo w tle. Mały tagline, "Indywidualna uwaga, na którą zasługujesz", jest doskonale umieszczony.
Liron Moran Interiors stosuje inne podejście z koncepcją peek-a-boo z literami wyłaniającymi się zza obrazu. Animacja jest ograniczona do efektu najechania i przewijania, który dodaje płynny element do obrazu, jak również zmiany obrazu i koloru tła. Wyzwaniem jest tutaj czytelność. Na szerszych ekranach widać więcej słów, ale czy to wystarczy?
Melon Fashion również nakłada warstwowo tekst i animowane efekty, tworząc zgrabny styl peek-a-book, który wydaje się niemal wycięty z tła. Wygląd ogólny wydaje się mieć trzy warstwy: wideo w tle, warstwa środkowa dla żółtego bloku kolorystycznego i tekst na wierzchu. Nieprzezroczystość elementów tekstowych z podglądanym wideo jest interesująca i dobrze połączona bez poświęcania zbyt dużej czytelności.
Pionowe kolorowe paski są elementem projektu, który pojawia się na różne sposoby. Projektanci mogą używać go jako samodzielnego elementu lub kontenera dla treści, takich jak nawigacja lub inne akcje związane z kliknięciem.
Pionowe elementy są pomocne, ponieważ mogą pomóc w stworzeniu bardziej spójnego i jednolitego doświadczenia użytkownika z ekranów stacjonarnych na mobilne. Ten kształt może być również nieco destrukcyjny, ponieważ nie widzisz go tak często. (Chociaż z tym stylem trendów może stać się mniej prawdziwe w czasie).
New Classrooms wykorzystuje pionowy pasek kolorów po lewej stronie, aby pomóc użytkownikowi w poruszaniu się po projekcie. Kolor faktycznie zmienia się w miarę postępu każdego slajdu na stronie głównej.
Serving używa wielu pionowych pasków jako linków do różnych punktów wejścia do treści. Klikalność jest podkreślona zmianą z czerwonej nakładki na pełnokolorowy obraz. Nawigacja jest również schowana wewnątrz białego paska po lewej stronie ekranu z hamburgerowym menu.
TechnoAlpin stosuje chude pionowe menu nawigacyjne po prawej stronie ekranu. Ikony z elementami menu sprawiają, że nawigacja jest bardzo wizualna i intuicyjna. Pomaga w tym również kolor, który znacznie kontrastuje z resztą projektu.
Niewiele osób sądziło, że brutalizm utrzyma się w trendach, kiedy zaczął być modny. Elementy brutalizmu wciąż się wkradają, choć są znacznie mniej surowe i ostre niż niektóre z tych oryginalnych, trendowych projektów stron internetowych.
Ta wersja brutalizmu koncentruje się na elementach blokowych, które zawierają obrazy lub tekst i często klikają do innych stron w projekcie. Bloki same w sobie są w zasadzie przyciskami, które pomagają użytkownikowi w nawigacji do dodatkowych treści.
Krytycznym pytaniem dotyczącym tej techniki projektowania jest to, czy ta akcja kliknięcia jest wystarczająco intuicyjna. Czy użytkownicy będą wchodzić w interakcję bez przycisków?
Odpowiedź prawdopodobnie zależy od Twojej bazy odbiorców, ale jeśli zdecydujesz się na taki styl, ważne jest, aby uważnie śledzić analitykę, aby upewnić się, że użytkownicy wiedzą i rozumieją, jak się zaangażować.
Milli Agency może być najbardziej intuicyjnym przykładem trendu brutalistycznych bloków. Strona główna jest w zasadzie gigantycznym menu nawigacyjnym. Każdy blok zmienia kolor z białego na żółty po najechaniu na niego i rozszerza się, co dodatkowo zachęca do kliknięcia.
Sick Agency używa brutalistycznych bloków z eksperymentalnymi krojami pisma i odważnymi kolorami, aby stworzyć projekt, który rzuca się w oczy. Nie sposób nie zwrócić uwagi na to, co się tu dzieje. Największym pytaniem może być, gdzie powinieneś się skupić i kliknąć dalej? Kursor dostarcza pewnych wskazówek wizualnych, ale nie jest to tak intuicyjne, jak byśmy chcieli.
Mawo miesza brutalistyczne bloki z dużym niebieskim kursorem, aby pomóc użytkownikom w kliknięciu w projekt, aby zobaczyć więcej opcji odzieży. Nawet zdjęcia mają dość surowy wygląd, co nie jest typowe dla e-commerce. Każdy element bloku powyżej przewijania na stronie głównej zawiera akcję kliknięcia, od bloków nawigacyjnych na górze do obrazów "Shop Women" i "Shop Men". Ponadto, niebieski kursor kropka pomaga pokazać, gdzie użytkownicy mogą kliknąć, a przyciski tekstowe zmienić na niebiesko na hover, jak również.
Większość z przykładów tutaj pokazuje trendy jako elementy strony głównej, ale nie jesteś ograniczony do tego zastosowania. Wypróbuj niektóre z tych technik na stronach docelowych lub stronach wewnętrznych, do których chcesz dodać coś specjalnego.
Może to być doskonały sposób na przetestowanie projektu i sprawdzenie, czy Twoi użytkownicy lubią ten styl i wiedzą, jak z nim współdziałać. Jeśli to działa, to można rozszerzyć estetykę na więcej projektu.
