Czym jest motion design i kiedy ruch pomaga

Po tej lekcji będziesz umieć nazwać, do czego służy ruch w grafice — od logo w reklamie po animację ładowania w aplikacji — i ocenić, kiedy animacja pomaga odbiorcy, a kiedy mu przeszkadza. Poznasz też przykład, na którym pracujemy przez cały kurs.

Przez cały kurs animujemy dla fikcyjnej polskiej firmy, którą możesz znać z kursu Figmy: Studio jogi Oddech z Poznania. Właścicielka, Marta, ma już logo, paletę kolorów (głęboka zieleń #2F6B4F, piasek #F4EDE4, grafit #1F2933, terakota #E07A5F) i aplikację do rezerwacji zajęć. Teraz chce, żeby to wszystko się ruszało: animowane logo, krótkie filmy do mediów społecznościowych, belki z nazwiskiem instruktorki w nagraniach zajęć online i animację ładowania w aplikacji.

Motion design: grafika, która zmienia się w czasie

Motion design (motion graphics, grafika w ruchu) to projektowanie grafiki, która zmienia się w czasie: tekstu, kształtów, ikon, wykresów, logotypów, zdjęć i fragmentów wideo. Różni się od klasycznej animacji postaci tym, że bohaterem rzadko jest postać — częściej informacja. Animacja postaci opowiada historię gestem i mimiką; motion design porządkuje komunikat: pokazuje, co jest ważne, w jakiej kolejności czytać i co się właśnie zmieniło.

W praktyce spotkasz go w czterech głównych miejscach:

• wideo marketingowe — czołówki, animowane logo, reklamy w mediach społecznościowych, filmy wyjaśniające (explainery);
• telewizja i nagrania — belki z nazwiskiem (lower thirds), plansze tytułowe, napisy, infografiki w programach;
• interfejsy — przejścia między ekranami, mikrointerakcje (przełącznik, serce „ulubione”), animacje ładowania;
• prezentacje i edukacja — animowane wykresy, schematy, kursy online.

Każde z tych miejsc ma inne narzędzia i inne ograniczenia. Reklama to plik wideo o stałej długości. Animacja w aplikacji musi reagować na użytkownika, działać płynnie na słabszym telefonie i dać się wyłączyć osobom, którym ruch szkodzi. O narzędziach mówi lekcja 2, o dostępności — moduł 6.

Pięć zadań ruchu

Ruch przyciąga wzrok szybciej niż kolor czy rozmiar, więc każda animacja coś „zabiera” odbiorcy: jego uwagę. Dobra animacja oddaje ją z nawiązką, bo wykonuje konkretne zadanie. Dla porządku dzielimy te zadania na pięć grup.

Podział dydaktyczny kursu; przykłady dla studia jogi Oddech.

Dla studia Oddech oznacza to na przykład:

1. Kierowanie uwagi: w reklamie zajęć dla początkujących cena karnetu (w naszym przykładzie 180 zł za 4 wejścia) pojawia się jako ostatnia i jako jedyna wjeżdża ruchem — reszta tylko się rozjaśnia.
2. Informacja zwrotna: po zapisaniu się na zajęcia przycisk zmienia się w znaczek „Zapisano” z krótkim, wyraźnym ruchem.
3. Ciągłość: karta zajęć rozwija się w szczegóły, zamiast zostać podmieniona na nowy ekran.
4. Wyjaśnianie: w filmie „Jak zarezerwować zajęcia” trzy kroki pokazują się po kolei, zsynchronizowane z głosem.
5. Charakter marki: studio jogi kojarzy się ze spokojem, więc ruchy są płynne i raczej wolne — bez gwałtownych odbić i migotania.

Kiedy ruch szkodzi

Ta sama siła, która przyciąga wzrok, potrafi męczyć. Trzy sytuacje warto rozpoznawać od pierwszego projektu.

Ruch bez zadania. Jeśli nie umiesz powiedzieć, które z pięciu zadań spełnia animacja, prawdopodobnie jest ozdobnikiem. Ozdobnik w reklamie trwającej 15 sekund zabiera czas na komunikat; w aplikacji spowalnia każde kliknięcie.

Ruch, który przeszkadza w czytaniu. Tekst wjeżdżający litera po literze wygląda efektownie, ale jeśli zostaje na ekranie za krótko, widz go nie przeczyta. Zasada robocza tego kursu: przeczytaj napis na głos dwa razy w spokojnym tempie — tyle co najmniej powinien być widoczny w całości.

Ruch, który szkodzi zdrowiu. Wytyczne dostępności WCAG 2.2 opisują osoby z zaburzeniami błędnika (układu przedsionkowego), u których animacje — zwłaszcza przesuwanie dużych powierzchni i paralaksa — mogą wywołać zawroty głowy lub nudności. Dlatego WCAG wymaga m.in., żeby treść, która porusza się automatycznie dłużej niż 5 sekund obok innych treści, dało się zatrzymać (kryterium 2.2.2, poziom A), i żeby nic nie migało więcej niż 3 razy na sekundę (2.3.1, poziom A). Kryterium 2.3.3 (poziom AAA) zaleca możliwość wyłączenia animacji wywołanych interakcją. W module 6 przełożysz to na kod (prefers-reduced-motion) i na reguły dla wideo.

Jak pracuje motion designer

Niezależnie od narzędzia projekt przechodzi przez podobne etapy: brief (cel, odbiorca, format, termin) → scenariusz i storyboard (co dzieje się w kolejnych sekundach) → style frames (kilka dopracowanych klatek pokazujących wygląd) → animacja → poprawki → eksport w formatach, których potrzebuje klient. Moduł 7 przeprowadzi Cię przez te etapy w projekcie końcowym dla studia Oddech. Na razie zapamiętaj jedno: najdroższe poprawki to te, które wynikają z niejasnego briefu, a nie z błędów w animacji.

Najważniejsze w 3 punktach

1. Motion design to grafika zmieniająca się w czasie; jej bohaterem jest najczęściej informacja, nie postać.
2. Każda animacja powinna mieć zadanie: kierowanie uwagi, informację zwrotną, ciągłość, wyjaśnianie albo budowanie charakteru marki.
3. Ruch może szkodzić — WCAG 2.2 wymaga m.in. możliwości zatrzymania długiego ruchu (2.2.2) i zakazuje migania częściej niż 3 razy na sekundę (2.3.1).

Źródła

• W3C, Understanding WCAG 2.2: Success Criterion 2.3.3 Animation from Interactions — https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html (dostęp: październik 2026)
• W3C, Understanding WCAG 2.2: Success Criterion 2.2.2 Pause, Stop, Hide — https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
• W3C, Understanding WCAG 2.2: Success Criterion 2.3.1 Three Flashes or Below Threshold — https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
• Adobe, Animating text in After Effects (zastosowania: tytuły, belki, napisy końcowe) — https://helpx.adobe.com/after-effects/desktop/animating-text/text-animation/animating-text.html
• Figma Learn: Explore Figma Motion — https://help.figma.com/hc/en-us/articles/41274629073303