Animation

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

white question mark

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 %


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 %


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:

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

Do´s & Don´ts

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!

Kontakt