Motion Branding

Bewegung macht die Persönlichkeit der Bahn erfahrbar. Auf kommunikativer Ebene unterstützen markentypische Animationen das Storytelling, während sie im UI die Usability fördern und Interaktionen ihren Charakter verleihen.

Animation: Bewegung macht Mobilität erlebbar

Hier findest du die Vorgaben für Layout Animation, sowie Verweise auf Icons, UI-Elemente und den Puls-Effekt. Gemeinsam bilden sie ein konsistentes Bewegungsprinzip, das Orientierung bietet, Interaktionen verdeutlicht und die Marke lebendig wirken lässt.

Das Wichtigste in Kürze

Bewegung spiegelt unsere Persönlichkeit wider.
Animation unterstützt das Storytelling.
Animation dient der Nutzerführung.

Animationskurven – emotional und funktional

Zwei Animationskurven helfen uns, Bewegung ausdrucksstark bis funktional darzustellen.

Unsere charakteristische Animationskurve – abgeleitet von unseren Markenwerten – wird durch eine zweite, funktionale Kurve ergänzt. Diese sorgt für schnelles Feedback in bestimmten Interaktionen mit den Nutzenden. Sie ist sachlich und zurückhaltend, um den Ablauf nicht zu verzögern.

Die Bewegung beginnt mit einer natürlichen Beschleunigung. Das Grundtempo ist dynamisch und zielgerichtet, ein kontrolliertes Abbremsen beendet die Animation souverän.

EmotionalDie emotionale Animationskurve verleiht animierten Elementen Dynamik und Charakter. Sie sorgt für Prägnanz und bildet die Grundlage für die Animationen von Icons, Bannern etc.Web-Anwendungen – CSS:Transition-Timing-Function: Cubic-Bezier (0.27, 0.05, 0.4, 0.95)Adobe After Effects:Ausgehende Geschwindigkeit: 33 %Ankommende Geschwindigkeit: 70 %

FunktionalDie funktionale Animationskurve wird für schnelle und subtile Animationen verwendet. Überall dort, wo der Nutzer schnelles Feedback (z. B. Drop-down-Menü) in einer Interaktion benötigt.Web-Anwendungen – CSS:Transition-Timing-Function:Cubic-Bezier (0.15, 0, 0.45, 1)Adobe After Effects:Ausgehende Geschwindigkeit: 15 %Ankommende Geschwindigkeit: 55 %

Bewegungsmuster

Angelehnt an Bewegungen und physikalische Gesetzmäßigkeiten der realen Welt leiten sich die Bewegungsmuster aus den alltäglichen Interaktionen von Millionen Menschen mit der Deutschen Bahn ab.

Standard Animation

Von links nach rechts

Klare, richtungsweisende Flächenbewegung – abgeleitet von der natürlichen Fahrtrichtung der Züge. Sie bildet das Fundament jeder unserer Layout-Animationen.

Ergänzende Animation

Zoom

Die skalierende Bewegung rückt Elemente dynamisch in den Fokus. Zur gezielten Hervorhebung von Call-to-Actions werden Elemente von 0 auf 100 % skaliert. Eine dezente, pulsierende Bewegung von 10–15 % verstärkt den Effekt.

Layout-Animation

Markenmodul

Das Layout folgt definierten Bewegungsmustern und kann – abhängig von Einsatz und Anwendung – entweder durch eine Bewegung von links nach rechts oder über einen Skalierungseffekt aufgebaut werden. Wichtig ist dabei, die Abfolge der einzelnen Elemente konsequent einzuhalten. Detaillierte Informationen zum Markenmodul findest du im Bereich Layout.

Standard Layout-Animation

Von Links nach Rechts

Unsere Kommunikation folgt einer klaren Animationsreihenfolge:

Motiv/Hintergrund
Absender/Logo
Botschaft
Puls

Ergänzende Elemente

Zoom

Der Zoom-Effekt wird gezielt für besondere Inszenierungen eingesetzt – etwa bei Störern oder Buttons. Er ersetzt jedoch nicht das Standard-Bewegungsmuster (von links nach rechts). Der Call-to-Action erscheint immer zuletzt.

5. Optional: Call To Action (z. B. Störer oder Button)

Ergänzung für Layout (Störer+Button)

Störer und Buttons dienen als gezielte Ergänzungen innerhalb unseres klassischen Markenmoduls. Sie lenken die Aufmerksamkeit und heben wichtige Informationen oder Call-to-Actions hervor.

Weitere Informationen zur Erstellung eines Störers oder Buttons findest du hier:

> Störer

> UI-Elemente

Störer werden ausschließlich im Bewegungsmuster „Zoom“ animiert – sowohl beim Ein- als auch beim Ausblenden.

Buttons werden ausschließlich im Bewegungsmuster „Zoom“ animiert – sowohl beim Ein- als auch beim Ausblenden.

Detaillierte Animationen

Puls-Animation

Detaillierte Informationen zum Einsatz des Pulses als bewegtes Element findest du im Bereich Puls.

Puls als UI-Element

Der Puls kann den Takt vorgeben, Inhalte begleiten oder gezielt Akzente setzen. Sein Grundtempo ist dynamisch und passt sich dem jeweiligen Kontext an – natürlich, fließend und zielgerichtet. Die genauen Beschleunigungswerte findest du in unseren Animationskurven.

Puls als lebendiger Charakter

Als lebendiger Charakter vermittelt der Puls auf abstrakte Weise Emotionen und einfache Informationen. Setze ihn in der digitalen Interaktion mit Nutzern ein – zum Beispiel als Chatbot oder als Bestandteil von Voice User Interfaces (VUI). So stärkst du die emotionale Bindung zwischen Mensch und Marke.

Icon-Animation

Illustrative Icons werden durch subtile Animationen zum Leben erweckt. Diese können entweder aufbauend oder motivbezogen animiert werden. Weitere Informationen zu Icons findest du im Kapitel Illustrative Icons.

Aufbauend animierte Icons

Bei diesen Icons werden einzelne Linien oder Elemente schrittweise animiert, sodass sich das Symbol Stück für Stück sichtbar aufbaut.

Motivbezogen animierte Icons

Diese Icons erscheinen nicht einfach, sondern entfalten sich durch subtile Bewegungen wie Pulsieren, Schwingen oder rhythmisches Hervorheben. Die Animation greift das Motiv des Icons auf und betont seine Funktion oder Bedeutung – sie zieht Aufmerksamkeit auf sich, ohne aufdringlich zu wirken.

Animierte Inhalte im Digitalen Out-of-Home

Eine Besonderheit digitaler OOH-Anzeigen: Bei der Links-nach-rechts-Bewegung der Schrift sorgt ein zusätzlicher leichter Motion Blur für ein sanfteres Erscheinungsbild im urbanen Kontext von Mobilität und Bewegung. Ergänzend schafft ein subtiler räumlicher Effekt Tiefe im Bild. Beide Effekte unterstreichen die Botschaft, ohne vom Wesentlichen abzulenken.

Hinweis: Da Key-Informationen im Digitalen Out-of-Home häufig nur innerhalb von 2–3 Sekunden wahrgenommen werden, müssen alle Elemente kompakt, gesammelt und unmittelbar hintereinander einfliegen. Die Animation folgt daher einem klaren, schnell erfassbaren Ablauf, der die kurze Wahrnehmungsspanne optimal nutzt – gerade im Vorbeigehen.

Motion Blur

Bei der Standardanimation der Textelemente (von links nach rechts) sorgt ein leichter Motion Blur für eine weichere und natürlichere Bewegung. So entsteht ein hochwertiger, flüssiger Gesamteindruck.

Pan-Effekt

Der Pan-Effekt erzeugt eine sanfte horizontale oder vertikale Bewegung im Bild und vermittelt so subtile Dynamik und Tiefe, ähnlich einer Kamerafahrt. Textelemente und das DB-Markenmodul bleiben statisch.

Dos and Don'ts

Die Elemente werden mit einer natürlichen Easing-Kurve (ease-in und ease-out) animiert.

Vermeide unruhige oder unnatürliche Bewegungen, wie ruckartige oder sprunghafte Animationen.

Die Animationen sind flüssig und vermeiden unnötige Wartezeiten.

Vermeide träge oder zu langsame Bewegungen.

Die Animationsrichtung des Markenmoduls verläuft stets von links nach rechts.

Andere Animationsrichtungen sollten vermieden werden.

Die Zoom-Bewegung ist stimmig und harmoniert mit dem Layout.

Vermeide überproportionale Skalierungen.

Bewegtbild: Emotionaler Ausdruck.

Mit Bewegtbild lassen sich Inhalte und Emotionen besonders kraftvoll vermitteln – und gerade in Social Media ist Video relevanter denn je. Um auch hier eine starke Markenpräsenz und Wiedererkennbarkeit zu gewährleisten, setzen wir Bewegtbild-Elemente ein, die auf den Gestaltungsprinzipien unserer Basiselemente basieren.

Das Wichtigste in Kürze

Alle Bewegtbild-Elemente basieren auf unseren Designprinzipien.
Nutze unsere Bewegtbild-Vorlagen.
Alle Vorlagen sind im Format 16:9 angelegt.

Formate

Während das klassische 16:9 vor allem relevant für TV und YouTube ist, wird für die Social-Media-Plattformen vor allem im 9:16 Hochformat, und für manche Anwendungsfälle in 4:5 produziert. Auch hier gelten die Gestaltungsprinzipien unserer Basiselemente.

Logo-Animation für Bewegtbild

Für Bewegtbild nutzen wir bestimmte Elemente, wie Logo Intros und Outros, Corner-Logos, Titel, Text Inserts und Untertitel. Diese Bewegtbild-Elemente basieren natürlich auf den bestehenden Gestaltungsprinzipien unserer Basiselemente wie Typografie, Layout, Logo, Puls, Farbe, Bildwelt, Animation und Audio Branding.

Setze dich bei Fragen diesbezüglich gerne mit unserem Markenmanagement in Verbindung: marke@deutschebahn.com.

Logo Intro

Ob im TV, auf unseren Social Media Kanälen oder im Web – mit unserem Logo Intro können Filme und Videos eröffnet werden.

> DB Sound Logo

Weiße Überblendung

Rote Überblendung

Binnenraum-Logo

Logo als Bildmaske

Corner-Logo

Das Corner-Logo kann optional als Absender in der oberen linken Ecke des Bildes während der gesamten Filmlänge platziert werden. Achte darauf, eine Logofarbe zu wählen, die während der meisten Szenen genug Kontrast zum Hintergrund bietet.

Corner-Logo in Weiß

Corner-Logo als Wasserzeichen

Logo Ending

Das DB Logo Ending hat eine Länge von zwei Sekunden und bildet den Abschluss aller audiovisuellen Medien.

Hinweis: Unterhalb des Logos können – optional und innerhalb des definierten Schutzraums – eine Webadresse oder kurze kommunikative Slogans zentriert ergänzt werden.

> DB Soundlogo

Weiße Überblendung

Rote Überblendung

Binnenraumlogo mit anschließender Überblendung

Logo als Bildmaske mit anschließender Überblendung

Ending für Logozusätze

Das DB Logo Ending kann optional mit Logozusätzen verwendet werden. Es startet wie das reguläre Logo Ending und wird anschließend um den jeweiligen Zusatz erweitert. In jedem Fall ist das DB Soundlogo verpflichtend einzubinden.

Hinweis: Der Einsatz von Logozusatz-Endings muss stets mit dem Markenmanagement abgestimmt werden.

Textanimation für Bewegtbild

Titel

Text-Inserts werden zur Einblendung verschiedener textlicher Inhalte genutzt. Titel-Einblendungen bestehen aus einer Überschrift und unserem Puls. Optional kannst du unter der Überschrift eine Unterüberschrift platzieren.

Titel-Einblendung zentriert mit rotem Flächenmodul

Titel-Einblendung linksbündig mit transparentem Flächenmodul

Text-Inserts links

Bauchbinde mit Titel und Beschreibung

Untertitel

Zur Sicherstellung der Barrierefreiheit verwenden wir systemeigene Untertitel überall dort, wo dies technisch möglich ist – etwa auf YouTube oder anderen Plattformen mit integrierter Untertitel-Funktion. Ist dies technisch nicht umsetzbar, gelten folgende Vorgaben.

16:9 Format

Sicherheitsabstand unten: mindestens 80 pxUntertitel: DB Neo Sans Black, 35 px Schriftgröße, Zeilenabstand 135 %, maximal zwei Zeilen

Hinweis: Die angegebenen Sicherheitsabstände beziehen sich auf ein Format von 1920 × 1080 px. Bei größeren Formaten werden die Abstände proportional skaliert.

4:5 und 9:16 Format

Bei Social-Media-Formaten (z. B. Reels) ist auf die definierte Safe Zone zu achten, damit Untertitel stets gut lesbar bleiben und nicht von Interface-Elementen der Plattform verdeckt werden.

4:5 FormatSicherheitsabstand unten: mindestens 135 pxUntertitel: DB Neo Sans Black, 48 px Schriftgröße, Zeilenabstand 135 %, maximal zwei Zeilen

9:16 FormatSicherheitsabstand unten: mindestens 285 pxUntertitel: DB Neo Sans Black, 48 px Schriftgröße, Zeilenabstand 135 %, maximal zwei Zeilen

Verlauf (optional)

Wenn der Kontrast zum Videomaterial nicht ausreicht, kann die Schrift optional mit einem weichen Schwarz-Verlauf hinterlegt werden. Die Deckkraft des Verlaufs sollte maximal 35 % betragen.

Höhe Verlauf 16:9 Format: max. 1/4 der FormathöheHöhe Verlauf 4:5 und 9:16 Format: max. 1/3 der Formathöhe

Bauchbinden

Einsatz von Bauchbinden

Bauchbinden werden für Einblendungen von Namen mit kurzer Beschreibung der Zuständigkeit genutzt. Zusätzlich können sie ein Veranstaltungslabel beinhalten. Sie werden am unteren Bildrand platziert und können je nach Anwendung skaliert werden.

Standard Bauchbinden

Bauchbinde auf weißem Flächenmodul

Name: DB Neo Head Black
Titel/Beschreibung: DB Neo Head Regular
Bewegungsmuster: Von Links nach Rechts

Subtile Bauchbinde

Name: DB Neo Head Black
Titel/Beschreibung: DB Neo Head Regular, Zeilenabstand 110 %, maximal zwei Zeilen
Maximale Textlänge: drei Zeilen
Hintergrund: Bei Bedarf subtile Abdunklung, um Lesbarkeit sicherzustellen
Art der Animation: Fade In (Von 0% auf 100% Deckkraft)

Format-spezifische Vorgaben

16:9 Format

Die hier exemplarisch für die Standard-Bauchbinde definierten Vorgaben zu Schriftgröße und Mindestabständen gelten auch für die subtile Bauchbinde – jedoch ohne Flächenmodul.

16:9 FormatSicherheitsabstand unten: mindestens 80 pxName: DB Neo Head Black, 42 pxTitel/Beschreibung: DB Neo Head Regular, 26 px, Zeilenabstand 135 % in maximal zwei Zeilen

4:5 und 9:16 Format

4:5 FormatSicherheitsabstand unten: mindestens 135 pxName: DB Neo Head Black, 55 pxTitel/Beschreibung: DB Neo Head Regular, 27,5 px, Zeilenabstand 135 % in maximal zwei Zeilen

9:16 FormatSicherheitsabstand unten: mindestens 285 pxName: DB Neo Head Black, 55 pxTitel/Beschreibung: DB Neo Head Regular, 27,5 px, Zeilenabstand 135 % in maximal zwei Zeilen

Zeitgleiche Einblendung von Untertitel und Bauchbinde

Untertitel werden standardmäßig zentriert am unteren Bildrand platziert. Wird gleichzeitig eine Bauchbinde eingeblendet, rücken die Untertitel für deren Dauer in den oberen Bildbereich.

Platzierung

Die Untertitel verwenden denselben vertikalen Sicherheitsabstand (z. B. 135 px im 4:5-Format) wie am unteren Rand definiert. So bleibt die Lesbarkeit beider Elemente erhalten und eine Überlappung wird vermieden.

Downloads

Motion Toolkit

After Effects Template

ZIP | 12,6 MB

Dos and Don'ts

Das DB Logo hat ausreichend Kontrast zum Hintergrund.

Das DB Logo ist nicht erkennbar. Der Kontrast ist zu niedrig.

Das DB-Logo verdeckt keine wichtigen Bildbereiche.

Das DB-Logo darf nicht auf Gesichtern platziert werden.

Das Logo Ending wird in der bereitgestellten Größe platziert.

Das Logo Ending ist zu klein oder zu groß eingesetzt.

Das Corner-Logo ist in der oberen linken Ecke platziert.

Das Corner-Logo befindet sich an der falschen Position.

Die Untertitel werden gemäß den Guidelines platziert und sind gut lesbar.

Die Untertitel werden frei eingesetzt und von Systemelementen überlagert.

Du hast Fragen?

Unser Corporate Design lässt dir viele Freiheiten: Wir haben ganz bewusst darauf verzichtet, jeden Spezialfall exakt zu definieren. Stattdessen entscheidest du selbst, welche der hier angebotenen Lösungen für die Marke Deutsche Bahn die beste ist. Solltest du Fragen zur Anwendung haben, helfen wir dir natürlich gerne weiter.

Kontakt