Motion Design
02 / Timing & Rhythmus
Kernfrage
Wie lange dauert eine Bewegung?
Dieselbe Bewegung wirkt in 200 Millisekunden flink und in zwei Sekunden feierlich. Timing ist das wichtigste Werkzeug im Motion Design. Es bestimmt, ob eine Animation hilft oder nervt.
Lernziel: Du kannst passende Dauern für verschiedene Zwecke wählen, Elemente in einer Choreografie staffeln und mit Bildrate und Rhythmus arbeiten.
Timing entscheidet über die Wirkung.
2.1 / Dauer
Je kleiner, desto schneller.
Wie lange eine Bewegung dauert, hängt von ihrem Zweck und von der Strecke ab. Drei Bereiche helfen bei der Orientierung.
01
Rückmeldung
100 bis 200 Millisekunden. Ein Knopf, ein Schalter, ein Häkchen.
02
Übergang
200 bis 400 Millisekunden. Ein Menü, ein Dialog, ein Seitenwechsel.
03
Erzählung
Eine halbe bis mehrere Sekunden. Ein Intro, ein Logo, ein Erklärfilm.
Grosse Flächen und lange Wege brauchen etwas mehr Zeit als kleine. Auf dem Handy darf alles etwas schneller sein als am grossen Bildschirm.
Kleine Dinge bewegen sich schnell.
2.2 / Staffelung und Choreografie
Nacheinander statt alles zugleich.
Wenn mehrere Elemente erscheinen, wirkt es ruhiger, wenn sie leicht versetzt kommen. Diese Staffelung führt den Blick in einer Reihenfolge: zuerst der Titel, dann das Bild, dann der Text.
Die ganze Choreografie sollte kurz bleiben. Sechs Elemente mit 300 Millisekunden Versatz dauern fast zwei Sekunden. Das ist im Interface zu lang. Im Intro eines Films kann es genau richtig sein.
Staffelung führt den Blick.
2.3 / Bildrate und Rhythmus
Bilder pro Sekunde und Takt.
Filme laufen meist mit 24 oder 25 Bildern pro Sekunde, in Europa ist 25 verbreitet. Für Social Media sind 25 oder 30 üblich, für flüssige Interfaces 60. Je höher die Bildrate, desto flüssiger, aber auch desto grösser die Datei.
Bewegung mit Musik wirkt stärker, wenn Schnitte und Akzente auf dem Takt liegen. Bei 120 Schlägen pro Minute fällt alle halbe Sekunde ein Schlag. So entsteht ein Rhythmus, den man spürt, auch ohne hinzuhören.
Schnitt auf dem Takt.
Übung
Eine Choreografie
Aufgabe: Gestalte die Startanimation der Website von Museum Klang.
SCHRITT 1
Lege fest, in welcher Reihenfolge Logo, Titel, Bild und Navigation erscheinen.
SCHRITT 2
Wähle für jedes Element Dauer und Easing.
SCHRITT 3
Staffle die Elemente so, dass alles in unter einer Sekunde da ist.
SCHRITT 4
Baue eine zweite, festliche Version für den Bildschirm im Foyer mit Musik im Takt.
Auswertung: Wie unterscheiden sich die beiden Versionen, und warum passt jede an ihren Ort?