At a glance: Digital Media, UX-UI Design > HTML Newsletters

Size: px

Start display at page:

Download "At a glance: Digital Media, UX-UI Design > HTML Newsletters"

Felicia Atkins
5 years ago
Views:

1 Contents At a glance: Look & Feel Constructing HTML newsletters Technical requirements CD guidelines: Brand and Markings Typography Cover letter Teasers Imprint An HTML newsletter is a circular sent via in HTML format, which permits the use of images, graphics and colors in digital documents. Quick production, simple evaluation and personalization are what makes the HTML newsletter an important marketing instrument. HTML newsletters must meet high standards in both technology and design, as they compete with the daily influx of other s in the customer s inbox. Newly designed templates for HTML newsletters must be coordinated with the Corporate Design Team. If you have any questions regarding the content of this page, please mail us: to Team Corporate Design, GNM 12 [1] Eye Catchers DB Icons and DB Interaction Elements At a glance: Look & Feel Page 1

2 Page 2

3 Constructing HTML newsletters The header of an HTML newsletter includes the key elements for sender recognition. The brand logo (1) is placed high up, in the header space. Two branding options are available. An image and a color pane (2) can be used. When designing newsletters with color, ensure the correct sender identification: DB Red represents passenger and rail freight transport, DB Blue the transport, air- and sea cargo as well as contract logistics, and DB Gray the infrastructure and services divisions as well as the Group. A core element of an HTML newsletter is the call to action (3) in the form of a striking interface pane in the upper part of the newsletter. This is where DB interaction elements and DB icons (4) are used. To help distinguish between topics, the content area can be subdivided into individual panes. A footer (5) concludes the HTML newsletter. If used with color, it must be in the sender's identity color. So that HTML newsletters can be depicted well by all software, the content area is designed with a width of max. 600 pixels. If the window is wider, the newsletter is centered in the window. The background (6) of the window is designed in white or the gray tones of the DB color palette. Page 3

4 Technical requirements Depiction of an HTML newsletter depends on the software/webmail provider one uses. Under some circumstances, individual areas or elements could be shown incompletely or not at all. Content can also cause an HTML newsletter to be blocked by spam filters. The following technical requirements must therefore be observed for both secure delivery and optimal depiction in all software: The width of the HTML newsletter does not exceed 600 px. The data packet is no larger than 205 kb. The source code is no longer than 999 characters. The newsletter is implemented in HTML only. Be sure to include an ALT tag with each image you use to provide a clear text alternative for the image, if needed. A pure text version of the entire newsletter should also be provided as an alternative. Production and mailing of HTML newsletters is carried out by external service providers. The production process and special technical framework parameters must be coordinated with these providers. CD guidelines: Brand and Markings Option 1: Using the brand logo in the logo clearspace The DB brand has a width of 36 px. The height of the key visual is variable. The color pane is always in the sender s identity color. The logo clearspace can be placed above or beneath the key visual and has a standard height of 1 ½ DBx = 54 px and a minimum height of 1/3 DBx = 12 px. Page 4

5 Page 5

6 Option 2: Using the Logo Box The DB brand in the logo box has a width of 36 px. Spacing of the logo box to the image edge is ¾ DBx = 27 px. Using markings Optional markings are placed in the layout on the right in the DB corner element. Spacing to the left and right is ½ DBx = 18 px. Cap height is 1/3 DBx = 12 px. More information Logo Box Templates Markings Page 6

Typography Use our corporate font DB Type. Selected styles have been developed as web fonts for use in electronic media. A system font is used as a replacement font for body copy.

7 Typography Use our corporate font DB Type. Selected styles have been developed as web fonts for use in electronic media. A system font is used as a replacement font for body copy. This serves to depict copy content for users who do not have DB Type. Standard building blocks such as the newsletter title, the headline and DB interaction elements can be used as images. Treatment of the headline (1) is a characteristic feature of our look and feel. The bold-fine contrast highlights individual words and emphasizes the core message. Ideally, the headline is set with our characteristic offset lines. Otherwise it is left-aligned. An optional subheadline (2) is clearly smaller than the headline and set in the same color and in only one font style. Additional typographical building blocks, e.g. edition and publication date, are set in DB Sans Bold with good readability. Fonts: DB Head Light and DB Head Black Line spacing: % Font size: Min. 20 px Font color: White or DB Within the headline only one font size and color are used Font: DB Sand Bold Font size recommendation: Min. 14 px For more information: Web fonts Page 7

8 Text on Transparencies The headline on the image motif can also be placed on DB transparencies for optimal readability. Additional information: Transparencies Page 8

9 Cover letter The cover letter of an HTML newsletter conveys the impression of a personal note. It is placed on a light pane (in white or a very light gray tone from the DB color palette) beneath the image area. Embedded interfaces are based on DB interaction elements (3). A handwritten signature (4) concludes the cover letter. Another important element are links to social media channels. These symbols are to be taken from the DB icons (5). The salutation (1) is clearly larger than the body copy (2) and can be quickly recognized by the reader. The body copy extends, as in a letter, over the complete width of the pane. Page 9

For the design of call to action -buttons (2), is an extensive selection of DB interaction elements in RGB mode and vector format as UI-Kit available.

10 Teasers One or more teasers can be placed in the content area. Teasers are designed with a white base pane (1). The arrangement of panes, text- and function elements within teasers is variable. For the design of call to action -buttons (2), is an extensive selection of DB interaction elements in RGB mode and vector format as UI-Kit available. Teasers and interaction elements can be optically lifted off the background by using a subtle drop shadow. Among teasers that depict the products of partner companies (3), the color pane can be designed in a different color, so as to clearly distinguish from the products of DB. Page 10

and contains e.g. special offers or supplementary information. Form and color can be selected freely.

11 Imprint The imprint is compulsory. It can either be placed in the footer or linked. Eye Catchers An eye-catcher directs attention to important parts of the ad message and contains e.g. special offers or supplementary information. Form and color can be selected freely. Use of subtle drop shadows and light edges is possible. Guidelines for using an eye-catcher: Font: DB Sans Regular/Bold or DB Sans Condensed Regular/Bold Eye-catchers are not placed directly on the logo box. Page 11

DB Icons and DB Interaction Elements We use DB icons. They can be placed on panes in he colors of the DB color palette.

For the sake of quick recognizability, the respective corporate colors are used for social media icons.

12 DB Icons and DB Interaction Elements We use DB icons. They can be placed on panes in he colors of the DB color palette. Use of subtle drop shadows behind the color panes is possible. For the sake of quick recognizability, the respective corporate colors are used for social media icons. Special case: DB standard icons for Twitter and Facebook in the respective corporate colors: Twitter Blue (85/172/238) Facebook Blue (59/89/152) As a rule, DB interaction elements in HTML newsletters are designed in the sender s identity color. Use of DB secondary colors is possible to make specific, thematic accents. For more information: DB Icons DB Interaction Elements Color Newsletters Contact Questions about the contents of this page? [2] published: Verweisliste [1] to Team Corporate Design, GNM 12: design@deutschebahn.com [2] Questions about the contents of this page?: design@deutschebahn.com Page 12

Digital Media, UX-UI Design > Website Principles

Digital Media, UX-UI Design > Website Principles 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.