Animation

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.

Anwendungsbeispiele

Bild_1

Bild_2

Bild_3

Bild_4

Das Wichtigste in Kürze

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

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 %












Textmodul_2

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:

  1. Motiv/Hintergrund
  2. Absender/Logo 
  3. Botschaft
  4. Puls
  5. Grafikelemente
  6. Interaktive Elemente

Do´s & Don´ts

Fragen-neu

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!