12 przykładów animacji na stronie, w tym dwa, które są wow

Spis treści

Czy strona firmowa powinna być minimalistyczna i spokojna, czy naładowana animacjami i interaktywna? Podejście do dynamizmu na stronach zmieniało się tak jak Internet. Jeszcze kilka lat temu animacje same w sobie były atrakcją. Choćby padający śnieg, który urozmaicał witryny na święta:

Na stronach królowały animowane flashowe banery, które pozwalały pokazać więcej napisów i obrazków na małej powierzchni. To wstawki, które są już jednak passé.

Animacje internetowe a trendy w projektowaniu stron firmowych 

Po tym, jak strony internetowe wyglądały jak choinki, weszły projekty intuicyjne, minimalistyczne i płaskie. Na takich witrynach bardzo ciekawie wybijają się teraz małe uatrakcyjnienia – animacje i mikrointerakcje. Dzięki nim użytkownik ma przyjemne doświadczenia. 

Często animacje internetowe naśladują zachowania przedmiotów z realnego świata, więc dzięki nim strony są bardziej intuicyjne

Kluczowe jest jednak to, żeby te smaczki ułatwiały interakcje ze stroną, a nie odciągały uwagę, irytowały czy uniemożliwiały wykonanie tego, co użytkownik chce właśnie zrobić.

W pierwszej kolejności powinno się liczyć User Experience (UX), a dopiero potem moda, design czy widzimisię autora projektu. Musimy uważać, żeby nie przedobrzyć i nie sprawić, że potencjalny klient ucieknie z naszej strony.

Proste, a przydatne animacje na stronie internetowej​

Jest kilka rodzajów animacji na stronę internetową, które są aktualnie tak oczywiste, że… prawie niezauważalne. Jednak ich brak sprawia, że poruszanie po stronie staje się niewygodne.

Mówię tu przede wszystkim o tzw. hoverach, czyli o zmianie wyglądu elementu na stronie po najechaniu na niego. Brak reakcji przycisku czy napisu klikalnego na najechanie jest w tej chwili dużym zaniedbaniem.  Nie wystarcza już automatyczna zmiana kursora na „łapkę”, potrzebna jest też choćby najprostsza zmiana w samym elemencie, czyli:

Animowane napisy na stronę

Takie najprostsze rozwiązania jak animowane napisy na stronę są zresztą chętnie używane przez największe serwisy jak choćby Facebook. Są wręcz niezauważalne, ale ułatwiają intuicyjne poruszanie się po serwisie.

Inne dobre animacje na stronie internetowej to takie, które naśladują interakcje w świecie realnym, jak choćby wszelkie animowane zabawy z kafelkami, sekcjami i zdjęciami

Kafelki z usługami z opisem na odwrocie

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

To jest odwracany tył

Tutaj dajemy opis usługi
Kliknij tutaj

Dynamiczne odliczanie w sekcji Firma w liczbach:​

lata na rynku
0
zrealizowanych projektów
0
% zadowolonych klientów
0

Dynamicznie reagujące zdjęcia w kafelkach bloga czy portfolio:​

Animacje na stronie internetowej według konceptu​

Są też i takie animacje na stronie www, które tworzą historie, wynikają z opowieści marki albo tworzą idee całej strony i zachęcają do jej poznawania. Poniżej kilka świetnych przykładów na animowane strony www przygotowane na WordPressie i Elementorze:

Strona szwajcarskiej grupy organizującej wędrówki dla trzylatków drobnym elementem pięknie podkreśla swój charakter:​

Żeby obejrzeć działanie strony na żywo przejdź na https://waldspielgruppe-duedingen.ch/

Animacje na stronę internetową: Strona agencji zajmującej się designem z kresek i kropek tworzy piękną opowieść o swoich usługach:​

Żeby obejrzeć działanie strony na żywo przejdź na https://fourpillars.studio/

Niesamowita bajkowa opowieść o sięganiu głęboko przygotowana przez agencję brandingu i designu z Filipin. "Jeszcze raz" - krzyknęła moja dwuletnia córka kiedy dotarłyśmy na sam dół:​

Fragmentaryczne animacje na stronie www ze społecznego filmu o bezpieczeństwie na hulajnogach zostały wykorzystane jako ilustracje na samej stronie:​

Animacje internetowe - podsumowanie

Trendy zachęcają do używania drobnych animacji na stronie internetowej, także  tej
firmowej. User Experience (UX) może się dzięki nim znacząco poprawić. Dobrze użyta i ładnie zrobiona animacja może dodawać dynamizmu, dawać podświadomie miłe doświadczenie strony albo wręcz wpływać na zapamiętywalność strony, marki czy innej inicjatywy. 
 
Popularne narzędzia do tworzenia stron, dają możliwość wdrożenia animacji niedużym nakładem kosztów i pracy.
 
Oczywiście trzeba pamiętać, że animacje jak wszystkie atrakcyjne widżety na stronie w jakimś stopniu ją obciążają i spowalniają jej działanie. I choćby dlatego warto je mieć pod kontrolą – kompresować, minimalizować wagę i testować ich wpływ na stronę na Page Speed.
 
Dlatego warto znaleźć złoty środek między lekkością i prostotą strony firmowej, a jej intuicyjnym używaniem i atrakcyjnością. 

Animacje na stronę internetową dozowane z umiarem i z pomysłem będą służyć użytkownikowi, witrynie i firmie, która za nią stoi.

 
Co robimy w Moovi

Odciążamy firmy B2B we wdrożeniu skutecznego marketingu internetowego. Pomożemy Wam pozyskiwać dobrych klientów, sprzedawać i budować markę. Nasze specjalizacje:

Chcesz, żeby klienci trafili do Twojej firmy przez Internet?
Autor wpisu
Picture of Karina Molęda
Karina Molęda
Od 2019 roku w Moovi prowadzi marketing B2B dla małych i średnich firm. Wcześniej od 2008 roku zdobywała doświadczenie marketingowe w agencji interaktywnej Adv.pl > Lemon Sky oraz w dużych agencjach reklamowych J. Walter Thompson, Leo Burnett oraz Saatchi&Saatchi, gdzie przygotowywała kampanie reklamowe dla takich marek jak m.in.: IKEA, Wedel, Nestle, Maspex, XTB, Microsoft, Procter&Gamble, Orange, Tesco, Pernod Ricard, Empik School, Timex, Tchibo.

Porozmawiajmy

Umówmy się na bezpłatne półgodzinne konsultacje. Powiedzcie nam, czego potrzebuje Wasza firma.​

lub użyjcie formularza:

Przeczytaj też