Sobota, 28 stycznia 2023

3 Essential Design Trends, czerwiec 2022 r.

17 sierpnia 2022

Czy jesteś znudzony niektórymi z Twoich obecnych projektów? W tym miesiącu kolekcja trendów w projektowaniu stron internetowych może pomóc Ci wyrwać się z tej rutyny dzięki kilku zabawnym alternatywom.

A wszystkie te opcje nie są nudne. Od wizualnej ekspozycji do techniki, te trendy prezentują inny zestaw wyzwań.

Oto, co jest trendy w projektowaniu w tym miesiącu.

1. Warstwy na warstwach

Te projekty stron internetowych mają tak wiele warstw informacji, że prawie nie wiesz, gdzie patrzeć lub gdzie elementy projektu zaczynają się i kończą.

To może być skomplikowana technika do wykonania ze względu na ilość elementów konkurujących o tę samą uwagę w projekcie.

Co prawdopodobnie zobaczysz z tym projektem tendencja obejmuje obraz lub wideo tło z pewnym ruchem, ale nie nic, co naprawdę wymaga uwagi. Następnie dodaj na kilka nieruchomych obrazów w mniejszych ramkach w całym projekcie. Warstwa na tekst, jak również dla efektu trzech głębokości.

Jeśli wejdziesz w interakcję z tymi projektami, przekonasz się, że nie są one również płaskie. Wszystkie zawierają animowane elementy, stany hover i interakcje, które pomagają kierować użytkownika przez warstwy tego, co może być nieco skomplikowanym projektem.

Stowarzyszenie Zachodnich Parków Narodowych wykorzystuje obraz tła, środkowe obrazy z animacjami oraz wiele warstw tekstu (niektóre na obrazach, a niektóre na tle). Jest też animacja przewijania, która pomaga budować projekt. Dużo się dzieje, ale nie czuje się zbytnio zajęty.

WIP Architects to kolejny projekt z warstwami, które oddziałują na siebie i zawierają ruch. Z dużą ilością animacji przewijania i warstw, które przechodzą przed i za innymi elementami, zaangażowanie pomaga tej stronie pracować.

The Shipwreck Survey wykorzystuje ten sam podstawowy zarys warstw z nieco większym nakładaniem się elementów i mniejszą ogólną animacją. Podstawowym animowanym efektem na stronie głównej jest pasek przewijania.

2. Kierowane akcje klikania

Ten ciekawy trend projektowania stron internetowych może być niesamowicie przydatny lub zmarnowanym elementem - directed click actions. Są to przyciski, ikony i animacje, które każą użytkownikowi kliknąć gdzieś w projekcie, aby przejść do następnego etapu interakcji.

Bezpośrednie podejście zapewnia, że użytkownicy widzą i mają jak największe szanse na zrobienie tego, do czego projekt jest przeznaczony. Z drugiej strony, jeśli użytkownik potrzebuje tak wielu instrukcji, to czy projekt jest zbyt skomplikowany? A może jest jakiś środek, gdzie ten trend wygląda świetnie i jest użyteczny?

W każdym z poniższych przykładów te kierowane akcje klikania są nieco inne.

HUG Co ma duże koło do kliknięcia w dolnej trzeciej części ekranu. Jest ono zaprojektowane niemal jak bullseye i nie da się go przeoczyć. Rzeczą, która jest tutaj interesująca, jest to, że większość wideo spada poniżej scrolla. Akcja kliknięcia ma również dwa emojis, aby oznaczyć działanie - uśmiechniętą twarz lub wskaźnik, gdy jesteś gotowy do kliknięcia. (Kliknięcie rozszerza wideo na pełny ekran).

ThinkOvery również używa podobnej okrągłej ikony kliknięcia. Przenosi ona również do następnego ekranu jednym ruchem, dzięki czemu można kontynuować eksplorację projektu.

Living with OCD ma inne podejście z ikonami przewijania i cofania do góry sparowanymi w prawym dolnym rogu. Opcja przewijania zawiera słowa, które pomagają nadać kierunek i instrukcje. Składa się z małej animacji i interaktywnego stanu hover, gdy użytkownik zbliża się do interaktywnego elementu. Interesujące jest tutaj to, że nie jest to w rzeczywistości przycisk, a użytkownik używa tradycyjnego przewijania do interakcji.

3. Word Breaks

Jeśli jesteś osobą przywiązującą wagę do czytelności, ten trend w projektowaniu może sprawić, że poczujesz się urażony.

W każdym z tych projektów, słowa są podzielone na linie - niektóre z myślnikami, a niektóre bez. W większości przypadków, nie ma większego zamieszania co do tego, czym są te słowa, ale sprawia to, że zatrzymujesz się i myślisz podczas przeglądania strony.

Dlaczego miałby to być trend w projektowaniu?

Jest to połączenie dużej typografii, długich słów i znalezienia rozwiązania, które pozwoli na stworzenie wspólnego doświadczenia dla dużych i małych ekranów. Wiele z tych słów nie zmieściłoby się na przykład na ekranach urządzeń mobilnych z taką samą wagą, skalą i wpływem, jak ich odpowiedniki na komputerach stacjonarnych.

Stąd rozwiązanie word break. Tworzy ono spójne doświadczenie użytkownika na wszystkich urządzeniach.

Ta technika powinna być stosowana tylko wtedy, gdy uważasz, że Twoi odbiorcy są wystarczająco bystrzy, aby zrozumieć, co próbujesz przekazać za pomocą przerwy słownej. To może być trudna propozycja!

Plantarium łamie się na "roślinie" ze słowem, które jest wymyślone. Ale dzięki obrazom i pomocniczym terminom, nadal wiesz natychmiast, o co chodzi w projekcie.

Michelle Beatty wykorzystuje popularne słowo i łamie je. Ponieważ "photog" i "rapher" to jedyne litery na ekranie, dość łatwo się domyślić. Co ciekawe, łamanie słowa nie odbywa się na sylabie, ale litery ładnie układają się z tą przerwą wizualnie.

Wreel Collective łamie słowo myślnikiem w gigantycznych literach - coś, co rzadko widzimy w projektach stron internetowych. Myślniki nie są często używane w tym medium. Z tego powodu przyciąga uwagę i sprawia, że myślisz o słowach i projekcie.

Wniosek

W kolekcji z tego miesiąca jest wiele trendów łamiących zasady. Są one interesujące, zabawne i wymagają pewnego poziomu ryzyka do wykonania.

Czy widzisz siebie (lub swoich klientów) wybierających projekt, który zawiera jeden z tych trendów? Czas pokaże, czy te wizualne kompozycje zyskają na popularności, czy też zaczną szybko zanikać.