Auf einen Blick: Digitale Medien, UX-UI Design > HTML-Newsletter. Inhalte

Größe: px

Ab Seite anzeigen:

Download "Auf einen Blick: Digitale Medien, UX-UI Design > HTML-Newsletter. Inhalte"

Lars Böhmer
vor 5 Jahren
Abrufe

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 versendetes Rundschreiben im HTML-Format, welches die Verwendung von Bildern, Grafiken und Farben in digitalen Dokumenten ermöglicht. Die schnelle Erstellung, einfache Auswertung und Personalisierbarkeit machen den HTML-Newsletter zu einem wesentlichen Marketinginstrument. HTML-Newsletter müssen sowohl technisch als auch gestalterisch hohe Anforderungen erfüllen, da sie in Konkurrenz zu einer Flut an anderen Nachrichten im -Postfach eines Nutzers stehen. Neu gestaltete Vorlagendateien für HTML-Newsletter müssen mit dem Team Corporate Design abgestimmt werden. Wenn Sie Fragen zum Inhalt dieser Seite haben, so schreiben Sie bitte eine an das Team Corporate Design, GNM 12 [1] Auf einen Blick: Look & Feel Seite 1

2 Seite 2

3 Aufbau des HTML-Newsletters Der Header eines HTML-Newsletters enthält die wichtigsten Elemente zur Wiedererkennung des Absenders. Das Markenlogo (1) wird oben im Headerbereich eingesetzt. Es stehen hierbei zwei Optionen zur Verfügung. Es kann ein Bild und eine Farbfläche (2) eingesetzt werden. Bei der farblichen Gestaltung des Newsletter muss dabei auf die richtige Absenderkennung geachtet werden: DB Rot repräsentiert den Personenund Schienengüterverkehr, DB Blau den Landverkehr, Luft- und Seefracht sowie die Kontraktlogistik und DB Grau die Geschäftsfelder Infrastruktur und Dienstleistungen sowie den Konzern. Zentrales Element eines HTMLNewsletters ist die Handlungsaufforderung ( Call-to-Action ) (3) in Form einer plakativen Schaltfläche im oberen Teil des Newsletters. Hierfür werden die DB Interaktionselemente und die DB Icons (4) verwendet. Zur Unterscheidung von Themen kann der Inhaltsbereich in einzelne Flächen unterteilt werden. Ein Footer (5) schließt den HTMLNewsletter ab. Wird dieser farbig eingesetzt, so trägt er die Kennfarbe des Absenders. Damit HTML-Newsletter in allen Programmen gut dargestellt werden können, wird der Inhaltsbereich mit einer Breite von maximal 600 Pixeln angelegt. Ist das -Fenster breiter, wird der Newsletter im Fenster zentriert. Der Hintergrund (6) des -Fensters wird in Weiß oder in den Grautönen der DB Farbpalette angelegt. Seite 3

4 Technische Anforderungen Die Darstellung eines HTML-Newsletters ist abhängig vom verwendeten -Programm bzw. Web-Mail-Anbieter. Unter Umständen werden einzelne Bereiche und Elemente nicht oder nur unvollständig angezeigt. Inhalte können dazu führen, dass der HTML-Newsletter vom Spam-Filter geblockt wird. Folgende technischen Anforderungen sind daher für eine sichere Zustellung sowie für die optimale Darstellung in allen -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 externe oder interne Dienstleister. Der Produktionsprozess sowie gesonderte technische 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 Absenders Der Logostreifen kann über oder unter dem Keyvisual platziert werden und hat eine Standardhöhe von 1½ DBx = 54 px und eine Mindesthöhe von 1/3 DBx = 12 px. Seite 4

5 Seite 5

6 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 Seite 6

Typografie Es kommt unsere Hausschrift DB Type zum Einsatz. Für die Anwendung in elektronischen Medien wurden ausgewählte Schnitte als Webfonts entwickelt.

7 Typografie Es kommt unsere Hausschrift DB Type zum Einsatz. Für die Anwendung in elektronischen Medien wurden ausgewählte Schnitte als Webfonts entwickelt. Als Ersatzschrift für Fließtexte wird eine Systemschrift verwendet. Diese dient der Darstellung von Textinhalten bei Nutzern, die nicht über die DB Type verfügen. Feste Bausteine, wie bspw. der Newsletter-Titel, die Headline, oder DB Interaktionselemente können als Bild eingesetzt werden. Der Umgang mit der Headline (1) ist ein charakteristisches Merkmal unseres Erscheinungsbildes. Der Fett-Fein-Kontrast hebt einzelne Worte hervor und betont die Kernaussage. Die Headline wird idealerweise mit prägendem Zeilenversatz gesetzt alternativ linksbündig. Eine optionale Subheadline (2) wird deutlich kleiner als die Headline, in der gleichen Farbe und in nur einem Schriftschnitt gesetzt. Schriftart: DB Head Light und DB Head Black Zeilenabstand: % Schriftgröße: mindestens 20 px Schriftfarbe: Weiß oder DB Innerhalb der Headline kommt nur eine Schriftgröße und -farbe zum Einsatz. Seite 7

Weitere typografische Bausteine wie z.b. Ausgabe und Erscheinungsdatum werden gut lesbar in der DB Sans Bold gesetzt. Schriftart: DB Sans Bold Schriftgrößenempfehlung: mind.

8 Weitere typografische Bausteine wie z.b. Ausgabe und Erscheinungsdatum werden gut lesbar in der DB Sans Bold gesetzt. Schriftart: DB Sans Bold Schriftgrößenempfehlung: mind. 14 px Weitere Informationen: Webfonts Text auf Transparenzen Die Headline auf dem Bildmotiv kann für eine optimierte Lesbarkeit auch auf DB Transparenzen platziert werden. Weitere Informationen: Transparenzen Seite 8

9 Anschreiben Das Anschreiben eines HTML-Newsletters vermittelt einen persönlichen Briefcharakter. Es wird auf einer hellen Fläche (in Weiß oder einem sehr hellen Grauton aus der DB Farbpalette) unter dem Bildbereich platziert. Die Anrede (1) ist deutlich größer als der Fließtext (2) und für den Leser schnell zu erfassen. Der Fließtext verläuft wie in einem Brief über die gesamte Breite der Fläche. Eingebettete Schaltflächen basieren auf den DB Interaktionselementen (3). Eine handschriftliche Signatur (4) schließt das Anschreiben ab. Wichtig ist zudem eine Verlinkung zu den Social MediaKanälen. Die Symbole hierfür sind aus den DB Icons (5) zu entnehmen. Seite 9

Für die Gestaltung von Call-to-Action -Schaltflächen (2) steht in Form eines UI-Kits eine umfangreiche Auswahl an DB Interaktionselementen im RGB-Modus und Vektorformat zur Verfügung.

10 Teaser Im Inhaltsbereich können ein oder mehrere Teaser platziert werden. Teaser werden mit weißer Grundfläche (1) gestaltet. Die Anordnung von Flächen, Text- und Funktionselementen innerhalb des Teasers ist variabel. Zudem ist der Einsatz unterschiedlicher Teaser-Modulbreiten möglich. Für die Gestaltung von Call-to-Action -Schaltflächen (2) steht in Form eines UI-Kits eine umfangreiche Auswahl an DB Interaktionselementen im RGB-Modus und Vektorformat zur Verfügung. Teaser und Schaltflächen können mit Hilfe eines dezenten Schlagschattens optisch vom Untergrund abgehoben werden. Bei Teasern, die Angebote von Partnerfirmen (3) abbilden, kann die Schaltfläche in einer anderen Farbe gestaltet werden, um eine deutliche Abgrenzung zu den Angeboten der DB zu ermöglichen. Seite 10

Form und Farbe können frei gewählt werden. Der Einsatz dezenter Schlagschatten und Lichtkanten ist möglich.

11 Impressum Das Impressum ist verpflichtend und kann entweder im Footer platziert oder verlinkt werden. Störer Ein Störer lenkt die Aufmerksamkeit auf wichtige Teilaspekte der Werbebotschaft und enthält z.b. spezielle Angebote oder ergänzende Informationen. Form und Farbe können frei gewählt werden. Der Einsatz dezenter Schlagschatten und Lichtkanten ist möglich. Richtlinien für den Einsatz eines Störers: Schriftart: DB Sans Regular/Bold oder DB Sans Condensed Regular/Bold Direkt an der Logobox werden keine Störer platziert Seite 11

DB Icons und DB Interaktionselemente Es werden die DB Icons verwendet. Diese können auf Flächen in Farben der DB Farbpalette platziert werden.

Für Social Media Icons werden zwecks schneller Wiedererkennbarkeit die jeweiligen Unternehmensfarben verwendet.

werden DB Interaktionselemente in HTMLNewslettern in den Kennfarben des Absenders gestaltet.

12 DB Icons und DB Interaktionselemente Es werden die DB Icons verwendet. Diese können auf Flächen in Farben der DB Farbpalette platziert werden. Der Einsatz von dezenten Schlagschatten hinter den Farbflächen ist möglich. Für Social Media Icons werden zwecks schneller Wiedererkennbarkeit die jeweiligen Unternehmensfarben verwendet. Sonderfall: DB Standard Icons für Twitter und Facebook in der jeweiligen Unternehmensfarbe: Twitter Blau (85/172/238) Facebook Blau (59/89/152) Grundsätzlich werden DB Interaktionselemente in HTMLNewslettern in den Kennfarben des Absenders gestaltet. Der Einsatz der DB Sekundärfarben ist möglich, um spezifische, thematische Akzente zu setzen. Weitere Informationen: DB Icons DB Interaktionselemente Farben Newsletter Ansprechpartner Fragen zum Inhalt dieser Seite? [2] veröffentlicht: Verweisliste [1] an das Team Corporate Design, GNM 12: [2] Fragen zum Inhalt dieser Seite?: Seite 12

Ähnliche Dokumente

Print Medien > Newsletter

Print Medien > Newsletter Inhalte Auf einen Blick: Titelseiten, Header Folgeseiten Templates als Gestaltungsgrundlage CD-Regeln: Aufbau des Headers und der Titelseite Aufbau der Folgeseiten, Textbausteine Newsletter bieten die