digital media, ux-ui design > website principles...digital media, ux-ui design > website...

Digital Media, UX-UI Design > Website Principles

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

Contents

At a glance:

Page layout—header

Full screen background principles

DB Colors

DB Type web fonts

CD guidelines:

Logo clearspace, color panes and DB cornerelement

Logo box

Footer

Typography

Headline and subheadline

Body copy, introductory copy and subtitles

To ensure the correct appearance of our brands in a broad spectrumof applications with a web front end, uniform treatment of designelements is an absolute necessity. Here you will find the basic principlesand corporate design rules for designing DB websites.



At a glance:Page layout—header

The website is designed for displaysat least 1024 pixels wide.For higher resolutions the websiteremains centered in the middle ofthe browser window.

The background (1) of the browserwindow can be incorporated into thedesign as a full screen background.In order to also be able to respond tosmaller displays, the principles ofresponsive web design are applied.

The header of a website contains thecore visual elements for recognizing therespective division brand. It consists ofhorizontal panes that stretch across theentire width of the website and, withthe exception of the logo clearspace,can vary in height.The brand logo is placed in the leftof the logo clearspace (2) at theupper page edge or, alternatively, inthe logo box (3).

A color pane (4) carries the sender’sidentity color. The Group also has thealternative of communicating withoutany identity color. The header caninclude image panes (5) and the DBcorner element (6). The form andheight of the corner offset arepredefined. The footer (7) completesthe website and uses the sender’sidentity color.



The color pane in the sender’sidentity color can include themain navigation bar and is placedbeneath the image pane.

To give the title motif more space,the logo box can be used instead ofthe logo clearspace.

The height of the color pane isvariable and, in its smallest size,is placed as a horizontal stripe.



If the header does NOT include animage pane, the color pane is placeddirectly beneath the logo clearspace.

Full screen background principles

Modern displays enable resolutions far higher than 1024 x 768 pixels.This allows the browser window to be to be extended beyond thesize of the website’s content area. The browser background can alsobe used as a design pane.

The layout of DB websites is based on the principle ofhorizontal emphasis, derived from the horizontal movementof trains or road vehicles. This design principle is reflectedon websites through the pronounced horizontal distributionof panes. These run horizontally, spanning the page’s entirewidth.

The width of the content area (1) on DB websites isgenerally set at c. 1000px. If the browser window isextended, the website remains centered in the browserwindow (2) and the browser background becomes visible.



The browser background can beincorporated into the design toemphasize the page's content andstructure:

The browser background (3) canbe designed in white or one of the DBgray tones, and additionally beseparated from the page contentby a drop shadow.

Full-format image motifs (4) can beplaced in the browser background toprovide a backdrop for the pagecontent. The motif must be anappropriate, full format backgroundimage. Avoid small-scale informationand unfavorably cropped image details.Image motifs in the browserbackground should accentuate thedisplayed topic.

Elements that stretch across the entirewidth of the page content can also beextended further, up to the edge of thebrowser window (5).

The image pane can be extended to theleft and right with color panes (6) inone of the DB Gray tones up to theedge of the browser window.

Alternative:If the image motif and software allow,the image can also e scaled anddynamically adapted to the size of thebrowser window.



If the logo box is used, its position,regardless of the centered content area,is always aligned to the edge of thebrowser window.

Please note: Internet use, in particular via mobile devices with very smalland varying display sizes, requires responsive web design.



DB Colors

Consistent use of our corporate colors underscoresthe typical DB look and sets the standard for recognitionof our brands.

As division colors, the primary colors DB Red, DB Blue andDB Gray help define the identity of our corporate divisions.DB Red represents passenger transport and rail freighttransport, DB Blue signifies land transport as well ascontract logistics and DB Gray the divisions infrastructureand services as well as the Group. In the header and footerpanes they identify the sender of the page (1).

Brightened and darkened DB primary colors are available,e.g. to mark the active status within the navigation (2) or themouseover status of links and buttons. They are not used asdivision colors to mark the sender.

An extensive palette of DB Gray tonesreplaces the previous brand-independent neutral gray tones.They are used in particular to structurethe page and for the design of DBinteraction elements (3), icons andbuttons.

As standard copy color (4) withinscreen applications, the clearly legibleand contrast optimized color toneDB 03-13 is used instead of Black.

An additional palette of DB secondarycolors (5) can be used to color complexillustrations/Big Data or informationgraphics or to differentiate topics.



DB Type web fonts

Various font styles of our corporatefont DB Type are available as webfonts for designing websites.

In the interest of a uniform look for theDB Group, DB Type is used for all copyelements on a website. An alternative,sans serif font (e.g. Arial) is notintended.

Through their respectivecharacteristics, the styles of the DBType web fonts are suitable fordifferent parts and functions of thewebsite. The following styles arerecommended as standards:

Use DB Sans Condensed for the mainnavigation (1). Highlighted elementsappear in DB Sans Condensed Bold.Headlines (2), as in our print media,appear in DB Head Black andDB Head Light.

Our standard font DB Sans is used forall other copy elements.Body copy (3) appears in DB SansRegular. Use DB Sans Bold for purposesof emphasis and structuring, as well assubtitles and introductory copy (4).The styles used beyond that depend onthe website’s function, content andsender.

You can find more information here:

Web fonts



CD guidelines:

Logo clearspace, color panes and DB corner element

The size of the brand logo (1) is flexible. For desktopapplications the recommended standard is a brand width(DBx) of 42px min and 54px max. The brand is verticallycentered and placed well to the left in the logo clearspace (2), aligned with the elements of the content area.

The height of the color pane (3) is variable. In its smallestsize as a horizontal stripe (4), the color pane has a minimalheight of 1/3 DBx; when combined with a DB cornerelement (5) it is at least 1 DBx high.The corner offset runs from left to right upward and hasa fixed height of ½ DBx. The use of the DB corner element isoptional.

CD guidelines for brand logo, logo clearspace, color pane,DB corner element:

Logo clearspace, height: 1½ DBxBrand logo: left in the logo clearspace, vertically centeredNo additional copy or product names placed above orbelow the brand logo.Markings are placed in the logo clearspace alongsidethe brand logo to the rightColor pane min height withoutDB corner element: 1/3 DBxColor pane min height with DB corner element: 1 DBxCorner offset height: ½ DBx



Product markings

For the placement of product markings and text additions inthe logo clearspace, the following rule applies:

Placement: right to the DB brand on a line with thelettering ‘DB’Minimum spacing to the DB brand: 1 DBxCap height: 1/3 DBx (rounded to whole pixel)Product markings font: DB Sans Alternate Bold Italic,font color: DB Gray

If the available space is insufficient for placing the markingin standard size, it is scaled down and placed in two lines:

Placement: in two lines right to the DB brand, bottom ona line with the lettering ‘DB’Cap height of long product markings and text additions,in two lines: 1/4 DBxLine spacing: 120% (rounded to whole pixel)

Text additions

For text additions other than product markings, the fontDB Head Light in the font color DB 03-13 is used.

Additional logos

For the placement of additional logos in the logo clearspace,the following rule applies:

Placement: right to the DB brand, optically verticallycenteredMinimum spacing to the DB brand: 1 DBxA balanced size ratio to the DB brand is to be respected



Logo box

The logo box (1) can be used as an alternative to the logo clearspace.Size and placement of the logo box are flexible. It is placed aligned withthe page edge with a minimum distance of 3/4 DBx above and beneath.

Scalable master template files for the logo box can be foundin the download section under ‘Logo Box Templates’.

Footer

The footer (1) is located beneath the page content and completes the website.Just like the color pane in the header, it carries the identity color of the sender.The footer has a height of at least 1/3 DBx and can include copy elements.



Typography

Treatment of headlines is a characteristic trait of our look. A bold-finecontrast highlights certain words and stresses the core message. Dynamicallyoffset copy lines reflect our basic concept of horizontal emphasis. Onwebsites these headlines are used mainly at the tops of pages and tointroduce chapters. Headlines without offset copy lines and bold-fine contrastas well as subheadlines, subtitles and introductory copy are used to furtherstructure the page content.

Font sizes can be freely selected.Good readability must be ensured.Mixed-case lettering applies for all copyelements. All copy elements areformatted uniformly within a website.

Headline and subheadline

Headlines and subheadlines are distinguished bytheir size and/or color as well as sufficient distancefrom other copy elements.

Headlines (1) with dynamically offset copy lines and bold-fine contrast among words have one or two copy lines. Whenusing more than three lines, omit the dynamic offset andplace the headline left-aligned.

The subheadline (2) serves to complement the headline andis directly subordinated optically. It is substantially smallerthan the headline and appears in the same color and in onlyone font style (DB Head Light or DB Head Black).

Headlines without highlights (3) are placed left-alignedin DB Head Black.

Corporate design guidelines for treatment of headlines:

Typeface: DB Head Light and DB Head Black;without highlights use DB Head BlackLine spacing: 115–125%

Font size: at least 20 px

Font color: DB 03-13, DB Gray, DB Dark Gray,also DB Blue for the Land Transport, Air and OceanFreight and Contract Logistics Division, black or white onimages or colored backgrounds

Only one font size and color per headline



Body copy, introductory copy and subtitles

Body copy (1) appears left-aligned and ragged.Depending on the page structure it can be single- or multi-column. Ensure good readability and a reader-friendly linelength of max 70 characters per line.

Introductory copy (2) and subtitles (3) serve a short andstriking transitions into the topic, and structure and identifycopy sections. They are clearly distinguishable from theheadline and body copy and appear in DB Sans Bold at leastas large as the body copy and with the same line spacing.DB 03-13, DB Gray, DB Dark Gray, and black or white onimages or colorful backgrounds are available as font colors.

Use DB Sans or DB Sans Condensed for all othercopy elements (4) such as the menu, submenu, captionsand marginalia.

Corporate Design guidelines for the body copy:

Typeface: DB Sans RegularFont size: at least 13 px

Line spacing: 130–140%

Font color: DB 03-13, DB Gray, DB Dark Gray,black or white on images or colorful backgrounds

Highlights are in DB Sans Bold or DB Sans Regular Italicand can appear in DB Red, DB Gray or DB 01-04

Contact

Questions about this page? [1]

published: 29.09.2014

Verweisliste

[1] Questions about this page?: [email protected]

[email protected]

[email protected]

digital media, ux-ui design > website principles...digital media, ux-ui design > website...

Documents