Digital Media, UX-UI Design > Online Banners, Mobile Ads€¦ · Alternative banner formats...

Digital Media, UX-UI Design > Online Banners, Mobile Ads

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

Contents

At a glance

Design principles

Corporate Design guidelines

Logo box

Extreme horizontal formats

Extreme vertical formats (skyscraper)

Color- and Image Panes, DB Corner Element

Frames

Typography

Animation

Alternative banner formats

There’s little space available when designing online banners and mobileads—because of the media involved. To optimally use the possibilities eachformat offers, you can use the logo box, which can be placed flexibly.To save space on extreme horizontal and vertical formats, the sender brandcan also be placed in the logo clearspace. The size of the brand can beindividually determined. That opens new possibilities of conveying moreemotion and a strong brand presence in a small space.



At a glanceDesign principles

As the reference value DBx (1), thewidth of the DB brand sets thestandard for the size and placement ofthe other design elements.The combination of brand logo andidentity color designates the respectivesender. We use the Corporate Designdepartment’s corporate colors.

The logo is placed in the logo box (2)or, on extreme horizontal and verticalformats, in the logo clearspace (3).Whenever possible, use the DB cornerelement (4).Follow the principle of horizontalemphasis in arranging panes andselecting motifs.

As a typeface use DB SansCondensed Alternate from the fontsystem DB Type (5) instead of DBHead or DB Sans, which are used inprint media.

You can find information on all designelements used in electronic media here.



Corporate Design guidelines

Logo box

The logo box is an option for all banner formats. The logo must fit the formatand content and remain readable even in small sizes. The logo stands on awhite rectangular white pane, the logo box. The proportions of the logo boxare predefined and may not be changed or reconstructed individually.

Here you can find the compulsory templates for the logo box for downloading:DB brand, DB Schenker, DB Netze.

The logo box has a drop shadow (1). It is already included in the logo boxtemplates.

Logo box placement

You can place the logo box variably at the left or rightformat edge in the upper half of the online banner.

Minimum spacings defined for placing the logo box andother designed elements are proportional to the width ofthe DB brand (DBx):

Minimum spacing of other design elementsto logo box: ½ DBxMinimum spacing of logo box toupper format edge: ¾ DBxMinimum spacing of other design elements e.g. copyand supplementary logos to format edge: ½ DBxSize of the logo / logo box can be freely chosen.



Extreme horizontal formats

If the logo box cannot be used in extreme horizontal formatsfor space reasons, the logo is placed in the vertical logo clearspaceat the right format edge.

The width of the logo clearspace is derived from the width of the logo, itsspacing to the right format edge of ½ DBx, as well as the spacing ofat least ½ DBx to the left of the logo. If supplementary logos or markings areplaced in the logo clearspace, the clearspace is enlarged correspondingly.

The size of product markings is in direct relation to the width of the DB brand.The cap height of the marking equals 1/3 DBx. Markings are set in the DB SansAlternate Bold Italic font.

The logo stands in the upper rightof the vertical logo clearspaceSpacing to the right and topand minimum spacing to otherelements: ½ DBxThe logo size can be freely chosen.



Extreme vertical formats (skyscraper)

If the logo box cannot be used in extreme verticalformats for space reasons, the logo is placed in the logoclearspace at the upper format edge.

The logo stands with 1/2 DBx spacing to the right formatedge and vertically centered in the logo clearspace (seeWebsite Principles).

The logo stands on the right and vertically centeredin the logo clearspace.The height of the logo clearspace is proportional to thewidth of the DB brand and equals 1½ DBx.The logo size can be freely chosen.



Color- and Image Panes, DB Corner Element

Using images and color panes

Design and color choices are based on the requirements forprint media. Image- and color panes extend across the entireformat width and bleed.Photos or illustrations can be used as images. Werecommend using a single, striking motif (1).

The DB corner element (2) is used whenever possible.The size of the corner offset always equals ½ DBx.

In extreme horizontal formats (3), because of the specialproportions, use a vertical (not horizontal) distribution ofpanes. In this case, omit the DB corner element.

When using more than one image:

Select a main motif that uses most of the image pane(except multipictures).Stress the horizontal (when possible)No dividing lines or image frames: Images directlyabut one another. This includes multipictures.

Using images on a color pane

Images placed on a background have no frame. You can givethem a shadow to lift them off the background.

Colors

Use the defined corporate colors of the DB group.You can find the exact color values here:

Color



Using cutouts

You can lift parts of images off the format/image pane (partial cutout)or place complete cutouts within the image pane over other backgroundmotifs or a color background.

Parts of motifs facing the viewerare suitable partial cutouts.

In perspective, cutouts are always inthe foreground with a plausible sizerelationship to the imagebackground.

Partially cut out motifs can extendinto neighboring motifs. The borderbetween the motifs must remainclear

Frames

If the logo box or clearspace are not sufficientlydistinguished from the background on the web page,the banner receives a 1px-wide frame in DB Gray.

If the color pane is used full-format in DB Red or DB Blue,a frame can optionally be used in the color pane color.

On a white background banners receive a 1px-wide frame in DB grayor (with copy banners) optionally in the color pane color.



Typography

Because of often-minimal space availability, for online banners use theDB Sans Condensed Alternate font from the DB Type font system.

Typographical treatment of headlines

Boldfacing individuals words or word groups in headlinesis a characteristic trait of the DB Group look. In onlinebanners the horizontal offset of individual lines is optionaldue to limited space.

Headlines are set in DB Sans Condensed Alternatein the Regular and Black styles.Individual sentence parts (key words, core statementsor surprising word combinations) are emphasizedin DB Sans Condensed Alternate Black.As not all font styles of DB Type are available asweb fonts, DB Sans Condensed Regular/Bold can beused as an alternative.



Animation

Animated banners offer additional possibilities in design and dramaturgy.The kind of animation should be selected with the content and target groupin mind. Avoid unnecessary effects that exaggerate.

Horizontal emphasis

The principle of horizontal emphasis anchored in DB corporate design is alsoused in online banners, e.g. through elements that move horizontally.



Alternative banner formats

Some content cannot be efficiently conveyed using standard formats.For special accents on websites we therefore recommend more prominentkinds of banner advertising.

Pushdown Ad Wallpaper

Pushdown ads have a preset start sizeof 90 pixels height. Width can vary from729 pixels to the entire page width.Visiting the page activates the banner.

Once activated the pushdown ad pushes the completecontent up to 300 pixels downward. Pushdown adsclose automatically after a few seconds.

Wallpapers enable the complete website to be markedwith a CD- or campaign motif.The upper and right-hand edges of the content area areavailable for this purpose.

DHTML Banderole Ad Interstitial

Dynamic advertising messages can be depicted onwebsites with the help of DHTML.The entire page serves as a presentation pane. No fixedformats are defined.

Banderole ads ‘wrap’ themselves in the foregroundaround the content. The initial size is 25x250 pixelsand, when activated, extends across the entire pagewidth.

Interstitials appear when changing from one page tothe next. Interstitials are time-limited. If necessary theentire format can be used.



Universal Flash Layer Flash Layer

Universal flash Layers appear when web pages arecalled up. The 400x400px banner is superimposed onthe content and closes with the click of a button.

Flash Layers appear when a web page is called up. FlashLayers have no preset format.

Flash Layer example

Contact

Questions on the content of this page? [1]

published: 25.02.2014

Verweisliste

[1] Questions on the content of this page?: [email protected]

[email protected]

[email protected]

Digital Media, UX-UI Design > Online Banners, Mobile Ads€¦ · Alternative banner formats...

Documents

Transcript of Digital Media, UX-UI Design > Online Banners, Mobile Ads€¦ · Alternative banner formats...