Ewolucja i Rewolucja w stylu Projektowania Stron WWW
Data publikacji 23-08-2023Trendy w projektowaniu stron internetowych są na tyle złożone, że trudno je opisać w jednym artykule. Składają się na nie zarówno aspekty wizualne, jak i techniczne, w tym dobór odpowiednich technologii. Choć nie jestem zwolennikiem ślepego podążania za trendami, warto się nad nimi pochylić. W trakcie tworzenia produktu kluczowe jest zrozumienie grupy docelowej danej strony czy aplikacji. Inne potrzeby ma produkt kierowany do nastolatków, gdzie możemy pozwolić sobie na większe eksperymenty z czcionkami i kolorami, w przeciwieństwie do produktu dla klientów biznesowych. Jednak jedno pozostaje niezmienne: strona czy aplikacja musi być intuicyjna i praktyczna, niezależnie od obowiązujących trendów. Pamiętajmy, że projektujemy dla użytkowników, a nie dla siebie, dlatego tak ważne jest doświadczenie płynące z korzystania z naszego produktu. W poniższym artykule chciałbym przedstawić kilka aktualnych trendów w UI i UX, które warto rozważyć w swoich projektach. Niektóre z nich są obecne od dłuższego czasu, inne mogą być chwilową modą, a niektóre z pewnością zostaną z nami na dłużej. Piszę to z perspektywy webdevelopera, ale specjaliści od UX z pewnością mają coś do dodania.
Estetyka Y2K
Mam słabość do lat 2000. To czas, gdy powstały hity filmowe jak "Gladiator", "Władca Pierścieni" czy "Shrek". W kawiarenkach internetowych wielu moich znajomych grało w "Tibię", podczas gdy ja spędzałem noce przy "Gothic" i "Turok 2". Jednak nigdy bym nie pomyślał, że estetyka stron internetowych z tamtych czasów powróci. Były to przecież czasy dominacji Flasha, a HTML i CSS były wtedy bardzo prymitywne.
Nowy styl polega na wykorzystaniu jaskrawych kolorów i stylów, takich jak gradienty, do wywołania atmosfery vintage lub nostalgii. Jako miłośnik Flat Designu, myśl o mocnych różach, żółciach i fioletach połączonych z gęstymi animacjami w stylu Flash przyprawia mnie o dreszcze.
Jednak w tym szaleństwie jest coś uroczego. Skąd wziął się ten trend? Odpowiedź nie jest prosta. Jesteśmy świadkami zmiany pokoleniowej. Co kilka lat moda i trendy z poprzednich dekad wracają w nowej odsłonie. Milenialsi z ich minimalistycznym podejściem ustępują miejsca pokoleniu "Z" z ich wyrazistym stylem przesiąkniętym popkulturą. Pokolenie lat 2000 miało dość niepokoju lat 90., a pokolenie "Z", które najbardziej odczuło skutki epidemii koronawirusa, pragnie zmian. Do tego dochodzi rozwój nowych technologii, takich jak sztuczna inteligencja, metawersum czy web3. Ten styl będzie coraz bardziej widoczny nie tylko na stronach czy w aplikacjach, ale także w filmach, grach czy ubraniach. Wystarczy przypomnieć sobie reklamy iPoda, aby zrozumieć aktualny trend.
Kiedy warto zastosować estetykę Y2K?
Nowa estetyka jest intrygująca i niewątpliwie ciekawa. Możemy się spodziewać więcej animacji w stylu wczesnych animacji Flash, które technologia i prędkość internetu z lat 2000 nie byłyby w stanie obsłużyć. Ten trend z pewnością przyciągnie nowych odbiorców. Jednak warto się zastanowić, czy estetyka Y2K będzie pasować do twojego brandu. Poniżej przedstawiam dwie strony, które świetnie wykorzystują ten styl. Estetyka ta idealnie pasuje do napojów energetycznych, sklepów z ubraniami czy sklepów typu Żabka. Wszystko zależy od grupy docelowej. Trudno mi sobie jednak wyobrazić taki styl w bankach czy na stronach dla klientów biznesowych. Dla nich poleciłbym mniej odważny styl.
Przewijanie stron internetowych.
Za pomocą płynnego przewijania strony, deweloperzy mogą kontrolować, kiedy i jakie elementy pojawiają się na ekranie. Dzięki temu strony przestają być jedynie zlepkiem tekstu i zaczynają opowiadać spójną historię. Niewątpliwym mistrzem w tworzeniu tego typu stron jest firma Apple, która tworzy interaktywne prezentacje swoich produktów. Odpowiednio dobranie animacji może nie tylko przyciągnąć uwagę użytkownika, ale także zatrzymać go na stronie na dłużej. Jednak warto zachować umiar w stosowaniu animacji. Najlepiej sprawdzają się one na stronach typu landing page czy stronach produktowych. Apple wykorzystuje animacje tam, gdzie chce przedstawić produkt i wywołać emocje. Natomiast w miejscach, gdzie prezentowane są konkretne informacje czy w sklepie, strony są bardziej statyczne. Uważam, że takie podejście jest właściwe.
Strony 3D
Od kilku lat jesteśmy świadkiem używania w przeglądarce elementów 3D. Pomimo większego zużycia pamięci, elementy 3D cieszą się coraz większą popularnością. Ciekawym przykładem jest strona Chirpley.ai, która wyróżnia się dzięki obfitości trójwymiarowych wizualizacji w stylu kreskówkowym, prezentując tożsamość marki. Strona zawiera zabawnego czerwonego ptaka, który pojawia się na całej stronie, dodając nutę zabawy do technicznej informacji o ich produkcie. Jest to niewątpliwie spore wyzwanie dla webdeveloperów. Poza nauką CSS i JS, dochodzi kolejna umiejętność – biblioteki WebGL, która warto się uczyć.
Minimalizm i duże czcionki
Na stronach największych marek możemy spotkać prostotę, minimalizm i duży rozmiar czcionek. Styl ten jest również niezwykle ciekawy, a w przeciwieństwie do Y2K może trafić do szerszej grupy użytkowników. Dzięki swojemu minimalizmowi oraz dużym czcionkom na stronie prezentowane są tylko te treści, które wspierają decyzje zakupowe. Minimalizm jest łatwiejszy do wdrożenia dla stron internetowych większości branż. Poniżej przykłady.
Tryb jasności ekranów
To już raczej nie trend, a standard. Systemy operacyjne zarówno na telefonach jak i komputerach oferują wybór trybów jasności ekranu. Tryb jasny może podobać się większej ilości osób, natomiast ciemny jest przeznaczony dla użytkowników, którzy korzystają z urządzeń w nocy. Podobno tryb ciemny pobiera mniej prądu z urządzenia i nie męczy tak bardzo oczów. Niestety osoby z astygmatyzmem mogą mieć problemy z czytaniem ciemnych czcionek, dlatego dla nich preferowany jest tryb jasny.
Accessibility
Accessibility odnosi się do praktyk i zasad mających na celu zapewnienie, że strony internetowe są dostępne i użyteczne dla wszystkich użytkowników, niezależnie od ich ograniczeń. Obejmuje to również osoby korzystające z różnego rodzaju technologii wspomagających, takich jak czytniki ekranowe, specjalistyczne klawiatury czy urządzenia do rozpoznawania mowy. Strony, które mają dobrze zaimplementowane Accessibility, są lepiej pozycjonowane w wynikach wyszukiwania. W niektórych przypadkach tworzenie stron dostępnych dla osób z ograniczeniami jest też wymagane przez prawo Unii Europejskiej. Warto więc zwrócić na to uwagę.
Sztuczna inteligencja i chatbot
Chyba nikt nie spodziewał się tak szybkiego rozwoju sztucznej inteligencji, jakiego możemy zaobserwować teraz. Wykorzystanie jej również w webdesignie będzie coraz częstsze. Począwszy od wykorzystania bibliotek i narzędzi opartych na AI. Coraz częściej będą prowadzone na stronach czaty wykorzystujące sztuczną inteligencję. W przeciwieństwie do czatów obsługiwanych przez osoby, kluczowa inteligencja będzie dostępna 24h na dobę oraz będzie potrafiła przeszukiwać obszerne bazy danych z dokumentacją i papierami szybciej niż człowiek, a co za tym idzie, szybciej udzielać informacji.
Podsumowanie
Podsumowując, w artykule chciałem przedstawić aktualne trendy w projektowaniu stron internetowych, które obejmują zarówno aspekty wizualne, jak i techniczne. Wśród nich wyróżniamy estetykę Y2K, która czerpie inspiracje z lat 2000, przewijanie stron internetowych, które pozwala na płynne przedstawienie treści, czy wykorzystanie elementów 3D. Wspomniałem także również o znaczeniu minimalizmu, trybów jasności ekranów, dostępności (Accessibility) oraz rosnącej roli sztucznej inteligencji w postaci chatbotów. Ważne jest, aby web developer, nawet jeśli nie zajmuje się bezpośrednio projektowaniem wizualnym strony, był świadomy tych trendów. Musi zrozumieć, jakie technologie i narzędzia są niezbędne do wdrożenia tych trendów na stronę, aby zapewnić jej nowoczesność i funkcjonalność. W dzisiejszych czasach rola web developera nie kończy się tylko na kodowaniu, ale również na zrozumieniu, jak wizualne aspekty strony wpływają na jej ogólną funkcjonalność i doświadczenie użytkownika.