Animation: Bewegung macht Mobilität erlebbar.
Bewegung macht die Persönlichkeit der Bahn erlebbar. Auf kommunikativer Ebene unterstützen markentypische Animationen das Storytelling, während sie im UI der Usability helfen und Interaktionen ihren Charakter verleihen.
Bild_4
Anwendungsprinzipien
Animationskurven – emotional und funktional
Zwei Animationskurven helfen uns, Bewegung ausdrucksstark bis funktional darzustellen.
Unsere charakteristische Animationskurve – basierend auf der Brand-Personality – wird durch eine zweite funktionale Animationskurve erweitert. Ihr Einsatz ermöglicht schnelles Feedback in bestimmten Interaktionen mit dem Nutzenden.
Sie ist sachlich und zurückhaltend.
Unsere Bewegung startet mit einer natürlichen Beschleunigung. Das Grundtempo ist dynamisch und zielgerichtet. Ein kontrolliertes Abbremsen schließt die Animation souverän ab.
Emotional
Die 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 %
Funktional
Die 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 %
Dauer/Zeit
Die Dauer einer Animation richtet sich individuell nach dem zu animierenden Inhalt. So ist die Animationsdauer bei funktionalen Elementen meist kurz, um eine Interaktion nicht zu verzögern. Inhalten dagegen kommt diejenige Animationsdauer zu, die für ihren aufmerksamkeitsstarken Auftritt erforderlich ist. Grundsätzlich gilt: Animationen unterstützen Inhalte in ihrem Auftritt. Die Animation steht jedoch nie im Vordergrund. Von langen Animationszeiten ist daher abzusehen.
Richtung
Wir animieren Elemente horizontal oder vertikal, aber nie schräg. In unserer Kommunikation ist die bevorzugte Animationsrichtung horizontal von links nach rechts.
Reihenfolge
Unsere Kommunikation bauen wir in folgender Animationsreihenfolge auf:
- Motiv/Hintergrund
- Absender/Logo
- Botschaft
- Puls
- Grafikelemente
- Interaktive Elemente
Du hast Fragen?
Wir haben bewusst darauf verzichtet, bei unserem Corporate Design jeden Spezialfall zu definieren. Stattdessen setzen wir darauf, dass du Freiräume verantwortungsvoll nutzt, um die Marke Deutsche Bahn zu stärken. Solltest du dir unsicher sein oder Fragen haben, sind wir gerne für dich da!
Weiter