Questions on designing mobile applications? Please contact: the corporate design team [1]

Transcription

1 Contents At a glance: Corporate design guidelines: Application Icon Splash Screen Interface Technical standards of various operating systems ios/iphone Android DB has been successfully harnessing the growing popularity of smart phones and countless possibilities with its DB Navigator and Call a Bike apps. More than 100 billion free and for-pay applications were downloaded globally in The popularity of DB Navigator alone shows how enthusiastically customers have accepted mobile services. That s why the brand s uniform look is crucial in this widely-used medium. The CD guidelines for application icons apply to external as well internal applications. The interface design of external applications follows own design principles which are individually adapted to the respective field of activity. Windows Phone Questions on designing mobile applications? Please contact: the corporate design team [1] Contact for DB Schenker Apps for DB Schenker are centrally coordinated. Please contact: Steffen Pfeifer Service-/Solution Manager Customer & Business Solutions eservice Steffen Pfeifer [2] Here you'll find some general tips on designing user interfaces for mobile devices: Tips for designing user interfaces Tips and instructions for app design and usability, and useful templates can be found on the developer pages of ios, Android and Windows: Developer page for ios apps Developer page for Android apps Developer page for Windows mobile apps Page 1

2 At a glance: The following specifications for mobile app designs apply Group-wide. They are divided into specifications for designing app icons (1), splash screens (2) and application interfaces (3). The design principles have been adapted to the ios operating environment. However, they also apply to mobile applications on other platforms (e.g. Android). Design is influenced by the technical requirements of individual devices and the various operating systems. Wide variations, especially in in display quality (pixel density), require that designs be individually adapted. Color system Typography 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 Transport and Rail Freight Transport, DB Blue for the Land Transport, Air and Ocean Freight and Contract Logistics Division and DB Gray for the Communication of the DB Group, Infrastructure and Services Division. This positively identifies the sender within the Group and what content is being communicated. The colors used are the DB corporate colors. The DB Type corporate font is used in the design of mobile apps. Selected font styles are available as web fonts. HKS 14 Pantone 485 RGB 240/20/20 Web #F01414 Pantone 281 RGB 10/30/110 Web #0A1E6E Web fonts Pantone 430 RGB 135/140/150 Web #878C96 Page 2

3 Corporate design guidelines: Application Icon As carrier of the brand and start button for the application, the application icon has an important advertising function. On the device s home screen it 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 provided exclusively by the corporate design team. Please note that a budget has to be planned for providing of Icons. the corporate design team [3] Design principle The clear and simple design supports content and user guidance and adapts to the reduced graphic images in mobile operating systems. Graphic style elements (e.g. gradients) are used subtly. This way, high performance is ensured through minimal loading times. Please note: The application icon always has rounded corners. Application icons are divided into the logo clearspace and the function field. The logo clearspace contains only the pixel-optimized DB brand. The height of the logo clearspace is adapted to the individual icon sizes. The individual divisions are distinguished through color identification in the area of activity. An appropriate pictogram also visualizes the the function of the application. Please note: To make the icon easily visible on a white background, 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 inside the DB brand and pictogram. Page 3

4 Color identification Depends on the sender Application icons receive a color identification corresponding to the sender. DB Red stands for Passenger Transport and Rail Freight Transport, DB Blue for Land Transport, Air and Ocean Freight and Contract Logistics and DB Gray for the Communication of the DB Group, Infrastructure and Services Division. Pictograms identify functions The pictogram in side- or frontal view appropriately depicts the function of the app and is visualized without gradients or other effects. App names further describe functions The application icon always appears on the home screen in connection with the app name. This provides an additional opportunity to differentiate and describe the app s function. In selecting the name, note that space allows only a restricted number of characters. Technical specifications The templates for application icons are produced as 24-bit PNG in RGB color mode. These are treated differently by various operating systems. Please note: Since ios automatically gives icons rounded corners, icons must be designed with 90 corners. Android does not make any changes to templates for displaying app icons. To ensure identical appearance in ios and Android, on transparent backgrounds use templates with round corners. Left: original icon, right: display in ios (corners of icon automatically rounded). Left: original icon, right: display in Android Page 4

5 Application icons realized to date, examples Page 5

6 All operating systems require specific templates for the optimal display of an application icon. You can receive all templates from the corporate design team. The Android operating system subdivides the image sizes of an icon in stages, based on purpose and the pixel density of the screen. For each stage, an optimized template must be stored in the app. To guarantee best display on all devices, the ios operating system needs separate pixel optimized templates for every image size of the app icon. The image size of an icon depends on the ios version and the device. Versions for printing (CMYK) Download: DB_APP_Icons_4c_305dpi File format: ZIP File size: 26.3 MB High-resolution versions of our application icons are available here for downloading for your marketing communications needs: Splash Screen The splash screen is the second visual impression that users receive from an app. It signals that the program has started and serves to bridge loading time. Good brand presence is therefore important here. In exceptional cases and 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 6

7 Design principle Design follows the application icon s graphically reduced form. 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 area Color area with title (and optional DB corner element) Footer (optional) Logo stripe/logo box The height of the white logo stripe (1 ½ DBx) is directly dependent on the width of the DB brand DB (DBx). The brand logo is placed vertically centered on the left in the logo stripe and aligned with the elements of the content area. For a correctly-sized logo stripe and logo, please use the complete template files. If the logo box is used in place of the logo stripe, please use the logo box master template file for electronic media. Image area The image should be selected so that the logo stripe or logo box contrasts sufficiently to the motif and remains recognizable in its entire form. Color area with title The title area receives a color identification that corresponds to 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 element The height of the DB corner element is ½ DBx. Choose the side offset using the golden ratio with proportions of 38% (left) to 62% (right). Footer The white footer with a height of 1 ½ DBx can contain additional logos. Typography DB Type is the only font used. Title font: DB Head Subhead: DB Sans Alignment: Center aligned The status bar is placed on a black foundation that covers the content or suppresses it or lies transparent over the content. In any case the status bar should never cover the logo or become part of the logo stripe. The status bar must always be easily distinguishable visually from the logo stripe. If this is not the case the app s programming can permanently hide the status bar. Page 7

8 Placing additional logos Additional logos are placed in the footer at the right. The distance to the margin (A) equals that of the division logo in the logo stripe. You can find information on the placement of additional logos and product markings here: Markings Logo stripe downloads Logo stripes with the DB brand and the division logos are available for downloading as adaptable Photoshop files. Download: DB_APP_Logo_stripe_PSD File format: ZIP File size: 382 kb Page 8

9 Interface Content quality and user-friendly navigation are high priorities in applications. Here the correct use of color chiefly ensures the brand s representation. Optionally, the division logo can also appear in a logo stripe over the navigation bar. Logo placement Alternative: No logo in application field 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 and content elements are aligned to each other. Alternatively, displaying a logo in the application field can be omitted completely. In this case, the sender is identified through the coloring of the navigation bar. Page 9

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 placed in 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 10

11 Technical standards of various operating systems Design principles must be applied to all operating systems. Each operating system and device offers technical requirements and possibilities. The following presents some specifics. ios/iphone Please note: Given constant changes and updates by manufacturers, please consult Apple directly for exact screen sizes, pixel densities of individual devices and essential standards 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 apps are clearly defined, possibilities also exist for customizing. Application icons are required in different sizes for the following depictions: in the App Store (itunes) on the homescreen as a startbutton for apps for search results in Spotlight in preferences and settings in files produced by the app Splash screen Starting the program presents a full-screen splash screen The iphone s home screen displays only application icons. Page 11

12 Android Please note: Given constant changes and updates by manufacturers, please consult Android directly for exact screen sizes, pixel densities of individual devices and essential standards for application icons: Human Interface Guidelines for Android Android is an open-source operating system used by several manufacturers that gives them substantial scope for design. Even the home screen and menu navigation can vary between manufacturer. Application icons are required in different sizes for the following depictions: In the Google Play Store On the home screen as a start button for apps In preferences and settings In the notification bar Android neither automatically rounds off corners nor adds effects. You can produced corners and effects yourself, as transparency is possible. Widgets In addition to application icons, users can also install widgets small windows with functions from an app on their home start screen. Widget sizes can vary. 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. Page 12

13 Windows Phone Please note: Given constant changes and updates by manufacturers, please consult Windows Dev Center directly for exact screen sizes, pixel densities of individual devices and essential standards for application icons: Windows Device Center Microsoft s operating system is used by various device manufacturers. To distinguish itself from other operating systems, Windows Phone uses its own design style for user interfaces. Windows Phone displays application icons without round corners. Contact Questions about the contents of this page? [4] published: Verweisliste [1] the corporate design team: design@deutschebahn.com [2] Steffen Pfeifer: Steffen.Pfeifer@dbschenker.com [3] the corporate design team: design@deutschebahn.com [4] Questions about the contents of this page?: design@deutschebahn.com Page 13