Czym są animacje internetowe
To elementy ruchome na stronie lub w reklamie internetowej, które mają konkretne zadanie. Może to być animowana sekcja główna, ikony reagujące na przewijanie, infografika z procesem, baner HTML5, krótka pętla na landing page albo przejście prowadzące wzrok do przycisku. W odróżnieniu od samodzielnego filmu często działają bez dźwięku i są częścią interfejsu. Dlatego trzeba kontrolować ich wagę, sposób uruchamiania i zachowanie na różnych urządzeniach.
Co robimy przy animacjach internetowych?
Projektujemy i animujemy elementy pod konkretne miejsce na stronie: sekcję hero, opis działania usługi, prezentację produktu, stronę 404 albo komunikat po wysłaniu formularza. Robimy animowane ikony i ilustracje, infografiki, wykresy, banery display oraz krótkie pętle na landing page kampanii. Wszystko przygotowujemy w stylu marki, tak aby animacja była częścią strony, a nie przypadkowym dodatkiem z biblioteki.
Robimy też strony internetowe, więc znamy ograniczenia związane z wdrożeniem. Dobieramy format, kompresję i sposób ładowania tak, aby ograniczyć wpływ animacji na wydajność. Ostateczny wynik zależy jednak również od kodu strony, hostingu, liczby materiałów i sposobu ich osadzenia.
Formaty i waga animacji internetowych
Dobieramy format do zadania. Proste animacje ikon i ilustracji mogą powstać jako SVG albo Lottie. Lottie jest plikiem danych opisującym animację i może zawierać lub wykorzystywać dodatkowe zasoby, dlatego jego waga zależy od złożoności projektu. Bardziej rozbudowane sceny dostarczamy jako wideo w pętli, na przykład MP4 lub WebM, z klatką zastępczą na czas ładowania. Banery przygotowujemy w HTML5 zgodnie z limitami sieci reklamowej. Przy każdym elemencie podajemy wagę i zalecany sposób osadzenia. Jeśli odpowiadamy także za stronę, wdrożenie może wejść do zakresu projektu.
Jak pracujemy nad animacjami internetowymi?
Zaczynamy od strony, nie od animacji. Ustalamy, co użytkownik ma zrozumieć w danej sekcji i co powinien zrobić dalej. Potem przygotowujemy scenopis, scenę próbną w docelowym formacie, grafiki i animację. Pojedyncze elementy zajmują [kilka dni], a komplet animacji na nową stronę [2-3 tygodnie]. Dwie rundy poprawek są w cenie. W razie potrzeby przygotowujemy lżejszą wersję mobilną oraz wariant ograniczonego ruchu. Żeby ten wariant działał automatycznie, strona musi poprawnie obsługiwać ustawienie prefers-reduced-motion.
FAQ
Czy animacja nie spowolni strony?
Może wpłynąć na szybkość i płynność strony, dlatego kontrolujemy wagę plików, kompresję i sposób uruchamiania. Przekazujemy zalecenia wdrożeniowe, a jeśli odpowiadamy za stronę, sprawdzamy animację w docelowym środowisku. Nie obiecujemy braku wpływu na wydajność, lecz dążymy do jego ograniczenia.
Czy możecie animować nasze istniejące ikony i ilustracje?
Tak, jeśli mamy je w wektorze. Jeśli nie, odrysujemy je i przygotujemy do animacji.
Czy robicie też banery reklamowe?
Tak, w standardowych rozmiarach i limitach wagi sieci reklamowych, w jednym stylu z resztą kampanii.
Czy wdrożycie animacje na naszej stronie?
Jeśli stronę robiliśmy my, wdrożenie możemy ująć w zakresie prac. Jeśli odpowiada za nią inny wykonawca, przekazujemy pliki i instrukcję oraz możemy skonsultować sposób osadzenia. Ostateczne wdrożenie pozostaje wtedy po stronie wykonawcy serwisu.
Czy animacja działa na telefonach?
Tak, każdą animację sprawdzamy na małym ekranie. W razie potrzeby przygotowujemy osobny, lżejszy wariant mobilny. Poprawne działanie zależy też od kodu strony i sposobu osadzenia pliku.
