Digital Media, UX-UI Design > Website Principles

Transcription

1 Contents At a glance: Page layout header To ensure the correct appearance of our brands in a broad spectrum of applications with a web front end, uniform treatment of design elements is an absolute necessity. Here you will find the basic principles and corporate design rules for designing DB websites. Full screen background principles DB Colors DB Type web fonts CD guidelines: Logo clearspace, color panes and DB corner element Logo box Footer Typography Headline and subheadline Body copy, introductory copy and subtitles Page 1

2 At a glance: Page layout header The website is designed for displays at least 1024 pixels wide. For higher resolutions the website remains centered in the middle of the browser window. The background (1) of the browser window can be incorporated into the design as a full screen background. In order to also be able to respond to smaller displays, the principles of responsive web design are applied. The header of a website contains the core visual elements for recognizing the respective division brand. It consists of horizontal panes that stretch across the entire width of the website and, with the exception of the logo clearspace, can vary in height. The brand logo is placed in the left of the logo clearspace (2) at the upper page edge or, alternatively, in the logo box (3). A color pane (4) carries the sender s identity color. The Group also has the alternative of communicating without any identity color. The header can include image panes (5) and the DB corner element (6). The form and height of the corner offset are predefined. The footer (7) completes the website and uses the sender s identity color. Page 2

3 The color pane in the sender s identity color can include the main navigation bar and is placed beneath the image pane. To give the title motif more space, the logo box can be used instead of the logo clearspace. The height of the color pane is variable and, in its smallest size, is placed as a horizontal stripe. Page 3

4 If the header does NOT include an image pane, the color pane is placed directly 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 the size of the website s content area. The browser background can also be used as a design pane. The layout of DB websites is based on the principle of horizontal emphasis, derived from the horizontal movement of trains or road vehicles. This design principle is reflected on websites through the pronounced horizontal distribution of panes. These run horizontally, spanning the page s entire width. The width of the content area (1) on DB websites is generally set at c. 1000px. If the browser window is extended, the website remains centered in the browser window (2) and the browser background becomes visible. Page 4

5 The browser background can be incorporated into the design to emphasize the page's content and structure: The browser background (3) can be designed in white or one of the DB gray tones, and additionally be separated from the page content by a drop shadow. Full-format image motifs (4) can be placed in the browser background to provide a backdrop for the page content. The motif must be an appropriate, full format background image. Avoid small-scale information and unfavorably cropped image details. Image motifs in the browser background should accentuate the displayed topic. Elements that stretch across the entire width of the page content can also be extended further, up to the edge of the browser window (5). The image pane can be extended to the left and right with color panes (6) in one of the DB Gray tones up to the edge of the browser window. Alternative: If the image motif and software allow, the image can also e scaled and dynamically adapted to the size of the browser window. Page 5

6 If the logo box is used, its position, regardless of the centered content area, is always aligned to the edge of the browser window. Please note: Internet use, in particular via mobile devices with very small and varying display sizes, requires responsive web design. Page 6

7 DB Colors Consistent use of our corporate colors underscores the typical DB look and sets the standard for recognition of our brands. As division colors, the primary colors DB Red, DB Blue and DB Gray help define the identity of our corporate divisions. DB Red represents passenger transport and rail freight transport, DB Blue signifies land transport as well as contract logistics and DB Gray the divisions infrastructure and services as well as the Group. In the header and footer panes 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 the mouseover status of links and buttons. They are not used as division colors to mark the sender. An extensive palette of DB Gray tones replaces the previous brandindependent neutral gray tones. They are used in particular to structure the page and for the design of DB interaction elements (3), icons and buttons. As standard copy color (4) within screen applications, the clearly legible and contrast optimized color tone DB is used instead of Black. An additional palette of DB secondary colors (5) can be used to color complex illustrations/big Data or information graphics or to differentiate topics. Page 7

8 DB Type web fonts Various font styles of our corporate font DB Type are available as web fonts for designing websites. In the interest of a uniform look for the DB Group, DB Type is used for all copy elements on a website. An alternative, sans serif font (e.g. Arial) is not intended. Through their respective characteristics, the styles of the DB Type web fonts are suitable for different parts and functions of the website. The following styles are recommended as standards: Use DB Sans Condensed for the main navigation (1). Highlighted elements appear in DB Sans Condensed Bold. Headlines (2), as in our print media, appear in DB Head Black and DB Head Light. Our standard font DB Sans is used for all other copy elements. Body copy (3) appears in DB Sans Regular. Use DB Sans Bold for purposes of emphasis and structuring, as well as subtitles and introductory copy (4). The styles used beyond that depend on the website s function, content and sender. You can find more information here: Web fonts Page 8

9 CD guidelines: Logo clearspace, color panes and DB corner element The size of the brand logo (1) is flexible. For desktop applications the recommended standard is a brand width (DBx) of 42px min and 54px max. The brand is vertically centered and placed well to the left in the logo clearspace (2), aligned with the elements of the content area. CD guidelines for brand logo, logo clearspace, color pane, DB corner element: The height of the color pane (3) is variable. In its smallest size as a horizontal stripe (4), the color pane has a minimal height of 1/3 DBx; when combined with a DB corner element (5) it is at least 1 DBx high. The corner offset runs from left to right upward and has a fixed height of ½ DBx. The use of the DB corner element is optional. Logo clearspace, height: 1½ DBx Brand logo: left in the logo clearspace, vertically centered No additional copy or product names placed above or below the brand logo. Markings are placed in the logo clearspace alongside the brand logo to the right Color pane min height without DB corner element: 1/3 DBx Color pane min height with DB corner element: 1 DBx Corner offset height: ½ DBx Page 9

10 Product markings For the placement of product markings and text additions in the logo clearspace, the following rule applies: Placement: right to the DB brand on a line with the lettering DB Minimum spacing to the DB brand: 1 DBx Cap 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 marking in standard size, it is scaled down and placed in two lines: Placement: in two lines right to the DB brand, bottom on a line with the lettering DB Cap height of long product markings and text additions, in two lines: 1/4 DBx Line spacing: 120% (rounded to whole pixel) Text additions For text additions other than product markings, the font DB Head Light in the font color DB 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 vertically centered Minimum spacing to the DB brand: 1 DBx A balanced size ratio to the DB brand is to be respected Page 10

11 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 with the page edge with a minimum distance of 3/4 DBx above and beneath. Scalable master template files for the logo box can be found in 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. Page 11

12 Typography Treatment of headlines is a characteristic trait of our look. A bold-fine contrast highlights certain words and stresses the core message. Dynamically offset copy lines reflect our basic concept of horizontal emphasis. On websites these headlines are used mainly at the tops of pages and to introduce chapters. Headlines without offset copy lines and bold-fine contrast as well as subheadlines, subtitles and introductory copy are used to further structure the page content. Font sizes can be freely selected. Good readability must be ensured. Mixed-case lettering applies for all copy elements. All copy elements are formatted uniformly within a website. Headline and subheadline Headlines and subheadlines are distinguished by their size and/or color as well as sufficient distance from other copy elements. Corporate design guidelines for treatment of headlines: Headlines (1) with dynamically offset copy lines and boldfine contrast among words have one or two copy lines. When using more than three lines, omit the dynamic offset and place the headline left-aligned. The subheadline (2) serves to complement the headline and is directly subordinated optically. It is substantially smaller than the headline and appears in the same color and in only one font style (DB Head Light or DB Head Black). Typeface: DB Head Light and DB Head Black; without highlights use DB Head Black Line spacing: % 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 Ocean Freight and Contract Logistics Division, black or white on images or colored backgrounds Only one font size and color per headline Headlines without highlights (3) are placed left-aligned in DB Head Black. Page 12

13 Body copy, introductory copy and subtitles Body copy (1) appears left-aligned and ragged. Depending on the page structure it can be single- or multicolumn. Ensure good readability and a reader-friendly line length of max 70 characters per line. Corporate Design guidelines for the body copy: Introductory copy (2) and subtitles (3) serve a short and striking transitions into the topic, and structure and identify copy sections. They are clearly distinguishable from the headline and body copy and appear in DB Sans Bold at least as large as the body copy and with the same line spacing. DB 03-13, DB Gray, DB Dark Gray, and black or white on images or colorful backgrounds are available as font colors. Typeface: DB Sans Regular Font size: at least 13 px Line spacing: % 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 Italic and can appear in DB Red, DB Gray or DB Use DB Sans or DB Sans Condensed for all other copy elements (4) such as the menu, submenu, captions and marginalia. Contact Questions about this page? [1] published: Verweisliste [1] Questions about this page?: design@deutschebahn.com Page 13