Launch Screens für unsere Apps
Unsere Launch Screens sind der erste Moment, den ein User erlebt, wenn er aus dem Homescreen seines Telefones, Tablets oder seiner Smartwatch einen digitalen Service der Deutschen Bahn startet. Diesen Moment nutzen wir aktiv, um den User sachlich, fokusiert oder emotional in die Markenwelt der Deutschen Bahn einzuleiten.
Aufbau im Detail
Erfahre in folgenden Kapiteln mehr welchen klaren Prinzipen unsere Launch Screens bei Layout, Geometrie, Kennzeichnung und der Produktinszenierung folgen.
Prinzip
Unsere Launch Screens verfolgen dem Prinzip der primär und peripher wahrnehmbaren Bereiche. Das Layout orientiert sich an der Bildschirmgröße des jeweiligen Devices.
Struktur
Im primären Bereich befinden sich der App-Name mit Puls und ein optionales illustratives Icon oder eine Illustration. Im peripheren Bereich befinden sich im oberen Teil das Logo und im unteren Teil der Bereich für Partnerlogos oder Zusatzinformationen.
Layout
Saveareas
Die Abstände der äußeren Elemente ergeben sich aus der DB Logohöhe. Die äußersten Elemente werden jeweils mit einem Abstand von 1,5 Logohöhen nach oben und unten platziert.
Nach links und rechts wird ein Abstand von einer halben Logohöhe eingehalten.
Geometrie
Das Icon wird immer mit einem Abstand von einem DB Logo zur Mittellänge des App-Namens platziert. Dabei wird als Unterkante nicht der Icon-Rahmen, sondern der Inhalt genutzt.Der Puls wird mit einem Abstand eines halben DB Logos zur Grundlinie des App-Namens platziert.
Illustratives Icon: 160 × 160 dp (incl. Schutzraum)DB Logo: 70 × 49 dpApp-Name: DB Screen Head Black: 40 dpPuls: 7 × 70 dp
Skalierung
Wir legen unsere Launch Screens werden so an, dass für jede Mediengröße eine optimale Darstellung erreicht wird.Die Größe der Elemente entsprechend des Formats skaliert. Dabei gilt, dass bei der ungefähr doppelten Bildschirmbreite die Elemente auf 115 % vergrößert werden, bei ca. der dreifachen Breite auf 130 %. Für kleine Bildschirmbreiten wird die Größe auf maximal 90 % reduziert.
Viewportbreite | Skalierung | Logo-/Pulsbreite | Schriftgröße |
375 px | 90 % | 60 px | 36 px |
390 px | 100 % | 70 px | 40 px |
768 px | 115 % | 80 px | 48 px |
1024 px | 130 % | 100 px | 56 px |
Vertikale Positionierung
Für Apps ohne Icon wird die Kombination aus App-Name und Puls mit dem Puls auf der Mittellinie platziert. Bei der Verwendung eines Illustrierten Icons werden für eine optische Zentrierung werden Icon, App-Name und Puls leicht nach unten versetzt ausgerichtet. Die Grundlinie des App-Namens wird dafür eine DB Logohöhe unter der halben Screenhöhe platziert.
Partnerlogos und Zusatzinformationen
Zusätzliche Informationen, wie Partnerlogos oder Zusatzinformationen, werden mit einem Abstand von 1,5 Logohöhen zum unteren Rand platziert. Der Inhalt in diesem Bereich beschränkt sich auf 1,5 Logohöhen, um ein ausgewogenes Verhältnis zu den restlichen Elementen zu erhalten.
Typografische Texthinweise werden in der Ausgangsgröße (100 %) mit einer Schriftgröße von 20px mit der Schrift DB Screen Sans Digital Regular eingesetzt. Um die Farbe vom App-Namen abzugrenzen, ist der Texthinweis in DB Cool Gray 500 eingefärbt.
Für den Bereich der Partnerlogos und weiteren Informationen kann der Inhalt auch zweizeilig eingesetzt werden.
Kennzeichnung
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.
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.
Besonderheiten Smartwatches
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.
Launch Screens werden nur auf wearOS Unterstützt!Aufgrund der verringerten Displaygröße und um das optisch Rahmenlose Design von Smartwatches zu unterstützen, werden auf Launch Screens für Inhalte reduziert und auf auf einem Schwarzen Hintergrung dargestellt. Der grundlegende Aufbau der Kombination aus Icon, App-Name und Puls entspricht den anderen Screengrößen.
Illustratives Icon: 160 × 160 dp (incl. Schutzraum)App-Name: DB Screen Head Black: 36 dpPuls: 7 × 70 dpHintergrund: #000000
Savearea
Nach links und rechts wird ein Abstand von einer halben Logohöhe eingehalten.
Platzierung
Wir platzieren die Gruppe bestehend aus Icon, App-Name sowie Puls vertikal und horizontal zentriert.
Illustrationen
Illustrationen schaffen eine weitere Ebene, den Launch Screen emotional aufzuladen. Dabei nutzen wir unseren Illustrationsstil. Illustrationen sind nur in Ausnahmefällen zulässig und für Apps vorgesehen, die einen starken kommunikativen Zweck erfüllen.
Wie bei der Platzierung der illustrativen Icons wird die Illustrationen mit einem Abstand von einem DB Logo platziert. Für ein optisch ausgeglichenes Bild, muss der Abstand nicht exakt eingehalten werden.
Fotografie
Passend zum Kontext können Illustrationen oder Fotografie im Hintergrund des Launch Screens platziert werden, um ihn emotional aufzuladen.
Bildmotive im Hintergrund des Launch Screens laden diesen nochmals emotionaler auf, da hierbei eine Stimmung – passend zur App – vermittelt wird. Beim Einsatz von Fotografie im Hintergrund des Launch Screens muss eine ausreichende Lesbarkeit des App-Namens gewährleistet sein.
Ruhiger Motivhintergrund, da der Launch Screen nur kurze Zeit sichtbar ist.
Abdunklung oder Aufhellung bei unruhigen Motiven möglich.
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