Unsere Icons: universell einsetzbar und schnell verständlich.
Icons veranschaulichen wichtige Informationen auf kleinstem Raum. Insbesondere auf digitalen Benutzeroberflächen oder in Gebäuden und Fahrzeugen spenden sie Orientierung und sind neben Logo und Typografie wichtige Botschafter unserer Marke: Der Stil unserer Icons orientiert sich an bekannten Elementen und schafft so klare Wiedererkennung.
Marke im App Icon
Wir nutzen ein einfaches System, damit ein homogenes Marken Erscheinungsbild innerhalb unserer App-Icon-Familie entsteht. Unsere App-Icons bleiben so in sich eigenständig und unterscheidbar.
Übergreifend – für unser Ökosystem – steht das DB Logo, welches ausschließlich im DB Navigator ohne weitere Kennzeichnung nach Abstimmung mit GNM verwendet wird. Der DB Navigator dient als Leadapp für den Personenverkehr und der DAB Master entsprechend als Leadapp für den Digitalen Arbeitsplatz unserer Mitarbeitenden – mit zahlreichen untergeordneten Apps.
Alle weiteren Apps verwenden die 2/3-Regelung. Im oberen Teil wird das DB Logo immer in DB Rot eingesetzt, der untere Teil dient dem Icon, welches die App beschreibt.
Farbe
Wir verwenden eine Auszeichnungsfarbe, um die Zugehörigkeit einer App zu unterschiedlichen Unternehmensbereichen zu kennzeichen. Hierfür verwenden wir unser Markenfarben.
So unterscheiden sich unsere Apps untereinander und schaffen gleichzeitig eine Zugehörigkeit zur Deutschen Bahn in der App-Übersicht.
Geometrie
App Icons werden auf einer quadratischen Grundfläche nach einer 1/3–2/3–Aufteilung erstellt. Dabei ist das obere Drittel in Weiß und die unteren zwei Drittel in Farbe angelegt. Durch den App-Namen oder den Textzusatz in den jeweiligen Betriebssystemen wird der Zweck der App näher erläutert. Dadurch können wir auf die Textzusatz innerhalb des App Icons verzichten.
Systembedingte Besonderheiten
Innerhalb der Systeme Android und iOS werden App Icons an den Ecken angerundet oder innerhalb einer Kreisfläche dargestellt. Dies geschieht automatisch; der Export aus dem Template für App Icons erfolgt mit geraden Kanten.
Für eine optimale Darstellung innerhalb der Kreisflächen wird der Abstand nach Innen vergrößert. So gewährleisten wir ausreichend Abstand des DB Logos und des Icons zum Rand des App Icons. Dabei skalieren wir die Grundflächen sowie das Logo und das Icon proportional kleiner.
Icon
Die Icons innerhalb der App Icons entsprechen den Vorgaben der funktionalen Icons oder entstammen direkt der Iconbibliothek. Sie basieren auf dem 32dp Raster das in der Breite auf 38dp ausgeweitet wird. Dabei wird die Linienstärke nicht verändert: sie bleibt einheitlich bei 2dp.
Die Icons werden in Originalgröße in der Vorlage platziert. Wenn die Metapher nicht ausreicht, um die Funktion der App zu erklären, kann das Icon in der Breite erweitert werden – maximal 38dp, inklusive Schutzraum.
Sie werden ausschließlich zentriert auf der farbigen Fläche in Weiß platziert.
Wähle eine Metapher die sich von anderen Apps der Deutschen Bahn unterscheidet, um in der App-Unterscheidbarkeit für unsere Nutzer zu gewährleisten.
Icons, die sie nicht ganz ausnutzen, müssen angepasst werden, damit sie auf der Fläche in DB Rot mehr Raum einnehmen und nicht zu klein wirken.
Icons, die die 32dp Maximalhöhe nicht ausnutzen, können in der Gestaltung angepasst werden, damit diese auf der farbigen Fläche mehr Raum einnehmen und nicht zu klein wirken.
Optimales Ausnutzen der verfügbaren Fläche für Icons
Durch die geringe Höhe nutzt das Icon die Fläche nicht optimals aus
Die wichtigsten Punkte zusammengefasst:
- 1/3-2/3-Regel beachten
- DB Logo auf Weiß, Icon auf farbiger Fläche
- Metapher verständlich und angemessen
- Icon im Stil der funktionalen Icons
- Abstände und Größen einhalten
- Icon möglichst in quadratischer Grundform einsetzen
Dos & Dont`s
Funktionales Icon auf vorgegebener Flächenaufteilung
Icon sehr generisch, ohne konkrete Aussage
50/50 Aufteilung der Fläche anstatt 1/3-2/3
Breites, funktionales Icon auf vorgegebener Flächenaufteilung
Farbliche Anpassung für Apps für Mitarbeitende
Illustratives Icon führt zu einer zu geringen Strichstärke
Template
Unser App-Icon-Template ist so angelgt, dass es ausreicht das eigene Icon im Artboard „Icon Area“ auf der Seite „Icon Master“ zu platzieren.
Alle relevanten Informationen und Dateiformate sowie Bezeichnungen und Ordnerstrukturen werden bei dem Export automatsich erzeugt.
Das App-Icon-Template kann in Sketch oder Figma genutzt werden und unterstützt folgende Formate:
Apple: iOS, ipadOS, watchOS, Apple Carplay
Android: Android Phone, Android Auto
Web: Favicons für diverse Ausgabemedien sowie Web Apps für iOS und Android
Download des Templates
Du hast Fragen?
Wir haben alles dafür gegeben, dass unser Corporate Design mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein oder Fragen haben, so sind wir gerne für dich da!
Weiter