digital media, ux-ui design · digital media, ux-ui design deutsche bahn ag · corporate design ·...

Digital Media, UX-UI Design

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 22.02.2017

Contents

Core design guidelines:

Brand tonality

Brand logos

DB color palette

Corporate font ‘DB Type’

DB Icons, pictographs and buttons

Clear layout

Transparencies

DB function elements

Animation and interaction

Sound

Corporate design and UX-UI

The field of digital media spans a broad spectrum of communicationapplications. The design of these applications is based on the userexperience (UX) and user interface (UI).Depending on the kind of application and target group, the requirementsplaced on UX, UI and therefore design can vary greatly. DB design guidelinesmust be strictly followed in all applications to ensure brand identity acrossall digital media.

You can find the details of digital media design under Websites,Online-Banners, Mobile Ads, Display Design, Mobile Apps, Interface Design,eBrochures and Social Media.

Cumulative PDF Digital Media, UX-UI Design



Core design guidelines:

The DB brand stands for the values ‘strong, human anddynamic’ — i.e. DB is a big team and a vibrant company thatfocuses on the customer, connects people and createsinnovative and sustainable solutions.

Our focus on the customer and service is also reflected inhow we communicate. Always use direct address. Allstatements are understandable, concise and to thepoint—without empty phrases or useless embellishments.

The tonality of DB is direct and credible; the design is self-explanatory, straight and clear. In compliance with ourdesign strategy, we communicate with a reduced language offorms and colors—not distanced, not exaggerated, but withthe customer in mind. That makes the presence of DBunmistakable in digital media as well.

More information:

What is our current brand strategy?

Basic Elements

Nomenclature



Placement of the brands is predetermined.There are two options for the full range of demands and applications:The brand logo stands either in the logo box or in the logo clearspace.

More information:

Logos and Markings



Our design uses the DB corporate colors. The primary colors, white and variousgray tones—combined with the respective division colors—are a key characteristicof the image.

The DB color palette makes a wide array of color gradations available fordesigning graphical user interfaces (GUIs). This palette helps function elements,object conditions and interactions to be clearly identified and graphics to beclearly branded. The DB color palette is available for downloading.

More information:

Color



An essential element of our corporateidentity is our corporate font DB Type.

Special font styles have beendeveloped as web fonts for digitalmedia. Design should always ensureoptimum readability. Copy shouldtherefore always be of a sufficient pointsize, and all text elements should useeasily readable mixed case. The sansserif DB Sans font is especially suitablefor function elements.

The bold-fine contrast using DB Headfor striking headlines in ads isespecially characteristic of our brand.

Also, headlines use staggered lines -thereby also reflecting our emphasis onhorizontal design.

Additional information:

Typeface



Icons influence usability and mark the esthetic quality of all digital media. DBicons with a uniform sign language and system are used for web applications andmobile apps. Used together with buttons, pictographs are an essential element ofGUIs. They help communicate functions quickly, clearly and using minimal space.

The icon ‘language’ is simple, self.-explanatory and based on familiar signs. Templates for icons are available license-free for downloading.


DB Icons

In digital media, all functionalities mustbe easily recognizable and quicklyunderstood.

Our design always looks clean andlarge-surface. Our layout is clearlystructured and based on obviousinformation hierarchies, clear lines ofdesign and as much horizontalemphasis as possible. This is how wevisually express the idea of movement.

All design rules also apply in responsivelayouts.


Responsive Design



Transparencies are used when functionally necessary or sensible for content,e.g. to clarify different levels of content, closely associate image- and text levelson cramped surfaces or to improve readability of copy on background images.

For more information and color specifications:

Transparencies

Use of uniform UX-UI functionelements is essential for an across-the-board positive brand experience andsuccessful and intuitive user guidance.At DB these elements must be simple,easily recognized and self-explanatory,and are used uniformly across the mostdiverse applications and platforms.

More information:

DB Interaction Elements



In compliance with our design strategy,the look and feel of digital applicationsat DB is always high-performance andself-explanatory. Interactions areintuitive and uncomplicated.

Animations of copy on staggeredtransparencies are designed withemphasis on the horizontal, preferablyfrom left to right. Design of panes usingmulti-line menus is vertical according toreading flow. Animation speed isdynamic—without seeming rushed.

More information:

Interaction and Animation

If you have any questions on corporate sound in a digital context,please contact Team Corporate Design.

Email Team Corporate Design [1]


Sound

mailto:[email protected]



Conformity with DB basic elements anddesign requirements is essential for allprojects.

After all content has been decided, itmakes sense to incorporate DB TeamCorporate Design early to help steer thedesign process. Team CD must alsoapprove every design beforepublication.

If you have any questions pleasecontact Team Corporate Design.

Email Team Corporate Design [2]

For specialized technology questionsand internal implementation, pleasecontact the DB Systel Team.

Email Team DB Systel [3]

Contact

Questions about the content of this page? [4]

published: 12.08.2013

Verweisliste

[1] Email Team Corporate Design: [email protected]

[2] Email Team Corporate Design : [email protected]

[3] Email Team DB Systel: [email protected]

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



[email protected]




[email protected]

digital media, ux-ui design · digital media, ux-ui design deutsche bahn ag · corporate design ·...

Documents