an das Team Corporate Design [1]

Transkript

1 Inhalte Auf einen Blick: CD-Regeln: Application Icon Splash Screen Interface Technische Vorgaben verschiedener Betriebssysteme ios/iphone Android Windows Phone 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 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 an das Team Corporate Design [1] 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 an Steffen Pfeifer [2] 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 Seite 1

2 Auf einen Blick: 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 Bedienumfeld 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 Typografie 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. 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 Pantone 281 RGB 10/30/110 Web #0A1E6E Webfonts Pantone 430 RGB 135/140/150 Web #878C96 Seite 2

3 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. an das Team Corporate Design [3] 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. 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. Seite 3

4 Farbkennung abhängig vom Absender Die Application Icons erhalten eine Farbkennung entsprechend des Absenders. DB Rot steht für den Personenund 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. 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 der Ecken des Icons). links: Original Icon, rechts: Darstellung in Android Seite 4

5 Beispiele realisierter Application Icons Seite 5

6 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 iosversion 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. 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. Seite 6

7 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. 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 Seite 7

8 Platzierung von Zusatzlogos am Beispiel S-Bahn 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 Seite 8

9 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 Alternative: kein Logo im Anwendungsbereich 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. Alternativ kann auf die Darstellung eines Logos im Anwendungsbereich verzichtet werden. Die Unterscheidung der Absender erfolgt durch die Farbgebung in der Navigationsleiste. Seite 9

10 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) Landverkehr, Luft- und Seefracht, Kontraktlogistik (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. Seite 10

11 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 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 Der Startbildschirm des iphone zeigt ausschließlich Application Icons. Seite 11

12 Android 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. Der Startbildschirm unter Android kann je nach Gerät verschieden gestaltet sein. Neben den Application Icons kann dieser auch Widgets enthalten. Seite 12

13 Windows Phone 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. Auf Windows Phone 7 werden Application Icons ohne abgerundete Ecken dargestellt. Ansprechpartner Fragen zum Inhalt dieser Seite? [4] veröffentlicht: Verweisliste [1] an das Team Corporate Design: marke@deutschebahn.com [2] an Steffen Pfeifer: Steffen.Pfeifer@dbschenker.com [3] an das Team Corporate Design: marke@deutschebahn.com [4] Fragen zum Inhalt dieser Seite?: marke@deutschebahn.com Seite 13