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

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

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]

mailto:[email protected]



At a glance:Look & feel



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.



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.


Web fonts

DB Icons

DB Interaction Elements



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



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.



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.


Transparencies

UI Kit, Interaction Elements

Code Snippets

Lightly staggered fade-in

Lightly staggered fade-out



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.



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]

mailto:[email protected]

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

Documents