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

Download Digital Media, UX-UI Design Digital Media, UX-UI Design Deutsche Bahn AG Corporate Design Digital Media,

Post on 08-Jul-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Digital Media, UX-UI Design

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

    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 communication applications. The design of these applications is based on the user experience (UX) and user interface (UI). Depending on the kind of application and target group, the requirements placed on UX, UI and therefore design can vary greatly. DB design guidelines must be strictly followed in all applications to ensure brand identity across all 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

  • Digital Media, UX-UI Design

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

    Core design guidelines:

    The DB brand stands for the values ‘strong, human and dynamic’ — i.e. DB is a big team and a vibrant company that focuses on the customer, connects people and creates innovative and sustainable solutions.

    Our focus on the customer and service is also reflected in how we communicate. Always use direct address. All statements are understandable, concise and to the point—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 our design strategy, we communicate with a reduced language of forms and colors—not distanced, not exaggerated, but with the customer in mind. That makes the presence of DB unmistakable in digital media as well.

    More information:

    What is our current brand strategy?

    Basic Elements

    Nomenclature

  • Digital Media, UX-UI Design

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

    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

  • Digital Media, UX-UI Design

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

    Our design uses the DB corporate colors. The primary colors, white and various gray tones—combined with the respective division colors—are a key characteristic of the image.

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

    More information:

    Color

  • Digital Media, UX-UI Design

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

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

    Special font styles have been developed as web fonts for digital media. Design should always ensure optimum readability. Copy should therefore always be of a sufficient point size, and all text elements should use easily readable mixed case. The sans serif DB Sans font is especially suitable for function elements.

    The bold-fine contrast using DB Head for striking headlines in ads is especially characteristic of our brand.

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

    Additional information:

    Typeface

  • Digital Media, UX-UI Design

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

    Icons influence usability and mark the esthetic quality of all digital media. DB icons with a uniform sign language and system are used for web applications and mobile apps. Used together with buttons, pictographs are an essential element of GUIs. 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.

    Additional information:

    DB Icons

    In digital media, all functionalities must be easily recognizable and quickly understood.

    Our design always looks clean and large-surface. Our layout is clearly structured and based on obvious information hierarchies, clear lines of design and as much horizontal emphasis as possible. This is how we visually express the idea of movement.

    All design rules also apply in responsive layouts.

    Additional information:

    Responsive Design

  • Digital Media, UX-UI Design

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

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

    For more information and color specifications:

    Transparencies

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

    More information:

    DB Interaction Elements

  • Digital Media, UX-UI Design

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

    In compliance with our design strategy, the look and feel of digital applications at DB is always high-performance and self-explanatory. Interactions are intuitive and uncomplicated.

    Animations of copy on staggered transparencies are designed with emphasis on the horizontal, preferably from left to right. Design of panes using multi-line menus is vertical according to reading flow. Animation speed is dynamic—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]

    Additional information:

    Sound

    mailto:design@deutschebahn.com

  • Digital Media, UX-UI Design

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

    Conformity with DB basic elements and design requirements is essential for all projects.

    After all content has been decided, it makes sense to incorporate DB Team Corporate Design early to help steer the design process. Team CD must also approve every design before publication.

    If you have any questions please contact Team Corporate Design.

    Email Team Corporate Design [2]

    For specialized technology questions and internal implementation, please contact 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: design@deutschebahn.com

    [2] Email Team Corporate Design : design@deutschebahn.com

    [3] Email Team DB Systel: db.mobile.ux@deutschebahn.com

    [4] Questions about the content of this page?: design@deutschebahn.com

    mailto:design@deutschebahn.com mailto:db.mobile.ux@deutschebahn.com design@deutschebahn.com mailto:design@deutschebahn.com mailto:design@deutschebahn.com mailto:db.mobile.ux@deutschebahn.com design@deutschebahn.com