Direkt zum Inhalt
Modules
Startbild Mobile Apps
 

Die wachsende Beliebtheit von Smartphones und die vielseitigen Möglichkeiten der Kundenkommunikation mittels Apps wurden mit dem DB Navigator oder Call a Bike auch von der DB AG bereits erfolgreich eingesetzt. 2013 wurden weltweit knapp über 100 Milliarden kostenpflichtige und kostenlose Applikationen heruntergeladen. Allein der Erfolg des
DB Navigators zeigt die großartige Annahme von mobilen Dienstleistungen seitens der Kunden. Entsprechend wichtig ist ein einheitliches Auftreten der Marke in diesem viel genutzten Medium.

Die CD-Regeln für Application Icons gelten sowohl für externe als auch für interne Applikationen. Das Interface-Design interner Applikationen folgt eigenen, an das jeweilige Aufgabengebiet angepassten Gestaltungsprinzipien.
 

 

Bei Fragen zur Gestaltung
mobiler Applikationen wenden Sie sich bitte per

Ansprechpartner DB Schenker
Für DB Schenker werden die Apps zentral koordiniert.
Bitte wenden Sie sich an:

Steffen Pfeifer
Service-/Solution Manager
Customer & Business Solutions eService

 
 
OS Betreiber

Hier finden Sie einige allgemeingültige Tipps zur Gestaltung von
User Interfaces auf mobilen Geräten:

Designtipps für die Gestaltung von User Interfaces

Tipps und Hinweise zur Gestaltung und Usability von Apps 
sowie nützliche Templates finden Sie auf den Entwicklerseiten
von iOS, Android und Windows:
Entwicklerseite für iOS Apps
Entwicklerseite für Android Apps
Entwicklerseite für Windows Mobile Apps

 
 
Auf einen Blick:
 
 
Application Icons, Splash Screens, Application Interface
 

Die folgenden CD-Richtlinien für die Gestaltung von Mobilen Appikationen gelten konzernübergreifend. Sie sind unterteilt in Vorgaben für Application Icons (1), Splash Screens (2) und Application Interfaces (3).
Die Gestaltungsprinzipien sind auf das spezielle Bedien-umfeld von iOS angepasst. Sie gelten jedoch auch für Mobile Applikationen auf anderen Plattformen (z.B. Android).

Die Gestaltung wird von den technischen Voraussetzungen der einzelnen Geräte und den verschiedenen Betriebssystemen beeinflusst. Besonders die stark variierende Bildschirmqualität (Pixeldichte) erfordert eine individuelle Anpassung der Gestaltung.

 
 

Farbsystematik

Neben dem Logo erfolgt die Absenderkennung bei mobilen Applikationen über die Farbfläche. Jedem Geschäftsfeld ist eine bestimmte Farbe zugeordnet. DB Rot steht für die Kommunikation des Personen- und Schienengüterverkehrs, DB Blau für das Geschäftsfeld Landverkehr, Luft- und Seefracht und Kontraktlogistik und DB Grau für die Kommunikation des Konzerns und des Geschäftsfelds Infrastruktur und Dienstleistungen. So ist eindeutig zu erkennen, wer Absender innerhalb des Unternehmens ist und welche Inhalte kommuniziert werden. Es werden die Hausfarben des DB Konzerns verwendet.

Typografie

Für die Gestaltung von Mobilen Applikationen wird die Hausschrift 
DB Type verwendet.
Ausgewählte Schnitte stehen als Webfonts zur Verfügung.
 

 
  HKS 14   Pantone 485  RGB 240/20/20  Web #F01414

HKS 14 
Pantone 485
RGB 240/20/20
Web #F01414

  Pantone 281  RGB 10/30/110  Web #0A1E6E

Pantone 281
RGB 10/30/110
Web #0A1E6E

  Pantone 430   RGB 135/140/150   Web #878C96

Pantone 430
RGB 135/140/150
Web #878C96

 
 
CD-Regeln:
 
Application Icon
 

Als Träger der Marke und Startbutton für die Anwendung hat das Application Icon eine wichtige Werbefunktion. Es ermöglicht auf dem Homescreen des Gerätes den ersten visuellen Kontakt zwischen Nutzer und Applikation.
Eine einheitliche Systematik in der Darstellung hilft der Marke sich hier klar
zu positionieren.

 
 

Bereitstellung neuer Icons

Icons für neue Apps erhalten Sie ausschließlich vom Team Corporate Design. Beachten Sie bitte, dass für die Bereitstellung ein Budget eingeplant werden muss.
 

Gestaltungsprinzip

 
 

Das Design ist klar und einfach, um den Inhalt und die Benutzerführung zu unterstützen und passt sich dem grafischen Bild der mobilen Betriebssysteme an. Grafische Stilmittel wie z.B. Verläufe werden subtil eingesetzt.
Eine hohe Performance durch geringere Ladezeiten ist so gewährleistet.

Hinweis: Das Application Icon hat grundsätzlich abgerundete Ecken.

Application Icons sind in Logobereich und Funktionsbereich unterteilt. Im Logobereich steht ausschließlich die pixeloptimierte DB-Bildmarke. Die Höhe des Logobereiches ist den einzelnen Icongrößen angepasst.

Die Unterscheidung der einzelnen Geschäftsfelder erfolgt
mittels Farbkennung im Funktionsbereich. Hier wird
auch die Funktion der Applikation durch ein passendes Piktogramm visualisiert.

Gestaltungsprinzip App Icon
 
 

Hinweis: Damit das Icon auch auf weißer Fläche gut steht wird ein Verlauf von Schwarz zu Weiß mit einer Deckkraft von 10% über den Logo- und Funktionsbereich multipliziert.

Der Innenraum der Marke und das Piktogramm liegen rein weiß über dem Verlauf.

 
App Icon mit Verlauf
 
 

Farbkennung – abhängig vom Absender

 
 

Die Application Icons erhalten eine Farbkennung entsprechend des Absenders. DB Rot steht für den Personen- und Schienengüterverkehr, DB Blau für das Geschäftsfeld Landverkehr, Luft- und Seefracht und Kontraktlogistik und
DB Grau für die Kommunikation des Konzerns und des Geschäftsfelds Infrastruktur und Dienstleistungen.

Piktogramm zur Funktionskennzeichnung

Das Piktogramm in Seiten- oder Frontalansicht stellt die Funktion der App passend dar und wird ohne Verläufe oder andere Effekte visualisiert.

Der App-Name als zusätzliche Funktionskennzeichnung

Das Application Icon erscheint auf dem Geräte-Homescreen immer in Verbindung mit dem Namen der App. Hier besteht zusätzlich die Möglichkeit der Differenzierung und Funktionskennzeichnung. Bei der Wahl des Namens ist darauf zu achten, dass nur eine beschränkte Zeichenlänge angezeigt werden kann.
Farbkennung für App Icons
 
 

Technische Vorgaben

Die Vorlagen für Application Icons werden als 24-Bit-PNG
im RGB Farbmodus erstellt. Diese werden von den einzelnen Betriebssystemen unterschiedlich behandelt.

 

Achtung: Da iOS den Icons automatisch abgerundete Ecken hinzufügt, müssen die Icons mit 90° Ecken erstellt werden.

Android nimmt keine Veränderungen an den Vorlagen zur Darstellung des App Icons vor. Damit das Erscheinungsbild in Android und iOS identisch ist, werden Vorlagen mit runden Ecken auf transparentem Hintergrund benötigt.

 
  links: Original Icon, rechts: Darstellung in iOS    (automatische Abrundung...

links: Original Icon, rechts: Darstellung in iOS
(automatische Abrundung der Ecken des Icons).

  links: Original Icon, rechts: Darstellung in Android

links: Original Icon, rechts: Darstellung in Android

 
 

Beispiele realisierter Application Icons

 
Beispiele realisierter Application Icons
 
 

Zur optimalen Darstellung eines Application Icons werden für jedes Betriebssystem eigene Vorlagen benötigt.
Alle Vorlagen erhalten Sie vom Team Corporate Design.

Das Betriebssystem Android unterteilt die Abbildungsgrößen eines Icons nach Einsatzzweck und Pixeldichte der Bildschirme in Stufen. Für jede Abstufung muss eine optimierte Vorlagendatei in der App hinterlegt werden.

Das Betriebssystem iOS benötigt für jede Abbildungsgröße des App Icons eine eigene pixeloptimierte Vorlagendatei um die beste Darstellung auf allen Endgeräten zu gewährleisten. Die Abbildungsgröße des Icons ist abhängig von der iOS-Version und dem Endgerät.

Für die Druckproduktion werden zusätzlich hoch aufgelöste
Vorlagen in CMYK zur Verfügung gestellt.

 
 

Sonderfall S-Bahn-Apps

Apps für die S-Bahn werden mit dem S-Bahn-Zeichen im Logobereich gekennzeichnet. Die regionale Unterscheidung erfolgt über den App-Namen. Der Funktionsbereich erhält
die rote Farbkennung des Personenverkehrs.

Sonderfall S-Bahn-Apps
 
 

Versionen für den Druck

Für die Marketingkommunikation stehen Ihnen hier hochaufgelöste Versionen der Application Icons zum Download zur Verfügung:

Download: DB_APP_Icons_4c_305dpi
Dateiformat: ZIP
Dateigröße: 26.4 MB

 
 
 
Splash Screen
 

Der Splash Screen ist der zweite visuelle Eindruck, den ein Nutzer von einer App erhält. Es signalisiert den Programmstart und dient zur Überbrückung
der Ladezeit. Entsprechend wichtig ist hier eine gute Markenpräsenz.
In Ausnahmefällen und nur bei wenig Platz kann auf den Einsatz des
DB Winkels verzichtet werden.
Ist die Ladezeit beendet, wird der Splash Screen durch die erste Seite ersetzt. Optimal ist eine visuelle Ähnlichkeit beider Seiten.
 
 

 
 

Gestaltungsprinzip

 

Die Gestaltung folgt der grafisch reduzierten Form der Application Icons. Auf einen subtilen Einsatz von Stilmitteln und Effekten ist auch hier zu achten.

Der Splash Screen wird in folgende Bereiche aufgeteilt:

  • Logostreifen (kann durch Logobox ersetzt werden)

  • Bildfläche

  • Farbfläche mit Titel

  • Footer (optional)



Logostreifen/Logobox

Die Höhe des weißen Logostreifens (1 ½ DBx) steht in direkter Abhängigkeit zur Breite der DB-Bildmarke (DBx).
Das Markenlogo wird vertikal zentriert links im Logostreifen und bündig mit den Elementen des Inhaltsbereiches platziert.

Um Ihnen die Anwendung zu erleichtern, stehen fertige Vorlagendateien des Logostreifens zum Download bereit.
Wird anstelle des Logostreifens die Logobox eingesetzt, verwenden Sie bitte die Logobox Master-Vorlagendateien
 
Bildfläche
Das Bild sollte so gewählt werden, dass sich Logostreifen oder Logobox ausreichend vom Motiv abheben und in ihrer gesamten Form erkennbar bleiben.


Gestaltungsprinzip Splash Screen
 

Farbfläche mit Titel
Der Titelbereich erhält eine Farbkennung entsprechend des Absenders. Die Farbfläche kann mit einem von oben nach unten gehenden Helligkeitsverlauf gestaltet werden.
Der Helligkeitsunterschied beträgt dabei maximal 30%.
 
DB Winkel

Der DB Winkel hat eine Höhe von ½ DBx. Der seitliche
Versatz wird nach den Regeln des goldenen Schnitts im Verhältnis 38% (links) zu 62% (rechts) gewählt.
 
Footer
Der weiße Footer hat eine Höhe von 1 ½ DBx und kann Zusatzlogos enthalten.
 
Typografie
Als Schrift kommt ausschließlich die DB Type zum Einsatz:

  • Titelschrift: DB Head

  • Untertitel: DB Sans

  • Satzart: Mittelachse

Gestaltungsprinzip Splash Screen
 
 

Platzierung von Zusatzlogos am Beispiel S-Bahn
 

 
Platzierung von Zusatzlogos

Das S-Bahn-Logo (Zusatzlogo) steht rechts im Footer und
wird vertikal zentriert. Es hat den gleichen Abstand zum Rand wie das Markenlogo im Logostreifen.
Die Höhe des S-Bahn-Logos entspricht der Breite der Buchstaben „DB“ (A) in der DB-Bildmarke.
Auf Splash Screens für S-Bahn Apps wird am linken Rand im Anschnitt zusätzlich das S-Bahn-Signet platziert.

Die Vorlagen des Signets und der S-Bahn-Logos können Sie hier herunterladen: S-Bahn-Logos, Bus- und S-Bahn-Signet.

Für die Abbildungsgröße anderer Zusatzlogos können abweichende Regelungen gelten, z. B. für Angebots- und Regio-Markierungen.
 
 

Logostreifen zum Download

Die Logostreifen mit der Marke „DB“ und den Geschäftsfeldmarken stehen Ihnen zum Download als bearbeitbare Photoshop-Dateien zur Verfügung. 

Download: DB_APP_Logostreifen_PSD
Dateiformat: ZIP
Dateigröße: 382 kB

Logostreifen zum Download
 
 
Interface
 

Die Qualität des Inhalts und eine nutzerfreundliche Navigation sind im Anwendungsbereich vorrangig. Die Repräsentation der Marke erfolgt
hier vor allem durch eine entsprechende Farbgebung. Optional kann die Marke in einem Logostreifen über der Navigationsleiste stehen.
 
 

 
 

Logoplatzierung

Soll die Marke im Anwendungsbereich gezeigt werden, erscheint diese im Logostreifen über der Navigationsleiste. Der Logostreifen hat dieselbe Größe, wie die Navigationsleiste. Der Abstand zum linken Rand wird so gewählt, dass das Logo und die Elemente des Inhaltsbereiches bündig zueinander stehen.

Alternative: kein Logo im Anwendungsbereich

Alternativ kann auf die Darstellung eines Logos im Anwendungsbereich verzichtet werden.
Die Unterscheidung der Absender erfolgt durch die Farbgebung in der Navigationsleiste.

 
Interface – mit und ohne Logo
 
 

Farb-/Absenderkennung

Die Navigationsleiste erhält eine Farbkennung entsprechend des Absenders. Optional kann zusätzlich die Geschäftsfeldmarke im Logostreifen über der Navigationsleiste angebracht werden.

 
  Personenverkehr, Schienengüterverkehr   (kein Logo im Interface)

Personenverkehr, Schienengüterverkehr
(kein Logo im Interface)

  Landverkehr, Luft- und Seefracht, Kontraktlogistik (kein Logo im Interface)

Landverkehr, Luft- und Seefracht, Kontraktlogistik (kein Logo im Interface)

  Konzern, Infrastruktur und Dienstleistung    (kein Logo im Interface)

Konzern, Infrastruktur und Dienstleistung
(kein Logo im Interface)

 
 

Platzierung von S-Bahn-Logos im Logostreifen

 

Das S-Bahn-Logo wird im Logostreifen rechts platziert und
hat den gleichen Abstand zum Rand wie das Markenlogo.
Die Höhe des S-Bahn-Logos entspricht der Breite der Buchstaben „DB“ (A) in der DB-Bildmarke.

Platzierung von S-Bahn-Logos im Logostreifen
 
 
 
Technische Vorgaben verschiedener Betriebssysteme
 

Die Gestaltungsprinzipien sind auf allen Betriebssystemen umzusetzen.
Jedes Betriebssystem und Gerät bietet andere technische Voraussetzungen und Möglichkeiten. Im Folgenden werden einige Besonderheiten vorgestellt.

 
 
iOs/iPhone
 
  Der Startbildschirm des iPhone zeigt ausschließlich Application Icons.

Der Startbildschirm des iPhone zeigt ausschließlich Application Icons.

Hinweis: Aufgrund der permanenten Änderung seitens der Hersteller informieren Sie sich bitte direkt bei Apple über exakte Bildschirmgrößen, Pixeldichte der einzelnen Geräte und notwendigen Vorgaben zu Application Icons:
Human Interface Guidelines for iOS

Apple liefert für seine Geräte iPhone, iPod und iPad sein Betriebssystem iOS. Die Regeln für die Gestaltung von Apps sind klar definiert, dennoch gibt es Möglichkeiten zur Individualisierung.

Application Icons werden für folgende Darstellungen
in verschiedenen Größen benötigt:

  • im App Store (iTunes)

  • auf dem Homescreen als Startbutton für Apps

  • bei Suchergebnissen in Spotlight

  • in der Einstellungsebene

  • in durch die App erstellten Dokumenten


Splash Screen

  • beim Programmstart wird ein bildschirmfüllender Splash Screen angezeigt

 
Android
 
  Der Startbildschirm unter Android kann je nach Gerät verschieden gestaltet...

Der Startbildschirm unter Android kann je nach Gerät verschieden gestaltet sein. Neben den Application Icons kann dieser auch Widgets enthalten.

Hinweis: Aufgrund der permanenten Änderung seitens der Hersteller informieren Sie sich bitte direkt bei Android über exakte Bildschirmgrößen, Pixeldichte der einzelnen Geräte und notwendigen Vorgaben zu Application Icons:
Human Interface Guidelines für Android

Das Betriebssystem Android ist eine „Freie Software“
und wird von verschiedenen Geräteherstellern genutzt.
Android ermöglicht einen Gestaltungsspielraum. 
Startbildschirm und Menüführung variieren von Hersteller
zu Hersteller.

Application Icons werden für folgende Darstellungen
in verschiedenen Größen benötigt:

  • im Google Play Store

  • auf dem Homescreen als Startbutton für Apps

  • in der Einstellungsebene

  • in der Notification Bar


Es erfolgt keine automatische Abrundung der Ecken und kein automatisches Hinzufügen von Effekten. Ecken und Effekte können selbst erstellt werden, da Transparenz möglich ist.

Widgets
Zusätzlich zu Application Icons kann der Nutzer auch Widgets, kleine Fenster mit Funktionen aus einer App, auf den Startbildschirm installieren. Die Größen dieser Widgets können variieren.

 
Windows Phone
 
  Auf Windows Phone 7 werden Application Icons ohne    abgerundete Ecken...

Auf Windows Phone 7 werden Application Icons ohne
abgerundete Ecken dargestellt.

Hinweis: Aufgrund der permanenten Änderung seitens der Hersteller informieren Sie sich bitte direkt bei Android über exakte Bildschirmgrößen, Pixeldichte der einzelnen Geräte und notwendigen Vorgaben zu Application Icons:
Windows Dev Center

Das Betriebssystem von Microsoft wird von verschiedenen Geräteherstellern eingesetzt. Um sich von anderen Betriebssystemen abzuheben, setzt Windows Phone auf einen eigenen Designstil für das User Interface.

 
 
Anprechpartner
Name

Fragen zum Inhalt dieser Seite?

E-Mail

marke@deutschebahn.com

veröffentlicht:
24.02.2015