Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
© EnBW | Stand 01.2014© EnBW |
Banner
© EnBW | Stand 04.2014
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Inhaltsverzeichnis - Banner
3 Einleitung
5 Elemente
6 Grundaufbau
7 Farben
8 Schrift
9 Auszeichnungslogos
10 Aufzählungen
11 Interaktionselemente
12 Buttons
13 Hero Button
15 Schließen-Button
17 Sound Button
18 Störer
20 Gestaltungsvarianten (für alle Bannerformate)
22 Content Ad | Abfolge
27 Skyscraper | Abfolge
31 Super Banner | Abfolge
33 Expandable Super Banner | Abfolge
35 Wallpaper | Abfolge
38 Animation
40 Text
41 Allgemein
42 Tonalität
43 Kontakt
2
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Einleitung
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
4
Einleitung
Die folgenden Guidelines sollen die einheitliche Präsen tation der Banner für die EnBW garantieren. Diese Zusammfassung soll dazu dienen, ein effizientes und stilistisch selbstbewusstes Design zu kreieren und gilt für alle Designer als bindende Richtlinie.
Die Bannerinhalte sind nur exemplarisch und als Platzhalter anzusehen. Die verwendeten Illustrationen können für die Erstellung von Bannern genutzt werden. Gleiches gilt für das Motiv in der Bannervariante Bild. Das Motiv der Variante Bild mit Text auf Fläche hat keine erworbenen Nutzungsrechte und darf nicht verwendet werden.
Die Anzahl der aufeinander folgenden Bannerscreens sind als Richtlinie für die maximale Länge eines Banners zu betrachten, um die Aufmerksamkeit des Users nicht zu verlieren.
Im Kapitel Content Ad werden exemplarisch alle Gestal-tungsvarianten gezeigt. Sie gelten als optische Richtlinie für die weiteren Bannerformate.
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Elemente
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
6
ElementeGrundaufbau
GrundaufbauDas Logo wird immer in der rechten unteren Ecke platziert.Die Platzierung bleibt bei jedem Banner-Format gleich.Für das Logo ist eine weiße Markenebene vorgesehen, die in jedem Banner verwendet wird und immer die gleiche Höhe hat (48 Px).
Die Platzierung des Logos erfolgt rechtsbündig mit jeweils einer Unit Abstand (16 px) zum rechten, unteren und oberen Rand.
Um die nach außen grenzenden Seiten der Markenebene wird eine 1 px Linie in „Grau 30“ (HEX #cccccc) gesetzt.
Vom Weißen Rand zum Bannerinhalt besteht eine Schutz-zone von 15 Px.
Unit
Unit
Unit
Unit Rand 1/2 Unit
Schutzzone zum
Bannerinhalt = 15 Px
48 Px1 Unit=16 Px
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
7
ElementeFarben
FarbenDie Primärfarben Tiefenblau und Horizontorange sind ein wichtiger Faktor zur Wiedererkennung der EnBW. Sie werden ergänzt durch Anthrazitgrau und Lichtgrau. Für eine optimale Wiedergabe ist es wichtig, die richtigen Farb-werte für die jeweilige Anwendung zu nutzen. Die Vollstän-dige Farbpalette ist bei den Basiselementen zu finden.
Dunkelblau
Dunkelorange
Dunkelblau
Mittelblau
Dunkelorange
Grau 70
Grau 50
Grau 50Grau 20
Signalgrün
Nachtblau
Signalgrün
Signalrot
6-22-113 (#061671)
238-119-0 (#ee7700)
6-22-113 (#061671)
55-74-154 (#374a9a)
238-119-0 (#ee7700)
104-104-104 (#686868)
151-151-151 (#979797)
151-151-151 (#979797)222-222-222 (#dedede)
148-193-28 (#94c11c)
6-19-91 (#06135b)
148-193-28 (#94c11c)
226-0-26 (#e2001a)Tiefenblau
Petrol
Himmelblau
Gelb
Weinrot
Braun
Horizontorange
Horizontorange
Grau 30
Grau 10
Lichtgrau
0-0-153 (#000099)
255-153-0 (#ff9900)
255-153-0 (#ff9900)
59-59-59 (#3b3b3b)
59-59-59 (#3b3b3b)
227-227-227 (#e3e3e3)
6-133-108 (#06856c)
94-182-227 (#5eb6e3)
246-194-81 (#f6c251)
147-44-44 (#932c2c)
130-95-67 (#825f43)
204-204-204 (#cccccc)
238-238-238 (#eeeeee)
Anthrazitgrau
Anthrazitgrau
Primärfarben
DatenvisualisierungSekundärfarben
Verlaufsfarben
Funktionsfarben
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
8
Verwendung von Schrift in BannernFür die Banner wird ausschließlich die EnBWDINCompPro in den Schriftschnitten Regular und Medium verwendet.Die Schriftgröße richtet sich hierbei nach den bereitsdefinierten Größen der Website und nach demBannerformat.
Alle Details zum Thema Schrift ist in dem Kapitel Basisele-mente zu finden.
Für alle Banner gelten die folgenden Stichpunkte:- Für eine einheitliche Abfolge der Bannerscreens ist es wichtig, die Headlines möglichst gleich groß zu wählen, um ein Springen des Contents zu vermeiden.
- Für die Copy wird im Gegensatz zur Website immer die DIN verwendet. Je nach Textmenge kann 18 px EnBWDINCompPro-Regular oder 15 px EnBWDINComp-Pro-Medium verwendet werden. Innerhalb eines Banners sollte nur eine Copygröße verwendet werden.
- Die verwendeten Schriftgrößen aus den Vorlagen können, je nach Textmenge, angeglichen werden.
- Texte sollten generell nicht zu lang sein und kurz gehalten werden (siehe im Kapitel Text).
SchriftElemente
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
9
Auszeichnungslogos
Auszeichnungslogos wie TÜV oder Verivox werden plakativ zentriert platziert. Es sollte darauf geachtet werden, nicht zu viele Vorteilslogos zu kommunizieren, da der User sie ansonsten nicht mehr wahrnimmt. Empfehlung: nicht mehr als zwei Logos parallel.
Die gezeigten Logos sind in den PSD-Vorlagen der Banner-vorlagen enthalten.
ElementeAuszeichnungslogos
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
10
Aufzählungen
1.2. Für Aufzählungen wird generell der Bulletpoint aus der Website verwendet (Vorteils-Liste, Ausprägung 01c). In der blauen Bannervariante ist er in Weiß (HEX #ffffff) einzuset-zen, in der grauen in „Horizontorange“ (HEX #ff9900).
3. Die Vorteilskommunikation erfolgt untereinander, es sei denn, es handelt sich um Naturstrom (hier wird das Grünstrom-Icon als Bulletpoint-Visualisierung verwendet, oder das Format des Banners erfordert eine Einzelabfolge (s. Superbanner).
Bei Skyscraper Bannern wird auf das visuelle Bulletpoint Element (Häkchen) verzichtet.
1 2 3
ElementeAufzählungen
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Interaktionselemente
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
12
ButtonsDer Call to Action Button wird nur einmal pro Banner eingesetzt.
Die Buttonbreite richtet sich nach dem Bannerformat minus 15 px Rand links und rechts. Die Buttonhöhe ergibt sich aus der Textlänge (max. zwei Zeilen).
InteraktionselementeButtons
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
13
Hero Button (Ausprägung 01a)
Spezifikationen Verhalten1280, 1024, 720: gleichbleibend320: zieht sich über die gesamte Rasterbreite
Abstandsangaben innerhalb des ButtonsButtonbreite: wächst mit der Textbreite
SchriftangabenSchriftart: EnBWDINCompPro-MediumSchriftgröße: 16 px Default-/Hover-/ und Klickzustand: „Weiß“ (HEX #ffffff)
Hintergrundfarben/FarbverlaufPfeil: „Horizontorange“ (HEX #ff9900)Buttonfläche im Defaultzustand: Verlauf im Button bleibt immer gleichButtonfläche im Klickzustand: Verlauf im Button bleibt immer gleich
Downloaddateienelm_hero_btn_01a_1280_1024_720_320.psd
default
hover
klick
InteraktionselementeHero Button
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
14
Hero Button (Ausprägung 01b)
Spezifikationen Verhalten1280, 1024, 720: gleichbleibend320: zieht sich über die gesamte Rasterbreite
Abstandsangaben innerhalb des ButtonsButtonbreite: wächst mit der Textbreite
SchriftangabenSchriftart: EnBWDINCompPro-MediumSchriftgröße: 16 px Default-/Hover-/ und Klickzustand: „Weiß“ (HEX #ffffff)
Hintergrundfarben/FarbverlaufPfeil: „Horizontorange“ (HEX #ff9900)Buttonfläche im Defaultzustand: Verlauf im Button bleibt immer gleichButtonfläche im Klickzustand: Verlauf im Button bleibt immer gleich
Downloaddateienelm_hero_btn_01b_1280_1024_720_320.psd
default
hover
klick
InteraktionselementeHero Button
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
15
Schließen-Button für Schnellkontakmodul/dunkle Unter Der Close-Button wird immer oben rechts platziert und ist für jedes Banner, das sich über den Content der Website legt, Pflicht. Spezifikationen Verhalten1280, 1024, 720, 320: gleichbleibend Positionierungoben rechts
AbstandsangabenAbstand oben: 15 pxAbstand links: 20 pxAbstand rechts: 15 px
Hintergrundfarben/FarbverlaufDefaultzustand: „Weiß“ (HEX #ffffff)Hoverzustand: „Horizontorange“ (HEX #ff9900)
Downloaddateienelm_schliessen_btn_01a_1280_1024_720_320.psd
default
hover
InteraktionselementeSchließenButton
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
16
Schließen Button für helle Untergründe (Ausprägung 01b) Der Close-Button wird immer oben rechts platziert und ist für jedes Banner, das sich über den Content der Website legt, Pflicht.
Spezifikationen Verhalten1280, 1024, 720, 320: gleichbleibend Positionierungoben rechts
AbstandsangabenAbstand oben: 15 pxAbstand links: 20 pxAbstand rechts: 15 px
Hintergrundfarben/FarbverlaufDefaultzustand: „Horizontorange“ (HEX #ff9900)Hoverzustand: „Dunkelblau“ (HEX #061671)
Downloaddateienelm_schliessen_btn_01b_1280_1024_720_320.psd
default
hover
InteraktionselementeSchließenButton
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
17
Sound Button (Ausprägung 01a, 01b, 01c)Der Sound-Button wird oben rechts platziert und ist für alle Banner, in denen Ton verwendet wird, Pflicht.
Spezifikationen VerhaltenTritt der Sound-Button in Kombination mit dem Schließen-Button auf, wird er mit einem Abstand von 10 px links neben ihm eingesetzt.
Downloaddateienelm_soundbutton_01a_01b_01c.psd
(1) Sound-Button für dunkle Untergründe (Ausprägung 01a)
(1) Sound-Button für helle Untergründe (Ausprägung 01b)
(1) Sound-Button für dunkle Untergründe (Ausprägung 01c)
(1)
(2)
(3)
InteraktionselementeSound Button
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
18
Störer für Themeneinführung & Teaser (Ausprägung 01a)Der Störer ist so angelegt, dass der Pfeil flexibel auf den Content zeigen kann, um den es geht.
Spezifikationen VerhaltenDie gezeigte Abbildung zeigt die maximale Breite und Höhe eines Störers.
1280, 1024, 720: gleichbleibend320: entfällt
Abstandsangaben innerhalb des ElementsBreite: wächst mit der TextbreiteAbstand links: 15 pxAbstand rechts: 15 px
SchriftangabenSchriftart: EnBWDINCompPro-MediumSchriftgröße: 18 px Schriftfarbe: „Weiß“ (HEX #ffffff)
Schriftart: EnBWDINCompPro-MediumSchriftgröße: 44 px Schriftfarbe: „Weiß“ (HEX #ffffff)Laufweite: -10
Wird nur kleine Copy verwendet, darf diese maximal dreizeilig laufen (Zeichenbeschränkung 45 Zeichen). Wird nur große Copy verwendet, darf diese maximal zweizeilig laufen.
Downloaddateienelm_stoerer_01a_1280_1024_720.psd
InteraktionselementeStörer
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
19
InteraktionselementeStörer
Runder Störer (Ausprägung 04a)Dieser Störer eignet sich wegen seiner Kreisform nur für kurze Texte.
Spezifikationen VerhaltenDie gezeigte Abbildung zeigt die maximale Breite und Höhe eines Störers.
1280, 1024, 720: gleichbleibend320: entfällt
SchriftangabenSchriftart: EnBWDINCompPro-MediumSchriftgröße: 18 px Schriftfarbe: „Weiß“ (HEX #ffffff)
Schriftart: EnBWDINCompPro-MediumSchriftgröße: 44 px Schriftfarbe: „Weiß“ (HEX #ffffff)Laufweite: -10
Downloaddateienelm_stoerer_04a_1280_1024_720.psd
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Gestaltungsvarianten
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
21
Gestaltungsvarianten (für alle Bannerformate übergreifend)
1. Blaue Variante / Illustration Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
2. Graue Variante / IllustrationMit durchgehend grauem Hintergrund. Sie ist für den Einsatz in allen weiteren Themen außerhalb des Vertriebs bestimmt (markenprägende Themen, Kampagnenthemen etc.). In Ausnahmen kann sie als Alternative zur blauen Variante für vertriebliche Themen eingesetzt werden. Empfehlung: bitte jeweils als Erstes prüfen, ob die blaue Variante nicht eher umgesetzt werden kann.
3. Variante Bild mit Text auf FlächeEignet sich ein Bild nicht dazu, es direkt mit Text zu kombinieren, kann diese Variante gewählt werden. In der weiteren Abfolge können sowohl der graue, als auch der blaue Hintergrund eingesetzt werden, je nachdem, um welches Thema es sich handelt.
4. Variante Text auf BildIst das Bildmotiv dazu geeignet, den Text direkt darauf zu schreiben, kann diese Variante gewählt werden. In der weiteren Abfolge können sowohl der graue, als auch der blaue Hintergrund eingesetzt werden, je nachdem, um welches Thema es sich handelt.
Hinweis:Die im Folgenden gezeigten Bannerformate sind als bei-spielhaft anzusehen. Die genauen Pixelgrößen richten sich jeweils nach der Website, auf der das Banner geschaltet wird.
1
4
2 3
Gestaltungsvarianten
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Content Ad
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
23
Content Ad mit blauem Hintergrund und Illustration/Icon (Ausprägung 01a) Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
Spezifikationen Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_content_ad_01a.psd
1
4
2
5
3
6
Content Ad | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
24
Content Ad mit grauem Hintergrund und Illustration/Icon (Ausprägung 02a) Die graue Bannervariante ist für den Einsatz in allen wei-teren Themen außerhalb des Vertriebs bestimmt (marken-prägende Themen, Kampagnenthemen etc.). In Ausnahmen kann sie als Alternative zur blauen Variante für vertrieb-liche Themen eingesetzt werden. Empfehlung: bitte jeweils als Erstes prüfen, ob die blaue Variante nicht eher umge-setzt werden kann. Spezifikationen Verwendete Elemente/Moduleelm_btn_01a elm_stoerer_02a
Downloaddateienbanner_content_ad_02a.psd
1
4
2
5
3
6
Content Ad | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
25
Content Ad mit Bild und Text auf Fläche (Ausprägung 03a) Eignet sich ein Bild nicht dazu, es direkt mit Text zu kombinieren, kann diese Variante gewählt werden. In der weiteren Abfolge können sowohl der graue, als auch der blaue Hintergrund eingesetzt werden, je nachdem, um welches Thema es sich handelt. Spezifikationen Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_content_ad_03a.psd
1
4
2
5
3
6
Content Ad | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
26
Content Ad mit Text auf Bild (Ausprägung 03b) Ist das Bildmotiv dazu geeignet, den Text direkt darauf zu schreiben, kann diese Variante gewählt werden. In der weiteren Abfolge können sowohl der graue, als auch der blaue Hintergrund eingesetzt werden, je nachdem, um welches Thema es sich handelt. Spezifikationen Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_content_ad_03b.psd
1
4
2
5
3
6
Content Ad | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Skyscraper Banner
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
28
Skyscraper mit blauem Hintergrund und Illustration/Icon (Ausprägung 01a) Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
Spezifikationen SchriftangabenHeadlines sollten nicht über mehr als 4 Zeilen laufen.
Aufzählungen werden nacheinander und untereinanderdargestellt. Im Gegensatz zur Content Ad wird hier auf das Bulletpoint-Häkchen verzichtet. Ein Aufzählungspunkt sollte nicht über mehr als drei Zeilen laufen. Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_skyscraper_01a.psd1 2 3 4 5 6
Skyscraper | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
29
Skyscraper mit grauem Hintergrund und Illustration/Icon (Ausprägung 02a) Die graue Bannervariante ist für den Einsatz in allen wei-teren Themen außerhalb des Vertriebs bestimmt (marken-prägende Themen, Kampagnenthemen etc.). In Ausnahmen kann sie als Alternative zur blauen Variante für vertrieb-liche Themen eingesetzt werden. Empfehlung: bitte jeweils als Erstes prüfen, ob die blaue Variante nicht eher umge-setzt werden kann.
Spezifikationen SchriftangabenHeadlines sollten nicht über mehr als 4 Zeilen laufen.
Aufzählungen werden nacheinander und untereinanderdargestellt. Im Gegensatz zur Content Ad wird hier auf das Bulletpoint-Häkchen verzichtet. Ein Aufzählungspunkt sollte nicht über mehr als drei Zeilen laufen. Verwendete Elemente/Moduleelm_btn_01a elm_stoerer_02a
Downloaddateienbanner_skyscraper_02a.psd
1 2 3 4 5 6
Skyscraper | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
30
Skyscraper mit Bild und Text auf Fläche (Ausprägung 03a) Eignet sich ein Bild nicht dazu, es direkt mit Text zu kombinieren, kann diese Variante gewählt werden. In der weiteren Abfolge können sowohl der graue, als auch der blaue Hintergrund eingesetzt werden, je nachdem, um welches Thema es sich handelt.
Spezifikationen SchriftangabenHeadlines sollten nicht über mehr als 4 Zeilen laufen.
Aufzählungen werden nacheinander und untereinanderdargestellt. Im Gegensatz zur Content Ad wird hier auf das Bulletpoint-Häkchen verzichtet. Ein Aufzählungspunkt sollte nicht über mehr als drei Zeilen laufen. Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_skyscraper_03a.psd
1 2 3 4 5 6
Skyscraper | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Super Banner
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
32
Super Banner mit blauem Hintergrund und Illustration/Icon (Ausprägung 01a) Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
Spezifikationen SchriftangabenHeadlines sollten nicht über mehr als 2 Zeilen laufen.
Aufzählungen werden nacheinander dargestellt und sollten nicht über mehr als 2 Zeilen laufen. Hierbei wird die Auf-zählung jeweils vertikal im Format zentriert. Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a
Downloaddateienbanner_superbanner_01a.psd
1
2
3
4
5
6
Super Banner | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Expandable Super Banner
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
34
Expandable Super Banner mit blauem Hintergrund und Illustration/Icon (Ausprägung 01a) Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
Spezifikationen SchriftangabenHeadlines sollten nicht über mehr als 2 Zeilen laufen.
Aufzählungen werden nacheinander dargestellt und sollten nicht über mehr als 2 Zeilen laufen. Hierbei wird die Auf-zählung jeweils vertikal im Format zentriert. Verwendete Elemente/Moduleelm_btn_01b elm_stoerer_02a Animationsverhalten On Hover erweitert sich das Banner auf 300 px. Hierbei rutscht das Logo mit nach unten. AbfolgeWird zwischen zwei Screens gewechselt, muss der letzte Screen einen Pfeil enthalten, der dem User anzeigt, dass das Banner nach unten ausfahrbar ist (s. 2).Im ausgeklappten Zustand muss der Close-Button einge-setzt werden, um dem User ein Ausblenden des Banners zu ermöglichen.Die Abfolge der Bannerscreens erfolgt nur in blau und darf nicht mit der grauen Variante gemischt werden.
Downloaddateienbanner_superbanner_01a.psd
1
2
3
Expandable Super Banner | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Wallpaper
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
36
Wallpaper Banner mit blauem Hintergrund und Illustration/Icon (Ausprägung 01a)Die blaue Bannervariante ist von den Vertriebsteasern der Website abgeleitet und sollte vorwiegend für die vertrieb-lichen Themen eingesetzt werden. So wird eine optische Konsistenz für den User gewährleistet, der bspw. von einem Banner auf eine Landingpage mit Vertriebsthema verlinkt wird.
Der obere Teil des Banners wird für die Hauptheadlines genutzt, die die Aufmerksamkeit des Users als Erstes wecken sollen.
Für den vertikalen Bannerteil gelten die gleichen Regeln wie für das Skyscraper Banner.
SpezifikationenSchriftangabenHeadlines sollten nicht über mehr als 1 Zeile laufen und werden immer vertikal mittig positioniert.
Verwendete Elemente/Moduleelm_btn_01belm_stoerer_02a
AbfolgeBei diesem Format ist es wichtig, dass die Informationen in vertikalem und horizontalem Bannerteil sinnvoll verteilt werden. Im horizontalen Bannerteil sollten die Hauptaus-sagen gespielt werden, im vertikalen die Ergänzungen und der Call to Action am Ende.
Für die Abfolge der Bannerscreens kann je nach Art des Themas die blaue oder graue Variante (durchgängig) gewählt werden.
Wallpaper | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
37
1
4
2
5
3
6
Downloaddateienbanner_wallpaper_01a.psd
Wallpaper | Abfolge
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Animation
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
39
Animation Das Animationsverhalten der EnBW-Banner lässt sich unter folgenden Stichpunkten zusammenfassen:
- Die Animation von Texten ist auf das Ein- und Ausfaden beschränkt.
- Bilder werden nicht animiert.
- Illustrationen können animiert werden, so lange es nicht zu einer comichaften Wirkung kommt (keine Bounce-Ef-fekte oder hüpfende Elemente etc.).
- Der Einsatz von Videos ist ebenfalls möglich, so lange es zur Tonalität der EnBW Bildsprache passt (siehe Digitale Medien - Websitephiliosophie).
Spezifikation Downloaddateienanimation_banner_content_ad_01a.swf
Animation
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
Text
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
41
TextAllgemein
AllgemeinAllgemein gilt für Banner-Texte:
- Sie sollten generell kurz und klar formuliert werden, um die Aufmerksamkeit des Users zu wecken, da er seinen Fokus beim Websitebesuch eigentlich auf andere Contents gelegt hatte.
- Es sollte sich auf eine Aussage beschränkt werden, die dem Nutzer auch tatsächlich einen Vorteil bringt (bspw. Preisvorteile, Boni etc.).
© EnBW | Stand 04.2014 | EnBW_CDnet_Bannerguideline_140407
42
TextTonalität
TonalitätTatkraft vermitteln: Die EnBW denkt voraus, packt an, setzt um. Sie bietet innovative Leistungen und besitzt visionäre Stärke. Diese Eigenschaften vermitteln wir dem Leser durch aktive Formulierungen und klare, direkte Aussagen.
Sicherheit vermitteln: Der Kunde kann sich bei der EnBW gut aufgehoben fühlen, seine Energieversorgung ist in besten Händen. Sicherheit kommunzieren wir dem Le-ser durch Formulierungen, die das Gefühl von Sicherheit lebendig beschreiben.
Die persönliche Ansprache des Nutzers ist im Web üblich und besonders geeignet, um den Leser zu den gesuchten Inhalten zu führen. Beispiel: „Wählen Sie Ihr gewünschtes Produkt.“
Zu viele Substantive erwecken einen passiven, bürokra-tischen Eindruck und bremsen den Leser. Statt „Implemen-tierung“ also besser das Verb „implementieren“ gebrau-chen.
Überlange Substantive wie „Energiemanagement-Systeme“ stets durch Bindestriche lesefreundlicher machen oder auflösen in „Systeme für das Energiemanagement“.
Kontakt
Scholz & Volkmer GmbHNicole Derscheidt
Schwalbacher Str. 7265183 Wiesbadenwww.s-v.de
Telefon (0611) 180 99 176E-Mail [email protected]