Digital Branding for Hydro Company

954 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Business
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
954
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Digital Branding for Hydro Company

  1. 1. Yello Strom Webauftritt Verhaltenslogik und Abstände einzelner Module und Elemente der Site. n! ersio Vo rabv
  2. 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. 3. Designgrundlagen. Seite 3
  4. 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. 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. 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. 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. 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. 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. 10. Struktur & Seitentypen. Seite 10
  11. 11. Sitemap Seite 11
  12. 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. 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. 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. 15. Pop-ups Content, Beispiel 2-spaltig Content, Beispiel 1-spaltig Seite 15
  16. 16. Navigation. Seite 16
  17. 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. 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. 19. PK/GK Weiche Verhalten bei Mouseover. Aktiv „PK“ Rollover Aktiv „GK“ Seite 19
  20. 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. 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. 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. 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. 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. 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. 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. 27. Seitenelemente Seite 27
  28. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Beispielseiten & CSS-Dateien. Seite 41
  42. 42. Startseite PK Startseite, Teaser Yello DIN Regular/Bold, 14px, ZA 18px (maximal 4- zeilig) Seite 42
  43. 43. Startseite GK Seite 43
  44. 44. Individuelle Startseite, Template A Seite 44
  45. 45. Contentseiten, Template B Seite 45
  46. 46. Stromauftrag (Formularseite) Modulüberschrift H1 Yello DIN Black, 18px, ZA 21px Seite 46
  47. 47. Pop-up Seite 47
  48. 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. 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. 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. 51. Eve. Seite 51
  52. 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

×