digital media, ux-ui design > html newsletters digital media, ux-ui design > html newsletters...

Download Digital Media, UX-UI Design > HTML Newsletters Digital Media, UX-UI Design > HTML Newsletters Deutsche

Post on 26-Apr-2020

1 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 1

    Contents

    At a glance:

    Look & Feel

    Constructing HTML newsletters

    Technical requirements

    CD guidelines:

    Brand and Markings

    Typography

    Cover letter

    Teasers

    Imprint

    Eye Catchers

    DB Icons and DB Interaction Elements

    An HTML newsletter is a circular sent via email 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 emails 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:

    Email to Team Corporate Design, GNM 12 [1]

    At a glance: Look & Feel

    mailto:design@deutschebahn.com

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 2

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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 email software, the content area is designed with a width of max. 600 pixels. If the email window is wider, the newsletter is centered in the window. The background (6) of the email window is designed in white or the gray tones of the DB color palette.

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 4

    Technical requirements

    Depiction of an HTML newsletter depends on the email 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 email 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.

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 5

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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.

    Fonts: DB Head Light and DB Head Black Line spacing: 115-125% Font size: Min. 20 px Font color: White or DB 03-13 Within the headline only one font size and color are used

    Additional typographical building blocks, e.g. edition and publication date, are set in DB Sans Bold with good readability.

    Font: DB Sand Bold Font size recommendation: Min. 14 px

    For more information:

    Web fonts

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 8

    Text on Transparencies

    The headline on the image motif can also be placed on DB transparencies for optimal readability.

    Additional information:

    Transparencies

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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.

    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.

    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).

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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.

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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.

  • Digital Media, UX-UI Design > HTML Newsletters

    Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017 Page 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