1. Yello Strom Webauftritt
Verhaltenslogik und Abstände einzelner Module und Elemente der Site.
n!
ersio
Vo rabv

2. Inhalt.
Strategischer Ansatz. FAQs – 33
Konzeptionelle Überlegungen – 3 Multimedia –33
Designstrategie & Prinzipien – 4 Störer – 33
Aktionsbühne –33
Text-Tonalität Online.
Lorem Ipsum – 6 Beispielseiten & CSS-Dateien.
Startseite – 25
Designgrundlagen. Individuelle Startseiten – 26
Farben – 7 Stromauftrag – 27
Typographie – 8 CSS-Dateien – 27
Layout-Raster – 9
Eve
Struktur & Seitentypen. Funktionale Beschreibung - 23
Sitemap – 12 Layout & Funktion – 25
Seitentypen & Basistemplates – 14 Positionierung auf der Seite - 33
Navigation. Redaktionelle Tipps.
Navigationselemente – 25 Checklisten – 41
Logo – 26 Brandfilter Matrix – 42
PK/GK-Weiche – 27 sion! n noch
bver e
Haupt-Navigation – 28 Technische Anforderungen. Vora n stimm !
Content-Navigation – 29 Glossar. nz ahle überein
Meta-Navigation – 30 Kontakt. Seite nicht
Seitenelemente.
Headlines – 25
Copytext – 26
Tabellen – 27
Infomodule – 28
Info Layer - 33
Links – 33
Buttons – 33
Seite 2

3. Designgrundlagen.
Seite 3

4. Primärfarben
Die Hausfarbe von Yello ist gelb. Das
Yello Gelb ist eine frische, fröhliche
und positive Farbe. Dieser Farbton
bildet den visuellen Fokus in der Gelb Schwarz Weiß
Farbgebung neben der Verwendung Web #FFF100 Web #000000 Web #FFFFFF
von schwarz und weiß. Das Zusam-
menspiel der drei Farbwerte gibt der In Gebrauch für: In Gebrauch für: In Gebrauch für:
Marke ihren eindeutigen Charakter. • Hintergrund • Typografie • Texthervorhebungen
• Pfeile • Buttons
• Bereichstrennung • Invertierung, Pfeil
• Rahmen für Vorschaubilder
Sekundärfarben
Sekundärfarben sollen dem Designer
zur Erweiterung des Kontrastum-
fangs dienlich sein. Sie sollten jedoch
nur zur „Auszeichnung“ diverser Ele- Hellgelb Hellgelb Dunkelgelb
mente eingesetzt werden. Beispiel- Web #FFF880 Web #EBDE00 Web #BFB500
hafte Anwendung siehe Seitenmodule.
In Gebrauch für: In Gebrauch für: In Gebrauch für:
• Textfelder, Hintergrund • Trennelemente • besondere Textauszeichnung
(bspw. Prozess-Navigation)
Rot
Web #E60003
In Gebrauch für:
• Störer
• Fehlermeldungen
Seite 4

5. Corporate Font, Yello DIN Yello DIN Black Yello DIN Black Outline
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
Yello Strom Schrift ist die Yello DIN.
Eine serifenlose Schrift, die beson- ABCDEFGHIJKLMNOPQRSTUVMXY ABCDEFGHIJKLMNOPQRSTUVMXY
ders gut lesbar ist. Es gibt sie in vier €1234567890ß;.!„“%&() @ € €1234567890ß;.!„“%&() @ €
Schriftschnitten: Yello DIN Black,
Yello DIN Black Outline, Yello DIN
Regular und Yello DIN Light. Sie un-
terscheiden sich von anderen DIN- Yello DIN Bold Yello DIN Regular
Schriften und sind zu beziehen bei abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
FontShop AG Berlin.
ABCDEFGHIJKLMNOPQRSTUVMXY ABCDEFGHIJKLMNOPQRSTUVMXY
1234567890ß;.!„“%&() 4 €1234567890ß;.!„“%&() @ €
Nur in Verwendung bis zu einer Schriftgröße von 14px. Ab 14px bitte
Yello DIN Black verwenden.
Bildschirm Font, Arial Arial Regular Arial Bold
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
Die Arial ist ebenfalls eine serifenlo-
se Schrift, die speziell für den Bild- ABCDEFGHIJKLMNOPQRSTUVMXY ABCDEFGHIJKLMNOPQRSTUVMXY
schirm entwickelt wurde und auch bei €1234567890ß;.!„“%&() @ €1234567890ß;.!„“%&() @
kleinen Schriftgrößen eine optimale
Lesbarkeit bei enger Laufweite bietet.
Seite 5

6. Anwendungsbeispiele, Meta-Navigation
Yello DIN Yello DIN Regular, 12px,
einzeilig
Die Yello DIN findet Verwendung beim
Setzen der Seiten-Headlines, teil-
weise bei Navigations- und Linkele-
menten, bei Zwischenüberschriften in
Formularen (H1) und bei bestimmten PK/GK Weiche
Content-Modulen. Sie kommt zum Yello DIN Bold/Regular,
Einsatz, wenn es darum geht, Inhalte 12px
werblich und plakativ darzustellen.
Sie ist wichtiger Grundbaustein des
visuellen Erscheinungsbildes von
Yello.
Seiten Headline
Angaben zu den Schrifttypen und Grö- Yello DIN Black, 38px, ZA
ßen finden Sie bei der Beschreibung 41px, einzeilig oder zwei-
der einzelnen Modulelemente. zeilig, LA -20 (Zeichenab-
stand)
FAQs
Yello DIN Bold, 14px,
einzeilig
Buttons
Yello DIN Bold, 12px,
einzeilig
Links und Call-to-Actions
Yello DIN Bold, 22px und
14px, ZA 19px, immer zwei-
zeilig
Seite 6

7. Anwendungsbeispiele, Eve, Sprechblase
Arial Arial Regular, 11px, ZA
13px bei kleinem Fenster.
Ihr Einsatz ist so vielfältig, wie die 11px, ZA 15px bei großem
Inhalte, die sie repräsentiert: Sprech- Fenster
blase von Eve, Formularinhalte, grö-
ßere Textmengen, Textlinks.
Copytext
Arial Regular, 11px,
ZA 15px
Rechte Spalte, Textlinks,
Listenelemente
Arial Regular, 11px,
ZA 15px und 21px
Formulare,
Formularfelder
Arial Regular, 11px,
ZA 15px und 21px
Aufklappmenü
Arial Regular, 11px,
immer einzeilig
Seite 7

8. Grundraster
Basis Template A Basis Template C, Pop-up
Ein klar gegliederter Seitenaufbau
bietet dem Benutzer schnelle Orien- 74
1 2 129
tierung. Das grafische Seitenraster ist
auf das Standard-Format 1024x768px 69
optimiert. Alle wichtigen Grundbau-
steine (Logo, Navigation, Eve, Sei-
ten-Headline) liegen innerhalb jenes
sichtbaren Bereichs. Die Länge der
Contentbühne ist flexibel. Bei Seiten
3 4 max.
mit Scrollbalken werden am Ende max.
Höhe 501px Höhe 400px
110px Abstand von Content zu Brow-
serrand hinzugerechnet.
Das Basis Template (A) setzt sich
zusammen aus einem geschützten
Bereich für das Logo (1), der Meta- 244 31 244
Navigation (2), der linken Spalte (3) 519
und dem Content-Bereich – hier Akti- 204 33 741+ Unterer Teil der Abbildung zeigt die
onsbühne (4). Eve wird hier unterhalb 978 Möglichkeit das Raster 1-spaltig oder
der Haupt-Navigation platziert. 1px Linie #000000, Länge richtet sich nach der Länge
2-spaltig aufzuteilen.
des Inhalts, mind. 319px (Basistemplate „A“ ,Home)
Ein zweites Basis Template (B) be-
sitzt neben des mittleren Content-
Basis Template B
Bereichs eine rechte Spalte (5). Eve
nimmt hier ihren Platz ein, sobald
1 2 129
dieses Template Verwendung findet.
Das Pop-up Fenster (drittes Basis
Template „C“) besteht aus einem Hea-
der und einem darunter beginnenden
Content-Bereich (kann 1-spaltig, oder
2-spaltig aufgeteilt werden – je nach 3 4 5
Anforderung des Inhalts). Die Län-
ge des Fensters sollte 400 px nicht
überschreiten. Das Fenster sollte sich
nicht zu aufdringlich verhalten bzw.
das Hauptfenster komplett abdecken.
Höhe richtet
sich nach
Menge des
204 33 480 83 180 Inhalts.
978
Seite 8

9. Basis Template, Header (Logo, Meta-Navigation, Kontakt) Header (Logo, Meta-Navigation, Kontakt)
Contentseiten
Aus dem Grundraster lassen sich drei
grafische Basis Templates ableiten.
Aus jenen ergeben sich wiederum
weitere Ableitungen für spezifische Linke Contentbühne Linke Contentbühne Rechte
Anwendungen und Inhalte. Seitenspalte (1-/2-/3-spaltig) Seitenspalte (1-/2-/3-spaltig) Seitenspalte
(PK/GK Weiche, (PK/GK Weiche, (Service & Hilfe)
Haupt- Haupt-
„A“ in Gebrauch für: Navigation) Navigation)
• Home
• Individuelle Startseiten
„B“ in Gebrauch für:
• Allgemeine Contentseiten
• Success Seiten
Basis Template A Basis Template B
• Formular Seiten
Basis Template,
Pop-up Fenster Header
„C“ in Gebrauch für:
• Kontaktfenster
• Abbrecher Pop-up
• AGB
Contentbühne
(1-/2-spaltig)
Basis Template C, Pop-up
Seite 9

10. Struktur & Seitentypen.
Seite 10

11. Sitemap
Seite 11

12. Homepage
Um das Zusammenspiel der Seiten-
module zu demonstrieren zeigen wir
an dieser Stelle alle Bestandteile der
Basis Templates. Die linke, formale
Abbildung orientiert sich nach dem
groben Grundaufbau der HTML-Tem-
plates.
Besonderheiten dieser Seite:
Große Flash-Aktionsbühne, welche
bis unterhalb der Meta-Navigation
reicht. Drei „Direkt-Einstiege“ (Ho-
mepage Teaser) in Unterbereiche der
Seite. Eve begrüßt ihre Besucher auf
der linken Seitenspalte. Alle Elemen-
te sollten innerhalb des sichtbaren
Bereichs (bei einer Fenstergröße von
1024x768) platziert werden.
Individuelle Startseiten
Besonderheiten dieser Seite:
Große Flash-Aktionsbühne, welche
bis unterhalb der Meta-Navigation
reicht. Zwei plakative Call-to-Action
Links. Eve begrüßt ihre Besucher auf
der linken Seitenspalte. Alle Elemen-
te sollten innerhalb des sichtbaren
Bereichs (bei einer Fenstergröße von
1024x768) platziert werden.
Seite 12

13. Contentseiten
Besonderheiten dieser Seite:
Klassische Dreiteilung der Seite – ne-
ben linker Seitenspalte und Content-
bühne gliedert sich noch eine rechte
„Service-Spalte“ an. Eve begrüßt ihre
Besucher nun auf der rechten Seiten-
spalte.
Formulare
Besonderheiten dieser Seite:
Weiterhin eine klassische Dreiteilung
der Seite, wie in allen anderen Con-
tentseiten. Die Contentbühne gliedert
sich in zwei Spalten. Die rechte Spalte
steht für Fehlermeldungen/Infotexte
zur Verfügung.
Seite 13

14. Success Seiten A
Die Success Seiten kann man drei Ka-
tegorien zuordnen.
Den Success Seiten der 2. und 3.
Kategorie ist gemein, dass der Nut-
zer am eigentlichen Prozess keine
Änderung mehr vornehmen kann, da
die Daten jeweils bereits an Yello ver-
schickt wurden. Eine Ausnahme bildet
die Kategorie 1: Preis/Service Dar-
stellung, da der Nutzer dort jeweils
noch die Möglichkeit hat, die PLZ zu
ändern.
B
Preis/Service Darstellung Seite (A)
hat einen werblichen Charakter.
Copytext plus Inhalt (B) der vorher-
gehenden Seite – als Bestätigung für
den Nutzer.
Formulare Darstellung (C), Überblick
über Kundendaten bei Yello eignet
sich für den Kunden um seine vorher
eingegebenen Daten auf einen Blick
zu erfassen (siehe auch Word-Doku-
ment zur Darstellung von Formula-
ren, 20070326_Regeln_Formulare.
C
doc). Genauere Spezifikationen ent-
nehmen Sie bitte dem Dokument
„20070327_Regeln_Success_Seiten.
doc“.
Seite 14

15. Pop-ups
Content, Beispiel 2-spaltig Content, Beispiel 1-spaltig
Seite 15

16. Navigation.
Seite 16

17. Navigationselemente
Meta-Navigation
GK/PK Weiche
Stellt die komplette Seite um
Haupt-Navigation
1. und 2. Ebene
Content-Navigation
3. Ebene
Bsp. für Kontext-Navigation
Für lokale Inhalte
Seite 17

18. Logo
Das Logo (82x82px) ist klickbar und
führt den Nutzer erwartungskonform
auf die Startseite zurück. Bei PK auf
Home PK. Bei GK auf Home GK.
33
Klickbarer Bereich 82x82
(Größe des Logos)
29
Seite 18

19. PK/GK Weiche
Verhalten bei Mouseover.
Aktiv „PK“ Rollover Aktiv „GK“
Seite 19

20. 1. Ebene,
Haupt-Navigation
Schrift: Yello DIN
Stil: Bold
Größe: 14px
ZA: 19px
Textfarbe: #000000
Passiv Rollover Aktiv Aktiv und Rollover
2. Ebene,
Haupt-Navigation
Schrift: Yello DIN
Stil: Regular/Bold
Größe: 12px
ZA: 16px
Textfarbe: #000000
Passiv Rollover Aktiv Aktiv und Rollover
Abstand Auswahl-Pfeil
zum ersten Buchstaben
immer 3px.
Seite 20

21. 3. Ebene, Passiv
Content-Navigation
Schrift: Yello DIN
Stil: Regular/Bold
Größe: 12px
Textfarbe: #000000
Rollover
Aktiv
Aktiv und Rollover
Abstand zum
nächsten Wort 6
Leerzeichen.
Abstand Auswahl-Pfeil
zum ersten Buchstaben
immer 3px.
Seite 21

22. Meta-Navigation 4
Passiv
Schrift: Yello DIN
Stil: Regular/Bold
Größe: 12px
Rollover
Textfarbe: #000000
Aktiv
Aktiv und Rollover
Abstand zum nächsten
Wort 6 Leerzeichen.
Abstand Auswahl-Pfeil Abstand Kreis mit Pfeil zum
zum ersten Buchstaben ersten Buchstaben 4px.
immer 3px.
Seite 22

23. Layer „Kontakt“ Passiv
Meta-Navigation
Schrift: Yello DIN
Stil: Regular/Bold
Größe: 12px
ZA: 21/14px
Textfarbe: #000000
Rollover über Kontaktfeld
Ausmaße des Kontaktlayers:
Breite 104px, Höhe 105px
Rollover über Menüpunkte
Aktiv
Aktiv und Rollover
Abstand Auswahl-Pfeil zum
ersten Buchstaben 3px.
Eckradius 8px (bei allen Layern)
Seite 23

24. Kontext-Navigation Passiv
Schrift: Yello DIN
Stil: Bold/Black
Größe: 14/19px
ZA: einzeilig
Textfarbe: #BFB500/
#000000
Rollover direkt über Jahreszahl
Es werden immer 8 Jahreszahlen
angezeigt.
Aktiv
Rollover
Steuerung mit Pfeil
Aktiv
Abstand Pfeil zum ersten
Buchstaben 11px.
Abstand zum nächsten
Wort 4 Leerzeichen.
Seite 24

25. Prozess-Navigation 1 „aktuelle Seite“
Schrift: Yello DIN
Stil: Black
Größe: 13,4/33,3px
ZA: 14,4px
Textfarbe: #000000/
#D2C700
1 „erledigt“
2 „aktuelle Seite“
1 „erledigt“
2 „erledigt“
3 „aktuelle Seite“
Abstand 4px Abstand 20px
Seite 25

26. Seiten blättern, Passiv
Kontext-Navigation
Schrift: Yello DIN
Stil: Bold/Black
Größe: 14/19px
ZA: einzeilig
Textfarbe: #BFB500/
Rollover direkt über Seitenzahl
#000000
Es werden maximal 4 Ziffern
angezeigt.
Aktiv
Rollover
Steuerung mit Pfeil
Aktiv
Abstand Pfeil zur Ziffer 8px.
Seite 26

27. Seitenelemente
Seite 27

28. Headlines Texter können sich grob an die Vorgaben
halten: Pro Zeile passen 18 große „N“ oder
22 kleine „n“.
25
Headlines können 1-zeilig oder 2-zei-
lig sein und enden immer mit einem
Satzzeichen. Die Länge der Zeile wird
durch die Breite des Contentspalte
festgelegt.
40
Schrift: Yello DIN
Stil: Black
LA: -20 Zeichenabstand
(Einstellung in PSD) Alleinstehende Wörter in Zeilen sind aus
Größe: 38px 480 ästhetischen Gründen zu vermeiden (Bsp.
siehe oben).
ZA: 41px
Anwendungsbeispiele
Seite 28

29. Copytext
Der Fließtext wird als Flattersatz
linksbündig gesetzt. Die Länge der
Zeile wird durch die Breite der Con-
tentspalte festgelegt (1-zeilig oder Abstand Absatzheadline zu Fließtext
2-zeilig). 30px, wenn 2. Element der Content-
bühne (von oben).
Schrift: Arial
Stil: Regular & Bold
Größe: 11px
ZA: 15px
Textfarbe: #000000
Abstand Absatzheadline zu Fließ-
text 15px, wenn innerhalb eines
Fließtextes.
Abstand Absätze, 30px.
Abstand Absatzheadline zu Fließtext 30px, wenn 2.
Element der Contentbühne (von oben).
ZA 15px
Abstand Aufzählungszeichen, 30px.
Seite 29

30. Tabellen
A Abstand zum Text oberhalb 20px
Tabelle „A“ zeigt eine einfache Tabel- min. Abstand zum Rand 9px
lenform mit wenigen Listeneinträgen
pro Spalte.
4
Die untere Ausführung einer Tabelle
„B“ steht für Listen zur Verfügung,
deren Einträge so umfangreich sind,
Höhe richtet sich nach der Menge
dass sie nochmals durch eine soge- des Inhalts. Breite richtet sich an
nannte Kontext-Navigation struktu- dem Grundraster aus (1-spaltiger
riert werden müssen (in unserem Fall Contentbereich).
alphabetisch).
Eckradius 8px (bei allen Layern)
min. Abstand zum Rand 12px,
rundherum
Tabelle A/B
Headline: Yello DIN
Stil: Bold B Abstand zum Text oberhalb 20px
Größe: 14px
ZA: 21px
25
Textfarbe: #000000
21
Text Tab. A: Arial 7
Hintergrundfarbe #FFF880
Stil: Regular 6
Größe: 11px
17
ZA: einz. 21px
zweiz. 15px
Textfarbe: #000000 4
Text Tab. B: Arial
Stil: Regular
Größe: 11px
ZA: 17px
Textfarbe: #000000
Seite 30

31. Infomodule 12px Rahmen, rundeherum
Headline: Yello DIN
Stil: Bold/Regular
Größe: 14px
ZA: 16px
Textfarbe: #000000
Fließtext: Arial
Stil: Regular
Größe: 11px 26
ZA: 15px
Textfarbe: #000000 12
Preis: Arial
Stil: Bold
Größe: 26/14px
ZA: einzeilig, hochgestellt
Textfarbe: #000000 14
7
Zusatz: Arial 36
Stil: Regular
17
Größe: 10px
ZA: einzeilig
Textfarbe: #000000
8
Höhe richtet sich nach der
12 Menge des Inhalts. Breite
richtet sich an dem 2-spal-
tigen Grundraster aus.
7
148
Seite 31

32. Layer, Übersicht
Einfacher Text-Layer Einfacher Text-Layer mit Grafik Kalender-Layer Eve-Layer
Verhalten, Layer „Info“
Passiv Rollover (sensitiv ist lediglich der Info-Button) Fenster aktiv. Position des Fensters mittig, unterhalb oder Fenster schließen
oberhalb des Buttons (je nach Abstand des Info „i“ zum
unteren Browserrand.
Seite 32

33. Passiv Rollover
Call-To-Action Links
Schrift: Yello DIN
Stil: Black/Bold
Größe: 22/14px
ZA: immer zweizeil. 19px
Textfarbe: #000000
Basis Links
Schrift: Arial
Stil: Regular
Größe: 11px
ZA: einzeilig Abstand Link-Pfeil zum
Textfarbe: #000000 letzten Buchstaben 4px.
Copytext Links
Schrift: Arial
Stil: Regular/Bold
Abbildung zeigt Link in Bold (Absatz-
Größe: 11px headline). Sonst werden Links im Text in
ZA: einzeilig Regular gesetzt.
Textfarbe: #000000
Mail-To Links
Schrift: Arial
Stil: Regular
Größe: 11px
ZA: einzeilig
Textfarbe: #000000
Seite 33

34. Basis Buttons
Den Zustand „aktiv“ gibt es nicht. Es 17x17 Verlaufsüberlagerung weißer Button
handelt sich hier um einen Hyperlink. Farbe #000000 nach #272727
Wenn Buttons auf weißem Hinter-
grund stehen, bekommen sie zusätz- Verlaufsüberlagerung schwarzer Button
lich einen Ebeneneffekt. Farbe #F8F8F8 nach #FFFFFF
Schatten (bei weißem Hintergrund)
Art Schein nach außen
Farbe #000000
Größe 4px
Deckkraft 27%
Auf weiß mit Schatten
Passiv Rollover
Anwendungsbeispiel, Aufklappmenü
Passiv Rollover Aktiv
Seite 34

35. Passiv Rollover & aktiver Zustand
Aktions Buttons
Schrift: Yello DIN Verlaufsüberlagerung weißer Button
Stil: Bold 10 Farbe #000000 nach #272727
Größe: 12px
ZA: einzeilig Verlaufsüberlagerung schwarzer Button
Textfarbe: #000000 Farbe #F8F8F8 nach #FFFFFF
Eckradius 8px
17 Schatten (bei weißem Hintergrund)
Die Wortlänge bestimmt die Breite Art Schein nach außen
des Buttons. Mindestabstand zum Farbe #000000
Rand des Buttons 7px. Stehen Buttons 29 Größe 4px
59
auf weißem Hintergrund bekommen 77
91 Deckkraft 27%
108
sie zusätzlich einen schattenähnli-
chen Ebeneneffekt.
Interaktions Buttons
Schrift: Yello DIN Schatten (bei weißem Hintergrund)
Stil: Bold Art Schein nach außen
Größe: 14px Farbe #000000
ZA: einzeilig 24 Größe 4px
Textfarbe: #000000 Deckkraft 27%
Eckradius 12px
83
Mindestabstand zum Rand Verlaufsüberlagerung weißer Button
des Buttons 7px. Farbe #000000 nach #272727
Schwarzer Button
Farbe #F8F8F8 nach #FFFFFF
Seite 35

36. Verwendung von Aktions-
und Interaktions Buttons Aktions Button
Es gibt zwei verschiedene Arten von
Buttons: „Normale“ Aktions Buttons
mit definierter „kleiner“ Höhe und
variabler Breite (je nach Wortlänge)
– sowie Buttons mit definierter „gro-
ßer“ Höhe und variabler Breite.
Interaktions Button
Dieser wird immer dann genutzt,
wenn eine Interaktion mit Yello
stattfindet.
Screenshot „Stromauftrag“
Seite 36

37. FAQs
Headline: Yello DIN
Stil: Bold 13
Größe: 14px 21px ZA Höhe richtet sich nach der
29
ZA: einzeilig 8 Menge des Inhalts.
28px ZA 18px ZA
Textfarbe: #000000
12
Links: Arial
Stil: Regular 11 305 11
Größe: 11px 327
ZA: 15px
Textfarbe: #000000
Fließtext: Arial
Stil: Bold/Regular
Größe: 11px
ZA: 18px Headline
15px Text
Textfarbe: #000000
Verhalten
Passiv Rollover (sensitiv ist der komplette Link; Button und Fenster aktiv. Position des Fensters mittig, Fenster schließen
dazugehöriger Text). unterhalb des Buttons.
Ende der Seite
Seite 37

38. Multimedia, Movie-Player
Videogrößen:
„Klein“: 320 x 240 Pixel, hohe Komprimierung,
„Mittel“: 320 x 240 Pixel, geringe Komprimierung,
„Groß“: 720 x 576 Pixel (PAL).
Steuerelemente des Video Player:
Start (resp. Pause), Slider mit aktiver Positionsbestimmung, Ton an/aus.
Vorschaubild mit 70% schwarz überlagert um Ladeanzeige Rollover Klickaufforderung nach einmaligem Abspielen des Films.
und Bildinformation gleichzeitig zu zeigen.
Seite 38

39. Störer
Störer sitzen immer rechts von Call-
To-Action Links, dicht am visuell er-
kennbaren Klickelement (bspw. Pfeil).
Die Schriftgröße, sowie der Schriftstil
kann variieren – je nach darzustellen-
dem Inhalt. Sie sind gerade so groß,
dass sie den Gesamteindruck der
Seite nicht übermäßig beeinflussen.
Die Größe der Teaser variiert, je nach
Die Störer haben keinen Rollover Zu- Textlänge bzw. Menge.
stand – und sind demnach auch nicht
animiert.
Anwendungsbeispiele
Die Kampagnen müssen verschiedene
Inhalte fassen können. Die Kampag-
nen sollen möglichst einfach einzu-
stellen zu sein. Die Platzierung der
Kampagnen soll flexibel steuerbar
sein.
Teaser sitzen immer am rechten CTA. Auch auf der
Startseite. Optimalerweise gibt es nur einen Teaser
pro Seite.
Seite 39

40. Aktionsbühne
Die Aktionsbühne präsentiert sich so
groß wie möglich. Sie bietet Raum, um
„Strom erlebbar“ zu machen in Form
757x335
757x440
von Textanimation. Durch die Interak-
tion wird der Besucher stärker invol-
viert und beschäftigt sich intensiver
mit den dargelegten Inhalten.
Die Animationen werden individuell
erstellt. Mit Typografie wird hier freier
umgegangen, daher gibt es an dieser
Stelle keine Angaben zu Schriftgrößen
und -stilen (somit auch Abstände).
Zum Überprüfen neu erstellter Texta- Startseite individuelle Startseite
nimationen a(Texter, Designer, Kon- Mindestabstand zu den Mindestabstand zu den
zepter) lohnt sich zudem ein Blick in Teasern 10px CTAs 42px
die Brandfiltermatrix.
Platzierung
Die Headlines platzieren sich nach
Ablauf bzw. schon während der Ani-
mation immer auf gleicher Höhe wie
alle anderen Headlines: Imaginäre
Linie ausgehend der PK/GK Weiche.
Startseite PK Yello Strom PK Yello Tell PK und GK Mein Yello PK
Startseite GK Yello Strom GK Yello Karte Gewerbe Mein Yello GK
Seite 40

41. Beispielseiten & CSS-Dateien.
Seite 41

42. Startseite PK
Startseite, Teaser
Yello DIN Regular/Bold,
14px, ZA 18px (maximal 4-
zeilig)
Seite 42

43. Startseite GK
Seite 43

44. Individuelle Startseite,
Template A
Seite 44

45. Contentseiten,
Template B
Seite 45

46. Stromauftrag
(Formularseite)
Modulüberschrift H1
Yello DIN Black, 18px, ZA
21px
Seite 46

47. Pop-up
Seite 47

48. Weitere Angaben zu Screenshot Element Position Wert
Abständen
Seitenheadline unterhalb 40px
Prozess-Navigation oberhalb 54px, 50px wenn direkt unter Seitenheadline
unterhalb 30px
54px (wenn Prozessnav erstes Element des Formulars,
Bsp. S2 Stromauftrag)
H1 (Modulheadline bei oberhalb 50px (Trennung der einz. Modulcontainer – S.17)
Formularen) 40px (nach Seitenheadline)
30px (nach Seiteneinleitungstext)
unterhalb 18px
H2 (Subheadlines bei oberhalb 25px
Formularen, Unterzeile unterhalb 12px
kann auch Regular sein)
Seiteneinleitungstext oberhalb 40px (wenn nach Seitenheadline)
30px (mittendrin, wenn oberhalb H1, nicht Prozess-Nav.)
unterhalb 30px
20px (wenn darunter ein Modul mit Rahmen, Bsp. PLZ-Box)
Copytext (mehr als 3 oberhalb 30px
Zeilen, sonst Subhead- unterhalb 30px
lines)
Sternchentext oberhalb 42px
Abschliessender Text oberhalb 50px (Bsp.: „Jetzt kümmern wir uns ...“ 1.3.6.2 oder AGBs)
(nicht Sternchentext)
Seite 48

49. Weitere Angaben zu Screenshot Element Position Wert
Abständen
CTA (Call-to-Actions) oberhalb 42px
30px (nur bei 1.1.0.1, Preissuccess-Seiten)
Buttons (große und oberhalb 25px
kleine) unterhalb 42px und 18px (wenn alternativer Text darunter)
10px wenn unterhalb von einem Textfeld („Hochladen“)
rechts v. Feld 10px (Bsp. „OK“ bei Home)
Eingabefeld oberhalb 11px (nur bei 0.0. Home, PLZ EIngabefeld), sonst greifen
zwischendrin die Regeln von H1, H2 usw.)
4px von einem Feld zum nächsten
Rahmen (Auslands- oberhalb 20px
tarife, Stromquellen, unterhalb 30px
Kontakt, Freunde be-
geistern, Ansprechp.)
Rahmen (PLZ) oberhalb wenn H1 dann 18px, sonst 20px
unterhalb Abhängig von darunterstehendem Element
Upload-Box & oberhalb 20px
Infotext oberhalb Abstand von H1, 18px (siehe zum Vgl. alle anderen Abstän-
de in diesem Dokument (H1 immer 18px, deshalb hier auch
keine Ausnahme)
Radiobuttons und Auf- links bzw. rechts 4px
klappbuttons
Checkboxen rechts 4px
14px (Abstand Text, gemessen von Zeilenunterkante zu
Zeilenoberkante)
Seite 49

50. CSS-Dateien
Die CSS-Dateien dienen der Struk-
turierung und dem Aufbau der Seite.
Darin sind fast alle Angaben, welche
in diesem Dokument niedergeschrie-
ben wurden, verankert und können
von den einzelnen Webbrowsern in-
terpretiert werden.
Zur besseren Übersichtlichkeit
wurden die Dokumente nochmals Grundgerüst Contentbereich Kalender Eve
unterteilt in das Themengebiet; Logo, PK-GK Weiche, Haupt- Tabellen, Preisbox, Teaser, > epoch_styles.css > eve.css
Grundgerüst, Contentbereich, Formu- Navigation, Meta-Navigation, PLZ Suche, FAQ, Presse, Pro-
lare, Druckversionen, diverse Layer Content-Navigation, Seitenras- zessnavigation, Inhalt ein- oder
und spezielle Anpassungen für Web- ter, Kontaktlayer zweispaltig, Infolayer, Flash-
browser. > default.css bühne.
> main.css
Formulare Anpassung, Webbrowser Druckversion
> formblock.css Internet Explorer 6 Änderungen für Druckansicht
> ie6.css (z.B. Logo s/w, Logo oben
rechts, Kontaktbox usw.)
Internet Explorer 5.5 > print.css
> ie55.css
Internet Explorer
> ie.css
Seite 50

51. Eve.
Seite 51

52. 302
Eve 12 6
4
Eve erscheint in einer fest definierten max. 302x161
10
Fenstergröße (maximal 116 Zeichen,
4-zeilig). Sobald der Nutzer mit Eve in
Kontakt tritt, passt sich die Fenster- 161
größe dynamisch bis hin zu einer fest
definierten maximalen Größe an den Mindestabstand zum min.
Umfang der Antwort an. Bisher gibt 8 Eingabefeld und 180x93
es 5 unterschiedliche Zustände bzw. Scrollbalken 5px.
Größen, die das Fenster annehmen
kann. Die fest definierte maximale
Fenstergröße enthält maximal 290
Zeichen. Für den Fall, dass die Texte
länger als 290 Zeichen sind, kommt
Das Ausgabefenster von Eve paßt sich
ein Scrollbalken zum Einsatz. Posi- stufenlos an die Textmenge an.
tionierung von Eve wird im Kapitel
Struktur & Seitentypen behandelt.
Funktionselemente
Ausgangsgröße, bis 116Zei- Großes Fenster, maximale Sprechblase verkleinern auf Minimalansicht – kleines
chen und max. 4 Zeilen. Größe. 290 Zeichen bei 7 Zei- Mindestmaß. Fenster mit fixer Größe, bei
len. Ab 290 Zeichen und mehr Minimalansicht mit Scroll-
erscheint ein Scrollbalken. balken (erscheint nur nach
Sowohl mit den beiden Pfeilen Verkleinerung).
als auch mit dem „schwarzen
Knopf“ kann der Text gescrollt
werden.
Seite 52