digitale medien, ux-ui design > html-newsletter · html-newsletter müssen sowohl technisch als...

Digitale Medien, UX-UI Design > HTML-Newsletter

Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 04.09.2017 Seite 1

Inhalte

Auf einen Blick:

Look & Feel

Aufbau des HTML-Newsletters

Technische Anforderungen

CD-Regeln:

Marke und Markierungen

Typografie

Anschreiben

Teaser

Impressum

Störer

DB Icons und DB Interaktionselemente

Ein HTML-Newsletter ist ein per E-Mail versendetes Rundschreiben imHTML-Format, welches die Verwendung von Bildern, Grafiken und Farbenin digitalen Dokumenten ermöglicht. Die schnelle Erstellung, einfacheAuswertung und Personalisierbarkeit machen den HTML-Newsletterzu einem wesentlichen Marketinginstrument.

HTML-Newsletter müssen sowohl technisch als auch gestalterisch hoheAnforderungen erfüllen, da sie in Konkurrenz zu einer Flut an anderenNachrichten im E-Mail-Postfach eines Nutzers stehen.

Neu gestaltete Vorlagendateien für HTML-Newsletter müssen mit dem TeamCorporate Design abgestimmt werden.Wenn Sie Fragen zum Inhalt dieser Seite haben, so schreiben Sie bitte eine

E-Mail an das Team Corporate Design, GNM 12 [1]

Auf einen Blick:Look & Feel

mailto:[email protected]



Aufbau des HTML-Newsletters

Der Header eines HTML-Newslettersenthält die wichtigsten Elemente zurWiedererkennung des Absenders. DasMarkenlogo (1) wird oben imHeaderbereich eingesetzt. Es stehenhierbei zwei Optionen zur Verfügung.

Es kann ein Bild und eine Farbfläche(2) eingesetzt werden. Bei derfarblichen Gestaltung des Newslettermuss dabei auf die richtigeAbsenderkennung geachtet werden:DB Rot repräsentiert den Personen-und Schienengüterverkehr, DB Blauden Landverkehr, Luft- und Seefrachtsowie die Kontraktlogistik und DB Graudie Geschäftsfelder Infrastruktur undDienstleistungen sowie den Konzern.

Zentrales Element eines HTML-Newsletters ist die Handlungs-aufforderung („Call-to-Action“) (3) inForm einer plakativen Schaltfläche imoberen Teil des Newsletters. Hierfürwerden die DB Interaktionselementeund die DB Icons (4) verwendet.

Zur Unterscheidung von Themen kannder Inhaltsbereich in einzelne Flächenunterteilt werden.

Ein Footer (5) schließt den HTML-Newsletter ab. Wird dieser farbigeingesetzt, so trägt er die Kennfarbedes Absenders.

Damit HTML-Newsletter in allen E-Mail-Programmen gut dargestellt werdenkönnen, wird der Inhaltsbereich miteiner Breite von maximal 600 Pixelnangelegt. Ist das E-Mail-Fenster breiter,wird der Newsletter im Fenster zentriert. Der Hintergrund (6) des E-Mail-Fensters wird in Weiß oder in denGrautönen der DB Farbpalette angelegt.



Technische Anforderungen

Die Darstellung eines HTML-Newsletters ist abhängig vom verwendetenE-Mail-Programm bzw. Web-Mail-Anbieter. Unter Umständen werden einzelneBereiche und Elemente nicht oder nur unvollständig angezeigt. Inhalte könnendazu führen, dass der HTML-Newsletter vom Spam-Filter geblockt wird.Folgende technischen Anforderungen sind daher für eine sichere Zustellungsowie für die optimale Darstellung in allen E-Mail-Programmen zu beachten:

Die Breite des HTML-Newsletters beträgt maximal 600 px.Das Datenpaket ist nicht größer als 205 KB.Der Quelltext umfasst höchstens 999 Zeichen.Die Umsetzung des Newsletters erfolgt ausschließlich in HTML.Für Bilder sollten zusätzlich sog. „alt-Tags“ gesetzt werden,die – falls nötig – Bilder mit Platzhalter-Texten ersetzen.Als Alternative sollte eine reine Text-Version mitgeliefert werden.

Das Erstellen und Versenden von HTML-Newslettern übernehmen externeoder interne Dienstleister. Der Produktionsprozess sowie gesondertetechnische Rahmenparameter sind mit diesen abzustimmen.

CD-Regeln:

Marke und Markierungen

Option 1: Einsatz des Markenlogos im Logostreifen

Die DB Bildmarke hat eine Breite von 36 px.Die Höhe des Keyvisuals ist variabel.Die Farbfläche hat stets die Kennfarbe des AbsendersDer Logostreifen kann über oder unter dem Keyvisual platziert werdenund hat eine Standardhöhe von 1½ DBx = 54 px und eine Mindesthöhevon 1/3 DBx = 12 px.



Option 2: Einsatz der Logobox

Die DB Bildmarke in der Logobox hat eine Breite von 36 px.Der Abstand der Logobox zum Bildrand beträgt ¾ DBx = 27 px.

Einsatz von Markierungen

Optionale Markierungen werden rechts im Layout im DB Winkel platziert.Der Abstand nach rechts und links entspricht ½ DBx = 18px.Die Versalhöhe beträgt 1/3 DBx = 12 px.

Weitere Informationen

Logobox-Vorlagen

Markierungen



Typografie

Es kommt unsere Hausschrift „DB Type“ zum Einsatz. Für die Anwendung inelektronischen Medien wurden ausgewählte Schnitte als Webfonts entwickelt.Als Ersatzschrift für Fließtexte wird eine Systemschrift verwendet. Diesedient der Darstellung von Textinhalten bei Nutzern, die nicht über dieDB Type verfügen. Feste Bausteine, wie bspw. der Newsletter-Titel, dieHeadline, oder DB Interaktionselemente können als Bild eingesetzt werden.

Der Umgang mit der Headline (1) ist ein charakteristisches Merkmal unseresErscheinungsbildes. Der Fett-Fein-Kontrast hebt einzelne Worte hervor undbetont die Kernaussage. Die Headline wird idealerweise mit prägendemZeilenversatz gesetzt – alternativ linksbündig.

Eine optionale Subheadline (2) wird deutlich kleiner als die Headline, in dergleichen Farbe und in nur einem Schriftschnitt gesetzt.

Schriftart: DB Head Light undDB Head BlackZeilenabstand: 115–125%Schriftgröße: mindestens 20 pxSchriftfarbe: Weiß oder DB 03-13Innerhalb der Headline kommt nureine Schriftgröße und -farbe zumEinsatz.



Weitere typografische Bausteine wie z.B. Ausgabe und Erscheinungsdatum werdengut lesbar in der DB Sans Bold gesetzt.

Weitere Informationen:

Webfonts

Schriftart: DB Sans BoldSchriftgrößenempfehlung:mind. 14 px

Text auf Transparenzen

Die Headline auf dem Bildmotiv kannfür eine optimierte Lesbarkeit auch aufDB Transparenzen platziert werden.


Transparenzen



Anschreiben

Das Anschreiben eines HTML-Newsletters vermittelt einenpersönlichen Briefcharakter. Es wird auf einer hellen Fläche(in Weiß oder einem sehr hellen Grauton aus derDB Farbpalette) unter dem Bildbereich platziert.

Die Anrede (1) ist deutlich größer als der Fließtext (2) undfür den Leser schnell zu erfassen. Der Fließtext verläuft wiein einem Brief über die gesamte Breite der Fläche.

Eingebettete Schaltflächen basieren auf denDB Interaktionselementen (3). Eine handschriftlicheSignatur (4) schließt das Anschreiben ab.

Wichtig ist zudem eine Verlinkung zu den Social Media-Kanälen. Die Symbole hierfür sind aus den DB Icons (5) zu entnehmen.



Teaser

Im Inhaltsbereich können ein oder mehrere Teaser platziertwerden. Teaser werden mit weißer Grundfläche (1)gestaltet. Die Anordnung von Flächen, Text- undFunktionselementen innerhalb des Teasers ist variabel.Zudem ist der Einsatz unterschiedlicher Teaser-Modulbreitenmöglich.

Für die Gestaltung von „Call-to-Action“-Schaltflächen (2) steht – in Form eines „UI-Kits“ – eine umfangreiche Auswahlan DB Interaktionselementen im RGB-Modus undVektorformat zur Verfügung.

Teaser und Schaltflächen können mit Hilfe eines dezentenSchlagschattens optisch vom Untergrund abgehoben werden.

Bei Teasern, die Angebote von Partnerfirmen (3) abbilden,kann die Schaltfläche in einer anderen Farbe gestaltetwerden, um eine deutliche Abgrenzung zu den Angebotender DB zu ermöglichen.



Impressum

Das Impressum ist verpflichtend undkann entweder im Footer platziert oder verlinkt werden.

Störer

Ein Störer lenkt die Aufmerksamkeitauf wichtige Teilaspekte derWerbebotschaft und enthält z.B.spezielle Angebote oder ergänzendeInformationen. Form und Farbe könnenfrei gewählt werden. Der Einsatzdezenter Schlagschatten undLichtkanten ist möglich.

Richtlinien für den Einsatz einesStörers:

Schriftart:DB Sans Regular/Bold oder DB SansCondensed Regular/BoldDirekt an der Logobox werden keineStörer platziert



DB Icons und DB Interaktionselemente

Es werden die DB Icons verwendet.Diese können auf Flächen in Farben derDB Farbpalette platziert werden. DerEinsatz von dezenten Schlagschattenhinter den Farbflächen ist möglich.Für Social Media Icons werden zwecksschneller Wiedererkennbarkeit diejeweiligen Unternehmensfarbenverwendet. Sonderfall:

DB Standard Icons für Twitter und Facebookin der jeweiligen Unternehmensfarbe:Twitter Blau (85/172/238)Facebook Blau (59/89/152)

Grundsätzlich werden DB Interaktionselemente in HTML-Newslettern in den Kennfarben des Absenders gestaltet. DerEinsatz der DB Sekundärfarben ist möglich, um spezifische,thematische Akzente zu setzen.


DB Icons

DB Interaktionselemente

Farben

Newsletter

Ansprechpartner

Fragen zum Inhalt dieser Seite? [2]

veröffentlicht: 23.09.2015

Verweisliste

[1] E-Mail an das Team Corporate Design, GNM 12: [email protected]

[2] Fragen zum Inhalt dieser Seite?: [email protected]

[email protected]

mailto:[email protected]

[email protected]

digitale medien, ux-ui design > html-newsletter · html-newsletter müssen sowohl technisch als...

Documents