Was bisher geschah…

Die lieben Studienkolleg:innen, Leser:innen und vorallem Roman fragen sich wahrscheinlich:
„Das ist ja schön und gut mit der Recherche – aber was ist seitdem eigentlich passiert?“
Und das ist eine gute Frage, denn von Animationen, Videos und Beispielen fehlt hier JEDE SPUR?!

Ich habe mich, wie so oft, in der Themenfindung verloren. Deshalb sammelt dieser Blogpost genau diese Gedanken und Überlegungen. Denn WENN man schon die Chance hat, all seine Zeit und Energie in ein Passion Project zu stecken, dann soll es ja auch etwas hermachen.


Optionen, Optionen, Optionen

Stand der Dinge und Hard Facts:
Grundsätzlich sind die Rahmenbedingungen recht locker. Gesucht wird: ein cooles Unternehmen (mit bestehendem Design – oder auch nicht), das genug Möglichkeiten bietet, um ein Rundum-Paket an Motion zu entwickeln.
Bestenfalls findet meine Motion Identity dann sogar eine echte Anwendung!

Doch es gab die eine oder andere Hürde in der Recherche:


– Ein Spec-Project:
Eine große, coole Brand, der ich ein neues Motion Design verpasse.
Die Chance auf tatsächliche Anwendung ist gering, aber: Es gibt viel Material und einen guten Rahmen.

– Ein Kundenprojekt von ZERO zu Branding + Motion:
Das wäre vermutlich der Dream-Come-True. Allerdings würde ein komplettes Branding plus Motion den Rahmen des Projekts fast sprengen – und Kund:innen samt deren Visionen sind nicht immer easy. Besonders dann nicht, wenn es die erste Motion Identity ist, die man entwickelt.
Alles zeitlich, qualitativ und portfolio-tauglich unter einen Hut zu bringen, ist… anspruchsvoll.

– Ein halbgroßes, lokales Unternehmen mit bestehendem Design:
Ein schöner Rahmen zur Orientierung, ein lokales Business, die Chance auf echte Verwendung…
Too good to be true? Naja… ja.
Denn z. B. das Schauspielhaus oder andere Unternehmen und Festivals werden bereits von großen Agenturen betreut – und sich ungefragt in die Corporate-Identity-Guidelines dieser Agenturen einzumischen, ist vermutlich nicht die beste Ausgangslage für eine Zukunft in der Grazer Designwelt.


Tja. Was jetzt?
Mit all den großen Hoffnungen auf tatsächliche Anwendung und freies Herumexperimentieren ist es NOCH schwerer, eine Entscheidung zu treffen.

Aber: Da ist ein Licht am Ende des Tunnels!


Plan A, Plan B, Plan C, Plan X

Plan A

Wie ein Engel ist Chrissi plötzlich im Kurs erschienen – und ihre Botschaft war erlösend! (Oder so.)

Sie entwirft das Design (inkl. Plakat etc.) für das diesjährige Grazer Impro Fest!
🔗 https://schaumbad.mur.at/event/gif-grazer-impro-fest/

Jedes Jahr erstrahlt dieses nämlich in einem neuen Look! Und passend zu Improvisation und Kunst ist das Design auch kreativ, offen und experimentierfreudig.

Was ist das genau?

„GIF – Grazer Impro Fest
Ende August verwandelt sich das Schaumbad – Freies Atelierhaus Graz in ein utopisches Ressort der Sonderklasse und zelebriert das erste Grazer Impro Fest.
Neun Tage lang checken inter-/nationale Künstler:innen und Kollektive – und alle anderen Experimentierfreudigen – zum gemeinsamen Improvisieren ein.
Und das natürlich all inclusive: Es wird gesungen und getönt, Instrumente gebaut und musiziert, gekocht und vernetzt, performt – und nach den theoretischen und strukturellen Voraussetzungen des perfekten Impro-Flows gesucht.
Ein Angebot für Körper, Geist und Seele – mitten in der postindustriellen Naturbrache: Ist doch alles nur improvisiert.”

Also wenn einem bei DIESER Beschreibung nicht schon die Bewegungsmuster entgegenfliegen, dannnn weiß ich auch nicht ;).
Das wäre also die Idealvorstellung – denn auch die Deadlines scheinen gut zum Kurs zu passen.
Und mit etwas Glück findet das Design tatsächlich Anwendung!

Was kann schiefgehen?
Das Ganze steht und fällt natürlich mit dem Design von Chrissi.
Da sie in und mit dem Festival arbeitet, hat sie selbstverständlich Vorrang. Hier wird nicht gedrängt oder gestresst. Sollte sich das Design aber erst zu spät entwickeln (denn es muss ja stehen, bevor Motion einfließen kann), brauche ich einen guten Plan B.


Plan B

Alles zurück auf NULLLL – naja, nicht ganz.

Sollte Plan A scheitern, würde ich Kontakt mit dem Theater im Bahnhof, dem Kristallwerk und Rotor aufnehmen und anfragen, ob sie mit einem Branding + (oder auch nur) einer Motion Identity etwas anfangen könnten.

Hier würde dann zwar ein ganzer Brandingprozess stattfinden müssen – aber es wäre auch eine coole und spannende Möglichkeit, evtl. sogar gemeinsam mit Studienkolleg:innen einen solchen Auftrag zu bearbeiten.


Plan C

Angenommen keines der Theater oder Galerien ist überzeugt oder geeignet für das Projekt…
Juhu – freie Themenwahl?

Vielleicht zurück zu bekannten Marken oder Startups:
New Balance, Nike, SAYE Sneakers, Pangaia…

Oder zu anderen Kulturinstitutionen in Graz, meiner Heimat Salzburg oder irgendwo dazwischen…

Oder wir gehen zurück in die Recherche und suchen deutsche/österreichische/Grazer Startups und Businesses, die unterstützenswert sind!
Ausschnitte einer unvollständigen Liste wären z. B.:
Holy Pit, Sonible, SpawnX, yahyastudio, klekks.com, habitus-art, beherzt, …


Plan X

Oder: Man entwickelt wirklich etwas für die FH…
¯\_(ツ)_/¯


Bis dahin

In der Zwischenzeit habe ich fleißig weiterrecherchiert – vielleicht ergibt sich ja auch eine Kooperation in der Zukunft?

Je nachdem wie sich die kommenden Wochen gestalten (also wie sich der Zeitplan für’s Impro Festival entwickelt) würde ich ev. eine Brand und deren Motion Identity genauer analysieren, denn so hab ich bisher immer viel gelernt… oder mich mit verschiedenen Ansätzen für Motion Identitys spielen – also kleine Snippets an Motion (sei es eine Logo Animation oder Overlays für Social Media) entwerfen, die zu Brands passen 🙂

Ich habe außerdem eine kleine Anfrage an Moodley gesendet, um eventuell die Chance zu bekommen, mit ihnen noch einmal intensiv über Motion Identity zu sprechen – mal schauen, ob und wann da eine Antwort eintrudelt!


*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.

Ein Ausflug zum Thema Timing, Geschwindigkeit (Easing), Frequenz und Co.


Wie im vorhergehenden Post angeschnitten, widmet sich dieser Blogpost dem Thema Timing, Easing und Frequenz, denn dazu hab ich einiges an Infos gefunden.
Da ich selbst oft am richtigen Timing scheitere und „ein Gefühl dafür bekommen“ kein wirklich guter Tipp ist, teile ich hier meine unvollständige aber trotzdem hilfreiche Sammlung an Infos zum Thema!


1. Timing & Geschwindigkeit – Das unsichtbare Rückgrat jeder Bewegung

Timing ist einer der sensibelsten Faktoren im Motion Design. Selbst bei identischen Animationen können Unterschiede von Millisekunden die Wirkung komplett verändern – ob etwas zackig, elegant oder schleppend wirkt, entscheidet das Timing.
Da ist natürlich viel „Gefühlssache“ und Übung – und ich hab erkannt dass ich durchaus noch einiges nachbessern muss in diesem Sektor – aber ein paar Faustregeln sind mir in der Recherche untergekommen.

Faustregeln:

  • UI/UX Motion >> 200–500ms für Mikrointeraktionen (z. B. Hover, Tap)
  • „Brand-Driven Motion“ >> 500–1200ms für Logoanimationen, Transitions
  • Cinematic Motion >> bis zu 3000ms für Storytelling-Elemente

Wichtig:

Eine Bewegung sollte nicht schneller sein als die menschliche Wahrnehmung – aber auch nicht zu langsam, da dies als „träge“ oder „veraltet“ empfunden wird.

Pro-Tipp: Teste Bewegungen nicht nur im Designprogramm, sondern in realer Interaktion. Die gefühlte Zeit unterscheidet sich massiv vom “Designgefühl”.
(Vgl. IBM o.D.)

Ein paar weitere Dinge, die man schon zu Beginn des Prozesses bedenken soll:

  • Ein- und Ausblendedauer: Wie schnell erscheinen Dinge? Ploppen sie direkt rein oder kommen sie langsam, fast filmisch?
  • Gestaffelte Animation: Mehrere Elemente nacheinander erscheinen zu lassen, schafft Fokus und Orientierung.
  • Anticipation & Delay: Eine Mini-Verzögerung vor einer Aktion lässt Animationen viel natürlicher wirken. Stichwort: Spannung aufbauen!

Das Ziel ist, dass sich alles „richtig“ anfühlt – nicht zu hektisch, nicht zu langsam, sondern im Takt der Marke (vgl. Gleave, Dawncreative 2024).


2. Easing – Die Kunst der Beschleunigung

Jaja, das Easing. Bei jeder Animation geht’s um Geschwindigkeit: Wie schnell startet und stoppt ein Objekt? Genau das regeln sogenannte Easing-Funktionen.

Easing beschreibt, wie sich Bewegung innerhalb eines Zeitraums verändert.
Easing erzeugt Emotion, Natürlichkeit oder Präzision. JETZT ist es – nach all den Projekten – endlich soweit und ich beschäftige mich WIRKLICH mit Easings – bisher habe ich mich da wohl eher durchgeschummelt, aber es gibt doch einiges zu wissen!

Gängige Easing-Kurven:

  • linear (mechanisch, neutral)
  • ease-in (sanfter Start, beschleunigt)
  • ease-out (schneller Start, sanftes Ende)
  • ease-in-out (beides kombiniert)
  • bounce (verspielt, lebendig)
  • elastic (organisch, eigenwillig)


Und es gibt SO VIEL MEHR, wie man beispielsweise hier schön aufgelistet findet:
https://easings.net/ 


Ein paar Anwendungsempfehlung:

  • Branding: ease-in-out für Eleganz
  • UX-Motion: ease-out für natürliches Ankommen
  • Error States: bounce oder shake für Aufmerksamkeit
  • Playful Brands: elastic curves für Charaktertiefe

(Vgl. Material Design o.D.)

Das WIE in Aftereffects

Ein kleiner Exkursion zu Graphs in Aftereffects

Value Graph
Der Value Graph zeigt den Wert der Eigenschaft über die Zeit – zum Beispiel die Y-Position eines Objekts. Er eignet sich besonders gut, wenn man genaue Kontrolle über die Pfadkurven und deren Form haben will.

Tipp: Oft fragt man sich: “Warum kann ich im Value Graph nichts anfassen?” Das passiert oft wenn man mit der Position arbeitet, denn ohne separate Dimensionen bleibt dieser Graph gesperrt für direkte Bearbeitung. Damit du den Value Graph überhaupt bearbeiten kannst, musst du bei Positionsanimationen “Separate Dimensions” aktivieren. Erst dann kannst du X- und Y-Werte getrennt steuern und im Graph Editor bearbeiten.

Tipp 2: Mit gedrückter Alt- oder Option-Taste kannst du die Handles der Keyframes noch besser kontrollieren (Stichwort: Convert Vertex Tool). So lassen sich Kurven präzise und feinfühlig formen – ähnlich wie Vektorpfade in Illustrator.

Speed Graph
Der Speed Graph hingegen zeigt die Geschwindigkeit über die Zeit. Er ist besonders hilfreich, wenn du wissen willst, wie schnell oder langsam sich ein Objekt bewegt – unabhängig vom genauen Wert der Bewegung.


Wann welchen Graph verwenden?

  • Value Graph ist super für Bewegungen, bei denen du den Pfad genau kontrollieren willst, z. B. bei einem Bounce.
  • Speed Graph eignet sich besser für Bewegungen mit gleichmäßigen Abläufen oder komplexen Abläufen wie z. B. eine Acht (∞-Bewegung), da diese im Value Graph schwer zu bearbeiten ist.

Manchmal gibt After Effects dir nur den Speed Graph – das hängt von der Art der Keyframes und der Eigenschaft ab.

Ich finde, dass es mit dem Wertediagramm einfacher ist, starke/aggresive Kurven zu erstellen. Auch ist es manchmal einfacher “Bounces” zu erzeugen, bei denen der Wert beispielsweise den Wert des End-Keyframes überschreitet (Overshoot, also 0-100 % Skalierung geht auf 110 %, bevor er auf 100 geht, ohne dass ein zusätzlicher Keyframe hinzugefügt werden muss).
Also, wenn ich mehr Kontrolle brauche, verwende ich das Geschwindigkeitsdiagramm, und wenn ich noch mehr Kontrolle brauche, verwende ich das Wertediagramm. 

Aber ich denke, es ist eine Frage der Bewegung und Präferenz. Manchmal macht das Geschwindigkeitsdiagramm seltsame Dinge, dann lässt es sich auch im Wertediagramm beheben. Manchmal müssen Sie im Wertediagramm die Dimensionen trennen, was ein zusätzlicher Schritt ist, den ich nicht machen möchte, wenn ich es nicht muss und da benutze ich das Speeddiagramm

ALSOOO

  • Easy Ease ist nur der Einstieg – für professionelle Bewegungen brauchst du das Verständnis beider Graphen.
  • Bounce-, Overshoot- und Custom-Easings werden erst durch den Graph Editor so richtig lebendig.
  • Jede Animation ist anders – manchmal funktioniert der Speed Graph besser, manchmal der Value Graph. Es gibt keine allgemeingültige Regel – aber ein gutes Gespür entwickelt sich durch Übung.

(Vgl. Material Design o.D.)


3. Frequenz & Rhythmus – Die emotionale Kadenz

Frequenz bezeichnet, wie oft sich Bewegungen innerhalb eines Brand Systems wiederholen oder aktiv sind. Rhythmus ist das zeitliche Zusammenspiel einzelner Animationen.

Zum Beispiel: Eine „High-Energy-Brand“ kann 25 kleine Bewegungen pro Minute zeigen – eine Slow-Brand wiederum nur 5. Die „Bewegungshäufigkeit“ ist ein unterschätzter Bestandteil der Motion Identity.

STILLE & PAUSEN: Man soll auch bewusste Pausen („Motion Silence“) als stilistisches Mittel nutzen – wie Weißraum im Grafik Design ;). Sie schaffen Kontrast und steigern den Effekt der nächsten Bewegung.

  • Animationssequenzen in zeitlichen Intervallen
  • Synchronisation mit Audio
  • „Bewegungsstille“ bewusst einsetzen (Ruhephasen)


(Vgl. Koto 2025)

ZUSATZ: Technische Tipps


Pro-Tipps & Hidden Tricks aus der Praxis

  • Verwende „Overshoot“ (leichte Überdehnung der Bewegung), um Dynamik zu erzeugen
  • Baue kleine imperfekte Bewegungen ein – z. B. leichtes Zittern, Fluktuationen → wirkt menschlicher
  • Definiere Motion Tokens – vordefinierte Animationsbausteine für das gesamte Designsystem
  • Achte auf den „Motion Character Arc“ – auch eine Bewegung braucht Dramaturgie
  • Nutze Motion als Storytelling Device, nicht nur als Dekoration
  • Setze Bewegungen bewusst asymmetrisch – das erzeugt Spannung
  • Verwende „Motion Echoing“ – Bewegungen spiegeln sich in anderen UI-Elementen (Kohärenz)

Shortcuts und Tipps die in meiner Recherche erwähnt wurden

Shortcuts in After Effects, die du lieben wirst:

  • U → Zeigt alle Keyframes eines Layers
  • UU (Doppelklick U) → Zeigt alle geänderten Eigenschaften
  • Shift + F9 → Easy Ease (statt Rechtsklick)
  • Option + [ / Option + ] → Schneidet den Layer an der aktuellen Zeitmarke ein/aus
  • Option + Drag Keyframe → Proportional Keyframe Timing anpassen
  • Cmd/Ctrl + Option+ Shift + H → Toggle Graph Editor direkt (Zeitsparer!)

Extra Tipps:

  • Custom Controls über Sliders & Expressions
    Gerade für wiederverwendbare Templates oder Toolkits hilfreich – so kannst du ganze Bewegungsabläufe per Slider steuern. Einmal Mehraufwand und dann immer Zeitsparen
  • Graph Editor Presets speichern
    Viele wissen nicht, dass man im Flow-Plugin oder via Expressions seine liebsten Motion-Kurven speichern und wiederverwenden kann – spart Zeit bei Serienproduktionen.
  • Arbeite mit Motion Sketching (analog oder digital)
    Einfach Bewegungen zuerst per Linien oder Scribbles aufzeichnen, um „emotionale Energieverläufe“ zu testen – bevor du in After Effects loslegst. Macht Storytelling in Motion verständlicher.
  • Nutze den AE-Preview mit Ton!
    Viele testen Animationen ohne Sound – aber Motion mit Audio zu überprüfen, offenbart oft ganz neue Rhythmusprobleme oder -stärken.


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)


*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.

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)


*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.

How to „Motion Identity“ – Der Prozess

Nachdem im ersten Blogpost nur grob der Themenbereich genannt wurde, hier noch einmal offiziell: Ich werde mich in diesem Semester mit dem Thema Motion Identity beschäftigen und im Zuge dessen natürlich auch eine entwickeln. Davor gibt es aber noch einiges zu Recherchieren und zu Analysieren! Zuerst schauen wir uns den groben Prozess der Erstellung einer Motion Identity an und finden raus, was da denn alles dazu gehört!

Anders als klassisches Motion Design, das eher projektbasiert, ästhetisch/funktional gestaltet wird, geht es bei der Motion Identity um ein tieferes, systemisches Verständnis für die „Bewegungs-DNA“ einer Brand. Die Entwicklung einer professionellen Motion Identity hat verschiedene Stufen im Designprozess, der Strategie aber auch kreatives Experimentieren und technisches Know-how. In großen Braning-Agenturen wird Motion-Design und die Motion Identity schon zu Beginn des Designprozesses mit-konzipiert und beeinflusst die Brandgestaltung maßgeblich, ähnlich wie Typografie, Farben und Komposition.

In diesem Blogpost möchte ich den Workflow dokumentieren, den ich mir für dieses Projekt zurechtgelegt habe, um eine Motion Identity zu entwerfen.
Wir betrachten – weil ich noch unsicher bin worauf es schlussendlich hinaus läuft – zwei zentrale Szenarien:
1. Den Aufbau einer neuen Brand + Motion Identity von Grund auf
2. Die Integration einer Motion Identity in eine bestehende Markenwelt


Bevor es los geht schauen wir uns ein paar Beispiele an, um uns ein Bild davon zu machen, was uns am Ende dieser Reise erwartet:

Examples Motion Identitys

Deezer: https://koto.studio/work/deezer/

Spotify Wrapped: https://vucko.co/project/spotify-wrapped-2022

Faculty: https://koto.studio/work/faculty/
(guiding principles for motion: “balanced,” “straightforward,” and „bright.” >> symmetrical, light-driven ripples of color using our 50/50 threshold to make elements grow in an outwards motion from the center)
Electric Love Moodley: https://moodley.com/work/electric-love-festival-branding

Sock: https://koto.studio/work/sock/

Pairpoint https://koto.studio/work/pairpoint/

Instagram: https://www.itsnicethat.com/news/studio-dumbar-instagram-digital-120324

Motion Identity FIBA (Basketball): https://www.designmadeingermany.de/#185245

Motion identity Google Gemini: YOUTUBE Google – Welcome to the Gemini Era
https://youtu.be/_fuimO6ErKI?si=6Ds_PRxbj-LSl6ic

Netflix: https://thrumotion.com/netflix/

Zu genaueren Analysen verschiedener Motion Identities kommen wir dann wahrscheinlich später im Prozess!


Also, wie komme ich von Zero zu einer gelungenen Motion Identity:


Herangehensweise 1: Aufbau einer Brand + Motion Identity von Grund auf

Vgl. Koto 2025; Vgl. Gleave Dawncreative 2024

1. Phase: Briefing und Strategie — Das Fundament der Motion Identity

Die erste Phase bei der Erstellung einer Motion Identity besteht aus Recherche zur Marke und Positionierung. Man beginnt hoffentlich auch damit, ein detailliertes Briefing einzuholen, in dem die Stakeholder den Umfang, die Ziele, den Zeitrahmen und das Budget des Projekts definieren (Vgl. Never Sit Still o.D.).

Inhalte des Briefings:

  • Wer ist die Marke?
  • Was sind Vision, Mission und Werte?
  • Wer ist die Zielgruppe?
  • Was sind zentrale Touchpoints (Website, App, Social Media, Videos, etc.)?
  • Welche emotionale Tonalität soll die Marke vermitteln? (z. B. verspielt, ernst, exklusiv, technologisch)
  • Welche Stilistik verfolgt das statische Corporate Design bereits?
  • Gibt es bestehende audiovisuelle Markenassets?

Ziel ist es, die Positionierung und den emotionalen Markenkern zu erfassen.
„Motion reinforces a brand’s personality. To do that, you have to be very clear on just what that personality is“ (Vgl. Gleave Dawncreative 2024).

Diese Grundlage bestimmt später, welche Persönlichkeit ind den Formen oder auch Bewegungsmustern (z. B. verspielt, ruhig, präzise) entwickelt werden.
Ein hilfreiches Werkzeug wenn es um Motion geht, sind z.B. Positionierungsskalen (Vgl. Gleave Dawncreative 2024), um visuelle und motion-relevante Attribute festzulegen. Zb.

Einfach ↔ Komplex >> Klarheit vs. Vielschichtigkeit

Zugänglich ↔ Exklusiv >> Breitenansprache vs. Premium

Traditionell ↔ Modern >> Klassisch vs. Zukunftsgewandt

Verspielt ↔ Ernst >> Locker vs. Seriös

Diese Skalen beeinflussen nicht nur Farbwahl und Typografie – sondern es lassen sich auch die späteren Bewegungsverhalten (z. B. dynamisch vs. ruhig) ableiten.

Schritt 2: Entwicklung der visuellen Identität

Auf Basis der strategischen Positionierung entsteht das visuelle Designsystem (darauf wird hier nicht genauer eingegangen):

  • Logo(s)
  • Typografie
  • Farbwelt
  • Iconografie
  • Raster- und Layoutsystem
  • Grafische Elemente (z. B. Linien, Muster, Illustrationen)

Dabei ist wichtig: Schon beim statischen Design an Bewegung denken!
Wie wird sich das Logo bewegen? Wie harmoniert das Layout mit Motion Transitions?

Schritt 3: Erste Motion Exploration

Diese Phase konzentriert sich auf Forschung und Entwicklung der Bewegung. In diesem explorativen Stadium werden experimentelle Bewegungsstudien durchgeführt, um zu entdecken, wie sich bestehende Markenelemente bewegen und interagieren. Wie Never Sit Still betont, ist dieser Schritt entscheidend für die Entwicklung von Motion Principles, die die Grundlage eines Motion-Systems bilden (Vgl. Never Sit Still o.D.).  

Die Entwicklung einer klaren Botschaft für dein Motion Design wird den Großteil der Entscheidungen bestimmen. 

– Welche Geschichte soll die Bewegung erzählen? Kann sie die Markenwerte und die Persönlichkeit bzw. das Produkt oder die Dienstleistung erklären?

– Soll die Bewegung in den Produkten selbst vorkommen oder nur in der Kommunikation und im Marketing verwendet werden?

– Welche Emotionen sollen geweckt werden? Soll die Bewegung nur eine funktionale Unterstützung sein, oder soll sie ausdrucksstark sein?

– Was wollen wir an der Marke hervorheben? Ist sie mit einer bestimmten Kultur, einem Stil oder einem Genre verbunden?

Zu den wichtigsten Aktivitäten in dieser Phase gehören:  

  • Bewegungsstudien für Logo-Dynamiken, Typografie-Verhalten und illustrative Elemente.  (Wie kann das Logo auftreten/verlassen?)
  • Erstellung von Bewegungsprototypen mit verschiedenen Tools wie After Effects, oder Figma.  
  • Vergleichende Analyse mithilfe von Skalen zur Definition des Bewegungsstils: billig vs. teuer, verspielt vs. ernst, traditionell vs. modern (Vgl. Gleave Dawncreative 2024). 
  • Emotionale Mapping: Welche Art von Bewegung erzeugt das gewünschte Gefühl? Welche Art von Energie soll die Marke vermitteln?
    (Welche Bewegungsstile spiegeln die Marke?
    Verspielt = bounce, unvorhersehbare Bewegungen; Premium = langsam, subtil, minimal; Technologisch = präzise, linear, geometrisch)

Schritt 4: Entwicklung der Motion Principles

Dieser Schritt überführt das Experimentieren in ein kohärentes System. Motion Principles definieren wie Bewegung das Verhalten und den Tonfall der Marke unterstützt, während Motion Mechanics spezifische Animationsstile und -verhalten beschreiben (Vgl. KOTO 2025).  

Motion Principles definieren typischerweise:  

– Geschwindigkeit und Rhythmus (langsam, schnell, elastisch)  

– Richtung und Bewegungsachse  

– Energiedynamik (hüpfend, fließend, scharf)  

Motion Mechanics umfassen:  

– Spezifische Techniken wie Slide-Ins, Bounce-Ins, Fade-Outs, Zooms  

– Easing-Funktionen (ease-in, ease-out, ease-in-out, linear)  

– Wiederholende Verhaltensweisen (Oszillation, Pulsation, Rotation)  

Diese Definitionen gewährleisten Konsistenz über alle Formate und Ausgaben hinweg. Dieser Grundbauplan für das spätere System ist vergleichbar mit einem Styleguide für visuelle Gestaltung. (Vgl. Never Sit Still o.D.; Vgl. IBM Design Language 2023)

Schritt 5: Aufbau eines Motion Systems

Sobald die grundlegenden Prinzipien festgelegt sind, ist eine Verfeinerung erforderlich, um Skalierbarkeit und Praktikabilität sicherzustellen. Basierend auf den Prinzipien entsteht also das Motion System: Ein systemischer Baukasten, der genau definiert, wie sich welche Elemente bewegen.

Beispielhafte Module:

  • Logoanimation
  • Typo-Ein- und Ausblenden
  • Übergänge zwischen Content-Blöcken
  • Lower Thirds
  • UI-Elemente: Buttons, Toggles, Formfelder

Auch die Easing-Kurven werden standardisiert:
(z. B. ease-in-out für organische Übergänge, bounce für dynamischen Effekt)

Tipp: Entwickle „Motion Mechanics“ – wiedererkennbare Bewegungsmuster mit Alleinstellungsmerkmal.

Zu dieser Phase gehört:  

– Testen über verschiedene Plattformen hinweg (Web, Mobile, Video, Print)  
– Anpassung der Bewegungsparameter basierend auf Nutzerfeedback und Zugänglichkeitsstandards  
– Festlegung von Bewegungs-Hierarchien (z. B. primäre Bewegungen für große Übergänge, Mikro-Interaktionen für UI/UX)  (Vgl. Never Sit Still o.D.). 

Bestandteile eines Motion Systems:

  • Timing-Logik (Geschwindigkeit, Taktung)
  • Easing-Kurven (z. B. ease-in, ease-out, linear)
  • Transitions (Ein-/Ausblendungen, Slide-Ins etc.)
  • Standardanimationen (Hover, Click, Load, Scroll)
  • Typografie-Animationen (Fade, Scale, Slide, Letter-by-Letter)
  • Logoanimationen
  • Formfeedback-Animationen (Fehler, Erfolg)
  • Soundintegration (falls vorgesehen)

Example Motion-Guidelines:

Klarna: https://brand.klarna.com/motion#wordmark-animation 
Vevo: https://brand.vevo.com/motion/
Github:  https://brand.github.com/motion-identity/motion-guidelines

Zu berücksichtigende Motion-Touchpoints

Es gibt eine große Bandbreite an Motion, die in unterschiedlichen Kontexten und mit unterschiedlichen Absichten eingesetzt werden kann.

Bei der Entwicklung eines Motion-Systems oder der Guidelines ist es hilfreich, eine Vorstellung davon zu haben, wie Marken typischerweise mit Bewegung umgehen. Hier also ein kleiner Cheat-Sheet von KOTO (https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion), der die typischsten Anwendungsfälle für Motion in einer Brand festhalten.

https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion

Schritt 6: Erstellung eines Motion Toolkits

Ein Toolkit sorgt für die Skalierbarkeit und Anwendung im Alltag:

  • Templates. & Animationsvorlagen  (z. B. Social Clips, Präsentations-Openings)
  • Masterdateien/Quelldateien (After Effects, Figma, Lottie JSON)
  • Motion Guidelines als PDF mit detaillierten Bewegungsprinzipien, -mechaniken und Anwendungsbeispielen (inkl. Timing-Tabelle, Easing-Library)
  • Komponentenbibliothek
  • ev ein Präsentationsdecks für interne und externe Stakeholder (Vgl. Never Sit Still o.D.)  

Dadurch wird die Anwendung im Team vereinfacht – von Design bis Video Editing. Dieses Toolkit ist entscheidend für die Markenkonsistenz, insbesondere wenn mehrere Teams oder Agenturen an der Inhaltsproduktion beteiligt sind. 

Schritt 7: Anwendung & Testing

Nun erfolgt der Rollout in allen Medienformen. Die Anwendung des Motion-Identity-Systems in realen Szenarien ist der ultimative Test für seine Wirksamkeit. Dazu gehören:  

  • Website und App-Interaktionen  (Hover-Zustände, Button-Klicks, Seitenübergänge)  
  • Social Media Content  (Intro/Outro-Karten, kinetische Typografie, animierte Infografiken)  
  • Videoproduktion (Intros, Outros, Transitions)
  • Broadcast- und Präsentationsvideos, Pitchdecks (Logo-Animationen, Erklärvideos, Lower Thirds)  

Schritt 8: Pflege & Weiterentwicklung

Motion Identities sind kein statisches Projekt – sie leben mit der Marke mit. Marken entwickeln sich weiter, und das sollte auch ihre Bewegungssprache tun. Bewegungssysteme solltenmodular und erweiterbar sein, um sich an zukünftige Markenerweiterungen und neue technologische Medien anzupassen (Vgl. KOTO 2025).  

Regelmäßige Audits und Feedback-Zyklen können helfen:  

– Veraltete Bewegungs-Assets zu identifizieren  

– Die Zugänglichkeit und das Nutzererlebnis zu verbessern  

– Sich an sich ändernde Markenstrategien anzupassen  

  • Feedback sammeln (User, Team, Performance-Metriken)
  • Iterativ optimieren
  • Neue Templates anlegen
  • Plattformanforderungen anpassen

Tipp: Auch Accessibility-Kriterien (z. B. „reduce motion“ Systemoptionen) sollten regelmäßig geprüft und angepasst werden.

Herangehensweise 2: Integration einer Motion Identity in eine bestehende Marke

Vgl. Gleave Dawncreative 2024; Vgl. Never Sit Still o.D.

Schritt 1: Analyse der bestehenden Marke

Zunächst muss klar sein:

  • Was ist die aktuelle Markenpersönlichkeit?
  • Welche Emotionen vermittelt das Design?
  • Welche Positionierung liegt vor?

Positionierungsskalen helfen auch hier zur Einordnung: „Wenn die Marke ernst, minimal und technologisch wirkt – wie muss dann Bewegung gestaltet sein?“ (Siehe oben)

 Schritt 2: Motion Audit

Gibt es bereits Bewegungen?

  • Videos?
  • Microinteractions im Interface?
  • Transitions?

Oft zeigt sich: Es gibt Inkonsequenz, die durch ein konsistentes Motion System gelöst werden kann.

Schritt 3: Motion-Ziele definieren

  • Welche Funktion soll Motion erfüllen?
    • Storytelling?
    • UX-Optimierung?
    • Brand Recognition?
  • Welche Emotion soll transportiert werden?
  • Wo soll Bewegung auftreten – wo nicht?

 Schritt 4: Motion Prinzipien festlegen

Basierend auf der bestehenden Brand:

  • Easing-Typen
  • Timings
  • Energielevel
  • Animationscharakter

Wichtig: Bewegung muss das ergänzen, was die visuelle Marke vorgibt.
[Details siehe Prozess oben]

 Schritt 5: Animation der zentralen Brand-Elemente

[Details siehe Prozess oben]
Alle weiteren Schritte wie oben


Und “few common mistakes to avoid” als Liste von KOTO (Vgl. KOTO 2025):

Don’t overdo it: Too much or overly flashy motion can be distracting. Treat motion like any other design element—focused and intentional. Always return to your strategy to create meaningful movement instead of digital clutter.

Don’t neglect the bigger picture: Every piece of motion should align with your overall strategy and strengthen your brand identity. Ignoring this can weaken your brand’s impact.

Don’t underestimate quality: If you don’t have the resources for high-quality motion design, stick with polished static designs. A professional-looking static asset is always better than poorly executed motion.

Accessibility is key: Motion design should include everyone. Add audio captions where needed and use Harding-FPA tests to ensure flash-heavy videos are safe for those with epilepsy.

Zirka so würde ich im Prozess dann auch vorgehen… hoffe ich! Wir werden sehen!
Weiter geht es damit, Inspiration zu sammeln und eine Brand zu (er-)finden, mit der ich arbeiten möchte!

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)
  • Gleave Dawncreative 2024
    Amy Gleave (05.07.2024): Building a motion identity. In: dawncreative, https://www.dawncreative.co.uk/insight/building-a-motion-identity/ (zuletzt aufgerufen am 16.03.2025)
  • Dickinson 2024
    Dickinson, Peter (13.03.2024): How do we understand Motion Design, Motion Identities, and Motion Systems: Enhancing Brand Presence. In: Linked.in, https://www.linkedin.com/pulse/how-do-we-understand-motion-design-identities-systems-peter-dickinson-uzbje/ (zuletzt aufgerufen am 16.03.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.

Motion Identity – Was, Warum, Bedeutung

Motion Identity
Was, Warum, Bedeutung

Wir leben in einer zunehmend visuell überladenen, lauten und digitalen Welt.
Sei es Social Media, Web oder täglich benutzte Apps und „In a world where watching big screen while holding little screen is a relatable feeling, motion is essential, not optional.“ (Vgl. KOTO 2025).


Deshalb wird auch von Brands und Marken erwartet, dass sie auf dynamische, einprägsame und emotional ansprechende Weise mit ihrem Publikum kommunizieren. Viele Marken tendieren immer noch dazu, erst an ihre Motion-Language zu denken, wenn sie plötzlich einzelne bewegte Elemente brauchen, weshalb es oft keine oder wenig Guidelines dafür gibt. Brands starten deshalb jedes mal aufs neue von Null, wenn es um die Konzeption bewegter Elemente geht, was den Prozess ineffizient macht und in einer „moving-image-first“-Welt durchaus für Schwierigkeiten sorgt. Hier kommt die Motion Identity (auch bekannt als Motion Branding oder Motion Design Systems) ins Spiel. 


Was ist Motion Identity?

Die Motion Identity ist ein Teil der Visual Identity eines Unternehmens und bezieht sich auf die gezielte und strategische Anwendung von Motion Design auf verschiedene Markenelemente.

Bewegung wird so als wichtiger Kern-Bestandteil der Markenidentität (Corporate und Visual Identity) betrachtet. Während klassische Markenidentitäten primär visuelle Komponenten wie Logo, Typografie, Farben oder Bildsprache definieren, erweitert eine Motion Identity diese Elemente um eine bewegte und dynamische Dimension: Sie beschreibt, wie sich eine Marke bewegt – also, wie sich Logos, Typo, Icons, Layouts und visuelle Elemente im digitalen Raum verhalten (Vgl. KOTO 2025).

Diese Bewegungsmuster sind nicht nur Deko, sondern kommunizieren die Werte, den Charakter und die Haltung einer Marke auf eine subtile und emotionale Art. Die Bewegungen sind wiedererkennbar, präzise definiert und konsistent über alle Kanäle/Touchpoints hinweg.  Man nennt es auch eine „Motion Language“ – ein Set aus Bewegungsprinzipien, das über alle Kanäle hinweg Anwendung findet.

Ein solches System entsteht nicht zufällig, sondern durch exploratives Design und präzise Definition in Form von Motion Guidelines, Toolkits und definierter Animationstechniken. (Vgl. Never Sit Still o.D.)

Warum ist eine Motion Identity wichtig?

Wir leben in einer „motion-first world“: Marken werden heutzutage überwiegend in digitalen und bewegten Kontexten wahrgenommen, sei es in Apps, auf Websites, durch Reels, TikToks, Instastories, Showcases, Onboarding Screens oder Werbevideos. Die Ära der rein statischen Corporate Identity naht dem Ende und was früher als eine Ergänzung der Markenidentität galt, ist heute einer der erste Kontaktpunkte: Motion. (Vgl. KOTO 2025)
Bewegung wird immer mehr zu einem der primären Informationsträger. Im Gegensatz zu statischen Branding-Elementen fangen Bewegungselemente die Aufmerksamkeit der Betrachter:innen viel schneller ein, vermitteln Emotionen mit zusätzlichen Nuancen und schaffen immersive Markenerlebnisse. (Vgl. Gleave Dawncreative 2024)

Motion Identity spielt eine entscheidende Rolle bei der Steigerung der Markenwahrnehmung. Wenn sie effektiv umgesetzt wird, fördert sie die Wiedererkennung, verstärkt zentrale Markenbotschaften und verbessert das Nutzererlebnis. (Vgl. KOTO 2025).  

Motion Identity überbrückt auch die Lücke zwischen Storytelling und Branding, denn Motion Design und Bewegung ist wie dafür geschaffen, Geschichten zu erzählen. Storytelling kann den Wert eines Produktes um bis zu 2706% steigern (https://www.go-globe.com/storytelling-statistics-trends-infographic/#:~:text=Furthermore%2C%20research%20indicates%20that%20stories%20have%20the%20potential%20to%20boost%20product%20perception%20by%202%2C706%25), und schon minimale Transitions (zB im Logo) können eine eben solche Geschichte erzählen! (Vgl. KOTO 2025)

Ein starkes Motion-System bietet einen Rhythmus und Stil, der emotional mit den Nutzern resoniert und den Charakter der Marke symbolisiert. An einem heruntergebrochenen Beispiel erklärt, könnte eine Premium-Marke langsame, sanfte und bewusste Bewegungen und Übergänge verwenden, um Eleganz und Raffinesse zu vermitteln, während ein Tech-Startup schnellere, modularere Bewegungsverhalten einsetzen könnte, um Agilität und Innovation zu signalisieren (Vgl. Gleave Dawncreative 2024).  

Vorteile von Motion Identity:

  1. Emotionale Wirkung: Motion ruft sofort eine emotionale Resonanz hervor und transportiert Tonalität und Markenwerte genauso schnell und sogar schneller als Text oder Farbe.
  2. Erhöhte Wiedererkennbarkeit: Logoanimationen, gut eingesetzte Bewegungsmuster oder Transitions erhöhen den Wiedererkennungswert, besonders auf Social Media oder im UX-Kontext.
  3. Informationsvermittlung: Animation unterstützt die kognitive Verarbeitung, denn sie können Hierarchien deutlich aufzeigen, Abläufe erklären und Nutzer:innen durch komplexe Inhalte führen.
  4. Differenzierung: In einem überladenen digitalen Umfeld ist Bewegung ein starker Differenzierungsfaktor und eine eigene Motion Identity hilft womöglich dabei, sich von der Konkurrenz abzuheben.
  5. Anpassen ist einfach: Motion-Systeme können in allen Formaten flexibel angewendet werden – von Microanimation bis Showreel
  6. Consistency in UX: Bewegungsmuster können Navigation, Feedbackmechaniken und Benutzerführung standardisieren und verbessern, was besonders in Apps und auf Websites wichtig ist.

Motion ist also mehr als nur ein Stilmittel – Es ist ein strategisches Werkzeug im Branding (der Markenbildung). „Motion reinforces a brand’s personality“ – das bedeutet, dass die Art der Bewegung genau auf die Markenwerte abgestimmt sein muss: verspielt, klar, ruhig oder dynamisch. Eine einfache Slide-in-Animation kann professionell oder verspielt wirken – je nach Kurvengeschwindigkeit, Timing, Form oder Typo. (Vgl. Gleave Dawncreative 2024)

How much motion does a brand need?

Nicht jede Marke braucht spektakuläre Animationen. Die Menge an Animation hängt von der Persönlichkeit der Marke und vom Anwendungskontext ab:

  • Low-Motion – Animierte Brand-Assets:  Schon ganz dezente Bewegungen können die Werte einer Brand vermitteln, z. B. durch typografische Transitions oder reduzierte Logoanimationen. Startet man mit den Basics und dem Motto „Keep it simple“ reicht es schon, sich mit dem Logo, Symbolen und ev. Überschriften zu beschäftigten
  • Mid-Level Motion – Motion Systems: Man empfiehlt immer zumindest das basis-level an Motion in einem Branding zu beachten, ultimativ lassen sich aber schnelle und praktische Sets und Systeme für Motion erstellen. Diese sogenannten Motion Systems machen es einfacher, die Bewegungen „up-zu-scalen“, ohne dauerhaft Dinge neu erfinden zu müssen. Durch ein Set an Assets rund um das Thema Motion, kann so vieles abgeleitet werden.
  • High-Motion Brands — Guidelines und Toolkits: Marken mit vielen digitalen Kontaktpunkten (wie Tech-, Media- und Lifestyle-Unternehmen) brauchen oft eine sehr ausgeprägte Motion Identity und ein gut anwendbares Motion System.
    Es bietet sich an „accessible and straightforward“ Guidelines zu entwickeln, die dem Team und allen Beteiligten erklärt, wie sich die Brand bewegt. Das stärkt nicht nur das Brand-System, es ermglicht auch ein flexibles Anpassen und Erweitern.
    Sogenannte Motion Toolkits werden für „motion-heavy industries“, wie Live-TV verwendet. Hier werden editierbare, automatisch anpassbare oder sich ständig updatende Dateien erstellt, die schnell (oder sogar in Echtzeit) mit Daten und Eingaben arbeiten. 

Die Regel lautet wie so oft „As much motion as necessary – not as much as possible.“, denn zu viel Animation wirkt überladen und kann ie Nutzer:innen wie auch die Technik überfordern. Ziel ist es, genau so viel Bewegung einzusetzen, wie es der Markenbotschaft, der Plattform und dem Publikum entspricht.

Motion Design vs. Motion Identity vs. Motion System

Das hier ist auch der richtige Moment um die Begriffe ein wenig voneinander zu differenzieren:

Motion Design, ist die Gestaltung einzelner bewegter Inhalte – z. B. Videos, Transitions oder Animationen. Hier liegt der Fokus auf der Kreativität und visueller Umsetzung.
Motion Identity, ist die strategisch definierte Bewegungssprache einer Marke – Sie ist systematisch, konsistent und auf Markenwerte abgestimmt und damit ein Teil der Markenidentität.
Motion Systems sind technisch-kreative Frameworks die aus Prinzipien, Guidelines, Tools und Templates bestehen. Sie definieren, wie und wo Bewegung markenkonform eingesetzt werden können. (Vgl. Dickinson 2024)

Schlüsselelemente eines Motion-Identity-Systems   

–  Motion Principles: 
Grundlegende Regeln, die die Verwendung von Bewegung über verschiedene Markenelemente hinweg steuern. Sie definieren Timing, Geschwindigkeit, Richtung und Easing-Kurven. 

–  Motion Mechanics: 
Spezifische Techniken wie Slide-Ins, Fade-Outs, Bounce-Effekte, Skalierung und Rotation, die ein visuelles Vokabular für Bewegung bieten. 

  • Motion Behavior: 
    Die kinetische Signaturpersönlichkeit einer Marke – ihr Rhythmus, Tempo und ihre Elastizität.  
  • Anwendungsrichtlinien: 
    Diese gewährleisten die Konsistenz bei der Anwendung von Bewegung über digitale, gedruckte und umgebungsbezogene Touchpoints hinweg (Vgl. KOTO 2025; Vgl. Never Sit Still o.D.).  

Abschließend ein Bild mit ein paar der wichtigsten Touchpoints der Motion Identity:

https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion

Conclusioooo

Motion Identity nicht mehr nur eine oberflächliche, ästhetische Verbesserung, sondern viel mehr ein zentraler Bestandteil moderner Markensysteme! Sie verleiht einer Marke eine Stimme und verbessert sowohl die visuelle Kommunikation als auch die Nutzerinteraktion. Da sich die digitalen Medien immer weiter entwickeln, wird auch die Motion Identity eine immer wichtigere Rolle in der Bereitstellung konsistenter, emotional ansprechender und user-centered Marken spielen.

Recommendation: Read “OFF Brand Reel talk – The power of branded motion design”, because it might just be all one needs to know, like WOW! https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion

Quellen:

*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.

Diversity and Representation in Animation (Extra Blogpost bzgl. Exkursion Pixel Vienna)

Für all jene, die nicht Roman sind und sich fragen warum es einen elften Blogpost gibt:
Bei unserer Media-Exkursion im Herbst zur Pixel Vienna 2024 hab ich leider den abschließenden Panel-Talk am Sonntag verpasst und kompensieren diesen damit, mir die 2023 Version davon auf YouTube anzusehen. Was ich zuerst als nervige Aufgabe empfunden habe empfinde ich jetzt, eine Stunde später, aber als unglaublich interessant und bereichernd, also DANKE ROMAN! (Ernst!)
Worum geht es: Diversity and Representation in Animation and Character Design Challenge Awards (PIXELvienna 2023)

Ich habe mir einige Notizen gemacht und versuche den Post hier anschließend zusammenzufassen und die wichtigsten Erkenntnisse in eine Liste zu bringen.

Die Welt der Animation ist bunt, kreativ und voller Möglichkeiten. Doch wie schafft man es, Geschichten zu erzählen, die nicht nur unterhaltsam sind, sondern auch die Vielfalt unserer Gesellschaft widerspiegeln? Beim Paneltalk der PIXELvienna 2023 diskutierten Expert:innen aus der Animations- und Spielebranche (Amelie Loy, Tova Bele, Yassmine Najime, Anne Raffin) über Diversität, Repräsentation und die Herausforderungen, die damit einhergehen. Schwerpunkt der Gespräche war Storytelling und Charakterdesign.

Zu Beginn des Talks leiten die Expertinnen das Thema damit ein, über Charaktere zu sprechen die sie in der Vergangenheit geprägt haben, denn animierte Charaktere haben einen enormen Einfluss auf uns – sei es in der Kindheit oder im Erwachsenenalter. Charakter (ob Animation oder Realfilm) prägen unsere Vorstellungen von Held:innen, Vorbildern und sogar von uns selbst, aber leider sind diese oft von Stereotypen geprägt. Ein Beispiel, das in der Diskussion genannt wurde, ist Mulan: Während sie als starke, unabhängige Figur gefeiert wird, gibt es auch kritische Aspekte, wie die Darstellung der „bösen“ Schurken, mit dunklerer Hautfarbe, die rassistische Klischees bedient.

Die Frage mit der sich die Personen in den Gesprächen also beschäftigen ist: Wie können wir Charaktere gestalten, die vielfältig und authentisch sind, ohne in Stereotypen zurückzufallen?

Tipps für gutes Charakterdesign ohne Stereotype

  1. Umgebe dich mit jenen Menschen, deren Geschichten du erzählst!
    Wenn du über bestimmte Gruppen oder Identitäten schreibst ist es wichtig, sich mit eben diesen Menschen zu umgeben, die diese Erfahrungen teilen. Yassmine Najime erwähnte, dass selbst die besten Absichten fehlschlagen können, wenn man nicht die Perspektiven der Betroffenen einbezieht.
    Beispielsweise wurde bei der Entwicklung eines Spiels über einen Rollstuhlfahrer ein:e Rollstuhlbasketballspieler:in konsultiert, um sicherzustellen, dass die Darstellung authentisch ist, wie Tina Bele erzählt.
  1. Inspiration aus der realen Welt holen
    Im Talk wird betont, dass die reale Welt voller Vielfalt ist und dadurch wohl der Beste Ort ist, um sich Inspiration und das richtige Gefühl für Diversität im Charakterdesign zu verschaffen. Die Message lautet: Geh raus, beobachte Menschen in der Stadt, zeichne live und lass dich von der Vielfalt an Körpern, Kleidungsstilen und Bewegungen inspirieren. 
  1. Komplexe Charaktere
    Jeder Mensch ist komplex – gut und schlecht, stark und verletzlich. Diese Komplexität sollte sich auch in den Charakteren widerspiegeln. Es wird langweilig, wenn Charaktere nur „gut“ oder „böse“ sind. Figuren sollen mehrdimensional sein und sich nicht einfach in Schubladen gesteckt werden. AUCH WICHTIG: Nicht jeder Charakter in deinem Film muss alle diese Schichten immer zeigen und erklärt bekommen, sonst kommt der Film wahrscheinlich nie an ein Ende.
  2. ES MACHT EINEN UNTERSCHIED: Diversität am Arbeitsplatz:
    Diversität spielt nicht nur in den Geschichten, sondern auch in den Kreativ-Teams eine Rolle. Tova Bele erzählt beispielsweise aus ihrem Studio: Als mehr Frauen eingestellt wurden, verbesserte sich die Feedback-Kultur und die Arbeitsatmosphäre insgesamt.
    Was ich persönlich auch Interessant fand war der Einwand zu Portfolios:
    Durch die Einführung von anonymen Portfolios – bei denen Bewerber:innen ihre Arbeiten ohne Namen oder Bilder einreichen – konnte man auch Frauen und nicht-binären Menschen erreiche, die sonst von den ihnen anerzogenen Normen eingeschränkt wurden. Frauen schränken sich durch diese gesellschaftlichen Normen nämlich selbst viel mehr ein, trauen sich weniger und haben das Gefühl sich andauernd beweisen zu müssen und nie gut genug zu sein.

Spannende Ansätze im Storytelling

  1. Erzähle eine Geschichte, bevor du Diversität einbaust
    Es ist wichtig, dass Diversität nicht erzwungen wirkt, ansonsten hat man jenes Phänomen dass viele bei Netflix derzeit bemängeln. Anne Raffin erklärte, dass man beispielsweise zuerst eine starke Geschichte braucht und erst dann Aspekte der Diversität einfließen lassen kann, ohne den Fokus zu verlieren. Eine Figur kann beispielsweise trans sein, ohne dass dies der zentrale Konflikt der Geschichte ist – So normalisiert man eben jene Personen und macht ihre Kämpfe nicht immer zur gesamten Persönlichkeit.
  2. Wechsle die Geschlechter deiner Charaktere
    Ein cleverer Tipp aus der Diskussion ist es auch, nachdem man die Geschichte geschrieben hat die Geschlechter der Charaktere auszutauschen, denn dadurch werden oft unbewusste Stereotype sichtbar, die mann dann korrigieren kann.
  3. Reduziere Charaktere nicht immer auf ihre Kämpfe
    Es ist leicht, Charaktere auf ihre Identität oder ihre Herausforderungen zu reduzieren – aber eine echte Repräsentation bedeutet, sie als vielschichtige Persönlichkeiten zu zeigen. 
    Wie kann man das also „unauffällig mitgeben“? Durch Visual Storytelling in form von Kleidung, Licht und Umgebung kann man viel über die Hintergründe und Systeme, in denen sich die Charaktere befinden, vermitteln ohne diese explizit zu thematisieren.

Und auch bei den Besten: Fehler passieren – und das ist okay

Selbst mit den allerbesten Absichten können Fehler passieren. Ein Beispiel aus der Serie Sex Education: Trotz sehr vielen Bemühungen um verschiedenste Identitäten zu integrieren gab es bei der Darstellung einer asexuellen Figur viel Kritik aus der Community.
Die Sprecher:innen betonten aber, dass es wichtig ist, aus Fehlern zu lernen und nicht den Willen zu verlieren, sich zu verbessern. Eine spannende Anmerkung war es auch, dass wir es gesellschaftlich erst dann geschafft haben, wenn eine asexuelle Figur, oder eine andere derzeit unterrepräsentierte Identität im Film auch mal unsympathisch sein kann, ohne dass dies auf alle asexuellen Menschen übertragen wird.

Kurz: Tipps für Diversität und Repräsentation in der Animation

  1. Inspiriere dich von der Umwelt – Beobachte Menschen und ihre Vielfalt.
  2. Beziehe die thematisierte Community ein 
  3. Schaffe komplexe Charaktere, die nicht nur „gut“ oder „böse“ sind.
  4. Vielfalt im Team führt zu besseren Geschichten.
  5. Erzähle zuerst eine starke Geschichte – Diversität sollte meistens natürlich in die Handlung integriert sein.
  6. Tausche die Geschlechter deiner Charaktere im Story-Prozess mal aus, denn so findest du unbewusste Stereotype.
  7. Reduziere Charaktere nicht auf ihre Identität – Zeige sie als vielschichtige Persönlichkeiten.
  8. Lerne aus Fehlern – Perfektion ist nicht das Ziel, aber kontinuierliche Verbesserung.
  9. Nutze Visual Storytelling – Zeige die Hintergründe deiner Charaktere durch Details, ohne es explizit zu sagen.

Diversität und ihre Repräsentation in Film und Animation sind keine neuen Themen, aber sie sind essenziell, um Geschichten zu erzählen, die unsere Welt widerspiegeln! Die Diskussion zeigt, dass es dabei nicht um Perfektion geht, sondern um die Bereitschaft, zuzuhören, zu lernen und sich weiter zu entwickeln!

Was ist dieses „gewisse Etwas“?

Ist es nun endlich soweit? Nach neun intensiven Blogposts, in denen ich mich – oder wir uns – mit den verschiedensten Aspekten der Animation beschäftigt haben – von den ersten, wichtigen Grundlagen wie Gestaltungs- und Animationsprinzipien, über Sounddesign, Morphing, Timing, Rhythmus bis hin zu Mikrobewegungen und visueller Überladung – ist es nun an der Zeit, all das zusammenzuführen. 

Die zentrale Frage, die uns in diesem abschließendem Post jetzt beschäftigt ist nämlich: Was ist dieses „gewisse Etwas“, von dem alle zu sprechen scheinen? Was lässt eine Animation gut und eine Bewegung perfekt und natürlich aussehen?

Nun ist diese Frage natürlich nicht einfach zu beantworten – sonst wäre der Blog wohl nur halb so lang – denn die Anwort berührt viele, vielleicht sogar alle, eben dieser Themen, die wir bereits behandelt haben. Aber versuchen wir mit einem zusammenfassenden Blick auf all diese Erkenntnisse, die Essenz herauszukristallisieren um der Antwort zumindest ein kleines bisschen näher zu kommen

1. Das Fundament muss passen: Die Animationsprinzipien, auch wenn wir’s nicht mehr hören können.

    Zum wohl siebzigsten mal in dieser Blogposts muss ich die Animationsprinzipien erwähnen, denn man kommt nicht darum herum zu sagen, dass die 12 Animationsprinzipien von Frank Thomas und Ollie Johnston das Herzstück fast jeder gelungenen Animation sind – ob bewusst oder unbewusst (meistens bewusst, wenn’s wirklich gut ist!)
    Sie sind bestimmt ein Teil von eben diesem „gewisse Etwas“, das wir suchen, denn es ist zumindest das, was einer Figur oder einem Objekt Leben einhaucht.
    Ob „Squash and Stretch, „Anticipation“, „Follow Through“, „Timing“ und „Exaggeration“, das sind jene Dinge die Bewegungen nicht nur realistisch, sondern auch ausdrucksstark und emotional wirken lassen. Das zählt für Character-Animation, aber auch Motion Graphics!

    Um das ganze mit einem Beispiel in unseren Köpfen zu festigen:
    Wenn eine Figur springt, ist es nicht nur die auf und ab Bewegung selbst, die den Sprung glaubwürdig macht, sondern auch die Vorbereitung (Anticipation), das Strecken und Verzerren während des Sprungs (Squash and Stretch + Motion Blur?) und das Mitbewegen der Haare oder Kleidung (Follow Through).
    Die Prinzipien sind also das Rückgrat in der Animation und lassen Bewegungen richtig aussehen.

    2. Timing, Rhythmus und das Sounddesign

    Timing ist alles. – zählt wohl nicht nur im wahren Leben, sondern auch in der Umsetzung deiner Animation. Timing bestimmt, wie schnell oder langsam eine Bewegung abläuft, und beeinflusst damit direkt, wie natürlich sie für Betrachter:innen wirkt. 

    „Ease In und Ease Out“ ist da wohl ein guter Ansatzpunkt, denn Bewegungen beginnen meist langsam, beschleunigen und verlangsamen sich wieder, genau wie in der realen Welt. 

    Im Beispiel: Ein Ball, der auf den Boden fällt, benötigt Zeit, um zu beschleunigen und wieder abzubremsen. Ohne diese subtilen Timing-Anpassungen wirkt die Bewegung mechanisch und unnatürlich. Das heißt aber nicht „Easy Ease“ auf alle Keyframes in Aftereffects zu kopieren – wobei es oft besser ist als nichts – vielmehr soll man sich den Speed Graph etwas genauer anschauen, denn die Kurven können den Look und Adas Gefühl maßgeblich beeinflussen.

    Rhythmus spielt in deinen Videos ebenfalls eine große Rolle, besonders in Verbindung mit der Musik und deinem Sounddesign. Jene Bewegungen, die synchron zur Musik oder zu Soundeffekten verlaufen, wirken harmonisch und fließend.

    Das Sounddesign ist wohl die unsichtbare Kraft hinter der Bewegung und unsere unterschätzte Heldin in einer gelungenen Animation. Damit bekommen die Bewegung Tiefe, Sinn und Realismus. Das bezieht sich auf Dinge wie ein Schritt, der ohne passenden Sound hohl wirkt, oder einen Schlag ohne Impact-Geräsch, der kraftlos wirkt, aber auch auf den „Swoosh“ sound oder das Bounce Geräusch von Typo. Soundeffekte und Musik sorgen dafür, dass die animierten Bewegung nicht nur visuell, sondern auch auditiv wahrgenommen und unterstrichen werden! (Schau dir als beispiel deine Lieblingsanimation ohne die beatlastige Musik im Hintergrund an – schon bisschen komisch, und plötzlich achtet man ganz anders auf die Bewegungen als davor!)

    3. Mikrobewegungen

    Kleine, subtile Bewegungen sind oft ein wichtiger Schritt, um eine Animation natürlich wirken zu lassen. Sei es ein leichtes Zucken der Mundwinkel, das Heben einer Augenbraue oder das sanfte Schwingen von Haaren im Wind – die Figur bekommt Persönlichkeit, Authentizität und Echtheit. Diese Details werden zwar oft unbewusst wahrgenommen – außer geschulte Augen wie unsere achten darauf und denken sich „Ach, clever, wie die Nase immer zuckt“ – aber sie machen den Unterschied zwischen einer steifen und einer lebendigen Animation!

    Also: Wenn eine Figur spricht, bewegt sich nicht nur der Mund, sondern auch die Wangen, die Augenbrauen und manchmal sogar die Nasenflügel.

    4. Weniger ist (meistens) mehr: Visuelle Überladung vermeiden:

    Ein häufiger Fehler in der Animation ist die Überladung mit zu vielen visuellen Elementen oder Bewegungen, denn hat man den dreh erst raus verliert man sich manchmal in den Details!
    Over-Animating kann dazu führen, dass die Szene unübersichtlich und anstrengend für die Betrachter:innen werden und wie im Blogposts genauer ausgeführt lehrt uns die Cognitive Load Theory, dass unser Gehirn nur eine begrenzte Menge an Informationen gleichzeitig verarbeiten kann! Wenn eine Animation also zu viele Details oder Bewegungen enthält, die alle wahrgenommen, gelesen und verstanden werden müssen, wird die kognitive Belastung zu hoch, und die Betrachter:innen verlieren den Fokus. Durch die Reduktion auf das Wesentliche wird die Geschichte klarer und die Animation wirkt natürlicher.

    ––––––– ––––––– –––––––

    Magdas-„Mach deine Animation besser“-Liste

    Was würde ich für mich nun als Punkte zusammenfassen, auf die ich in Zukunft speziell achten werde um dem „gewissen Etwas“ näher zu kommen? Während dem schreiben der Artikel hab ich immer wieder für mich persönlich notiert, worauf ich speziell achten muss und was mir als häufige Fehler in meiner Animation aufgefallen ist. Die Liste ist vielleicht etwas subjektiv, aber der eine oder andere Hinweis ist bestimmt auch für Fellow-Animators interessant.

    „Boa das ist noch richtig kacke gerade“ – Häufige Fehlerchen und Tippsssss:

    • FEEDBACK EINHOLEN, von Leuten die sich auskennen aber nicht schon 7h das selbe video in Dauerschleife sehen.
    • Referenzmaterial nutzen: 
      Egal, ob es sich um reale Videos, Fotos oder sogar eigene Aufnahmen handelt – Referenzen helfen dabei die Bewegungen realistischer zu gestalten. Man kann sich selbst filmen um das Timing und die Physik von Bewegungen besser zu verstehen oder sich Beispiele holen um sich am Timing deren zu orientieren.
    • Bewegungsbögen (Arcs) beachten: Fast alle natürlichen Bewegungen folgen einem Bogen
    • Sounddesign als integralen Bestandteil sehen: Soundeffekte, Foley und Musik sollten nicht nachträglich hinzugefügt, sondern von Anfang an in den Animationsprozess integriert werden. Gutes Sounddesign verstärkt die Emotionen und die Glaubwürdigkeit der Bewegung
    • Schlechtes Timing: Easy-Ease is not enough. Schau dir bewusst den Graphen an. Denk BEWUSST drüber nach wie das funktioniert und setz BEWUSST Beschleunigung oder Abbremsen ein. Timing ist entscheidend, um Gewicht, Emotionen und Dynamik zu vermitteln.
    • Unnatürliche Pausen: Bewegungen, die abrupt enden oder ohne Übergang pausieren, wirken oft unfertig. Wenn Pause, dann richtig und bemerkbar.
    • Unausgeglichene Komposition: Eine schlechte Bildkomposition kann die Wirkung einer Animation beeinträchtigen. Elemente sollten so angeordnet sein, dass sie den Blick der Betrachter:innen natürlich führen. >> Eye Tracing
    • Eye-Tracing: Eye-Tracing (die gezielte Lenkung des Blicks der Betrachter:innen ) ist ebenfalls wichtig, um die Aufmerksamkeit auf die richtigen Elemente zu lenken. Schau dir bewusst an, ob der Blick zu wild hin- und her- springt
    • Negative Räume nutzen: Nicht jede Bewegung muss spektakulär sein. Pausen und Ruhephasen sind genauso wichtig, um Spannung und Dynamik zu erzeugen.
    • Gewicht und Masse: Oft wird vergessen, dass Objekte und Charaktere Gewicht haben. Ein schwerer Gegenstand sollte sich langsamer bewegen als ein leichter, und die Animation sollte dies widerspiegeln.
    • Fehlende Details im Hintergrund: Oft konzentriert man sich so sehr auf die Hauptaktion, dass der Hintergrund statisch und langweilig wirkt. Subtile Bewegungen im Hintergrund  können die Szene lebendiger machen. (Aber Achtung, kein Over-Animating)
    • Überanimation (Over-Animating): Es muss sich nicht immer alles drehen, herumrutschen und sich bewegen. Manchmal reicht es dinge auszufaden. Du kannst einen SCHNITT setzen und zur nächsten Szene wandern, das muss nicht alles morphen und herumfliegen. Chill.
    • Bewegungen Vergessen:
      Fehlendes Follow-Through und Overlapping Action:
       Lass die Bewegungen nicht zu abrupt enden und denk nach ob es sekundäre Elemente gibt die natürlich nachschwingen. Mikrobewegungen: Kleine, subtile Bewegungen fehlen oft, was dazu führt, dass Charaktere roboterhaft wirken. Deine Figur muss zb auch ATMEN!

    ––––––– ––––––– –––––––

    Das „gewisse Etwas“: Die Summe aller Teile

    Beim Lesen der Überschrift denken sich wohl einige „ok wow, das ist mir schon klar, aber das ist wirklich keine wirklich hilfreich Aussage“ 

    Aber was soll man sagen, letztendlich ist das „gewisse Etwas“, das eine Animation gut und eine Bewegung perfekt aussehen lässt, eben diese Summe aller Elemente, Tipps und Tricks!

     
    Es ist die Kombination aus soliden Animationsprinzipien, präzisem Timing, gutem Sounddesign, subtilen Mikrobewegungen, einer klaren visuellen Komposition und all den anderen Dingen, die wir im Blog bearbeitet haben. Wenn all das zusammenwirkt, entsteht eine Animation, die nicht nur technisch korrekt, sondern auch emotional ansprechend und lebendig ist!

    Die Kunst der Animation liegt, schön formuliert, darin „die Illusion des Lebens zu schaffen“.
    Es geht nicht nur darum, Bewegungen technisch korrekt darzustellen, sondern auch darum, Emotionen zu vermitteln und eine Geschichte zu erzählen. Die Fähigkeit, all diese Elemente – von den grundlegenden Animationsprinzipien bis hin zu den subtilen Details einzusetzen und zu vereinen ist „das gewisse Etwas“ – und da gibt es auch kein konkretes richtig oder falsch. Technische Perfektion allein reicht nicht aus – die Animation muss das Publikum berühren. Das „gewisse Etwas“ ist die Fähigkeit, eine Geschichte zu erzählen, die die Betrachter:innen emotional abholt. Ob es sich um eine subtile Geste, einen intensiven Blick oder eine dramatische Bewegung handelt – es sind die emotionalen Momente, die eine Animation unvergesslich machen.

    Am Ende des Tages ist es eine Art von Harmonie, die eine Animation gut und eine Bewegung perfekt und natürlich aussehen lässt (harmonisch nicht im friedlichen Sinn, Harmonie kann auch im chaos sein). Gute Animation ist irgendwie ja doch harte Arbeit, sorgfältige Planung und ein tiefes Verständnis dafür, wie wir die Welt um uns herum wahrnehmen!

    [ABER
    HEY

    Mit all den Informationen und dem Willen zu lernen wird das bestimmt super cool.
    YOU ROCK. Learning by doing!]

    Tschüss und danke für’s Lesen!

    Quellen: 
    Thomas, Frank/Johnston, Ollie: *The Illusion of Life: Disney Animation*. New York: Abbeville Press, 1981.

    Williams, Richard: The Animator’s Survival Kit. New York: Faber & Faber, 2009.

    Dupre, Gwénaëlle: Sound Design in Animation: Definition, Process & Challenges*. CG Wire, 2023.

    Yablonski, Jon: Design Principles for Reducing Cognitive Load (2015).

    Business of Animation: 6 Ways to Avoid Over-Animating Scenes.

    Hooks, Ed: Acting for Animators.

    Adobe: Die 12 Prinzipien der Animation. Adobe/Animation/Discover, o.D.

    Sokolov, Paul: Wie Timing und Pacing den Rhythmus der Montage im professionellen Filmschnitt bestimmen. Filmpuls.info, 2024.

    Verzerrungen und unrealistische Bewegungen in Animation


    Verzerrungen? Warum wie was?

    Ein häufiges Problem bei Animationen – vor allem in der Charakter-Animation – ist es, dass Bewegungen nicht flüssig genug erscheinen. Woran liegt das? Bei der Analyse von Live-Action-Filmen fällt einem dann vielleicht auf, dass es bei schnellen Kopfbewegungen zu einem “Unschärfe-Effekt” kommen kann – sogenanntem Motion Blur. (Vgl. Deja 2018)

    Grumpy by Bill Tytla.

    In der traditionellen Animation von beispielsweise Disney – die meist mit scharfen Konturen und flächigen Farben arbeiten – würden die Animationen ohne Verzerrungen steif wirken, weshalb, wie im Bild oben (aus einer Szene mit Grumpy, die von Bill Tytla animiert wurde) die grenzen der Verzerrung ausgetestet wurden um die Bewegungen fließend erscheinen zu lassen. Wichtig ist dass diese Verzerrungen nicht von den Zuschauer:innen als solche wahrgenommen werden, weshalb sie nur einen einzelnen Frame lang sein dürfen.Wäre die Verzerrung für zwei Frames sichtbar, würde die Illusion zerstört werden. (Vgl. Deja 2018)

    Bewegungsverzerrung (Motion Blur)

    Manch eine:r kennz den Motion-Blur Button in Aftereffects oder Premiere. Motion Blur, zu deutsch Bewegungsunschärfe, ist ein visuelles Phänomen, dass dann aufkommt, wenn sich Objekte schneller bewegen, als das Auge oder die Kamera erfassen kann – also wenn sich ein Objekt während der Belichtungszeit bewegt. In der Animation – welche aus statischen Bildern besteht – fehlt diese natürliche Unschärfe, wenn man sie nicht bewusst künstlich hinzufügt, um die Realität zu simulieren. (Vgl. Autodesk o.D.)
    Mit moderne Hard- und Software ware ist es möglich, „per-Pixel- oder per-Objekt-Unschärfe“ auf einzelne Elemente anzuwenden. Die Entwicklung im Bereich KI könnte diesen Prozess weiter automatisieren. (Vgl. Autodesk o.D.)

    Vorteile der Bewegungsunschärfe

    1. Realitätsnähe: Motion Blur passt deine animierte Szenen besser an die natürliche Wahrnehmung des Menschen an.(Vgl. Autodesk o.D.)
    2. Vermeidung von Ruckeln: Ohne Unschärfe wie dem Motion Blur wirken Übergänge zwischen Frames abrupt und unnatürlich – so wird die Animation flüssiger (Vgl. Autodesk o.D.)
    3. Fokussierung: Unschärfe wird gezielt genutzt, um die Aufmerksamkeit auf bestimmte Stellen zu lenken und andere abzudecken oder davon abzulenken. (Vgl. Autodesk o.D.)

    Animationsprinzipien:

    Ein paar Arten der Verzerrung haben wir in diesen Blogbeiträgen schon kennengelernt, nämlich im Rahmen der Animationsprinzipien!
    Kurz zur Wiederholung – und im Sinne der vollständigen – jene Prinzipien in denen Verzerrung am deutlichsten angewendet wird:
    Squash and Stretch: Hier werden Bewegungen durch Dehnen und Strecken dargestellt, um Gewicht und Flexibilität darzustellen – z.B. ein Charakter springt, wird beim Aufprall zusammengedrückt und dann gedehnt. (Vgl Adobe o.D.)

    Exaggeration: Die Übertreibung verstärkt die Bewegungen über das Realistische hinaus und erzeugt humorvolle oder dramatische Effekte – z.B. ein extrem dehnbarer Arm bei einem schnellen Schlag. (Vgl Adobe o.D.) Auch bei Bewegungen und Verzerrungen wie oben besprochen gilt ein bisschen Übertreibung als wichtig, um die Bewegungsunschärfe zu ersetzen.

    Arcs (Bögen): Laut den Animationsprinzipien folgen viele unserer Bewegungen unsichtbaren Bögen – im Sinne von Bewegung darf man diese zur Verzerrung nutzen und sogar brechen, um den Effekt zu unterstreichen. (Vgl Adobe o.D.)

    Im Zuge der Übertreibung möchte ich noch einmal näher auf physikalisch unmögliche Bewegungen eingehen
    In der Animation werden oft Bewegungen gezeigt, die physikalisch nicht möglich sind. Diese „unmöglichen“ Bewegungen sind in der Regel übertrieben oder verzerrt, um eine emotionale oder visuelle Wirkung zu erzielen. Es wird genutzt um durch die übertriebene Darstellung Humor und Dramatik zu erzeugen.Hier lässt sich die Begründung beispielsweise wieder im Animationsprinzip der Übertreibung finden. (Vgl Adobe o.D.)

    Quelle: Disney Pocahontas, https://www.youtube.com/watch?v=MuqDDwvlW1s

    Betrachtet man Disney Animationen fällt diese Übertreibung auch auf, indem die Figuren sich offensichtlich unnatürlich bewege und auffällige Bewegungen vollziehen. Diese Bewegungen brechen bewusst die Physik um den Eindruck von Energie und Dynamik zu vermitteln. (Vgl. Adobe o.D.)


    WB Kids Looney Tuesdays, https://www.youtube.com/watch?v=LD2t-xk-gwM

    Eine „alte“ oder auch alternative Form des Motion Blurs sind Smear Frames:
    Smear Frames

    Smear Frames sind ein Stilmittel, um schnelle und dynamische Bewegungen in der Animationen darzustellen. Ein Smear Frame ist ein einzelner Frame, der Bewegung durch eine Übertreibung oder Verzerrung eines Elements unterstreicht. Die Beispiele zeigen wie sich ein Charakter innerhalb eines Frames verzerrt, was den Zuschauer:innen unbewusst dabei hilft, die Bewegung wahrzunehmen. (Vgl. Dupre 2024)

    Quelle: Looney Tuesdays, https://www.youtube.com/watch?v=LD2t-xk-gwM, Die Simpsons


    Der häufigste Einsatz von Smear Frames ist die Simulation von Bewegungsunschärfe, die mit der Kamera aufgenommen wird, wenn schnelle Bewegungen eingefangen werden – also ein Motion Blur (Vgl. Dupre 2024)

    Warum Animator:innen Smear Frames verwenden

    Quelle: Spider-Man Into the Spider-Verse

     Smear Frames kommen ursprünglich aus der traditionellen 2D-Animation, sind aber auch in anderen Animationsarten weit verbreitet, wie z.B. in der 3D-Animation. Ein besonderes Beispiel ist Spider-Man: Into the Spider-Verse, denn hier verwendetenAnimator:innen Smear Frames besonders deutlich, um das Comic-Gefühl zu imitieren. Smear Frames betonen den Bewegungsweg eines Objekts und sorgen für flüssige Übergänge zwischen Szenen, Posen oder Aktionen. (Vgl. Dupre 2024)

    Es gibt zwei Haupttechniken für Smear Frames nach Dupre

    Multiple Smears: Hierbei wird das Subjekt entlang seiner Bewegungsbahn dupliziert und leicht unscharf gemacht, um eine schnelle Bewegung zu simulieren, siehe Looney Tunes.
    – Elongierte Zwischenbilder: Dabei wird das Element in einem oder zwei Frames überdehnt, um die Bewegung zwischen zwei Key-Posen zu verdeutlichen, siehe Naruto.

    Quelle: Naruto; Looney Tuesdays;


    Die Technik von Smear Frames wird allerdings immer seltener, da verschiedene Programme inzwischen automatisch Motion-Blur nachahmen können. Neuere Animationsproduktionen, wie bei Spider-Man: Into the Spider-Verse, nutzen Smear Frames, um einen „Retro-Look“ nachzuahmen. (Vgl. Dupre 2024)

    Quellen:

    Adobe o.D.
    Adobe (o.D): Die 12 Prinzipien der Animation. In: Adobe/Animation/Discover, https://www.adobe.com/de/creativecloud/animation/discover/principles-of-animation.html (zuletzt aufgerufen am 17.11.2024)

    Dupre 2024
    Dupré, Gwénaëlle (16.12.2024): Mastering Motion: How Smear Frames Enhance Animation. In: CG Wire, https://blog.cg-wire.com/smear-frames/ (zuletzt aufgerufen am 06.01.2025)

    Deja 2018
    Deja, Andreas (09.09.2018): Distortions. In: Deja View, https://andreasdeja.blogspot.com/2018/09/distortions.html (zuletzt aufgerufen am 06.01.2025)

    Thomas/Johnston 1981
    Thomas, Frank/Johnston, Ollie: The Illusion of Life. Disney Animation. New York: Abbeville Press 1981

    Autodesk o.D.
    Autodesk (o.D.): Motion blur. Add a dose of reality to film, TV, and games. In: autodesk.com, https://www.autodesk.com/solutions/motion-blur (zuletzt aufgerufen am 06.01.2025)

    Sound Design Basics und der Effekt auf Animation & Motion Graphics

    „Ich will doch animieren, nicht Sounddesigner“
    Sofern es kein Profession im Stummfilm werden soll gilt es auch als Animator:in ein basic Know-How von Sound-Design zu haben. Nicht nur weil Film ohne Ton ein wenig langweilig wäre, sondern auch weil sich durch das Sounddesign ganz neue Dimensionen in deiner Animation eröffnen können.
    Das Sounddesign setzt emotionale Akzente, definiert den Charakter der Animation und verstärken die erzählerische Wirkung. Im weiteren erwecken Sprecher:innen ihre Charaktere durch ihre Stimme zum Leben. (Vgl. Connolly 2024)

    Sounddesign alleine erzählt uns nicht die ganze Geschichte, aber es versetzt uns mitten in die Geschichte hinein! Es ist der immersive Faktor, der es ermöglicht, eine Animation wirklich zum Leben zu erwecken. (Vgl. Marques o.D.)

    Gutes Sounddesign setzt sich aus verschiedenen Arten von Sounds zusammen.
    Ambiente Sounds: Geräusche der Umwelt die Informationen über die Umgebung in der die Animationen stattfinden beinhalten, beispielsweise das Geräusch des Windes, das Singen der Vögel. (Vgl. Marques o.D.)  Tipp: Auch leere Räume machen ein Geräusch, beispielsweise Lüftungen.
    Foley: Foleys werden verwendet um das Gezeigte zu vertonen, also Schritte auf dem Boden, beispielsweise.
    Soundeffekte: Die Soundeffekte sind all die andere Geräusche, die Aktionen oder Elemente verstärken, sei es ein abstrakter Swoosh oder auch ein Knurren.
    – Voice Over: Eine Stimme, welche die Geschichte/den Inhalt erzählt und so Informationen liefern.
    Musik: Sanfte– oder auch laute – Musik im Hintergrund setzt die Atmosphäre den Ton des Videos (Vgl. Marques o.D.)

    Stimmung und Atmosphäre schaffen
    Das Sounddesign einer Animation ist essenziell, um die gewünschte Atmosphäre der Animation zu erzeugen. Durch die gezielte Auswahl von Sounds und Musik können Zuschauer:innen in die verschiedenste Szenarien transportiert werden – egal ob eine belebte Großstadt, ein ruhiger Wald oder futuristische Motion Graphics. (Vgl. Connolly 2024)

    Erzählerische Tiefe durch Audio
    Gut und strategisch verwendete Audioelemente treiben die Handlung voran und sorgen einerseits für Realismus, aber auch für Kontinuität. Die Kombination von Ton und visuellen Elementen sorgt für ein nahtloses Erzählerlebnis, das die Zuschauer:innen fesselt. (Vgl. Dupre 2023)  Was ohne Ton wie eine unpassende Pause oder zu langsam wirkt bekommt mit dem Sounddesign eine erzählerische, neue Ebene und wirkt plötzlich ideal! Über auditiven Input können außerdem Off-Screen-Ereignisse angedeutet werden oder die räumlichen Beziehungen klargestellt werden. 

    Emotionale Tiefe durch Klanglandschaften
    Die von Sounddesignern entworfenen Klanglandschaften verleihen Charakteren und Szenen mehr emotionale Tiefe, spiegeln den Zustand von Figuren wider und machen sie für das Publikum greifbarer. So wird die Zuschauerbindung intensiviert. Schon subtile Harmonien oder dramatische Klänge verstärken die gewünschte emotionale Reaktion – egal ob Spannung, Freude, Angst oder Melancholie. (Vgl. Dupre 2023)

    Charakterentwicklung durch Stimmen und Emotionale Ausdruckskraft
    Zwar ist es immer ein Kampf, vor allem im Rahmen des Studiums, gute Sprecher:innen für Projekte zu finden, nichtsdestotrotz habe ich oft das Gefühl dass die Animation mit eben diesen „Steht oder fällt“. Als Beispiel möchte ich später dann auch meine Bachelorarbeit „Lost sein. Verloren in der Quarterlife Crisis“ herbeiziehen.
    Durch Tonlage, Intonation und Sprachmuster formen Sprecher:innen die Identität ihrer Figuren. (Vgl. Connolly 2024) Auch in Erkläranimationen trägt die verwendete Stimme zur Wahrnehmung des gezeigtem bei. Man soll der Stimme zuhören wollen.
    Zusätzlich können durch spezielle Sprachstile oder einzigartige stimmliche Nuancen beispielsweise humorvolle Momente betont werden. (Vgl. Dupre 2023)

    Die Sprecher:innen müssen eine Bandbreite an Emotionen vermitteln können und schaffen damit eine emotionale Verbindung zum Publikum. Wie Dupre beschreibt, erfordert dies ein herausragendes Verständnis für Timing, Intonation und Rhythmus, damit die Darbietung glaubwürdig und dynamisch wirkt. (Vgl. Dupre 2023)



    Die Bedeutung von Voice-over und Sprecherstimmen

    Arbeitet man mit Motion Graphics und Animationen zählen auch Erklärvideos zu klassischen Projekten. Ein gutes Voice-Over ist entscheidend für den Erfolg eines Erklärvideos, denn es fungiert als unsichtbare:r Erzähler:in und ergänzt so die visuelle Botschaft, erklärt komplexe Inhalte und schafft eine emotionale Verbindung zu den Zuschauer:innen.
    Doch nicht jede Stimme erfüllt diese Aufgabe gleichermaßen gut, weshalb die Auswahl der richtigen Stimme den Unterschied zwischen einem gelungenen Video und einem nicht ganz perfektem ausmacht. (Vgl. Nisha 2024)
    Eine gute Stimme vermittelt nicht nur Informationen, sondern bringt auch Emotionen und Glaubwürdigkeit mit in das Video, während ein monotones Voice-over die Inhalte langweilig erscheinen lassen kann. Es tragen sowohl der Klang, die Betonung und auch die Sprachmelodiedazu bei, die Zuschauer:innen emotional abzuholen.(Vgl. Nisha 2024)

    Die passende Stimme spiegelt auch die Persönlichkeit der Marke wieder: Ein eher spielerischer Ton kann ein jüngeres Publikum ansprechen, während ein eleganter und professioneller Stil Seriosität ausstrahlt. Hier ist es also besonders wichtig die Markenidentität, die Botschaften und die Zielgruppe zu bedenken. (Vgl. Nisha 2024)


    Technisches
    Die technische Umsetzung des Sounddesigns ist entscheidend, um Animationen Tiefe und Realitätsnähe zu verleihen. Hochwertige Mikrofone und eine passende Umgebungen sind essenziell für klare Tonaufnahmen. (Vgl. Connolly 2024)
    Es macht daher durchaus Sinn in hochwertige Audio-Files und Aufnahmegeräte zu investieren oder eben gleich einen Pro für’s Sounddesign heranzuziehen.
    Mischen und Mastern sorgt für ein ausgewogenes Klangbild, in dem Dialoge, Effekte und Musik harmonisch miteinander funktionieren. Die finale Abmischung balanciert alle Audiospuren, kontrolliert den Dynamikumfang des Sounds und sorgt durch Equalizing für Klarheit und harmonische Balance. (Vgl. Dupre 2023)

    Abstrakte Animationen und die präzise Synchronisation von Bewegungen und Klangereignissen.

    In der Fallstudie von Gerald Moshammer (Vgl. Moshammer 2023) wird unter anderem die Synchronisation von Bewegungen und Klangereignissen thematisiert.

    Kleine, subtile Bewegungen, die genau auf die Dynamik und den Rhythmus der Musik abgestimmt sind, erzeugen eine starke emotionale Resonanz.  Beispiele sind das leichte Zittern einer Linie, das den Vibrato eines Instruments visualisiert, oder sanfte Farbwechsel. (Vgl. Moshammer 2023) Bei Motion Graphics oder anderen Videos die rhythmisch sind und mit Musik unterlegt werden macht es deshalb oft auch Sinn, die Musik als Leitlinie für das Timing in der Animation zu verwenden.

    Vermeiden sollte man unsynchronisierte Bewegungen oder visuelle Elemente, vorallem wenn diese nicht mit der zu visualisierenden Musik übereinstimmen. Auch zu viele visuelle Reize, wie übermäßige Bewegungen oder Farben, zu Überladung und Überlagerungen führen (Vgl. Moshammer 2023) – das ist auch im Sounddesign zu vermeiden.

    Fazit und Erkenntnisse aus meiner Bachelorarbeit: 

    Im Rahmen meiner Bachelorarbeit habe ich die Gefühlswelt junger Erwachsener in der Quarterlife Crisis in einen Animationsfilm verarbeitet. Es wurde intensiv daran gearbeitet und das Ergebnis ist durchaus in Ordnung, nichtsdestotrotz bekomme ich jedes Mal Gänsehaut (negativ), wenn ich das Sound-Design dazu höre. Davon abgesehen dass die Animation ohnehin zu lang geworden ist, war die Aufnahme der Texte nicht gut und die Sprecherstimmen nicht unterschiedlich genug. Die gesamte Informations-Ebene der Voiceovers – dem inneren und dem tatsächlichen Monolog – ging verloren. Gegen Ende kommen weitere Stimmen hinzu und das Sounddesign wurde mit guten Songs und Sounds hinterlegt und plötzlich gewann auch die Animation an Qualität. Was heißt das für mich? Ich weiß jetzt dass Sound einer etwas wackeligen Animation viel stärke geben kann, oder eine „ganz okay wirkende Animation“ in den Boden drücken kann. Deshalb > Sich gut überlegen was die Sound-Ebene der animation mitgeben soll/wird + Gute Beziehungen zu Sound-Designer:innen wahren!

    Quellen: 

    Dupre 2023
    Dupré, Gwénaëlle (2023): Sound Design in Animation. Definition, Process & Challenges. In: CG Wire, https://blog.cg-wire.com/sound-design-in-animation-definition-process-challenges/(zuletzt aufgerufen am 06.01.2025)

    Connolly 2024
    Connolly, Michelle (15.05.2024):Sound Design in Animation: Crafting Immersive Experiences for Your Audience. In: Educational Voice, https://educationalvoice.co.uk/sound-design-in-animation/ (zuletzt aufgerufen am 06.01.2025)

    Nisha 2024
    Nisha (30.05.2024): Explainer Video Voiceover: Elevating Your Message with the Right Tone. In: mypromovideos, https://mypromovideos.com/blog/explainer-video-voice-over/ (zuletzt aufgerufen am 06.01.2025)

    Moshammer 2023

    Moshammer, Gerald  (2023): Abstract animation, emergent audiovisual motion and micro-expression. A case study of analogue music tracking with Robert Schumann’s Forest Scenes in AudioVisualizer. In: ResearchGate,https://www.researchgate.net/publication/373684415_Abstract_animation_emergent_audiovisual_motion_and_micro-expression_A_case_study_of_analogue_music_tracking_with_Robert_Schumann’s_Forest_Scenes_in_AudioVisualizer (zuletzt aufgerufen am 06.01.2025)

    Marques o.D.

    Marques, Raff (o.D.): Why and How to Incorporate Custom Sound Design into Your Next Animation Project. In: Mowe, https://mowe.studio/animation-sound-design-effects-music-motion-graphics/(zuletzt aufgerufen am 06.01.2025)

    Disclaimer: 

    This text was proofread for punctuation, grammar and spelling errors with the help of ChatGPT 4o. The content of the text remains unaffected.

    Morphing als narratives und ästhetisches Werkzeug

    Was ist Morphing – Definition:

    Morphing nennt man einen visuellen Effekt, bei dem Ein Objekt (beispielsweise im Film) nahtlos in ein anders übergeht. (vgl. Wikipedia 2024). Ein Morph kann ziemlich auffällig oder auch sehr subtil sein. Ein auffälliger Morph wäre beispielsweise die Transformation einer Person in eine andere oder etwa sogar in ein Tier. Eine weniger sichtbare und subtilere Transformation ist jene von einem Schauspieler zu seinem Stuntman oder Stundwoman. (vgl. Nuke o.D.) Diese Transformationen werden heute häufig angewendet und sind durch CGI relativ gängig geworden.
    Auch im Sound-Design und in der Musikproduktion nutzt man Morphing, beispielsweise um Stimmen oder Tonspuren zu verändern (vgl. Wikipedia 2024).

    In meinem Blog war es bisher selten der Fall dass wir über die Geschichte von etwas gesprochen haben. Hier bietet sich und sie chance über Animations-Geschichte in einer kleinen Nische zu sprechen, was wir uns natürlich nicht entgehen lassen wollen.

    Früheste Techniken der Transformation:
    Schon vor der digitalen Technik gab es verschiedene Methoden, welche die Transformationen von Bildern ermöglichten:

    1. Tabula Scalata: Noch nicht wirklich Film und Animation, aber bereits seit dem 16.Jh ist diese Technik in der Malerei bekannt. Die Malerei funktioniert indem zwei Bilder auf einer gewellten Oberfläche dargestellt werden und dadurch jeweils nur aus einem bestimmten Winkel sichtbar sind. Ein primitiver Morphing-Effekt tritt dann auf, wenn man zwischen beiden Bildern steht (vgl. Wikipedia 2024).
    2. Mechanische Transformationen: Nach der Malerei wurden Morphings auch im Schattenspiel verwendet. Händisch wie auch mechanisch, beispielsweise um 1790 vom französische Schattenspieler François Dominique Séraphin (Gesicht einer jungen Frau in das einer Hexe) (vgl. Wikipedia 2024).
    3. Matched Dissolves: Im 19. Jahrhundert gab es Techniken, bei denen zwei Bilder miteinander verschmolzen wurden, beispielsweise indem sie die Landschaften von Tag zu Nacht oder von Sommer zu Winter verwandelten. (vgl. Wikipedia 2024).

    Aber wann kam das alles so wirklich in die Gänge?
    Die ersten digitalen Morphing-Effekte tauchten in den 1980er Jahren auf, als Computergraphiktechniken genutzt werden konnten.

    1. Frühe digitale Beispiele: 1986 entwickelte die Firma Omnibus einen digitalen Morphing-Effekt für einen Werbespot, in dem sie eine Flasche Waschmittel in die Form der Vereinigten Staaten verwandelten. (vgl. Wikipedia 2024).
    2. Bekannte Anwendungsbeispiele kamen dann wenig später, wie Musikvideo-Clipx zu Michael Jacksons “Black or White” oder Filme wie Terminator 2: Judgment Day (vgl. Wikipedia 2024).
    3. Software und kommerzielle Nutzung: In den 1990er Jahren erschienen Programme wie “Elastic Reality”, die es ermöglichten, Morphing-Effekte in Filmen und Musikvideos zu erzeugen. Diese Technologie gewann 1996 zwei Oscars für ihre technischen Verdienste.
      (vgl. Wikipedia 2024).

    Gegenwart und moderne Anwendungen:

    Heute gibt es schon jedemenge Morphing-Algorithmen, die sich immernoch weiter entwickeln und besonders seit dem Aufkommen von AI in der Bild- und Videogestaltung können nun schon einige Programme automatisch morphen, wenn die ausreichend ähnlich sind. Oft sind die Morphings in Filmen und Videos für das ungeschulte Auge garnicht mehr sichtbar. (vgl. Wikipedia 2024).

    Morphings werden genutzt um Zeitlupeneffekte zu erzeugen (bsp Bullet Time) und auch als standardisierte Übergangstechnik zwischen verschiedenen Szenen in Fernsehshows werden Morphings eingesetzt, auch wenn die Inhalte der beiden Bilder völlig unterschiedlich sind. Das funktioniert indem der Algorithmus, korrespondierende Punkte zwischen den Bildern sucht und das eine in den anderen verzerrt, während sie sich überblenden. (vgl. Wikipedia 2024)

    Ein noch extra zu erwähnender Einsatzbereich von Morphing-Effekten ist die Gestaltung von Fonts, denn durch Morphing-Technologie, die als Interpolation oder Multiple-Master-Technik bezeichnet wird. So können Designer:innen eine Zwischenform zwischen zwei Schriftschnitten entwickeln lassen, indem beispielsweise eine halbfette Schrift durch das morphen einer fetten und einer normalen Schrift entsteht. (vgl. Wikipedia 2024).

    Morphing vs. Tweening vs. …

    Wer Morphing kennt hat manchmal auch schon von Tweening gehört – ist das das selbe? Die Begriffe werden oft austauschbar verwendet, beschreiben aber unterschiedliche Prozesse. Während es beim Tweening mehr um Animation und das Hinzufügen von Bewegung geht, ist Morphing eine Technik der Filmindustrie zur Erstellung von Special Effects. (Vgl Adobe o.D.)

    Morphing: Eine VFX-Technik zur nahtlosen Transformation eines Objektes in ein anderes

    Tweening: Ein Animationseffekt, bei dem – automatisch – Bilder zwischen Keyframes eingefügt werden, um den Eindruck von Bewegung zu erwecken. Beispielsweise zwischen Key-Posen.

    Reißschwenk: Reißschwenkt ist eine Übergangsart, mit der zwei Aufnahmen zu einer zusammengeführt werden indem sie schnell bewegt werden, was auch einer Art Morph gleichen könnte.

    (Vgl Adobe o.D.)

    Morphing-Arten:


    – Morphing mit maximaler Geschwindigkeit:
    Hier macht man sich im Morph eine kleine Hilfe – die Verzerrung – zu nutze. Diese Art von Morphing sieht man oft in Kinofilmen, denn Objekte werden gemorpht, während sie in einer schnellen Bewegung sind. Durch die Verzerrung der Geschwindigkeit fallen kleinere Inkonsistenzen weniger auf. (Vgl. Adobe o.D.) Ein beispiel aus Motion Graphics wäre es auch, dass ein Objekt zum Beispiel rotiert, während es morphed (z.B. ein Quadrat in einen Kreis)

    – Direktes Morphing: Bei einfacheren Morphings kann über die Form gemorphed werden, z. B. um eine handgezeichnete Form in eine andere Form umzuwandeln. Mithilfe von Form-Tweens kann man dann Frame für Frame (oder mithilfe der Funktion) ein Quadrat in einen animierten Kreis verformen. (Vgl. Adobe o.D.)

    – 3D-Morphing: In 3D-Programmen wird Morphing genutzt um Verformungen zwischen verschiedenen Bewegungen zu modellieren. Die verschiedenen Bewegungen oder Posen werden durch ein „Ziel“, eine Key Pose, definiert und der rest wird durch die Algorithmen gemorphed. (Vgl. Adobe o.D.)

    Was steckt dahinter – Die Technik

    Beim Morphing geht ein Bild in ein anderes über

    Im ersten Schritt ist ein Ausgangs- und Zielbild zu wählen und so das Konzept festzulegen.
    Im zweiten Schritt 2. werden die wichtigsten Merkmale definieren. Es muss beispielsweise die Form des Originalobjekts muss exakt vermessen und abgebildet werden, um dann auf Basis dieser Werte ein möglichst gutes Morphing-Ziel zu finden – also ein entsprechende Modelle erstellen oder eine Aufnahmen suchen. Im letzten Schritt werden dann die genauen Punkte zugeordnet. Mithilfe von Spezial-Software werden wie relevantesten Punkte im Original- und im Zielobjekt analysiert und in weiterer Folge lassen sich so die wichtigen Bereiche aufeinander abstimmen – z. B. die Augen. Im letzten Schritt werden die Pixel des Originalobjekts durch Einfügen von Zwischenbildern zu den Pixel des neuen Objekts umgeformt. (Vgl. Adobe o.D.)

    Zur genauen Anwendung gibt es unzählige Tutorials online 🙂

    Quelle

    Nuke o.D.
    Nuke (o.D.): Morphing. In: Foundry,https://learn.foundry.com/nuke/content/comp_environment/warping/morphing.html#:~:text=An%20example%20of%20a%20noticeable,a%20much%20more%20subtle%20morph.

    Wikipedia 2024
    Wikipedia. Die freie Enzyklopädie (18.11.2024), s.v. Morphing, https://en.wikipedia.org/wiki/Morphing (zuletzt aufgerufen am 06.01.2025)

    Adobe o.D.

    Adobe (o.D): Morphing: Was ist das und wie funktioniert der Effekt?. In: Adobe/Animation/Discover, https://www.adobe.com/de/creativecloud/animation/discover/morphing-in-animation.html (zuletzt aufgerufen am 06.01.2025)

    Disclaimer: 

    This text was proofread for punctuation, grammar and spelling errors with the help of ChatGPT 4o. The content of the text remains unaffected.