digital media, ux-ui design > ux-ui design > interaction ... · therefore, animated and...
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 andDB interaction elements
Transparencies
Text building blocks
Animation principles
Technical requirements
The character of movements is just as much an expression of the DB look andfeel as is the way we interact with customers. Therefore, animated andinteractive elements are an important part of conveying our digital content.They are found e.g. in web menus, AV elements in videos, app designs, GUIsand e-learnings.
Consistent design with recognizable elements and harmonious patterns ofbehavior are the prerequisite for intuitive user guidance, easy orientationand high customer satisfaction.
Questions about this page’s content?
Email Team Corporate Design, GNM 11 [1]
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 isconsistent and understandable. In accordance with this attitude and the DBdesign strategy, animations and interaction principles at DB are marked bythe following attributes:
intuitive, self-explanatory and uncomplicatedsimple, clear and reduceddynamic without seeming hurriedcontemporary and modern, progressive and innovativeoriented to natural ways of seeing
Design that lives up to our brand is also ensured throughthe 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 targetedon-screen color accents to clarify useractions or assist orientation. It includesvarious color gradations to differentiateobject conditions (e.g. active andinactive status within a navigation ora button).The color tones of the DB secondarycolors should be used in a targetedmanner without dominating the lookand 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 iconsand DB interaction elements. Textbuilding blocks must always bedepicted sufficiently large to guaranteeoptimal readability.
The foundations for successfulimplementation are a clear graphicconstruction, adequate contrasts, easilyascertained content and a striking,reduced overall impression. Forimproved user-friendliness, menudepths should always be kept to aminimum.
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 closelyintegrate a page’s image and text levels.Transparencies can be used e.g. forfunction elements, drop-down menus orhover overlays.
DB Transparencies
Brand-specific DB transparencies with alight gradient are suitable forapplications that are animated, strikingand that help define our image, e.g. forshort text building blocks on key visualsfrom websites or in AV applications.
For more information and colorspecifications:
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 windowsHover overlays and pop-up windows offer the possibility ofmaking additional textual information available whenneeded, e.g. when the mouse arrow hovers over thecorresponding image segment. Text content can thereby begiven a striking and interesting appearance. Also, thesebuilding blocks help place the information within an orderedhierarchy.
Text building blocks can be usedanimated in interactive applications.The standard typographical alignmentis to the left.
It is important not to visually overloadthe fade-ins and fade-outs of theseelements. Simple animations aredesired. Capricious, exaggerated effectsshould be avoided.
Scrolling copy in pop-up windows ispossible—but on-screen copy should,depending on the kind of media, bekept 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 animationOn the basis of horizontal emphasis, animations inAV 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-staggeredfade-in of both levels underscores this effect.
The animation speed is always fast and dynamic withoutappearing 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 animationsThe construction of the panes takes place through menus orhover 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 ofelements slows exponentially, i.e. theelement brakes softly. During fade-outs,on the other hand, the speed increasesexponentially, i.e. the elementaccelerates. This deceleration andacceleration makes animations seemdynamic and their process especiallynatural. This positively supports thedesign idea of ‘movement’ that ischaracteristic 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 mobiledevices and the Web use the so-called‘title safe’ area for their controlelements with commonplace broadcaststandards.When placing AV elements, therefore,maintain a clearspace of at least 20%of the film format.
The standard film format is16:9 full HD, 25 fps.
published: 17.03.2017
Verweisliste
[1] Email Team Corporate Design, GNM 11: [email protected]