Transcript
Page 1: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 1

Contents

At a glance:

Corporate design guidelines:

Application Icon

Splash Screen

Interface

Technical standards of various operatingsystems

iOs/iPhone

Android

Windows Phone

DB has been successfully harnessing the growing popularityof smart phones and countless possibilities with its DB Navigatorand Call a Bike apps.More than 100 billion free and for-pay applications were downloadedglobally in 2013. The popularity of DB Navigator alone shows howenthusiastically customers have accepted mobile services. That’s whythe brand’s uniform look is crucial in this widely-used medium.

The CD guidelines for application icons apply to external as well internalapplications. The interface design of external applications follows own designprinciples which are individually adapted to the respective field of activity.

Questions on designing mobileapplications? Please contact:

Email the corporate design team [1]

Contact for DB SchenkerApps for DB Schenkerare centrally coordinated.Please contact:

Steffen PfeiferService-/Solution ManagerCustomer & Business Solutions eService

Email Steffen Pfeifer [2]

Here you'll find some general tips on designinguser interfaces for mobile devices:Tips for designing user interfaces

Tips and instructions for app design and usability, and useful templatescan be found on the developer pages of iOS, Android and Windows:Developer page for iOS appsDeveloper page for Android appsDeveloper page for Windows mobile apps

Page 2: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 2

At a glance:

The following specifications for mobile app designsapply Group-wide. They are divided into specificationsfor designing app icons (1), splash screens (2) andapplication interfaces (3). The design principles havebeen adapted to the iOS operating environment.However, they also apply to mobile applications onother platforms (e.g. Android).

Design is influenced by the technical requirementsof individual devices and the various operating systems.Wide variations, especially in in display quality (pixeldensity), require that designs be individually adapted.

Color system

In mobile apps, people recognize the sender through the logo and the color area.Each division is assigned its own color. DB Red stands for the Passenger Transportand Rail Freight Transport, DB Blue for the Land Transport, Air and Ocean Freightand Contract Logistics Division and DB Gray for the Communication of the DBGroup, Infrastructure and Services Division.This positively identifies the sender within the Group and what content is beingcommunicated. The colors used are the DB corporate colors.

Typography

The DB Type corporate font is usedin the design of mobile apps.Selected font styles are availableas web fonts.

Web fonts

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

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

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

Page 3: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 3

Corporate design guidelines:

Application Icon

As carrier of the brand and start button for the application, the applicationicon has an important advertising function. On the device’s home screenit establishes the first visual contact between the user and application.A unified presentation system helps the brand to clearly position itself here.

Provision of new icons

Icons for new apps are providedexclusively by the corporate designteam. Please note that a budget has tobe planned for providing of Icons.

Email the corporate design team [3]

Design principle

The clear and simple design supports content anduser guidance and adapts to the reduced graphic imagesin mobile operating systems. Graphic style elements(e.g. gradients) are used subtly. This way, high performanceis ensured through minimal loading times.  

Please note: The application icon alwayshas rounded corners.

Application icons are divided into the logo clearspace andthe function field. The logo clearspace contains only thepixel-optimized DB brand. The height of the logo clearspaceis adapted to the individual icon sizes.

The individual divisions are distinguished through coloridentification in the area of activity. An appropriatepictogram also visualizes the the function of the application.

Please note: To make the icon easily visible on a whitebackground, a black-to-white gradient with an opacity of 10%is multiplied over the logo clearspace and area of activity.

Pure white is placed over the gradient insidethe DB brand and pictogram.

Page 4: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 4

Color identification—Depends on the sender

Application icons receive a color identificationcorresponding to the sender. DB Red stands for PassengerTransport and Rail Freight Transport, DB Blue for LandTransport, Air and Ocean Freight and Contract Logisticsand DB Gray for the Communication of the DB Group,Infrastructure and Services Division.

Pictograms identify functions

The pictogram in side- or frontal view appropriately depictsthe function of the app and is visualized without gradientsor other effects.

App names further describe functions

The application icon always appears on the home screen inconnection with the app name. This provides an additionalopportunity to differentiate and describe the app’s function.In selecting the name, note that space allows onlya restricted number of characters.

Technical specifications

The templates for application icons are producedas 24-bit PNG in RGB color mode. These are treateddifferently by various operating systems.

Please note: Since iOS automatically gives icons roundedcorners, icons must be designed with 90° corners.

Android does not make any changes to templates fordisplaying app icons. To ensure identical appearance in iOSand Android, on transparent backgrounds use templateswith round corners.

Left: original icon, right: display in iOS (corners of icon automatically rounded). Left: original icon, right: display in Android

Page 5: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 5

Application icons realized to date, examples

Page 6: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 6

All operating systems require specific templatesfor the optimal display of an application icon.You can receive all templates from the corporatedesign team.

The Android operating system subdivides the imagesizes of an icon in stages, based on purpose and the pixeldensity of the screen. For each stage, an optimizedtemplate must be stored in the app.

To guarantee best display on all devices, the iOS operatingsystem needs separate pixel optimized templates for everyimage size of the app icon. The image size of an icondepends on the iOS version and the device.

Versions for printing (CMYK)

High-resolution versions of our application iconsare available here for downloading for your marketingcommunications needs:

Download: DB_APP_Icons_4c_305dpiFile format: ZIPFile size: 26.3 MB

Splash Screen

The splash screen is the second visual impression that users receive from anapp. It signals that the program has started and serves to bridge loadingtime. Good brand presence is therefore important here. In exceptional casesand where space is tight, you can omit the DB corner element.Once loading is finished, the splash screen is replaced by the first page.Optimally, the two pages should visually resemble each other.

Page 7: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 7

Design principle

Design follows the application icon’s graphically reducedform. Here, too, use stylistic tools and effects only subtly.

The splash screen is divided into the following parts:

Logo stripe (can be replaced by logo box)Image areaColor area with title (and optional DB corner element)Footer (optional)

Logo stripe/Logo boxThe height of the white logo stripe (1 ½ DBx) is directlydependent on the width of the DB brand DB (DBx).The brand logo is placed vertically centered on theleft in the logo stripe and aligned with the elements ofthe content area.

For a correctly-sized logo stripe and logo, please use thecomplete template files. If the logo box is used in place ofthe logo stripe, please use the logo box master templatefile for electronic media.

Image areaThe image should be selected so that the logo stripe orlogo box contrasts sufficiently to the motif and remainsrecognizable in its entire form.

Color area with titleThe title area receives a color identification that correspondsto the sender. The color area may be given a light effect,which is realized in a color gradient from top to bottom.The difference in brightness is 30% maximum.

DB corner elementThe height of the DB corner element is ½ DBx.Choose the side offset using the golden ratio withproportions of 38% (left) to 62% (right).

FooterThe white footer with a height of 1 ½ DBxcan contain additional logos.

TypographyDB Type is the only font used.

Title font: DB HeadSubhead: DB SansAlignment: Center aligned

The status bar is placed on a black foundation that covers the contentor suppresses it or lies transparent over the content. In any case thestatus bar should never cover the logo or become part of the logo stripe.The status bar must always be easily distinguishable visually from thelogo stripe. If this is not the case the app’s programming canpermanently hide the status bar.

Page 8: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 8

Placing additional logos

Additional logos are placed in the footer at the right.The distance to the margin (A) equals that of the divisionlogo in the logo stripe.

You can find information on the placement ofadditional logos and product markings here:

Markings

Logo stripe downloads

Logo stripes with the DB brand andthe division logos are available fordownloading as adaptable Photoshopfiles.

Download: DB_APP_Logo_stripe_PSD File format: ZIPFile size: 382 kB

Page 9: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 9

Interface

Content quality and user-friendly navigation are high prioritiesin applications. Here the correct use of color chiefly ensuresthe brand’s representation. Optionally, the division logo can alsoappear in a logo stripe over the navigation bar.

Logo placement

If a division logo is displayed in the application field,it appears in the logo stripe over the navigation bar.The logo stripe is the same size as the navigation bar.Choose the distance to the left edge so that logo andcontent elements are aligned to each other.

Alternative: No logo in application field

Alternatively, displaying a logo in the application fieldcan be omitted completely. In this case, the senderis identified through the coloring of the navigation bar.

Page 10: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 10

Color/sender identification

The navigation bar receives a color identification that corresponds to the sender(see the mobile apps start page). Optionally the division logo can also be placedin the logo stripe above the navigation bar.

Passenger Transport, Rail Freight Transport(no logo in the interface)

Land Transport, Air and Ocean Freight,Contract Logisitcs (no logo in the interface)

Group, Infrastructure, Services(no logo in the interface)

Page 11: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 11

Technical standards of various operating systems

Design principles must be applied to all operating systems.Each operating system and device offers technical requirementsand possibilities. The following presents some specifics.

iOs/iPhone

The iPhone’s home screen displays only application icons.

Please note: Given constant changes and updates bymanufacturers, please consult Apple directly for exact screensizes, pixel densities of individual devices and essentialstandards for Application Icons:Human Interface Guidelines for iOS

Apple provides its own operating system iOS for its iPhone,iPod and iPad devices. Although rules for designing appsare clearly defined, possibilities also exist for customizing.

Application icons are required in different sizesfor the following depictions:

in the App Store (iTunes)on the homescreen as a startbutton for appsfor search results in Spotlightin preferences and settingsin files produced by the app

Splash screen

Starting the program presents a full-screen splash screen

Page 12: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 12

Android

The Android home screen can be designed differently for each device.In addition to the application icons level, it generally also includes a level for widgets.

Please note: Given constant changes and updates bymanufacturers, please consult Android directly for exactscreen sizes, pixel densities of individual devices andessential standards for application icons:Human Interface Guidelines for Android

Android is an open-source operating system used by severalmanufacturers that gives them substantial scope for design.Even the home screen and menu navigation can varybetween manufacturer.

Application icons are required in different sizesfor the following depictions:

In the Google Play StoreOn the home screen as a start button for appsIn preferences and settingsIn the notification bar

Android neither automatically rounds off cornersnor adds effects. You can produced corners and effectsyourself, as transparency is possible.

WidgetsIn addition to application icons, users can also installwidgets —small windows with functions from an app—on their home start screen. Widget sizes can vary.

Page 13: Digital Media, UX-UI Design > Mobile Apps, Interface Design fileDigital Media, UX-UI Design > Mobile Apps, Interface Design Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI

Digital Media, UX-UI Design > Mobile Apps, Interface Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 31.05.2016 Page 13

Windows Phone

Windows Phone displays application icons without round corners.

Please note: Given constant changes and updates bymanufacturers, please consult Windows Dev Center directlyfor exact screen sizes, pixel densities of individual devicesand essential standards for application icons:Windows Device Center

Microsoft’s operating system is used by various devicemanufacturers. To distinguish itself from other operatingsystems, Windows Phone uses its own design style foruser interfaces.

Contact

Questions about the contents of this page? [4]

published: 25.02.2014

Verweisliste

[1] Email the corporate design team: [email protected]

[2] Email Steffen Pfeifer: [email protected]

[3] Email the corporate design team: [email protected]

[4] Questions about the contents of this page?: [email protected]


Top Related