The deeper I get into motion design and abstract shapes, I come to realise that the story doesn’t only come from what I make, it also comes from how our brains react to it. And nothing shows this better than an old but also very classic animation by Fritz Heider and Marianne Simmel from 1944. It’s a short film, only a few minutes long, with two triangles and a circle moving around a box. But somehow multiple people see something different, something like a story unfolding: a bully, a victim, someone trying to help, or someone chasing and someone escaping. Even though these “characters” are only shapes. However, these are shapes that move and are associated with a deeper meaning. This simple but groundbreaking film opened up a whole field of research about how we perceive movement, intention, and emotions. Thus, it is still very relevant today when it comes to working with abstract visuals.
Heider and Simmel originally planned to understand how people make sense of events with no obvious meaning. Instead of showing real people or animals, they chose these abstract geometric shapes. And still the results were able to show so much more. “The abstract geometric figures […] are not only experienced abstractly, but are perceived and described as acting persons; their movements have causes, and the persons seem to be striving towards goals. In the perception of the events, motives and intentions are thus attributed to the persons.” (Lück, 2006). People didn’t say the big triangle moved to the left but said things like “he attacked and tried to escape.”
However, our brain does this automatically; it has a tendency to see intention, goals, and emotion in simple movement. We are built to understand behaviour even when the “behaviour” is just two triangles bumping into each other. In one of the previous blog entries I wrote about a study that had one of its results turn out that movement might not always change the aesthetic response to simple shapes. However, neuroscientist David Eagleman explains that the brain is constantly predicting and filling in meaning based on movement (Eagleman, 2015). When something is moving with a certain rhythm, speed, or direction, our brain automatically tries to guess why it’s doing this. It assigns a purpose even if there is none.
This means that even the most abstract motion becomes understandable because the brain prefers a meaningful interpretation over a neutral one. We are wired to detect motives and patterns in things that surround us, so any form that shows even a hint of intentional movement lets the brain treat it as social information. This also adds an emotional layer, meaning that a movement that looks purposeful feels alive, whereas a movement that interrupts a pattern feels threatening. For me this explains why abstraction can still feel emotional; the emotion does not need to be shown, it emerges through the way our brain processes movement.
This also explains why the animation of Heider and Simmel works so well. These are not only shapes that move, it’s how they are moving. A fast or jerky motion here feels aggressive, however a slow and more hesitant one feels shy or scared. A circle that is spinning in place might feel more playful, but a triangle that is “blocking” a doorway feels dominant. Even when shapes look the same, the way that they behave creates emotions and narrative. Another point that becomes clear when reading about the experiment is how quickly our brain starts to create reasons behind movement. Even though the shapes themselves have no inner life, people automatically describe them as if they do: “the big triangle is jealous, the small triangle tries to protect the circle” (Lück, 2006). Here it is clearly pointed out that these interpretations appear even without any contextual cuelücs. This highlights that humans are not passive observers but actively generate explanations.
What is very interesting is that the article shows that newer replications of the Heider and Simmel experiment don’t always show the exact same results as in 1944. Apparently, people today sometimes interpret the shapes more abstractly or more “animation-like.” This can be due to the use of digital media, games, and minimalist graphics. However, in almost every study a strong part of the audience does give meaning to the shapes. They don’t really stay neutral, because they turn movement into motivation. This does raise the question of how abstract something can be and still feel emotional?
Bibliography:
Eagleman, D. (2015). The Brain: The Story of You (First American edition). Pantheon Books.
Lück, H. E. (2006). Die Heider-Simmel-Studie (1944) in neueren Replikationen. Gruppendynamik Und Organisationsberatung, 37(2), 185–196.
AAAAAAAAAAAAAH Auf Instagram habe ich die Story liebevoll mit “The one thing I will never shut up about” betitelt: Tanja Kobler und ich waren (quasi) VJs am Electric Love Festival in Salzburg und ich kann es immer noch nicht fassen.
Das WIE und WAS und alles bis zum Rendern haben wir im letzte Blogpost schon geklärt, aber wie ging’s weiter?
All unsere Visuals wurden als simple MP4s bzw DVX3 Files mit voller Renderqualität in die Cloud der Electric Love-VJs geladen. Und dann hieß es nervös abwarten: Hat das alles gepasst? Fehlt etwas? Files kaputt?
Mit einem Backup-USB-Stick bewaffnet sind wir am Donnerstag um 15:30Uhr dann am Gelände aufgetaucht (2 Stunden bevor Bonnie Callinis Set losging!) um für 15 Minuten unseren Slot zum Visuals-Testen auszunutzen. Während wir Bibiza und Co. beim Soundcheck zuschauen konnten (hihihi) haben wir uns nach den VJs aus den E-Mails erkundigt und sie in der netten, kleinen Box vor der Stage entdeckt. Jef (aus Belgien. Jef mit einem F) war also unser Mann des Tages! Gemeinsam mit Jef haben wir dann unsere Uploads durchforstet. Wir hatten alles fein säuberlich sortiert und wollten eigentlich nur ein paar wenige spezielle Visuals auf deren Anordnung überprüfen – passt genau für 15 Minuten – schlussendlich saßen wir aber satte 1,5 Stunden mit Jeff vorm PC. Was ist passiert? Alles schief gegangen? Keine Files da? Keine Ordnung?! Viel besser: Wir hatten einfach zu viele gute Visuals hihihihi.
We came with a vision (& Jef made it look even better than we imagined!)
Breites Grinsen beim Anblick unserer Visuals
Jef war schwer überrascht von unseren 35+ Video Snippets und auch von unserer ansteckenden Motivation! “Usually we don’t give people this much time, but you seem nice. And you put in a lot of work!” Also hat Jef uns, während er all unsere Videos in seine Resolum Arena Datei geladen hat, eine kleine Einführung in sein Setup gegeben. Wir fühlten uns vor dem Festival zwar gut vorbereitet, aber nachdem wir Jef’s mehr als komplexes Setup gesehen haben waren wir sehr froh über seine Expertise an unserer Seite (nach 15 Jahren im Business war er ja doch mehr als Profi). Er gab uns Zeit um alle Visuals durch zu gehen und nach unserer Vorstellung zu platzieren – und WOW – wir haben wirklich noch mehr rausholen können als gedacht!
Also, wie sah das alles aus: Wir konnten auf alle Led-Walls einzelnm, wie auch als Gruppe oder auch vollständig zugreifen. Unsere Videos konnten wir so präzise auf den relativ schmalen Streifen der Stage platzieren (naja, schmal ist relativ, es waren ja doch zwischen 1,5 und 12 Meter). Mit verschiedensten Einstellungen und Reglern ließen sich dann noch Beat-Reaktive Einstellungen, weitere Masken und Überblendungen hinzufügen.
Für die Interessierten hier ein paar Einblicke in das Setup:
Ein kleiner Screen mit der Trackvorschau (gut zu wissen für’s nächste mal) + ein weiterer Screen für Resoulme und jedemenge Knöpfe, Midi-Boards und Tastaturen (Der Laptop hatte in dem Fall keinen aktiven Nutzen)
Die ClubCircus Stage, in der wir spiele durften 🙂 (Bei Regen, was sich als einzige Stage mit Dach durchaus als vorteilhaft herausgestellt hat)
Direkt vom Check sind wir dann in Bonnies Set gestartet, denn während die ersten DJs gar keine Visuals mitgebracht hatten, hat Jef die Zeit genutzt und weiter an unserem Set-up gefeilt. Wir konnten dann auch während dem Set weiter in der FOH Box bleiben, zwischen Matthias vom Licht und Jef mit den Visuals (ohne zu viel zu tanzen, weil alle Bildschirme gewackelt hätten). Wir gaben während Bonnies Set fleißig Anweisungen zu den geplanten Phasen und unseren Vorstellungen und Jef integrierte alles außnahmslos. UND ALLES SAH NOCH VIEL BESSER AUS ALS AM SCREEN. Die Videos werden der Dimension des ganzem auch nicht gerecht.
Wir haben natürlich auch einiges gelernt (und notiert!), aber dazu später mehr.
Einen Mini-Kleinen-1-Minute-Zusammenschnitt für die Instagram-Story kann ich hier als KURZFASSUNG anbieten:
Wenn’s mehr Zeit sein darf folgt hier eine breite Sammlung an Eindrücken:
Alles miteinander verblenden…
…und noch mehr Überblendungen
DJ-Perspektive…
und der Blick vom VJ währenddessen
Nah dran an den LED-Walls
Carefully placed visuals auf den Side-Strips
Jef’s Setup machte es auch super leicht, die Visuals an verschiedenen Achsen zu spiegeln, Dinge anders zu mappen oder auch weitere Flashes oder Bounces einzubauen. Auch sämtliche Arten von Overlays konnten wir uns näher anschauen.
Und meine persönlichen Lieblinge nochmal im Spotlight:
Das Key-Visual des Abends war bestimmt unsere tanzende Nika (in allen Shades von Rot über B/W bis zur Heatmap)
Was haben wir noch dazu gelernt? 1. Manche DJs senden ihre Visuals 5min vor Set-Beginn (das ist zu spät, aber Jef kriegt’s hin!) — NICHT WIR!
2. Led-Walls mögen keine Grauen Hintergründe – make it black, oder Transparent!
3. Immer gut: Ein paar Buttons mit Flash-Effekten, Blend Modes immer und überall; Zietverzerrungsregler, Strobe Effekte, …
4. Manche DJs senden keine oder nur … zwei… Videos >> Immer Visuals parat haben die für verschiedenste Stile passen(d gemacht werden können)
5. Man kann locker mindestens 2 Ebenen aktiv haben und mit den Transparenzen spielen (auf Beat und so)
6. Man kann Beats und Songs etc. auslesen – aber nicht immer, hängt vom Setup ab. Also gut wenn man trotzdem verschiedene Phasen definiert (wenn es die denn gibt) und dann eine Playlist erstellen (Textlich… auf Papier, vor Ort mitbringen – Ja, wir waren auch überrascht)
7. Loops und Videos immer kürzer als 40 Sekunden; Vorzugsweise immer DXV3, aber wenn’s versendet wird ist’s aufgrund der File-Size meistens MP4 und die VJs konvertieren es dann
8. Licht und VJ sind ein enges Team
9. VJing ist SUPER COOL, aber doch viel komplexer als man am Anfang glaubt + Arbeiten von 14-3 Uhr (jeden Tag, 4 Tage hintereinander) macht das ganze ziemlich anstrengend. Da helfen irgendwann auch die besten Ohropax/Loops/whatever nix mehr.
10. Wir wollen das auf jeden Fall wieder machen!
Super mega ultra großes Danke an Tanja, mit der ich das alles planen, machen und durchstehen durfte hihi – Wir sind ein super Team 💞
Auch ein super liebes ultra großes Danke an Bonnie Callini für die krasse Möglichkeit! (und an Nadja, für’s connecten <3)
UND auch an Jef Callens und Matthias Schöffmann, die sich als VJ und Lichttechniker mega ins Zeug gelegt haben und ultra bemüht darum waren, uns in unserer Vision zu unterstützen!
Und danke an Roman, der mich 10 Mal mein Thema wechseln lassen hat 😅
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
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.
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.)
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.
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:
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
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.).
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.
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
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)
*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.
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:
Emotionale Wirkung: Motion ruft sofort eine emotionale Resonanz hervor und transportiert Tonalität und Markenwerte genauso schnell und sogar schneller als Text oder Farbe.
Erhöhte Wiedererkennbarkeit: Logoanimationen, gut eingesetzte Bewegungsmuster oder Transitions erhöhen den Wiedererkennungswert, besonders auf Social Media oder im UX-Kontext.
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.
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.
Anpassen ist einfach: Motion-Systeme können in allen Formaten flexibel angewendet werden – von Microanimation bis Showreel
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:
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.
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.
