digital media, ux-ui design > mobile apps, interface design media, ux-ui design > mobile apps,...

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

Post on 18-Feb-2019

216 views

Category:

Documents

3 download

Embed Size (px)

TRANSCRIPT

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. Thats whythe brands 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

mailto:design@deutschebahn.commailto:Steffen.Pfeifer@dbschenker.com

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

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

mailto:design@deutschebahn.com

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 identificationDepends 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 apps 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

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

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.

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

D