Team Corporate Design, GNM 11 [1]

Transcription

1 Contents At a glance: Design principles: DB corporate colors DB Type, DB icons and DB interaction elements Transparencies Text building blocks 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. Animation principles Technical requirements Questions about this page s content? Team Corporate Design, GNM 11 [1] Page 1

2 At a glance: Look & feel Page 2

3 Page 3

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. Page 4

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 Page 5

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. 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 DB Transparencies Page 6

7 Text building blocks 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. Hover overlay 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. Page 7

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 Page 8

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. Page 9

10 Technical requirements The title safe area in AV productions ios (player bar at top and bottom in the 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. YouTube (player bar at bottom in title safe area) published: Verweisliste [1] Team Corporate Design, GNM 11: design@deutschebahn.com Page 10