Motion Branding

Bewegung macht die Persönlichkeit der Deutschen Bahn erlebbar: Sie schafft Aufmerksamkeit, Orientierung und Emotion. Während sie auf kommunikativer Ebene das Storytelling und die Marken-Tonalität unterstreicht, kann sie im UI die Usability unterstützen und Interaktionen Charakter verleihen.

Die Bewegungsmuster spiegeln die Markentonalität bewegend, klar und zuversichtlich wider. Animationen sind lebendig, direkt und entschlossen. Sie wirken nie kompliziert und lenken nie vom eigentlichen Inhalt ab.

Das Motion Branding wird durch drei Muster charakterisiert:

Von A nach B
Klar

• Reduktion auf das Wesentliche
• geradlinige Richtungen
• entschlossene Bewegungsabläufe

Schritt für Schritt
Sequenziell

• Stacking-Prinzip
• Rhythmus
• Methodische Abfolge statt Willkür
• Einzelmodule im Bezug zum Gesamtsystem
   

Immer in Bewegung
Natürlich

• natürlicher Bewegungsfluss (Easings)
• lebendig statt mechanisch

Motion Curves

Die Motion Curves definieren ein einheitliches Verhalten über alle Bewegungen der Marke hinweg – von großflächigen Überblendungen bis hin zu kleinsten Details im User Interface. 

Primär wird die taktgebende Kurve genutzt. Sie zeichnet sich durch einen energetischen Start und eine weichen Stopp aus. So entsteht ein Gefühl von Entschlossenheit..
 

Für nachgelagerte Bewegungen (z.B. Logo im Ending) kommt die unterstützende Kurve zum Einsatz: ein einfaches Ease-Out, das die Primärkurve unterstützt ohne von ihr abzulenken.

Flächenverhalten

Klare Achsen und geradlinige Bewegung setzen den Fokus auf das Wesentliche. Die Animation lenkt nicht vom Inhalt ab, sondern gibt ihm durch ihre Einfachheit und Klarheit den nötigen Raum. Je nach Kontext und Botschaft können unterschiedliche Versionen eingesetzt werden:
 

Einfach

Einfarbige Flächen-Animationen eignen sich besonders gut für Anwendungen mit hoher Informationsdichte und funktionalem Anspruch.

Dynamisch

Zweifarbige Flächen-Animationen ermöglichen eine expressivere Darstellung für plakative Inhalte und erzeugen mehr Spannung in der Gestaltung.

Die zentralen Elemente des Corporate Designs – Logo, Schwelle, Typografie, Icons und Signature Graphics – folgen den definierten Bewegungsmustern. So entsteht ein konsistenter und dynamischer Gesamtauftritt, der die Bewegungslogik der Marke über alle Gestaltungselemente hinweg erlebbar macht.

Schwelle

Als richtungsweisendes Gestaltungselement steht die Schwelle ganz besonders für Fortschritt und Bewegung. Sie folgt daher einem festen Bewegungsablauf.

Typografie

Beim Animieren von Typografie steht stets die Lesbarkeit im Mittelpunkt. Durch eine einfache zeilenweise und zeitlich versetzte Bewegung wirken Texte lebendig und dennoch klar.

Headlines und Schlagwörter

Mengentext

Expressive Type

Für besonders aufmerksamkeitsstarken Ausdruck kann die Typografie noch plakativer animiert werden. Dies eignet sich besonders gut für einzelne Schlagwörter, nicht aber für ganze Sätze oder Textblöcke.

Layout

Bewegung unterstützt die Ausdrucksmöglichkeiten im Layoutsystem. Die unterschiedlichen Elemente können je nach Kontext und Anordnung gezielt animiert werden um den Fokus zu lenken oder Struktur zu verdeutlichen. Die Bewegungen sind klar, präzise und leicht erfassbar.

Ken-Burns-Effekt

Der Ken-Burns-Effekt verleiht statischen Bildern durch langsame Zoom- oder Schwenkbewegungen mehr Dynamik. Durch das gezielte Heranfahren, Herauszoomen oder Verschieben des Bildausschnitts entsteht ein Eindruck von Bewegung, der Inhalte emotionaler und lebendiger wirken lässt. Die Bewegung sollte stets flüssig und subtil erfolgen. Das Easing ist dabei linear.

Animation im UI

Richtig eingesetzt, unterstützen Animationen positiv die User Experience. Sie lenken den Fokus, schaffen nachvollziehbare Zusammenhänge oder erzeugen Ausdruck. Animation wird bewusst eingesetzt und wirkt nie störend oder komplex. 

Mehr Informationen zum Aufbau und Einsatz befinden sich in den Kapiteln Icons, Signature Graphics und Schwelle.

Bewegtbild ist ein wirkungsvolles Mittel um Informationen zu vermitteln und Emotionen zu erzeugen. Um dabei ein einheitliches Gesamtbild sicher zu stellen, werden klar definierte, wiederkehrende Elemente verwendet. Für besonders markenprägende Momente wird das visuelle Logo mit dem Sound-Logo unterstrichen.

Logo

Das Logo kann vielfältig in audivisuellen Medien eingesetzt werden. Seine Animation sollte dabei den Inhalt nicht beeinträchtigen, sondern gezielt einen klaren Akzent setzen und die Marke stärken.

Logo Ending

Für verschiedene Formate können unterschiedliche Logo Endings eingesetzt werden. Bevorzugt wird die Primärvariante verwendet. Für eine einfachere Darstellung stehen zwei reduzierte Varianten zur Verfügung.

Primärvariante

Reduzierte Varianten

Logozusatz-Animation

Bezieht sich die Kommunikation ausschließlich auf einen bestimmten Geschäfts- oder Produktbereich, kann die Logoanimation um den entsprechenden Logozusatz ergänzt werden.

Horizontale Ausrichtung zentriert

Horizontale Ausrichtung linksbündig

Vertikale Ausrichtung zentriert

Trenner

Um unterschiedliche Inhalte und Filmsequenzen klar voneinander abzugrenzen, können sogenannte „Trenner“ (Übergänge) eingesetzt werden. Sie schaffen Struktur und erleichtern die Orientierung innerhalb der Inhalte. Dabei handelt es sich um flächige Blenden, die sich richtungsweisend an den Hauptachsen orientieren.

Dynamisch

Bevorzugt wird der zweifarbige, dynamische Trenner eingesetzt.

Einfach

Der einfarbige Trenner wird v.A. auf besonders unruhigen Hintergründen verwendet.

Bauchbinde

Die Bauchbinde kann ebenfalls einfach oder dynamisch eingesetzt werden. Bevorzugt wird die dynamische Variante. Für komplexe Inhalte oder bei unruhigem Hintergrund-Bild kommt die einfache Variante zum Einsatz.

Untertitel

Title und Action Safe Story und Social Safe

Title und Action Safe

Für klassische Videoformate gelten die folgenden Schutzräume: Action-Safe von 5 % und Title-Safe von 10 % umlaufendem Rand. Im Title Safe werden alle wichtigen Informationen wie Untertitel platziert.

Für klassische Videoformate gelten die folgenden Schutzräume: Action Safe von 5 % und Title Safe von 10 % umlaufendem Rand. Im Title Safe werden alle wichtigen Informationen wie Untertitel platziert.

Story und Social Safe

Für Social Media Formate wie Instagram Storys & Reels, YouTube Shorts und TikToks gelten die hier dargestellten Schutzräume.

Definierte Schutzräume bei: 
A) Instagram Story
B) Instagram Reel, YouTube Short, TikTok
C) Instagram Post

Das Motion Toolkit wird Ende September zum Download zur Verfügung stehen.