Illustrative Icons
Unsere illustrativen Icons visualisieren Geschichten, Ereignisse und Handlungen im Zusammenhang mit dem Reiseerlebnis der Deutschen Bahn. Im Gegensatz zu unseren funktionalen Icons sind sie detailreicher illustriert und werden plakativ in der Kommunikation verwendet.
Visuelle Sprache
Die funktionalen und illustrativen Icons leiten sich von der modernen Ikone der Deutschen Bahn ab. Durch bekannte Elemente und Formen schaffen wir ein harmonischen Gesamtbild und klare Wiedererkennung. Der Puls ist fester Bestandteil unserer Formensprache. Die funktionalen Icons sind einfarbig. Als Standard verwenden wir Outline-Icons.
Zweifarbig als Standard
Der Standard für unsere illustrativen Icons ist die zweifarbige Stilistik. Ist die Wahrnehmung des Icons nicht gewährleistet, z. B. aufgrund einer farbigen Fläche, stellen wir das Icon monochrom dar.
Konstruktion
Nachfolgend haben wir dir die wichtigsten Information zur Konstruktion und Bereitstellung deines neuen Icons zusammengestellt. Eine Schritt-für-Schritt-Anleitung, wie du ein optimales Icon erstellst, findest unter Workflow, im Abschnitt Funktionale Icons.
Größen und Schutzraum
Unsere Grundfläche beträgt mindestens 64 × 64 dp. Der Schutzraum beträgt 1/16 der Breite. Benutze, basierend auf dem Verwendungszweck, die richtige Icon-Größe und Strichstärke, um eine pixel-perfekte Darstellung bei einer Skalierung von 100 % zu erreichen.
Adaption und Komposition
Wir adaptieren und erweitern bereits vorhandene Formen, um ein harmonisches Gesamtbild und wiedererkennbare Momente zu schaffen.
Komposition
Wir schaffen neue Kompositionen durch die Verbindung mindestens zweier bereits vorhandener Icons bzw. Metaphern.
Beispielsweise nutzen wir das Smartphone-Icon in Verbindung mit dem Ticket- und QR-Code-Icon, um das Mobile-Ticket-Icon zu erzeugen.
Strichstärken und Linienenden
Wir verwenden für illustrative Icons in allen Größen eine konsistente Strichstärke von 2 dp für Kurven, Winkel sowie innere und äußere Striche. Linienenden runden wir mit einem Radius von 1/2 der Linienstärke ab.
Abrundungen
Wir runden die Formen und die Ecken von Formen ab. Die Abrundung ist mindestens 1/2 Linienstärke, um spitze Kanten zu vermeiden. Abrundungen aus der Realwelt übernehmen wir in unsere Metaphern und verstärken sie. Diese können bis auf maximal 1/8 der Icongröße skaliert werden. Setzen wir unterschiedlich starke Abrundungen in einem Icon ein, achten wir auf die Proportionen, um ein harmonisches Gesamtbild zu erzeugen.
Abstände und Anschlüsse
Wir unterschreiten bei Abständen nicht die Linienstärke, damit die Metapher immer klar erkennbar bleibt. Kann aufgrund der Skalierung der Abstand nicht mehr eingehalten werden, reduzieren wir zuerst die Komplexität des Icons und im nächsten Schritt die innenliegenden Linien und Abstände auf 1/2 der Linienstärke.
Winkel
Um ein Icon zu konstruieren, verwenden wir Winkel in 45-Grad-Schritten. Wenn die Metapher es erfordert, kann auch in 15-Grad-Schritten gestaltet werden.
Farbe
Unsere illustrativen Icons verwenden als Standard ein zweifarbiges Farbschema, in dem wir "DB Rot" als Farbe für den Puls verwenden. Auf farbigen Flächen verwenden wir ein monochromes Farbschema, um eine gute Wahrnehmbarkeit zu gewährleisten.
Zweifarbig auf hellem Hintergrund
Monochrom auf farbigem Hintergrund
Animation
Richtig eingesetzt, unterstützen Animationen die User Experience positiv. Sie geben bei der Benutzung Rückmeldung und helfen so, Veränderungen besser wahrzunehmen.
Beispielanimation zum Auf- und Abbau eines Icons.
Beispielanimation zum Auf- und Abbau eines Icons.
Animationskurven
Zwei Animationskurven helfen uns, Bewegung ausdrucksstark und 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 den Nutzer:innen.
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 %
Weiter