digital media, ux-ui design > ux-ui design > interaction ... therefore, animated and interactive...

Download Digital Media, UX-UI Design > UX-UI Design > Interaction ... Therefore, animated and interactive elements

Post on 18-Sep-2019

1 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Contents

    At a glance:

    Design principles:

    DB corporate colors

    DB Type, DB icons and DB interaction elements

    Transparencies

    Text building blocks

    Animation principles

    Technical requirements

    The character of movements is just as much an expression of the DB look and feel as is the way we interact with customers. Therefore, animated and interactive elements are an important part of conveying our digital content. They are found e.g. in web menus, AV elements in videos, app designs, GUIs and e-learnings.

    Consistent design with recognizable elements and harmonious patterns of behavior are the prerequisite for intuitive user guidance, easy orientation and high customer satisfaction.

    Questions about this page’s content?

    Email Team Corporate Design, GNM 11 [1]

    mailto:design@deutschebahn.com

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    At a glance: Look & feel

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    DB is customer-oriented, fair, credible and trustworthy. Our look and feel is consistent and understandable. In accordance with this attitude and the DB design strategy, animations and interaction principles at DB are marked by the following attributes:

    intuitive, self-explanatory and uncomplicated simple, clear and reduced dynamic without seeming hurried contemporary and modern, progressive and innovative oriented to natural ways of seeing

    Design that lives up to our brand is also ensured through the consistent use of the DB basic elements.

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Design principles:

    DB corporate colors

    Use the DB color palette for targeted on-screen color accents to clarify user actions or assist orientation. It includes various color gradations to differentiate object conditions (e.g. active and inactive status within a navigation or a button). The color tones of the DB secondary colors should be used in a targeted manner without dominating the look and feel.

    Additional information:

    Color

    DB Type, DB icons and DB interaction elements

    For optimal recognizability on-screen, always use the web fonts of DB Type, corporate-design-compliant DB icons and DB interaction elements. Text building blocks must always be depicted sufficiently large to guarantee optimal readability.

    The foundations for successful implementation are a clear graphic construction, adequate contrasts, easily ascertained content and a striking, reduced overall impression. For improved user-friendliness, menu depths should always be kept to a minimum.

    Additional information:

    Web fonts

    DB Icons

    DB Interaction Elements

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Transparencies

    Use of transparencies can closely integrate a page’s image and text levels. Transparencies can be used e.g. for function elements, drop-down menus or hover overlays.

    DB Transparencies

    Brand-specific DB transparencies with a light gradient are suitable for applications that are animated, striking and that help define our image, e.g. for short text building blocks on key visuals from websites or in AV applications.

    For more information and color specifications:

    Transparencies

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Text building blocks

    Hover overlay

    Hover overlays and pop-up windows Hover overlays and pop-up windows offer the possibility of making additional textual information available when needed, e.g. when the mouse arrow hovers over the corresponding image segment. Text content can thereby be given a striking and interesting appearance. Also, these building blocks help place the information within an ordered hierarchy.

    Text building blocks can be used animated in interactive applications. The standard typographical alignment is to the left.

    It is important not to visually overload the fade-ins and fade-outs of these elements. Simple animations are desired. Capricious, exaggerated effects should be avoided.

    Scrolling copy in pop-up windows is possible—but on-screen copy should, depending on the kind of media, be kept as brief as possible.

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Animation principles

    Preferred: horizontal animation On the basis of horizontal emphasis, animations in AV elements in videos should move from left to right. This quickly expresses the idea of movement visually.

    If DB transparencies are used, a lightly time-staggered fade-in of both levels underscores this effect.

    The animation speed is always fast and dynamic without appearing hurried.

    Additional information:

    Transparencies

    UI Kit, Interaction Elements

    Code Snippets

    Lightly staggered fade-in

    Lightly staggered fade-out

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Vertical animations The construction of the panes takes place through menus or hover overlays - mostly with multi-line copy - always vertical, in conformity with the text construction.

    Dynamic movements

    Fade-in Fade-out

    During fade-ins, the animation speed of elements slows exponentially, i.e. the element brakes softly. During fade-outs, on the other hand, the speed increases exponentially, i.e. the element accelerates. This deceleration and acceleration makes animations seem dynamic and their process especially natural. This positively supports the design idea of ‘movement’ that is characteristic of DB.

  • Digital Media, UX-UI Design > UX-UI Design > Interaction and Animation

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

    Technical requirements

    The ‘title safe’ area in AV productions

    iOS (player bar at top and bottom in the ‘title safe’ area)

    YouTube (player bar at bottom in ‘title safe’ area)

    Common video players on mobile devices and the Web use the so-called ‘title safe’ area for their control elements with commonplace broadcast standards. When placing AV elements, therefore, maintain a clearspace of at least 20% of the film format.

    The standard film format is 16:9 full HD, 25 fps.

    published: 17.03.2017

    Verweisliste

    [1] Email Team Corporate Design, GNM 11: design@deutschebahn.com

    mailto:design@deutschebahn.com