Motion Design und Motion Identity in der Praxis

Was man wirklich wissen muss, wenn’s gut werden soll – bzw. Magdas “Lesen-vorm Loslegen”-Notiz

Klar – Je öfter man Motion Identity liest und sagt, desto mehr klingt es wie ein Buzzword aus der Agenturwelt. Aber: Bewegung ist nicht nur Deko oder Spielerei – sie kann Stimmung transportieren, Marken wiedererkennbar machen und sogar den Flow in komplexen Anwendungen verbessern – das wissen wir bereits!

Nur: Damit das funktioniert, muss man ein paar Dinge beachten. Nicht nur technisch, sondern auch strategisch! Es ist die Sprache einer Marke – aber in Bewegung und damit diese Sprache funktioniert, braucht’s aber mehr als nur „von A nach B“. Es geht um wie, wann, warum – und das ist ein ganzer Werkzeugkasten für sich, wie man im Entstehungsprozess einer Motion Identity erkennt.

In Blogpost 1 & 2 habe ich mich damit beschäftigt, was eine Motion Identity ist und wie sich die Entwicklung davon gestaltet.

Bei der Recherche bin ich auf einige Infos, Themen und Tipps gestoßen, die irgendwie nicht ganz zum Rest der Info gepasst haben oder die Struktur der Blogposts gesprengt hätten.

Diese Details, Tipps, Methoden und Co. beziehen sich auf Animation, Motion und eben auch auf Motion Identities und in diesem folgenden Blogpost möchte ich all diese Dinge sammeln und zusammenfassen!

1. Motion Behavior – Die Persönlichkeit in Bewegung

Was es durch Analyse und Recherche zu Beginn des Prozesses zu definieren gilt, ist die Persönlichkeit der Marke, denn davon kann die Persönlichkeit der Bewegung abgeleitet werden. Diese Definition basiert oft während dem Branding oder der Positionierung der Marke.

Motion Behavior:
Bewegung kann – genau wie Farbe, Typo oder Sprache – den Charakter einer Marke verkörpern. Man spricht hier von Motion Behavior, also dem „Verhalten“ einer Animation. Wie sich Elemente bewegen (schnell, langsam, weich, direkt…), sagt nämlich viel über die Marke aus.

Diese Definitionen können anfangs noch recht simpel und rudimentär sein, bilden aber die Ausgangsbasis für alle weiteren Gedanken zum Thema Bewegung.

Simple Beispiele:

Linear & direkt: wirkt professionell, zielgerichtet (vgl. DixonBaxi o.D.)

Elastisch & bouncey: fühlt sich jung, lebendig, sympathisch an (vgl. DixonBaxi o.D.)

Fließend & smooth: strahlt Ruhe, Eleganz und Seriosität aus (vgl. DixonBaxi o.D.)

Das kann man weiter ausführen und mit deutlichen Begriffen wie „Fast Rise“, „Gentle Float“, „Aggressive Impact“ immer genauer definieren. Im Laufe des Prozesses kann man sie dann nutzen wie Farbpaletten oder Typosysteme.

Man entscheidet sich für einen Stil – und bleibt dann dabei. Denn wenn der Button bouncey hüpft, aber das Logo seriös und steif reinfadet, fühlt sich das seltsam inkonsistent an (vgl. DixonBaxi o.D.).

2. Kultur & Kontext – Bewegung ist nicht universell

Immer wichtig: Kultur und Kontext!

Was bei uns dynamisch wirkt, kann in anderen Kulturen aggressiv oder unhöflich rüberkommen. Beispielsweise schnelle Pop-In-Animationen werden in asiatischen Kontexten oft als hektisch empfunden oder langsame Animationen können in sehr „effizienzgetriebenen“ Märkten als nervig gelten.

Deshalb ist es wichtig den Kontext zu checken! Und sich fragen: Für wen ist das? Und wie fühlt sich Bewegung dort an? 

3. Motion-Hierarchien – Nicht alles darf gleich laut schreien

In einer Animation oder in einem komplexen Interface bewegen sich oft viele Dinge gleichzeitig. Deshalb ist es wichtig, eine Bewegungshierarchie zu etablieren. Sonst wird’s schnell unübersichtlich und überfordernd.

• Primäre Animationen: Große, auffällige Bewegungen – z. B. das Logo, Haupttransitions, Hero-Sections
• Sekundäre Animationen: Dezente Microinteractions – z. B. Hover-States, kleine Icons, Tooltips
  

Das Ziel ist immer: Die Aufmerksamkeit gezielt lenken, nicht alles gleichzeitig betonen. Und ganz wichtig: Man kann auch einfach mal nix animieren – bewusst eingesetzte Ruhe ist ein mächtiges Gestaltungselement.

Hier sind auch Aspekte wie das Timing, Easing und die Frequenz/Rythmus ein wichtiges Thema – darauf gehe ich im nächsten Beitrag genauer ein!

4. Motion-Driven Layout Thinking

Ein häufiger Fehler im Motion Design ist, dass erst statisch gelayoutet und dann animiert wird. Dabei erwische auch ich mich, mit meinem Grafik-Design-Hintergrund, immer wieder. Besser ist es, gleich Layout in Motion denken!

Prinzipien:

• Bewegungsflüsse definieren Layout-Hierarchien
• Motion Grid als strukturierendes Prinzip überlegen
• Navigation durch die Animation/Applikation = Choreografie
• Statische Layouts als Zustandsabbildungen verstehen, nicht als Endzustand
  

(Vgl. Koto 2025)

5. Typografie in Motion

Text in Bewegung ist mehr als nur das Einblenden von Headlines. Typografische Animation kann ein starkes semantisches Element sein.
Die Klassiker kommen dabei relativ oft vor:

• Letter-by-letter Reveal (Dramatik)
• Kerning-Animationen (Brand-Eigenheiten betonen)
• Morphing zwischen Schriftgrößen/-gewichten
• Vertical Slide (modular, systemisch)
• Typo als Maskierungsfläche
  

WICHTIG dabei:

• Lesbarkeit > Effekt
• Branding-Prinzipien gelten auch hier (z. B. Gewichtung, Hierarchie)
• Typo-Easing = subtiler als Grafik-Easing

(Vgl. IBM o.D.)

Weiterer Tipp: Verwende rhythmisches Typo-Timing als inhaltliche Unterstützung – z. B. bei Storytelling-Formaten oder Key Messages. (Vgl. IBM o.D.)

6. Interaction Motion – UX trifft Branding

Interaction Motion bewegt sich zwischen Designästhetik und Nutzerführung. Ziel ist nicht nur Funktionalität, sondern emotionales Feedback.

Wichtige Motion Patterns die es zu Designern gilt:

• Feedback Loops (Button-States, Checkmarks)
• Progressive Disclosure (step-by-step UI)
• Loading Indicators mit Markensprache
• Scroll-bezogene Bewegungen (Parallax, Reveal)

(Vgl. Material Design o.D.)

Wichtig:

UX Motion muss barrierefrei und optional sein (z. B. systemseitige „Reduce Motion“-Einstellungen beachten!). (Vgl. Material Design o.D.)

Animierte States sollten Markencharakter tragen – selbst ein Ladebalken kann eine Personality ausstrahlen. (Vgl. IBM o.D.)

7. Sounddesign & Motion – Synchronisierung statt Zusatz

Wenn Sound erlaubt ist (z. B. in Videos, Reels, Ads), sollte er kein Nachgedanke sein, sondern integraler Bestandteil der Motion Identity, denn fast jede Bewegung braucht Sound!

Richtlinien:

• Synchronität!
• Audio-Markers für Betonung von Bewegungsakzenten
• Soundfeedback als UX-Element (z. B. Confirm-Sound)
  

Pro-Tipp: Eine eigene kleine Audio-Library mit typischen Sounds kann viel bewirken – so wie Brand Fonts oder Farben. (Vgl. Never Sit Still o.D.)

8. Feedback, Tests, Iterationen – Motion ist nie fertig

Auch ein gutes Motion System lebt davon, dass es getestet und verbessert wird.

• A/B-Tests mit verschiedenen Bewegungsstilen
• Usability-Tests auf verschiedenen Geräten
• Ladezeiten & Performance checken
• Feedback von realen Nutzer:innen einholen

Motion ist ein bisschen wie Musikproduktion: Man kann ewig feilen – aber irgendwann muss man’s auch veröffentlichen. (Vgl. IBM o.D.)

Qualitätssicherung und Performance:
Technische Umsetzung ist ein essenzieller Teil – zu viele Bewegungen führen zu Performanceproblemen. Wichtig also:

• Optimierung der Frame-Rate (mind. 30fps)
• Renderbudget pro Frame definieren
• Testing in Low-End Devices & Browsern

(Vgl. IBM o.D.)

🙂

Motion ist nicht nur ein bisschen Eye-Candy. Es geht um Haltung, Erzählweise, User Experience – und darum, wie eine Marke „fühlbar“ wird.

Motion Design ist weit mehr als nur bewegte Grafik. Es ist ein Zusammenspiel aus Timing, Systematik, Psychologie, Emotion und Technik! Wer die feinen Mechanismen – von Easing über Rhythmus bis Interaktion – versteht und anwenden kann, schafft Markenerlebnisse.

Denn wenn Bewegung konsequent und sinnvoll eingesetzt wird – mit Gefühl für Timing, Kontext, Zielgruppe und Technik – dann entsteht eine Motion Identity, die nicht nur animiert, sondern erzählt, berührt und bleibt.

(vgl. DixonBaxi o.D.; Never Sit Still o.D.; Gleave, Dawncreative 2024)

Quellen:

• KOTO 2025
  KOTO (18.02.2025): Reel talk: the power of branded motion design. In: offbrandkoto, https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion (zuletzt aufgerufen am 16.03.2025)
  
• Never Sit Still o.D.
  Never Sit Still (o.D.): Motion Branding. In: Never Sit Still, https://neversitstill.com/motion-branding(zuletzt aufgerufen am 16.03.2025)

• IBM o.D.
  IBM (o.D.): Animation. In: IBM Design Language , https://www.ibm.com/design/language/animation/tips-and-techniques/ (zuletzt aufgerufen am 22.04.2025)

• Material Design o.D.
  Material Design o.D.: Understanding-motion. In: Material Design. https://m2.material.io/design/motion/understanding-motion.html#brand-expression (zuletzt aufgerufen am 22.04.2025)

*Zuhilfenahme von ChatGPT: Die KI wurde zur Übersetzung, Korrektur und Formulierungshilfe von Texten verwendet. Alle Inhalte wurden anschließend eigenständig ausgewertet, überarbeitet und in den hier präsentierten Beitrag integriert.