Style projektowania grafik na strony internetowe - co jest trendy w 2021 roku?

W sieci, podobnie jak w świecie offline, trendy i gusta zmieniają się. Coś, co było na topie jeszcze niedawno (np. flat design i minimalizm), obecnie jest zastępowane animacjami, efektami 3D i marketingiem wideo.

Style projektowania grafik na strony internetowe: co jest trendy w 2021 roku?

Ostatnie kilkanaście miesięcy mocno zmieniło świat. Sporo ludzkich aktywności, ze względu na pandemię, przeniosło się do sieci. Praca, relacje rodzinne, kontakty towarzyskie, zakupy… Wszystko to pociągnęło za sobą przeobrażenia w przestrzeni online – na stronach internetowych. Dotyczą one wielu rozwiązań, ułatwiających przebywanie w tej sferze – w tym tych graficznych. Jakie tendencje w tym zakresie obserwujemy? Co jest charakterystyczne dla witryn w 2021 roku? Zapraszamy!

Grafiki w wersji 2D na strony internetowe

Ciężko wyobrazić sobie konwertującą, angażującą witrynę bez ciekawych grafik. W ubiegłych latach popularnością cieszyły się te proste, wręcz minimalistyczne. Tymczasem trend ten zmienia się dość znacząco na przestrzeni ostatnich miesięcy. W 2021 roku witryny są bardziej żywe, energetyczne i… zachęcające do interakcji. Ale po kolei – zacznijmy od grafik dwuwymiarowych. Jakie tendencje obserwuje się w tym zakresie?

Kolorystyka grafik

Kluczowy aspekt, na jaki zwracają uwagę designerzy, to User Experience. Strona internetowa ma być przyjazna w odbiorze. I nie chodzi tu tylko o nawigację czy responsywność. Również zastosowane barwy powinny być przyjazne dla wzroku. Gdy w czasach pandemii spora część życia i funkcjonowania przeniosła się online, ma to szczególne znaczenie. Dlatego właśnie bazowe kolory są stonowane. To głównie pastele takie jak błękit, łagodna zieleń, beż czy róż. Nie odciągają one uwagi od treści i często są spójne z identyfikacją wizualną marki.

Zauważa się też odejście od klasycznego schematu czerń-biel, czyli białe tło oraz czarne treści tekstowe. Obecnie background strony często ma właśnie jedną z delikatnych barw. Ponadto coraz więcej witryn udostępnia użytkownikom tzw. dark mode. To użyteczne rozwiązanie zwłaszcza wtedy, gdy ktoś korzysta z urządzeń mobilnych wieczorami, w przyciemnionym pomieszczeniu. Tryb ciemnego tła pozwala zapobiegać przeciążeniu oczu. Poza tym pasuje on doskonale do marek luksusowych i tych, nakierowanych na męskie grono odbiorców.

Inne interesujące trendy w kolorystyce stron dotyczą m.in.:

• czarno-białych fotografii albo obrazów, które nabierają kolorów i powiększają się dopiero po najechaniu na nie kursorem,
• wyrazistych, przykuwających uwagę graficznych kompozycji abstrakcyjnych,
• stosowania gradientów i mieszania barw,
• efektów wielowarstwowości barw lub wrażenia „oszronionej kolorowej szyby” (glassmorphism).

Tematyka – co przedstawia się na stronach?

Poza oczywistymi treściami, czyli informacjami o sprzedawanych produktach lub usługach, witryny WWW mają dużo więcej do zaprezentowania. Obecnie tworzy się grafiki, których rolą jest edukować lub nawiązywać do istotnych społecznie tematów. Wiele marek, promujących się jako przyjazne dla środowiska i dbające o planetę, podkreśla ten fakt ciekawymi infografikami. Podobnie sprawa wygląda w przypadku firm, poruszających problematykę zdrowia, relacji międzyludzkich czy też szerszych kwestii, dotykających społeczeństwa. Wszystko to sprawia, że internauci czują więź z marką. Utożsamiają się z jej wartościami i chcą się zaangażować w ich promowanie.

Efekty graficzne na WWW

Gdy spojrzymy na cały layout graficzny, widzimy, że współczesne witryny to już nie tylko pojedyncze obrazki czy zdjęcia otoczone tekstem. Dziś cała kompozycja WWW to już niemal graficzne dzieło sztuki. Wszystko ma na celu zainteresowanie odbiorcy i zapewnienie mu świetnych wrażeń korzystania ze strony. Dlatego:

• projektowane są karty, które internauta kolejno przewija i na których można przejrzyście zaprezentować wybrane dane,
• na popularności zyskuje neumorphism – technika uwypuklenia wybranych elementów grafiki, np. przycisków, za pomocą odpowiedniego cieniowania, co kreuje wrażenie głębi,
• niekiedy tworzy się układ, imitujący rozmieszczenie treści w kolorowym magazynie lub w gazecie,
• stosowany jest podział zawartości strony internetowej za pomocą geometrycznej siatki – symetrycznie lub asymetrycznie,
• dąży się do jak najbardziej realistycznego przedstawienia przedmiotów i rzeczy stosowanych na co dzień – kosmetyków, produktów spożywczych itd.,
• chętnie wykorzystywany jest efekt nakładania się na siebie poszczególnych obrazów czy zdjęć,
• wiele stron zmienia kształt kursora myszy na bardziej oryginalny – kolorowy bądź mający nietypowy kształt, jak chociażby stalówki pióra czy długopisu (jest on zmieniany np. po najechaniu na wybrane elementy witryny).

Ponadto obserwuje się wyraźne tendencje, jeśli chodzi o sam styl tworzenia konkretnych grafik. Dotychczas popularne fotografie z banków zdjęć są powoli wypierane na rzecz:

• obrazków animowanych, w stylu kreskówek – niosących często wartościowy przekaz i bardziej naturalnych w odbiorze niż pozowane foto,
• kompozycji inspirowanych latami 90. w sieci,
• oryginalnych kolaży abstrakcyjnych, umieszczanych na wspomnianym wyżej stonowanym i delikatnym tle,
• profesjonalnie przygotowanych infografik, w pigułce przedstawiających fakty na wybrany temat  czy dane statystyczne – co ułatwia ich odbiór i zapamiętanie.

Format grafiki na strony internetowe

Jeżeli chodzi o sam format obrazów, coraz częściej korzysta się z plików .svg. Zastępują one grafikę rastrową, co niesie za sobą kilka korzyści. Po pierwsze, nierzadko zajmują one na serwerze mniej miejsca niż popularne .jpg. Wynika to z faktu, że nie trzeba przechowywać w nich informacji na temat każdego piksela. Dzięki temu grafiki wektorowe nie spowalniają ładowania witryny, co mogłoby niekorzystnie wpływać zarówno na UX, jak i pozycjonowanie strony. Po drugie, charakteryzuje je lepsza jakość i brak efektu „pikselozy”. Niezależnie od urządzenia, na którym będą przeglądane i od powiększenia, zawsze są one wyraźne i czytelne.

Oczywiście zawsze warto sprawdzić wskaźniki, świadczące o tym, jak szybko treść strony jest załadowana po wejściu na nią. Czasami wcale nie będzie konieczne przygotowanie obrazów w formacie wektorowym. Wszystko zależy bowiem od ich specyfiki i liczby.

Animacje, wideo marketing i… podkład muzyczny!

Zwróć uwagę, iż strony internetowe coraz częściej przyciągają uwagę barwnymi animacjami 3D, efektownymi przejściami przy scrollowaniu czy ciekawym materiałem filmowym. Do łask wracają ruchome grafiki – trzeba tu jednak uważać, aby nie przesadzić. Na wielu witrynach zobaczyć można m.in. kompozycje, wykorzystujące efekt paralaksy. Polega to na wykreowaniu głębi poprzez wymuszenie wysuwania się jednych elementów spod innych. Ten obiekt, który znajduje się bliżej, przesuwa się optycznie w większym tempie niż ten, umiejscowiony dalej. To kreuje takie odczucie, jak gdyby odbiorca patrzył na scenę teatralną, siedząc wygodnie w rzędzie przed nią.

Inny trend, który zyskuje na popularności, to scrollowanie poziome. W dobie korzystania z urządzeń mobilnych i trzymania smartfonów jak do oglądania filmu to całkiem sprytne rozwiązanie. Ważne jednak jest to, żeby dobrze oznaczyć, co użytkownik ma zrobić z widzianą przez siebie grafiką i jak przejść do kolejnych treści. W ten sposób można chociażby zaprezentować kolejne etapy procesu produkcyjnego lub opowiedzieć historię (tzw. scrollytelling), związaną z marką.

Obserwuje się też zwiększenie liczby materiałów wideo na stronach firm i marek. Sprzyja temu m.in. fakt, że urządzenia dysponują coraz lepszą rozdzielczością ekranów. Dodatkowo praktycznie każdy ma szybki internet – czy to w telefonie, czy gdy korzysta z komputera. Pozwala to na umieszczanie wysokiej jakości filmów, często również z dźwiękiem. Materiał taki, podobnie jak animacja, pozwala przedstawić markę od kuchni, podzielić się osobistym przekazem czy po prostu uatrakcyjnić ofertę produktową.

Użytkownik przede wszystkim

Jak już wspomnieliśmy, w obecnych czasach kluczowe jest dostarczanie użytkownikom interesujących, potrzebnych im treści. Liczy się zarówno sam przekaz, jak i jego forma. User Experience decyduje o tym, czy internauci chcą wracać na daną stronę internetową, czy też sięgną do innego źródła w sieci. Z tego względu kluczowe jest dopracowanie witryny WWW, by ułatwić odbiorcom korzystanie z niej.

Jak to zrobić? Jeżeli chodzi o grafiki, ważny jest czas ich ładowania i rozmieszczenie, a także jakość. Gdy nie będą wyświetlały się poprawnie, zniechęci to odbiorcę. W przypadku animacji nie należy przesadzać. Trzeba pamiętać, że patrzenie na szybko zmieniające się, barwne obrazy bywa bardzo szkodliwe dla osób, cierpiących na niektóre schorzenia. Wówczas mogą pojawić się zawroty głowy czy nudności. Dlatego animowane treści nie powinny absolutnie zajmować całej strony. Ponadto musi istnieć opcja zatrzymania animacji za pomocą widocznego przycisku. Zbyt duża ilość efektów 3D nie tylko nie poprawi UX, ale jeszcze pogorszy odbiór istotnych informacji i zepsuje wrażenie wizualne.

Twórcy witryn sięgają też po rozwiązania z zakresu augmented reality (AR). Rozszerzona rzeczywistość, bo tak tłumaczy się to pojęcie, pozwala np. na wirtualny spacer po showroomie czy obejrzenie wybranego, określonego produktu ze sklepu bez fizycznego odwiedzania obiektu – na ekranie. Nowoczesne firmy wdrożyły taką opcję w zeszłym roku, w czasie pandemii. Gdy wizyty w firmowym salonie nie były możliwe ze względu na lockdown, okazało się to być strzałem w dziesiątkę. Oglądanie wymarzonego auta od środka, bez wychodzenia z domu? Czemu nie!

Ostatni aspekt, o którym warto wspomnieć, to wszelkie sondy i kwestionariusze. Jak to działa? Gdy internauta trafia na stronę, pojawia mu się seria pytań. Pozwala to sprecyzować jego potrzeby i zaproponować spersonalizowaną ofertę. Użytkownik czuje wówczas, że nie jest wyłącznie biernym odbiorcą, lecz ma możliwość realnej interakcji. Zupełnie jak np. w sklepie stacjonarnym, gdzie może zadać pytanie sprzedawcy i poprosić o konkretną rzecz. To zwiększa zadowolenie, bo potencjalny nabywca czuje się „zaopiekowany” i potraktowany priorytetowo, a nie jak po prostu jeden z wielu klientów – zupełnie taśmowo.

Co z czcionkami na grafikach?

Korzystając często z sieci, zapewne zwracasz niemałą uwagę na czytelność treści. Większość popularnych i chętnie odwiedzanych witryn dba o nią, a jednym z jej elementów są odpowiednio dobrane czcionki. Do tej pory były to głównie te bezszeryfowe. Dziś jednak powoli, z ostrożnością sięga się po kroje szeryfowe. Warto je oczywiście stosować z wyczuciem. Najlepiej wprowadzić taką czcionkę w wybranych elementach – np. nagłówku, śródnagłówkach czy pojedynczych hasłach na grafikach. Umiejętnie dopasowana, nada stronie elegancki wygląd.

Obserwujemy również wielki powrót fontów stylizowanych na vintage, czyli retro. Jednak dzisiejsze czcionki nie są przestarzałe, nieciekawe i mało spójne z nowoczesną witryną. To już nie to samo, co dawniej można było zobaczyć na opakowaniach lemoniady w szklanej butelce czy w damskich magazynach sprzed dziesięcioleci. Odświeżony rys krojów liter doskonale wpasowuje się w oryginalne kompozycje obrazkowe, wzbudzając nostalgię, ale i pozytywnie zaskakując.

Współczesne strony internetowe to tak naprawdę dopracowane, oryginalne dzieła. To miejsca, zachęcające do interakcji i powrotów. Dziś, gdy w sieci co chwilę pojawiają się coraz to nowe oferty i popularne są wideo marketing oraz wszelkie animacje 3D, niełatwo się wybić. Ale warto – poprzez prawidłowe pozycjonowanie przyciągnie się odbiorców, którzy zobaczą ciekawe grafiki, nawiążą interakcję i… zostaną na dłużej. Powodzenia! A jeżeli potrzebujesz wsparcia, zapraszamy do kontaktu z idea4me.pl. Z chęcią wesprzemy Ciœ w stworzeniu konwertującej strony WWW!