Unser Moodboard kennen wir bereits, nun geht’s endlich ans Entwerfen.
Grundelemente die wir gleich zu Beginn austesten und visualisieren wollte, da sie die Basis aller weiteren Entscheidungen bilden: – Logo(-Animationen) – Grainy Texturen – Reduzierte, abstrahierte Tanzende Person (Heatmap, Grainy, Blurry, …?) – 3D-Chrome Objekte
Anfangs waren wir unsicher, ob und wie wir die verschiedenen Video-Snippets von Bonnies Sets in den gewünschten Look verwandeln könne, vor allem da manche Videos an Qualität mangelten. Während ich mich mit der Stilisierung von eben diesen Videos, dem Grain und der flowy Textur wie auch den 3D Elementen beschäftigte, übernahm Tanja das Grafik Design und die Kommunikation mit Bonnie wie auch dem Electric Love und unseren VJs.
Logo Design
In Absprache mit Bonnie wurde klar, das Logo soll “eine fetzige Schrift” sein, die schnell und simpel verwendet werden kann. Sie will nicht zu sehr in die Y2K-Techno-Tiktok-Richtung abdriften und stattdessen eher clean und streng bleiben, mit Ähnlichkeiten zu ihrem Kollektiv. Es soll ein Wiedererkennungswert ohne großen SchnickSchnack sein, vorzugsweise ein Schriftzug. Tanja übernahm an dieser Stelle dann das Design und entwickelte in Absprache mit mir als Motion Designerin ein Logo, das in den von uns geplanten Stilen animiert werden könnte. Dabei galt es zu beachten, dass das Logo vermutlich dreidimensional und in Chrome Optik, wie auch flach in schwarz und weiß eingesetzt werden würde und meist über dem DJ-Pult platziert werden wird.
Basierend auf Tanjas Logo-Entwurf wurden dann folgende simple Logo-Loops in Aftereffets erstellt:
Motion Prinzipien wie “Schweben”, “Easing”, “Rotation zum Beat aber nicht auf den Beat”, “Subtil”
Mockups bevor es losgeht und jede Menge Feeback
Wir haben Stile abgeleitet und mit Moodbildern verschiedene Visual-Setups konzipiert.
Kleiner Ausschnitt aus dem Prozess im Figma-Board
Austesten der benötigten Techniken bis wir die Infos für die Umsetzung bekommen:
Ein Problem war, dass wir bis auf verpixelte PDFs zu Beginn noch wenig Infos zum Setup und der Bühne hatten, weshalb noch keine konkreten Animationen erstellt werden konnten. Was anfangs ärgerlich war hat sich später aber als wichtiger Schritt hervorgetan, denn in dieser Phase haben wir sehr viel experimentiert (in Aftereffects, Touchdesigner und Blender) und ausgehend von verschiedenstem Ausgangsmaterialien Wege zu unseren Stilen gefunden. Im Bild unten kurz zusammenkopiert ein paar Screenshots.
Section 8 – Alles an Grain, Blurs, jede Farbeinstellung, Störungen, Reduktionen, Replacements, Shadings, …(Section 8 und 11)
Section 10 – Github-Tools die nur auf Windows laufen, aber DepthMaps schnell und einfach aus Videos erstellen, die dann in AE weiterverwendet werden können (siehe Red, Grainy Video unten)
Section 9 – 3D-Objekte in Aftereffects – Trellis zum Erstellen von Modellen (ungeeignet bei Chrom Texture durch sehr komplexe und meist fehlerhafte Meshes > fehler in der Reflektion); – Blender Experimente (Danke Kata für die Expertise) – Free 3D Models maybe? – Chrome Texturen in Aftereffects (Von simpler Trim-Path-Animation zum glänzenden, flüssigen 3d Chrome Liquid)
AUFBAU der AE Dateien für VJ Mapping
(hat sich am Tag vor der Deadline als unnötig herausgestellt. Aufwände rund um “auf den verschiedenen Screens platzieren” haben sich erübrigt und werden mit ein bisschen Glück ev. noch vor Ort integriert, wir gehen aber davon aus dass das leider nicht ganz so passiert wie gewünscht)
Vorgaben aus dem PDF + Mockups3D Renderings der Bühne zur Übersicht, ähnlich/gleich zu letztem Jahr3D Renderings der Bühne zur Übersicht, ähnlich/gleich zu letztem Jahr“Video Mapping Output 3840 x 2160″: Eigenes Aftereffects Setup um alle Screens einzeln exportieren zu können + Verknüpfung zum File in der Anordnung auf der Bühne
Testrender der verschiedenen Anordungung unserer Key-Visuals zur Besprechung:
Rendern
4k Grainy Textures sind keine leichte Sache, aber mit dem einen oder anderen Workaround hat’s dann besser geklappt (unter anderem Grain aus Davinci anstatt Aftereffects) // 30fps, 4K Kompositionen mit 60-80Mbits, mp4 bzw. für Transparenzen DXV3 mit Alpha; Der Computerraum wurde bei 32° noch zur Renderfarm umgebaut und es wurde auf mehreren Rechnern gleichzeitig gerendert um die Deadlines einzuhalten
FINALE ERGEBNISSE, folgen nach dem Electric Love – mit ein paar Renderings und vor allem aber Fotos und Videos vor Ort :)) Es war super spaßig aber auch mega intensiv, aber mehr dazu + ein bisschen Reflektion dann im letzten Post! Jetzt geht’s zurück an all die anderen Projekte die in den letzten 1,5 Wochen “on hold” waren (sei es FH, Arbeit oder auch “Essen machen” und “Schlafdefizit aufholen”)
Anmerkung: Im Rahmen des Blogs wurde nur mein Arbeitsbereich dokumentiert – alles rund um (z.B.) Touchdesigner und Co. wurde von Tanja erarbeitet und spielt im finalen Endergebnis eine min. ebenso wichtige Rolle, wurde aber im Rahmen dieser Dokumentation nicht näher thematisiert.
Uns wurde schnell klar, in welche Richtung sich die Visuals entwickeln würden, da auch die Musik einiges an Gefühl für Geschwindigkeit und Bewegung mitlieferte. Nichtsdestotrotz ist es auch in diesem Fall noch super hilfreich verschiedene gegensätzliche Pole von Motion zu betrachten, da man so das Motion Behavior für Bonnie Callini konkretisieren, noch gezielter besprechen und möglichst gezielt definieren kann.
Dazu habe ich versucht verschiedene Gegenpole, wie in der Recherche oft gesehen, aufzustellen und Bonnies Visuals darauf einzuordnen.
1. Dynamisch – Ruhig Ruhig = meditativ, langsam, statisch, wenig Veränderung Dynamisch = dynamisch-fließend, aber nicht aggressiv → Bewegungen sind im Fluss, sie treiben voran und motivieren, ohne hektisch zu wirken 145bpm und Techno ist nicht ruhig, es gibt aber sanftere Stellen im Set, and denen Ruhe einkehren soll. Bonnie ist hier definitiv dynamisch, idealerweise wie Tanz – in Bewegung, aber mit Atempausen
2. Linear – Organisch Linear = technisch, geradlinig, gleichmäßig, rational Organisch = unregelmäßig, natürlich, unvorhersehbar, spontan Bonnie Callini = organisch, mit natürlichen Übergängen, leichten Unregelmäßigkeiten, wie durch Impulse gesteuert (Verläufe, Flüssigkeit, Körperbewegung – nie 100 % berechenbar) // Im Kontrast dazu die mechanisch wirkenden, strukturierten Metallteile, die durch das fliegende Gefühl aber leicht wirken.
3. Mechanisch – Körperlich Mechanisch = robotisch, steif, rhythmisch exakt Körperlich = physisch nachvollziehbar, weich, „menschlich“ Bonnie’s Motion-World ist klar körperlich inspiriert – Tänzerin, Groove, Haptik. Besonders passend sind Bewegung wie Atmen, Pulsieren, Muskelkontraktion
Andererseits ist Techno aber sehr Rhythmisch und klar in der Taktgebung, weshalb sich mechanische Elemente wie jene in Chrome geradliniger Bewegen, aber dennoch schwebend wirken um die Leichtigkeit zu bewahren
4. Glitchy – Smooth Glitchy = abrupt, gebrochen, fragmentiert Smooth = weich, kontinuierlich, elegant Bonnie liegt im “smoothen Bereich”, mit vereinzelten Impulsen (Blitzen oder invertieren bei Beats)
5. Geometrisch – Chaotisch Geometrisch = klar strukturiert, symmetrisch Chaotisch = wild, unkontrolliert Bonnie Callini: kontrolliertes Chaos – asymmetrisch, aber mit Rhythmus; Weich aber mit Chrome-Katnet. Die visuelle Komposition darf tanzen und mit en Kontrasten spielen, aber nie „kippen“
6. Schwer – Leicht Schwer = massig, träge, dunkel Leicht = schwebend, luftig, ätherisch Bonnie Callini kombiniert Leichtigkeit (Tänzerin, Flow) mit gewisser Schwere (Chrome, Bass) Durch das schweben der Chrome Elemente lässt sich in den Visuals aber die Leichtigkeit erhalten
7. Rhythmisch – Asynchron Rhythmisch = synchronisiert mit Beats, vorhersagbar Asynchron = frei, improvisiert, nicht getaktet Bonnie’s Musik ist rhythmisch, aber Visuals dürfen nicht zu „on-beat“ sein und durchgehend Blitzen – sie sollen organisch zur Musik atmen. Das Motto ist „nicht beatgenau, sondern groove-sensibel”
Grafik Magdalena Ackerl
Nachdem die Motion Behavior Skala für Bonnie Callini jetzt auf diesen Achsen visualisiert werden kann (siehe Grafik) fassen ihre Positionen folgenden Tendenzen gut zusammen:
Dynamisch, aber nicht hektisch
Organisch, mit natürlichem Flow
Körperlich statt mechanisch, inspiriert von Tanz
Smooth, mit gelegentlichen Impulsen
Leicht chaotisch, aber kontrolliert
Schwebend-leicht, trotz metallischer Elemente
Rhythmisch, aber groove-sensibel statt beatgenau
In meiner Recherche war von einer „Positionierungsmatrix“ die rede, die dabei helfen soll nicht nur dieses sondern auch kommende Projekte mit mit einem skalierbares Modell zu betrachten. Ich fand das ziemlich ähnlich zum definieren des Motion Behaviours, CHATGPT war da aber anderer Meinung:
CHATGPT: Beide Tools wirken auf den ersten Blick ähnlich, erfüllen aber unterschiedliche Zwecke im Designprozess. Hier ist der klare Unterschied zwischen:
Ziel: Herausfinden, wo sich die Marke gestalterisch/stilistisch verortet
Typische Pole:
Traditionell ↔ Modern
Verspielt ↔ Ernst
Analog ↔ Digital
Subtil ↔ Direkt
Emotional ↔ Rational
Nützlich für: Art Direction, Branding, Stilrichtungsentscheidungen
Beispiel: „Bonnie Callini ist modern, expressiv, leicht emotional – aber visuell reduziert“
🧩 Fazit:
Motion Behaviour → Wie bewegt es sich? (operativ, animiert)
Positionierungsmatrix → Wer ist die Marke visuell? (strategisch, gestalterisch)
Von Chat GPT überzeugt hab ich mich dann an die “Positionierungsmatrix” gewagt:
Skala
0 (zero)
10 (ten)
Verspielt – Ernst
verspielt, locker
seriös, kontrolliert
Traditionell – Modern
retro, klassisch
progressiv, digital
Reduziert – Expressiv
minimalistisch, zurückhaltend
plakativ, auffällig
Organisch – Technisch
fließend, natürlich
mechanisch, geometrisch
Ruhig – Energiegeladen
meditativ, langsam
schnell, kraftvoll
Hart – Weich
glitchy, hartkantig
smooth, sanft
Emotional – Rational
sinnlich, körperlich
systemisch, analytisch
Subtil – Direkt
subtil, andeutend
klar, plakativ
Körperlich – Abstrakt
Tänzerisch, physisch
geometrisch, symbolisch
Analog – Digital
texturiert, handmade
clean, pixelbasiert
Bonnie Callini: Anmerkung: Zwei Werte, wenn Bonnie zwei konträre Punkte in ihrem Auftritt verbindet, beispielsweise harte Chrome Formen mit weichen, sanften Verläufen
Skala
Postion 0-10
Begründung
Verspielt – Ernst
4
Emotional, frei, aber nicht kindlich
Traditionell – Modern
9
Digital, Chrome, Club-Culture
Reduziert – Expressiv
5
Abstraktes trifft auf konkrete Objekte (Verläufe auf Tänzerin auf Metal
Organisch – Technisch
2//7
Körperliche fließend und weich // konkrete Bewegung von Metall
Ruhig – Energiegeladen
4//8
Ruhige, dreamy Momente // Musik ist schon und visuals pulsieren
Hart – Weich
2//8
Smooth Vibes mit metallischen Akzent
Emotional – Rational
1
Farben, Musik und Tanz drücken Emotionen aus
Subtil – Direkt
5
Eigentlich weniger subtile Elemente, eher klarer Positionierung
Körperlich – Abstrakt
7
Zwar Tänzerin als zentrales Motiv aber abstrahiert, Verläufe, Unschärfe
Analog – Digital
3//8
Analoger Look durch die Körnung aber digitale nachbearbeitung für die Farben, die Metallelemente etc.
(Keine lange Einleitung, wir schließen hier direkt an den vorhergehenden Blogpost an ;))
Die visuelle Identität von Bonnie Callini soll – weit gespannt – zu den Worten „Groove, Heat, Feminin, Fire, Dance, Beat, Real” passen. Diese Eigenschaften spiegeln sich sowohl in ihrer Musik als auch in der geplanten Visual-Welt wider. Passende „Bewegungsqualitäten“ die mit diesen Begriffen in verbindug gebracht werden sind organisch, fließend, pulsierend und intuitiv – nichts wirkt starr oder mechanisch. Vielmehr entstehen Bewegungen aus Impulsen heraus, vergleichbar mit dem Tanze zu Beat oder der Bewegung von Rauch, Wellen oder Energieflüssen.
Das Set und der Auftritt rund um Bonnie Callini fühlt sich intuitiv an, Kontrolle und Kontrollverlust durchzogen von Rhythmen und Trance. Die Leute am Set fühlen sich gut, heiß – sie grinsen einander an, tanzen ausgelassen, lassen die Hüfte kreisen. “Positiv uplifting” & “Feeling hot an groovey” ist das Motto.
Die visuelle Welt soll das aufgreifen: Grainy, fließende Texturen und sanfte Farbverläufe die durch pulsierende Schwünge aufgebrochen werden. Metallisch glänzende Chrome-Elemente schweben schwerelos und pulsieren zu Bonnies Bass. Abstrakte, tänzerische Körperbewegungen (reduzierte Videos einer Tänzerin die wir aufnehmen lassen haben) unterstützen die Verbindung von Sound und Körpergefühl – der Fokus liegt auf Emotion, nicht auf Form. Sie Tanzt ausgelassen. Es ist Femininität und Intuition, Loslassen im Rhythmus
Passende Bewegungsprinzipien: Weiche Verläufe von Farben; Pulsieren, Flashen, Drehen mit Schwung im Rythmus – nicht zu grob sondern schwungvoll wie ein Tanz;Partikelverhalten, das „lebt“ – z. B. Pulsieren, Vibration, Grain(Körnung); Chrome-Elemente als schwerelos rotierende Körper oder Impulsgeber (Reflektionen und Kontrastreich); Ease-in/Ease-out statt linearer Bewegung; Pulsierendes Blitzen und Invertieren im Beat;
Emotionale Tonalität
Daraus abgeleitet lässt sich die Emotionale Tonalität ihres Sets in Worte fassen. Die emotionale Grundstimmung von Bonnie Callinis Sets ist eine Mischung aus:
Dynamisch: durch das hohe Tempo ihrer Musik (138–145 bpm), tribalartige Rhythmen und energetische Sets. Die Visuals dürfen pulsieren, vibrieren, sich „nach vorne schieben“.
Weich & fließend: trotz der Energie bleibt die Welt sinnlich, körperbetont, atmosphärisch – nicht hart oder technoid-industrial.
Verspielt & improvisiert: durch spontane Bewegungen, tänzerische Elemente und das experimentelle Spiel mit Form, Farbe und Material.
Sinnlich-abstrakt: keine plakative Darstellung, sondern emotionale Tiefe durch Licht, Textur, Formwandel, Körnung und Bewegung.
Gemeinsam mit Bonnie wurde ein Moodboard erarbeitet und der Look ihrer Visuals definiert:
Rote und warme Töne, als Kontrast dazu Komplementärfarben oder Schwarz-Weiß. Die Visuals sollen Grainy sein – also Körnung haben – “flowy sein”, sanft und es sollen auch Verläufe darin vorkommen.
Als Kontrast dazu hätte sie gern die Härte von Chrome Elementen, die sich aber locker und schwerelos bewegen oder sich flüssig verformen. Diese Elemente kommen vorallem aus dem Bereich von “Hardgroove” und “Hardtechno”.
Wir suchen eine Mischung aus der Analogen Optik der Bilder/Videos und dem haptischen 3D-Gefühl der Chrome Elemente. Themen der Bilder sollten Pflanzen, sanfte Farbverläufe, Ästhetik, Women, Femininität, Freiheit und Leichtigkeit sein. Es kann abstrakt sein, muss nicht direkt sein und darf artistisch sein.
Animierte Inspo:
Die meisten Inspirationen waren selbst keine Videos. Ein paar ließen sich trotzdem finden:
Die wichtigsten Touchpoints von Menschen mit der Motion Identity:
1. HAUPTFOKUS: Event-Visuals & Stage-Präsenz – LED-Screens / VJ-Content, Visuals für Opening/Closing-Sets – (Live-)Motion-Loops mit Tänzerin, Chrome-3D-Elementen und Blitzenden Beats – Intro-Animation mit Logo; – Heatmap-Körper, verformte Partikel, organische Lichtbahnen – Beat-Reactive-Chrome und Textur-Elemente
2. Social Media & Promotion – Instagram-Stories & Reels: kurze, loopfähige Motion Snippets mit Musik, Typo, Logo und vorzugsweise der Tänzerin – Feed-Visuals mit animierten Teasern: Chrome-Typo, Grainy Hintergründe und Verläufe zum Beat – Event-Ankündigungen als animierte Posts:Plakat-Designs mit subtilen Bewegungen (Grain, Light-Shifts)
3. Print-to-Motion (nicht für’s ELF, aber für spätere Nutzung ev. interessant) – Digitale Plakate für Screens in Städten (z. B. U-Bahn, Festival Screens): Motion Ads mit pulsierenden Typo-Elementen
4. Website / Ticketing (Umsetzung aufgrund der Relevanz eher unwahrscheinlich) – Motion-Banner oder Poster auf Landingpage: Chrome-Typo + Flow-Visuals zur Musik – Interaktive Elemente (Cursorverhalten, Hover States): alles leicht vibrierend, dynamisch, fließend
WELL WELL – The struggles of following a Plan
Ich denke, um mir selbst gegenüber – wie auch gegenüber diesem Blog hier – ehrlich zu sein: All die Prinzipien die ich mir im Vorhinein überlegt habe, sämtliche Prozesse und Analyse-Schritte… wurden letztendendes viel weniger ernst genommen als gedacht. Das kann aber ziemlich weitgehend darauf bezogen werden dass einerseits NUR EIN ZEITRAUM VON 1,5 WOCHEN DAFÜR ZUR VERFÜGUNG STAND (und keine handfeste Info zu den technischen Anforderungen, dazu später mehr) aber auch darauf, dass die Herangehensweise die Bonnie sich gewünscht hat, eine sehr freie war. Ihr war auch wichtig dass wir das ganze nicht “designtechnisch nicht zu streng angehen” und sie wollte sich nicht wirklich durch ein Logo oder einen Design-Auftritt definieren. Letztenendes hat sich das dann zwar doch ergeben (Ein simpler Logo-Loop für die Bühne musste nämlich doch noch her) aber tiefergehende Corporate Design Guidelines wurden nicht aufgestellt. Dieser Prozess lies aber endlich Zeit um Dinge auszutesten, die sonst keinen Raum haben! Es konnte experimentiert werden und tatsächlich mit “Trial and Error” durch verschiedene Phasen gegangen werden – und beim Entwickeln von Motion Identitys geht es ganz viel darum zu experimentieren und so spannende Bewegungsmuster zu finden!
Wow – what a journey!? Die Projektfindung war schwieriger als gedacht – gibt es doch so viele Möglichkeiten und Ansätze um Motion in sonst so statische Brandings zu bringen. Großes Danke an dieser Stelle auch an Chrissi, die mir wirklich zu so einigen Möglichkeiten Zugang verschaffen hat.
Nun ist aber eine Entscheidung gefallen (bzw. schon vor ein paar Wochen, diese Blogposts sind eher Retrospektive als Live-Dokumentation – mehr dazu später – aber bleiben wir im Sinne der Blogposts mal weiterhin in der Gegenwartsform)
Die hier dokumentierte Entwicklung dieser Motion Identity widmet sich „Bonnie Callini“ eine female DJ aus Salzburg! Auch der Zugang zum Thema Motion ist etwas spezieller und weicht ein wenig vom herkömmlichen Brandingprozess ab, denn Bonnie (Ein Künstlerinnen-Name) kam mit dem Wunsch auf Tanja Kobler und mich zu, ihr Set am Electric Love Festival in Salzburg mit Visuals zu bestücken! Der Hacken, oder vielleicht auch unser Glück, war es, dass Bonnie in der Gestaltung ihrer bisherigen Medien – sei es Social Media oder ihre Visuals auf anderen Festivals – sehr offen und ungebunden war und noch kein festes Design besteht. Eine gute Ausgangsbasis mit jede Menge Freiraum, um eine Motion Identity zu entwickeln – spannende Visuals auf der Bühne als Start in ihre Visual Identity!
Wer ist Bonnie Callini?
Bonnie Callini ist eine Female DJ aus Salzburg. Ihre Musik bewegt sich vor allem im Bereich brasilianisch und lateinamerikanisch beeinflussten Hardgroove- und Tribal-Techno.
Sie kombiniert dabei „fast electronic groove“ mit „exotic vocals“ & ihr Ziel ist es, mit ihren Sets Menschen zum „Kopf abschalten und Tanzen“ zu bringen. Ihre Musik bewegt sich in der Regel im Bereich von 138 bis 145 BPM.
Woher kennt man Bonnie Callini? Sie spielte neben zahlreichen lokalen Acts auch schon im Kremlin (Lissabon), auf dem Electric Love Festival (Salzburg) sowie natürlich in der Pratersauna oder im Sass in Wien.
Zielsetzung/Auftrag
„Echt alles passt besser als das was die dort standardmäßig VJn“ Anbei Bilder vom Set des vergangenen Jahres, mit dem Bonnie sich so gar nicht identifizieren konnte – denn rosa Seifenblasen sind weit weg von dem was sie mit ihrer Musik eigentlich repräsentiert.
Was wird kreiert? Visuals für die ClubCircus Bühne am Electric Love Festival in Salzburg, für Bonnie Callinis Set von 17:30-19:00Uhr. Eine lange Zeit und eine große Bühne – wir sind gespannt!
Wichtig für uns sind hier, neben Bonnys persönlichem Stil, auch Gegebenheiten wie Tageslicht, eine Überdachte Bühne, die nähe der Gäste zum Set, etc. Das Festival selbst stellte uns zu Beginn ein eher vages PDF zur Verfügung und wir suchten schon früh den Kontakt und Austausch mit den verschiedenen Verantwortlichen.
Wir folgen nun dem Motion-Identity-Prozess den ich vor einigen Wochen in meiner Recherche aufgebaut habe und testen dessen Anwendbarkeit. Ist das auch im Zuge dieses Projekts sinnvoll? Ist es bloßes “abarbeiten” der Steps oder bringt das System tatsächlich Mehrwehrt?
Step 1: Analyse der bestehenden statischen Elemente (Logo, Farben, Typo, Plakate, Key-Visuals(!!!)
Im Design für Bonnie geht es nicht darum, ein herkömmliches Branding zu entwickeln, sondern viel eher liegt der Fokus darauf, eine Bildsprache zu definieren die sich in verschiedenen Key-Visuals (und auch „Nicht-Key-Visuals“) darstellen lässt und dessen Erscheinungsbild sie und ihre Musik repräsentiert.
Das einzig bestehende Footage das weiterhin passend sein soll sind ihr Artist-Profilbild und ihr EP-Cover (siehe Bild)
Um abzuschätzen welches Design sie schätzt haben wir uns auch die Arbeiten ihres Kollektivs „Urban Rumble“ angesehen. Das Logo und die Typo gefallen ihr dabei sehr gut, die Partikelsysteme im Hintergrund würde sie eher weniger aufgreifen.
Summary: Besprechung Nummer Eins
Ihr Stil ist „Feministisch, Artsy and Fruity“. Es darf heiß sein, flashy, ungewöhnlich – soll aber keinenfalls in die Richtung Girly-Pop gehen.
Ihr visuelles Erscheinungsbild auf der Bühne (wie auch auf Social Media) soll ihre musikalische Identität klar widerspiegeln: Energiegeladener, lateinamerikanisch inspirierter Tribal Techno.
Ihr geht es dabei um rhythmische aber “nicht ordentliche” Muster, warme Farbtöne (oft mit hoher Sättigung und Rottöne) und kontrastreiche Typografie.
Außerdem bindet sie gerne Elemente ein, die sich mit dem “Hardgroove” und “Hardtechno” assozieren lassen, also kühles Metall und Chrome-Optik – gemischt mit den warmen Farben und der Hitze ihres Sets.
Die Key-Visuals sollen als Beiwerk zu ihrer Musik betrachtet werden – sie sollen die Stimmung unterstützen indem sie Bewegung suggerieren. Sie können einerseits jene Energie aufgreifen, die ihre Tänzer:innen in der Menge mitbringen – oder – die ihre Songs sanft umrahmen.
Das Logo und etwaige Schriften sollen reduziert, funktional und hart wirken – als Kontrast zum „grainy und weichen” Hintergrund.
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.)
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.
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.
