1                VORWORT

                                                                                                ...
VORWORT

                                           ONLINE STYLEGUIDE . VERSION 1.0 // © 2005 NEUE DIGITALE GMBH //   SEIT...
1                             INHALTSVERZEICHNIS

                                                                        ...
2.1                 STRATEGISCHER ANSATZ
                    DESIGNPRINZIPIEN
                                            ...
2.1   STRATEGISCHER ANSATZ
      DESIGNPRINZIPIEN
                                                                        ...
2.2                STRATEGISCHER ANSATZ
                   DIFFERENZIERUNG NACH SEITENTYPEN
                              ...
2.3                STRATEGISCHER ANSATZ
                   DIFFERENZIERUNG NACH NUTZERTYPEN
                              ...
3.1                DESIGNGRUNDLAGEN
                   FARBEN
                                                            ...
3.2                  DESIGNGRUNDLAGEN
                     TYPOGRAFIE
                                                    ...
3.2                DESIGNGRUNDLAGEN
                   TYPOGRAFIE
                                      ONLINE STYLEGUIDE ...
3.2                  DESIGNGRUNDLAGEN
                     TYPOGRAFIE
                                        ONLINE STYLE...
3.3                  DESIGNGRUNDLAGEN
                     FOTOGRAFIE
                                                    ...
3.3                DESIGNGRUNDLAGEN
                   FOTOGRAFIE, FLUG & REISE
                                          ...
3.3                DESIGNGRUNDLAGEN
                   FOTOGRAFIE, BANNER & TEASER
                                       ...
3.4                 DESIGNGRUNDLAGEN
                    ILLUSTRATIONEN
                                                  ...
3.4                DESIGNGRUNDLAGEN
                   ILLUSTRATIONEN
                                                    ...
3.4                 DESIGNGRUNDLAGEN
                    ILLUSTRATIONEN
                                                  ...
3.4             DESIGNGRUNDLAGEN
                ILLUSTRATIONEN
                                   ONLINE STYLEGUIDE . VER...
3.5                 DESIGNGRUNDLAGEN
                    ICONS
                                                          O...
4.1               NAVIGATIONPRINZIP
                  NAVIGATIONSELEMENTE
                                                ...
4.2                 NAVIGATIONPRINZIP
                    GLOBALE NAVIGATION
                                             ...
4.3                 NAVIGATIONPRINZIP
                    META & FOOTER NAVIGATION
                                       ...
4.4               NAVIGATIONPRINZIP
                  CONTENTNAVIGATION
                                                  ...
4.5                 NAVIGATIONPRINZIP
                    CONTENTNAVIGATION
                                              ...
5.1.1               LAYOUTELEMENTE
                    INTERAKTIONSELEMENTE, LINKS
                                       ...
5.1.2               LAYOUTELEMENTE
                    INTERAKTIONSELEMENTE, TEASERPFEILE
                                ...
5.1.3                LAYOUTELEMENTE
                     INTERAKTIONSELEMENTE, BUTTONS
                                   ...
5.2.1              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, THEMEN-HEADER
                         ...
5.2.2              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, TEXT & LISTEN
                         ...
5.2.3             LAYOUTELEMENTE
                  ELEMENTE DES CONTENTBEREICHS, MODULHEADER
                             ...
5.2.4             LAYOUTELEMENTE
                  ELEMENTE DES CONTENTBEREICHS, TABELLEN
                                ...
5.2.5            LAYOUTELEMENTE
                 ELEMENTE DES CONTENTBEREICHS, FORMULARE
                                 ...
5.2.5              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, FORMULARE
                             ...
5.2.6              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, KARTEN
                                ...
5.2.7              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, TEASER
                                ...
5.2.8              LAYOUTELEMENTE
                   ELEMENTE DES CONTENTBEREICHS, INFOMODULE
                            ...
5.3.1              LAYOUTELEMENTE
                   ELEMENTE DER SEITENSPALTE, TEASER
                                   ...
5.3.2               LAYOUTELEMENTE
                    ELEMENTE DER SEITENSPALTE, BANNER
                                 ...
5.3.3               LAYOUTELEMENTE
                    ELEMENTE DER SEITENSPALTE, INFOBOXEN
                              ...
5.3.4              LAYOUTELEMENTE
                   ELEMENTE DER SEITENSPALTE, RELATED LINKS (LINKS ZUM THEMA)
          ...
5.3.5            LAYOUTELEMENTE
                 LAYOUTELEMENTE DER SEITENSPALTE, TOOLBOXEN
                              ...
5.4                LAYOUTELEMENTE
                   LAYOUT-RASTER
                                                       ...
6.1              STRUKTUR- UND SEITENTYPEN
                 SITEMAP
                                                      ...
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Digital Branding for an Airline
Nächste SlideShare
Wird geladen in …5
×

Digital Branding for an Airline

1.376 Aufrufe

Veröffentlicht am

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.376
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Digital Branding for an Airline

  1. 1. 1 VORWORT ONLINE STYLEGUIDE . VERSION 1.0 // © 2005 NEUE DIGITALE GMBH // SEITE 1/50 1 Inhaltsverzeichnis 6 Struktur und Seitentypen 2 Strategischer Ansatz 6.1 Sitemap 2.1 Designprinzipien 6.2 Basistemplates 2.2 Differenzierung nach Seitentypen 7 Beispielseiten 3 Designgrundlagen 7.1 Home 3.1 Farben 7.2 Fluginfos 3.2 Typographie 7.3 Reiseziele 3.3 Bilder 7.4 E-Specials 3.4 Illustrationen 7.5 Service- / Hilfe & Kontakt-Seiten, 3.5 Icons My Germanwings ONLINE STYLEGUIDE 4 Navigationsprinzip 4.1 Globale Navigation 4.2 Meta & Footer Navigation 7.6 Popups 7.7 Newsletter 7.8 Buchungsseiten Oktober 2005 4.3 Navigationselemente im Contentbereich 7.9 Unternehmensseiten 4.3.1 Buchungsschritte 7.10 Partnerangebote 4.3.2 Teaserlisten 8 Technische Anforderungen 4.3.3 Reiter 8.1 Bildschirmauflösung 5 Layoutelemente 8.2 Browser Versionen 5.1 Interaktionselemente 8.3 Flash Versionen und Alternativen 5.1.1 Links 5.1.2 Buttons 5.2 Layoutelemente des Contentbereichs 5.2.1 (Themen-) Header 5.2.2 Text 5.2.3 Listenelemente 5.2.4 Modulheader 5.2.5 Tabellen 5.2.6 Formulare 5.2.7 Karten 5.2.8 Teaser im Contentbereich 5.2.9 Animationen 5.3 Layoutelemente der Seitenspalten 5.3.1 Teaser in der Seitenspalte 5.3.2 Banner 5.3.3 Related Links (Links zum Thema) 5.3.4 Toolboxen 5.3.5 Partnerangebote Neue Digitale GmbH | Falkstraße 5 | 60487 Frankfurt am Main 5.4 Layout-Raster
  2. 2. VORWORT ONLINE STYLEGUIDE . VERSION 1.0 // © 2005 NEUE DIGITALE GMBH // SEITE 2/50 Dieser Styleguide dient seit dem Relaunch im August effektiv im Web kommuniziert wird, um eine positive 2005 als Leitfaden für die Germanwings Website. Markenwahrnehmung und den Wiedererkennungs- Der Styleguide dokumentiert die visuellen Design- effekt von Germanwings zu steigern. Der Styleguide richtlinien der Website und beschreibt detailliert richtet sich an Content Manager, Entwickler und den Einsatz grundlegender Navigations-, Interakti- Designer sowie an andere Agenturen und Partner, die ons- und Layoutelemente. Er gewährleistet, dass die am Design, der Implementierung und der Pflege der Markenidentität von Germanwings konsistent und Germanwings Website beteiligt sind.
  3. 3. 1 INHALTSVERZEICHNIS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 3/55 1 Inhaltsverzeichnis ................................................................. 3 6 Struktur und Seitentypen 2 Strategischer Ansatz 6.1 Sitemap ........................................................................... 43 2.1 Designprinzipien .............................................................. 4 6.2 Basistemplates ............................................................. 44 2.2 Differenzierung nach Seitentypen ............................... 6 7 Beispielseiten 2.3 Differenzierung nach Nutzertypen .............................. 7 7.1 Home ............................................................................. 45 3 Designgrundlagen 7.2 Fluginformationen ....................................................... 46 3.1 Farben ............................................................................... 8 7.3 Reiseziele ........................................................................ 47 3.2 Typografie ........................................................................ 9 7.4 E-Specials ...................................................................... 48 3.3 Fotografie ....................................................................... 12 7.5 Service / Hilfe & Kontakt, 3.4 Illustrationen ................................................................. 15 My Germanwings ......................................................... 49 3.5 Icons ............................................................................. 19 7.6 Buchung .......................................................................... 50 4 Navigationsprinzip 7.7 Unternehmen ................................................................ 51 4.1 Navigationselemente ................................................... 20 7.8 Partnerseiten ................................................................. 52 4.2 Globale Navigation ....................................................... 21 7.9 Newsletter ..................................................................... 53 4.2 Meta & Footer Navigation ......................................... 22 8 Technische Anforderungen .............................................. 54 4.3 Contentnavigation ........................................................ 23 9 Kontaktinformationen ....................................................... 55 5 Layoutelemente 5.1 Interaktionselemente 5.1.1 Links ................................................................... 25 5.1.2 Teaserpfeile ....................................................... 26 5.1.3 Buttons .............................................................. 27 5.2 Elemente des Contentbereichs 5.2.1 Themen-Header .............................................. 28 5.2.2 Text & Listen ................................................... 29 5.2.3 Modulheader .................................................... 30 5.2.4 Tabellen ............................................................. 31 5.2.5 Formulare ......................................................... 32 5.2.6 Karten ............................................................... 34 5.2.7 Teaser im Contentbereich .............................. 35 5.2.8 Infomodule ....................................................... 36 5.3 Elemente der Seitenspalten 5.3.1 Teaser in der Seitenspalte .............................. 37 5.3.2 Banner .............................................................. 38 5.3.3 Infoboxen ......................................................... 39 5.3.4 Related Links (Links zum Thema) ................ 40 5.3.5 Toolboxen ......................................................... 41 5.4 Layout-Raster ............................................................... 42
  4. 4. 2.1 STRATEGISCHER ANSATZ DESIGNPRINZIPIEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 4/55 DESIGNSTRATEGIE ZIEL DESIGN-LÖSUNG Die Markenpersönlichkeit von Doppelte Stärke: hohes Quali- - gleichwertige Kommunikation Germanwings spiegelt sich im tätsbewußtsein und Preisfüh- von „fly high“ und „pay low“ Onlineauftritt visuell wieder. Die rerschaft durch ausgewogene Gewichtung Werteattribute, die Germanwings von informativen, serviceorien- für sich definiert hat, sind auf der tierten Seiten und preisaggressi- Website erkennbar und adäquat ven, werblichen Seiten umgesetzt. Germanwings ist: Professionell – zielstrebig – zuverlässig – ver- bindlich – konsequent – energisch Einheitliches Markenerschei- - Einsatz der Hausfarben: Brom- – effizient – jung – spontan. nungsbild (on- und offline), beer, Gelb und Grau. Gleichzeitig Widerspiegelung der Marken- hoher Weißanteil im Design Der Markenclaim „Fly high – pay werte und Differenzierung vom ohne dabei klar identifizierbare low“, beste Qualität zum güns- Wettbewerb Brandelemente aufzugeben tigsten Preis, wird erfolgreich - einheitliche Verwendung von im Web fortgeführt und weiter Schriften ausgebaut und leitet zu folgender - Aufgreifen bekannter visueller Designstrategie über: Elemente der Offlinekampagnen - Markenkonformer Illustrati- onsstil, der dem Design Eigen- ständigkeit und eine lebendige, emotionale Komponente gibt Differenzierte Ansprache von - prozessorientiertes Design für Schnellbuchern, Schnäppchenjä- Schnellbucher: effiziente Flugsu- gern und Ideenstöberern. che & Buchung durch klare Navi- gationsstruktur und ein visuelles Leitsystem (Piktogramme) - preisorientierte, werbliche Ele- mente für Schnäppchenjäger: Störer, Teaser & Call-to-Action- Elemente, die zu Preisaktionen und E-Specials führen - emotionale Ansprache für Ide- enstöberer: Inspirierende und emotionale Reisewelt durch Ein- satz von Fotos und Karten
  5. 5. 2.1 STRATEGISCHER ANSATZ DESIGNPRINZIPIEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 5/55 Designstrategie Ziel Design-Lösung Benutzerfreundliches Design - klassischer, einfacher Aufbau der Seite – Zweiteilung in Header & Content-Bereich (linke, mittlere und rechte Spalte) - klare Navigationsstruktur und konsistentes Grundraster - Unterstützung der Nutzerauf- gaben durch ein haptisches und intuitives Leitsystem (visuelle Kennzeichnung von Funktionali- täten & Interaktionselementen) - optimierte Lesbarkeit von Schrift durch Einsatz der Schrift Verda- na - inhaltliche Verbindung von Bild & Text Effizientes Contentmanagement - modulare Gestaltung, Skalier- barkeit, leichte Pflege und Frei- raum für tagesaktuelle Aktionen
  6. 6. 2.2 STRATEGISCHER ANSATZ DIFFERENZIERUNG NACH SEITENTYPEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 6/55 Die Markenziele Service & Si- fien und Illustrationen verleihen cherheit, Infos & Ideen und den Informations- und Ideensei- Preisführerschaft, finden in den ten Emotionalität. Der Einsatz von verschiedenen Bereichen der leuchtendem Gelb und Störerele- Germanwings Website eine unter- menten bildet den visuellen Fokus schiedlich starke Gewichtung. auf den preisbetonten Seiten. Service- und sicherheitsorien- tierte Seiten vermitteln durch ein klares, übersichtliches Design Seriösität und Vertrauen. Fotogra- SICSERV H E I CE RH & E-Specials EI T Unternehmen INF OS & Themenspecial I DE Reiseziele EN Buchung Fluginfos PRE My Germanwings IS Service- Hilfe & Kontakt
  7. 7. 2.3 STRATEGISCHER ANSATZ DIFFERENZIERUNG NACH NUTZERTYPEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 7/55 Die folgende Tabelle demonstriert, wie auf Seite geführt, wobei er kontrolliert auf Ange- effizientesten) und emotional (wie verkaufe ich unterschiedliche Art & Weise die drei Nutzer- bote (nach Interessen geordnete) aufmerksam dabei am intelligentesten, ansprechendsten typen von Germanwings mit bestimmten gra- gemacht werden soll. Dabei ist nichts zufällig, etc.) zugleich. fischen Elementen angesprochen werden. Der schon gar nicht das Design. Das Design ist ra- Besucher wird sozusagen bewußt durch die tional (wie leite ich die Besucher der Seite am Nutzererwartung Designsprache Schnellbucher: REISEZIELE, STÄDTE - Effizient - Zuverlässig Paris Icons Themenheader (Seitenbereichskennung) Schnäppchenjäger: - Preisorientiert - Zielstrebig - Spontan Partnerstörer Preisaggressive callouts (immer auf gelb, oder dezent im Hintergrund als „Stempel“). Illustrationen begleiten die Preisaktionen Ideenstöberer: - Spontan - Inspirierend - Vielfältig llustration Redaktioneller callout Interaktive Karten Fotografie
  8. 8. 3.1 DESIGNGRUNDLAGEN FARBEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 8/55 Primärfarben Die Germanwings Unternehmens- farben, ein kräftiger Brombeerton, und ein leuchtendes Gelb, bestim- men das Design des Onlineauf- tritts. brombeer gelb grau Der Brombeer-Farbton auf wei- RGB 109/0/58 RGB 255/236 RGB 231/231/231 ßem Hintergrund bildet den visu- Web #76003D Web #FFEC00 Web #E7E7E7 ellen Fokus in der Farbgebung. Gelb und ein kühles Grau werden In Gebrauch für: In Gebrauch für: In Gebrauch für: als Akzentfarben eingesetzt. • Brand • Brand • Karten • Header • Störer • Hintergrund • Text • Text • Modulbalken im Unterneh- • Buttons • Buttons mensbereich • Links • Karten • Teaserpfeile im Unternehmens- • Hinweise bereich Sekundärfarben Sekundärfarben sollen dem Desig- ner zur Erweiterung des Kontrast- umfangs dienlich sein. dunkelgrau hellgrau weiß RGB 213/213/213 RGB 242/242/242 RGB 255/255/255 Web #D5D5D5 Web #F2F2F2 Web #FFFFFF In Gebrauch für: In Gebrauch für: In Gebrauch für: • Brand • Hintergrund • Hintergrund • Text • Modulbalken im Unterneh- • grafische Elemente mensbereich • Navigation
  9. 9. 3.2 DESIGNGRUNDLAGEN TYPOGRAFIE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 9/55 Die einheitliche Verwendung von Germanwings Website nur die Schriften ist einer der wichtigsten Haussschrift FF Bliss und die Sys- Aspekte für einen konsistenten- temschrift Verdana zu verwenden. Auftritt. Deshalb sind für die FF Bliss (Corporate Font) ABCDEFGHIJKLMNOPQRSTUVMXYZ ABCDEFGHIJKLMNOPQRSTUVMXYZ Die FF Bliss zeichnet sich durch Klarheit, Modernität sowie sehr abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz gute Lesbarkeit aus, selbst bei der Verwendung von Kapitalen. €1234567890ß;.!„“%&() €1234567890ß;.!„“%&() FF Bliss 2 Light FF Bliss 2 Bold Verdana ABCDEFGHIJKLMNOPQRSTUVMXYZ ABCDEFGHIJKLMNOPQRSTUVMXYZ Die Verdana ist ebenfalls eine se- rifenlosen Schrift, die speziell für abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz den Bildschirm entwickelt wurde und auch bei kleinen Schriftgrö- €1234567890ß;.!„“%&() €1234567890ß;.!„“%&() ßen eine optimale Lesbarkeit bietet. Regular Bold
  10. 10. 3.2 DESIGNGRUNDLAGEN TYPOGRAFIE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 10/55 Anwendungsbeispiele Navigation, 1. Level FF Bliss (Corporate Font) Die Bliss kommt zum Einsatz, Schrift „Bliss 2“ bold, wenn es darum geht Inhalte werb- 13 pt lich und plakativ darzustellen. Sie ist wichtiger Baustein des visuel- len Erscheinungsbildes. Angaben zu den Schrifttypen Themen-Header (wenn und Größen finden Sie bei der keine internationalen Beschreibung der einzelnen Mo- Zeichen verfügbar sind, dulelemente. kann auf die Verdana zurückgegriffen werden) Flash-Anwendungen, wie z.B. interaktive Karten, Banner, Teaser (auch Preisaktion), Themen- Header Germanwings-Teaser Germanwings-Banner Schrift „Bliss 2“ in Kapi- tal, Größe variiert nach Buschstabenanzahl des längsten Wortes
  11. 11. 3.2 DESIGNGRUNDLAGEN TYPOGRAFIE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 11/55 Anwendungsbeispiele Headlines, Subheadlines, Verdana Copytext Ihr Einsatz ist so vielfältig, wie die Inhalte, die Sie repräsentiert: Schrift: Verdana bold E-Specials, Buchungsformulare, 26/40/11 pt Städtenamen in der Flashkarte, Newsticker etc. Partnerspalte (Ad-on- Spalte) Schrift: Verdana bold 12 pt / bold & regular 11 pt Copytext, Listenele- mente Schrift: Verdana regular & bold 11 pt Content-Related-Spalte Formulare
  12. 12. 3.3 DESIGNGRUNDLAGEN FOTOGRAFIE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 12/55 Der Einsatz von Bildern dient der Auflockerung der Informations- menge, der Unterstützung des Corporate Image und der Abbil- dung bestimmter Informationen. Die Philosophie von Germanwings muss sich auch in der Bilderspra- che widerspiegeln: Professionell – zielstrebig – zuver- lässig – verbindlich – konsequent – energisch – effizient – jung – spontan. Die Aussage der Bilder soll leicht, offen, modern und authentisch sein. Vor allem die Bilder der Rei- seziele sollen die Nutzer emotio- nal anprechen und ihnen Lust auf Reisen machen. Die Motivauswahl soll Lebenslust und Freude am Reisen widerspiegeln. Die Ästhetik der Offline-Kampa- 4-Farb-Fotografie gnenmotive (siehe untere Reihe) kommt häufig bei Bannern bzw. bei Germanwings gestützen Pro- motion Aktionen zum Tragen, um eine visuelle Verbindung zu schaf- fen. Jene Art der Fotografie ist eher plakativ und ungewöhnlich in der Wahl ihrer Perspektive. Duplex-Fotografie mit einer Sonderfarbe
  13. 13. 3.3 DESIGNGRUNDLAGEN FOTOGRAFIE, FLUG & REISE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 13/55 Bildkataloge Allgemeine Auswahlkriterien Metropolen/People - Symbole für Metropole in unge- Qualitätiv am hochwertigsten: Formale Kriterien: wöhnlicher Perspektive http://www.zefa.de - flächig - blauer Himmel http://www.gettyimages.com - Gewicht auf helle, leuchtende - wenn Personen mind. 2 http://www.deepol.com Farben (Schwerpunkt auf hell- - keine grauen Betonwände http://www.strandperle.biz blau und gelb http://www.corbis.com - nicht kleinteilig - nicht bunt Günstig: http://www.foto25.com Tonalität „Landschaft“: - erfrischend Freier FotoBlog (Lizenzegbühren - differenzierend Strände/People für öffentliche Nutzung individuell - am Tage - Symbole für Warmwasserziel abklären): - Sonnenschein (Strand, Meer, Palmen et.) http://www.sxc.hu - nicht sachlich - blauer Himmel - nicht nüchtern Sonstige: - nicht technisch http://www.fontshop.de http://www.contentmine.de Tonalität „People“: - ausgelassen - glücklich - zufrieden Beispiele für Suchbegriffe: - natürlich Platz für Text - Entdecken, Erleben Aktionen/People blauer Himmel - alle Altersgruppen (angebots- - Motivelement welches der einfarbiger Hintergrund spezifisch) Aktion entspricht (Skifahren, ausgelassen Reiturlaub, Kletterurlaub usw.) glücklich - blauer Himmel etc.
  14. 14. 3.3 DESIGNGRUNDLAGEN FOTOGRAFIE, BANNER & TEASER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 14/55 Anwendungsbeispiele Banner Die Fotografien werden bei Bannern immer auf flächigem brombeerfarbenen Hintergrund platziert. Anwendungsbeispiele Teaser Schwarz-Weiss-Fotografien in Teasermodulen werden auf Brombeer-Hintergrund einge- setzt. Farbige Bilder findet man aussschließlich im Community- Bereich.. Anwendungsbeispiele content- bezogene Fotografie Abwicklungsorientierte Darstel- lungen auf den Unternehmens- seiten werden mit einem grauem Rahmen und E-Special Angebote Unternehmen E-Specials, Reiseziele mit einem Brombeer-Rahmen versehen.
  15. 15. 3.4 DESIGNGRUNDLAGEN ILLUSTRATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 15/55 Illustrationen werden als Pikto- aus. Die Illustrationen fügen sich gramme in den Themenheadern in das Gesamtbild der Marke, eingesetzt und unterstützen die geben der Website eine emotio- Aussage der jeweiligen Seite pla- nale, lebendige Komponente und kativ. Der Stil zeichnet sich durch prägen den Charakter des Online- einfache, abstrahierte Formen auftritts. Anwendungsbeispiele Themen- Header übergeordnete Seiten Strichstärken: 4 pt (Große Symbole) Anwendungsbeispiele Themen- Header Unterseiten Strichstärken: 1.956 pt (Kleine Symbole) Anwendungsbeispiele Regio- nenkarte (E-Specials) Strichstärken: 1,276 pt (Regionen Symbole)
  16. 16. 3.4 DESIGNGRUNDLAGEN ILLUSTRATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 16/55 Das Onsite-Werbemittel ist ein aktionsgebundenes Creative. Das Leitmotiv ist jeweils an der an der rechen Seite platziert Dieses wird paralell zum Newsletter publiziert und entspricht und ist dem Newslettermotiv angepasst. Die Animation im diesem vom Leitmotiv und deren Inhalten. Inhaltlich werden Werbemittel beschränkt sich auf einen einzelnen Durchlauf alle Kerndaten, wie Thema, Anzahl der Tickets, Ticketbezeich- um nicht von den USPs abzulenken. Der Hintergrund des Crea- nung, Ticketpreis sowie Buchungs- und Reisezeiträume, der tives ist stets in weiß zuhalten, wenn dies das Leitmotiv zuläßt. Aktion kommuniziert. Optipnal darf mit grafischen Elementen Die zu verwendenden Farben sind bordeaux, grau, gelb und gearbeiten werden, die einen zusätzlichen USP beinhalten / weiß, wobei die schrift stets in bordeaux gehalten ist. nähere Informationen zur Aktion geben, sowie Call-to-Action Als Schriftarten werden jeweis Regular und Bold Bliss-Fonts Elemente (Buttons, etc.). Das hauptaugenmerk jeder Aktion verwendet (siehe Beispiele). Die Gewichtung von Leitmotiv liegt auf der Ticketanzahl sowie dem Ticketpreis und sind sollte in etwa 50:50 sein. Auf keinen Fall darf das Leitmotiv ei- daher als größßtes visuelles Element im Werbemittel zu be- nen größeren Anteil am Werbemittel haben als die Kerndaten handeln. der Aktion. (Text: Mike Gerschwitz) Anwendungsbeispiele Banner und Preisaktionen Linie: 2 px (#76003D) 273 592 Anwendungsbeispiele Regio- nenkarte (E-Specials)
  17. 17. 3.4 DESIGNGRUNDLAGEN ILLUSTRATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 17/55 Als Leitmotiv werden in der Regel „HeyDee“ und „Ken“ ver- im Creative. Dieser wird mit einen Sternchen hinter dem Preis wendet. Es besteht jedoch die Möglichkeit auf das Leitmotiv gekennzeichnet und je nach Anlaß mit den Worten „ab“ oder zu verzichten und rein textlich zu arbeiten. In diesem Fall wird „für nur“ voranstehend plakatiert. Die Subline unter dem Cre- der Flugpreis im ersten Frame kommuniziert. Die Zahl der zu ative bezieht sich auf das Sternchen und kann ein- oder zwei- buchenden Flugtickets ist der Main-USP des Creatives. Die zeilig geschrieben werden. Da es sich hier nur um einen Subline bezeichnet stets das Motto der Aktion und steht unter Hinweis auf den Flugpreis handelt, ist dieser stets am kleinsten der Anzahl der Tickets. zu schreiben und maximal auf die Breite des Preises zu skalie- Die Flugziele stehen im Werbemittel an erster Stelle, sollte ren. Buchungs- und Reisezeitraum haben jeweils die gleiche es keine einzelnen Flugziele zur jeweiligen Aktion geben wird Schriftgröße, wobei die Headlines Bold und und die zeitlichen „Alle Ziele Alle Strecken“ in zweizeiliger Form gewählt. Der Daten un Regular. (Text: Mike Gerschwitz) Flugpreis ist zentrales Element und nutzt den größten Raum Anwendungsbeispiele Banner und Preisaktionen Linie: 3 px (#76003D) 237 237 Weitere Beispiele für das Leitmotiv Animation Frame 01: Leitmotiv & Preis Frame 02: Ziele & Preise Frame 03: Buchungs-, Flugdaten
  18. 18. 3.4 DESIGNGRUNDLAGEN ILLUSTRATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 18/55 Anwendungsbeispiele Banner und Preisaktionen
  19. 19. 3.5 DESIGNGRUNDLAGEN ICONS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 19/55 Icons Icons weisen auf funktionale 29 Elemente der Website hin und sollen von den Benutzern intuitiv 31 verstanden werden. Die Iconspra- che ist klar, reduziert und anspre- Linie: 1 px chend. Anwendungsbeispiele
  20. 20. 4.1 NAVIGATIONPRINZIP NAVIGATIONSELEMENTE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 20/55 Die Navigationsstruktur der Ger- ist intuitiv und leicht zu bedienen. manwings Website besteht aus Sie ist kompakt, transparent und vier Basiselementen: Der Globalen klar gegliedert und eröffnet dem Navigation, der Meta- und Footer- Nutzer einen schnellen Überblick navigation sowie der Contentna- über die unterschiedlichen Menü- vigation. Die Navigationsstruktur punkte. Globale & Meta und Footer Navigation Länderauswahl steht nur auf der Startseite zur Verfügung Meta Navigation Globale Navigation (1st Level & 2nd Level) beinhaltet die jeweiligen Unterpunk- te der Hauptseiten Footer Navigation mit Druckfunktion
  21. 21. 4.2 NAVIGATIONPRINZIP GLOBALE NAVIGATION ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 21/55 1st Level Navigation Schrift: Bliss Zustände Stil: bold kein Rollover Größe: 14pt Textfarbe: #76003D Hintergrund: #F2F2F2 bzw. #D5D5D5 Passiv Rollover Aktiv 2nd Level Navigation Schrift: Verdana Zustände Stil: regular/bold Größe: 11pt Passiv Rollover Aktiv Textfarbe: #76003D bzw. #000000 Hintergrund: #F2F2F2 Darstellung & Abstände 22 16 18 19 11 27 20 34 22
  22. 22. 4.3 NAVIGATIONPRINZIP META & FOOTER NAVIGATION ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 22/55 Meta Navigation Schrift: Verdana Zustände Stil: regular/bold Größe: 10pt Passiv Rollover Aktiv Textfarbe: #FFEC00 bzw. #FFFFFF Hintergrund: #76003D Footer Navigation Schrift: Verdana Zustände Stil: regular/bold Größe: 10pt Passiv Rollover Aktiv Textfarbe: #FFEC00 bzw. #FFFFFF Hintergrund: #76003D Footer & Meta Navigation Darstellung & Abstände 4 24 22 Linie: 1 px
  23. 23. 4.4 NAVIGATIONPRINZIP CONTENTNAVIGATION ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 23/55 Schrittweiser Buchungsprozess Die grafische Übersicht über den Buchungsablauf schafft beim Nutzer Vertrauen und vermittelt Sicherheit. Dem Nutzer wird klar angezeigt, an welchem Punkt der Bereits bearbeitete Prozessschritte ‹‹ ›› Noch zu bearbeitende Schritte Buchung er sich gerade befindet und welche Schritte er noch aus- führen muss, bevor die Buchung abgeschlossen ist. Schrift: Bliss 2 Schrift: Verdana Stil: bold Stil: regular Größe: 30/28pt Größe: 11pt Textfarbe: #DDBFCE bzw. Textfarbe: #DDBFCE bzw. #76003D #76003D Hintergrund: #76003D bzw. Hintergrund: #76003D bzw. #D5D5D5 #D5D5D5 Teaserlisten Passiv | Aktiv 23 8 Aktiv | Aktiv 8 Linie: 2 px Schrift: Verdana Stil: bold Größe: 11pt Textfarbe: #FFEC00 bzw. #D5D5D5 Hintergrund: #FFFFFF
  24. 24. 4.5 NAVIGATIONPRINZIP CONTENTNAVIGATION ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 24/55 Reiternavigation, Formulare Schrift: Verdana Stil: bold „Auswahl A“ Größe: 11pt Textfarbe: #FFEC00 bzw. #76003D Hintergrund: #76003D bzw. 24 #D5D5D5 „Auswahl B“ Linie: 2 px Linie: 1 px Reiternavigation, Hero-Modul Ansicht „Flugstrecken“ Ansicht „Preisaktion“
  25. 25. 5.1.1 LAYOUTELEMENTE INTERAKTIONSELEMENTE, LINKS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 25/55 Links werden verwendet, um auf verstanden, die über den „Back“- eine andere Seite zu verweisen. Button des Browsers wieder rück- Das Klicken eines Links wird von gängig gemacht werden kann. den Nutzern als eine Aktion Passiv Rollover Links im Copytext Schrift: Verdana Stil: regular/bold Größe: 11pt Textfarbe: #76003D bzw. #000000 Call-to-Action Links Schrift: Bliss 2 Stil: bold Größe: 20pt Textfarbe: #76003D bzw. #FFEC00 Anker im Text Schrift: Verdana Stil: regular/bold Größe: 11pt Textfarbe: #76003D bzw. #000000
  26. 26. 5.1.2 LAYOUTELEMENTE INTERAKTIONSELEMENTE, TEASERPFEILE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 26/55 Teaserpfeile werden in Modulen Pfeil-Typen Merkmale Anwendung des Contentbereichs und der Sei- tenspalte als „grafisch-plakative“ Der Brombeer-Teaserpfeil mit gel- Hinweise für einen Link einge- bem Hintergrund ist vorwiegend setzt. Sie setzen sich durch ihre für Links vorgesehen, die auf An- Größe und Farbe von normalen 28 gebote verweisen. Textlinks ab. Die drei Farbvari- anten zeigen dem Benutzer der 28 Pfeilfarbe: #76003D Seite vorab an, dass es sich um die Hintergrund: #FFEC00 Auszeichnung unterschiedlicher Inhalte handelt, die er bei Klick zu erwarten hat – siehe Tabelle. Der gelbe Teaserpfeil auf Brom- beer Hintergrund verweist bzw. leitet auf die Partnerangebote. Pfeilfarbe: #FFEC00 Hintergrund: #76003D Der Brombeer Pfeil auf grauem Hintergrund hat einen informati- ven, neutralen Charakter. Er ver- weist auf Informationen über das Unternehmen, Hilfe & Kontakt Seiten etc. Pfeilfarbe: #76003D Hintergrund: #E7E7E7
  27. 27. 5.1.3 LAYOUTELEMENTE INTERAKTIONSELEMENTE, BUTTONS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 27/55 Buttons Schrift: Verdana Sie werden verwendet, wenn bei Stil: bold Klick ein Prozess oder eine Formu- Größe: 11pt laraktion eingeleitet wird. Dies gilt Passiv Rollover Click Textfarbe: #76003D auch für Dropdown-Menüs und Suchformulare. Ein konsistenter Einsatz von Links und Buttons hilft dem Nutzer dabei zwischen „Safe clicks“ (die rückgängig zu machen sind) und definitiven Aktionen zu unterscheiden. Anwendungsbeispiel (Formular) Buttons sollten sich durch Einsatz grafischer Mittel (Trennlinie oder andere Hintergrundfarbe) vom übrigen Inhalt leicht absetzen.
  28. 28. 5.2.1 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, THEMEN-HEADER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 28/55 Die Internetpräsenz von German- präsentieren seriös die Leistungen wings wird von einer themen- des Unternehmens. gebundenen Piktogrammwelt Die Themen-Header der Reise- begleitet. Die Themen-Header ziele-Seiten setzen die Reiseziele, dienen der Bereichskennung der die von Germanwings angeflogen einzelnen Seiten und unterstützen werden, intelligent, informativ- die Ansprüche der jeweiligen Seite unterhaltsam in Szene. plakativ. Die Themen-Header der Service- und Unternehmensseiten Themen-Header, übergeordne- Schrift: Bliss 2 te Seiten Stil: light / bold 135 Größe: 30pt Strichstärke: 4 px Farbe: #76003D 813 220 Themen-Header, untergeordne- te Seiten Schrift: Bliss 2 90 Stil: light / bold Größe: 30pt Strichstärke: 4 px 813 220 Farbe: #76003D
  29. 29. 5.2.2 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, TEXT & LISTEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 29/55 Headline & Promoheadline Schrift: Verdana und Subheadline Stil: bold Größe: 24 / 40 / 11 pt Farbe: #76003D Störer-Element Abmessung: 63x63 Pixel Schrift: Bliss Stil: extrabold Größe: 17pt Textbausteine sollten max. über zwei Contentspalten laufen, da Copytext mit Subheadline Schrift: Verdana sonst die Zeilen zu lang werden Stil: bold/regular und die Lesbarkeit beeinträchtigt Größe: 11 pt wird. Za: 14pt Farbe: #76003D Listenelemente dienen dazu, einen Listenelement „Info“ mit Sub- Schrift: Verdana komplexen Content zu struktu- headline Stil: bold/regular rieren und dem Nutzer auf einen Größe: 11 pt Blick zu präsentieren. Za: 14pt Farbe: #76003D Listenelement „Vorteile“ mit Schrift: Verdana Subheadline Stil: bold/regular Größe: 11 pt Farbe: #76003D
  30. 30. 5.2.3 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, MODULHEADER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 30/55 Die Modulheader werden im Sie unterstützen die Horizontale Contentbereich und in den Sei- und dienen als strukturierendes tenspalten zur Hervorhebung der Element. Ihr Aufbau ist immer Subheadlines eingesetzt. zwei- oder dreispaltig. Modulheader Schrift: Verdana Stil: bold Größe: 11 pt Farbe: #FFEC00 Hintergrund: #76003D 12 22 31 7 7 Modulheader im Unterneh- mensbereich Schrift: Verdana Stil: bold Größe: 11 pt Farbe: #76003D Hintergrund: #F2F2F2
  31. 31. 5.2.4 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, TABELLEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 31/55 Tabelle im Contenbereich 22 Schrift: Verdana Tabellen werden dazu eingesetzt 25 Stil: bold (Headlines und komplexen Content, wie z.B. einen 21 Subheadlines) Flugplan, übersichtlich darzu- regular (Copy) stellen. Die Grauschattierungen Größe: 11pt dienen der weiteren Unterteilung Textfarbe: #FFEC00 bzw. zur Auszeichnung von Sub- #76003D headline und Copytext. #E7E7E7 592 Die Tabellenzeilen, die die Über- 7 7 Linie: 2 px (#FFFFFF) schriften enthalten, sind mit einem dunkleren Grauton abge- setzt. Die Zellen werden durch weiße Trennlinien geteilt.
  32. 32. 5.2.5 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, FORMULARE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 32/55 Eingabeformular im Buchungs- Schrift: Verdana prozess Stil: bold (Headline und Subheadline) regular (Copy) Größe: 11pt Textfarbe: #FFEC00 (Head- line) #76003D (Copy) Hintergrund: #F2F2F2 7 7 592 7 Linie: 2 px (#D5D5D5) Linie: 2 px (#FFFFFF) Bestätigungsformular im Bu- Schrift: Verdana chungsprozess Stil: bold (Headline und Subheadline) regular (Copy) Größe: 11pt Textfarbe: #FFEC00 (Head- line) #76003D (Copy) Hintergrund: #F2F2F2 #E7E7E7 (Subhead- line)
  33. 33. 5.2.5 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, FORMULARE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 33/55 Fehlermeldungen Fehlermeldungen erscheinen, wenn der Nutzer inkorrekte Eingaben macht oder Pflichtfelder nicht ausgefüllt wurden. In der Fehlermeldung muss klar formuliert werden, welche Informationen benötigt werden und/oder welches Format erwartet wird.
  34. 34. 5.2.6 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, KARTEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 34/55 Interaktive Flash-Karten Auf der Homepage und der E- Linie: 2 px Specials-Regionenseite sind die (#76003D) Karten in Flash programmiert. Die Karten dienen der Illustration der Flugrouten und der Reisezie- le. Die einzelnen Ziele sind mit 273 den entsprechenden Unterseiten (Reiseziele Städte bzw. Regionen) verlinkt. Die Karten besitzen eine werbliche Funktion, was sich vor allem durch den gelben Hinter- grund ausdrückt. 592 Statische Karten Statische Karten sind in der linken Seitenspalte der Fluginfos Einzel- seiten platziert. Sie besitzen einen informativen Charakter, der sich in dem hohen Grauanteil wider- 220 spiegelt. 202 Flugstrecken (Internationalen-Seiten) Entfernungskarte (Reiseziele)
  35. 35. 5.2.7 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, TEASER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 35/55 Die Teaser im Contentbereich bewerben spezielle zu den entsprechenden Unterseiten. Die Bilder unter- Angebote, Preisaktionen und Gewinnspiele von Ger- streichen visuell die Aussage der textlichen Informa- manwings und den Kooperationspartnern. Sie dienen tion. Sie sollen emotionalisieren und inspirieren. als alternative Subnavigation und führen den Nutzer 5 Teaser „Top Angebote und Schrift: Verdana Aktionen“ Stil: bold (Headline) Die Teaser „Top Angebote und 120 regular (Copy) Aktionen“ sind auf der Home im Größe: 11pt mittleren Contentbereich plat- 188 Textfarbe: #76003D ziert. Die Teaser bestehen aus einer Fotografie mit Störer, einem verlinkten Text, und einem gelben Teaserpfeil. 592 6 188 6 Linie: 2 px (#76003D) Teaser „E-Specials“ Schrift: Verdana Die Teaser „E-Specials“ befinden Stil: bold (Headline) 94 sich auf der Home sowie auf der regular (Copy) E-Specials Übersichtsseite. Sie Größe: 14pt (Headline) setzen sich zusammen aus einer 11pt (Copy) Fotografie, einem verlinkten Text 6 12 28 Textfarbe: #76003D sowie einem gelben Teaserpfeil. 592 197
  36. 36. 5.2.8 LAYOUTELEMENTE ELEMENTE DES CONTENTBEREICHS, INFOMODULE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 36/55 Die Infomodule verlinken zu durch den Einsatz von Bildern das Hauptthemen der Website. Sie Interesse der Nutzer nach mehr dienen als Vorschau für den Inhalt Informationen wecken. der Unterseiten und sollen u.a. Infomodule mit Bild im Un- ternehmensbereich Schrift: Verdana (3-spaltig) Stil: regular (Overline) 120 bold (Headline) regular (Copy) 227 Größe: 10 pt (Overline) 14 pt (Headline) 11 pt (Copy) Textfarbe: #76003D Hintergrund: #FFFFFF 592 6 188 28 6 Linie: 2 px (#D5D5D5) Infomodule Text im Unterneh- mensbereich (3-spaltig) Infomodule Bild (2-spaltig) 80 6 12 28 592 197
  37. 37. 5.3.1 LAYOUTELEMENTE ELEMENTE DER SEITENSPALTE, TEASER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 37/55 Aktionsteaser 22 Schrift: Verdana Linie: 1 px (#FFFFFF) Die Aktionsteaser bewerben spe- Stil: bold (Header) zielle Germanwings-Promo-Aktio- regular (Copy) nen, wie z.B. den Screensaver oder bold (Linkpfeile) Gewinnspiele. Größe: 12pt (Header) Sie bestehen aus drei Bereichen: 11pt (Copy) einem Modulheader, einer Ilus- Textfarbe: #FFEC00 tration mit einem diagonal plat- zierten Textband sowie einem Linie: 1 px (#FFFFFF) Schrift (Grafik): Bliss 2 Textbereich mit gelbem Fließtext Stil: bold auf Brombeer-Hintergrund. Alle Größe: 18pt Teaserbereiche sind mit der Ziel- Gesamthöhe variabel, Textfarbe: #FFEC00 bzw. seite verlinkt. max. 250 px #76003D 7 7 202 Partnerteaser Schrift: Verdana Die Partnerteaser setzen sich aus 59 Stil: bold (Header) drei Hauptelementen zusammen: regular (Copy) einem Kopfteil mit einer brom- bold (Linkpfeile) beerfarbenen Headline auf wei- 57 Größe: 12pt (Header) ßem Hintergrund, einer Fotografie 11pt (Copy) mit dem Logo des Partners sowie Textfarbe: #FFEC00 einem Textbereich mit gelbem Copytext (bzw. einem Listenele- Gesamthöhe variabel, Schrift (Grafik): Bliss 2 ment) auf Brombeer-Hintergrund. max. 250 px Stil: bold Alle Teaserbereiche sind mit der Größe: 18pt 7 7 Zielseite verlinkt. 202 Textfarbe: #76003D
  38. 38. 5.3.2 LAYOUTELEMENTE ELEMENTE DER SEITENSPALTE, BANNER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 38/55 Banner werden in zwei verschie- Abmessungen: denen Formaten vertikal in der rechten Seitenspalte positioniert. Skyscraper: 120x600 Pixel Der Hintergrund der Banner ist Half-size Banner: 134x217 Pixel immer in Brombeer gehalten. Die Schrift (und evtl. Illustrationen) sind gelb.
  39. 39. 5.3.3 LAYOUTELEMENTE ELEMENTE DER SEITENSPALTE, INFOBOXEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 39/55 Infobox 44 Schrift (Grafik): Bliss 2 Die Infoboxen liefern dem Nut- Stil: bold zer zusätzliche Informationen zu Größe: 14pt Aktionen. Sie setzen sich aus zwei Textfarbe: #FFEC00 Hauptelementen zusammen. Ei- nem ein- bzw. zweizeiligen Modul- Schrift: Verdana header (u.U. mit Störerelement) Stil: bold (Header) und einem Textbereich, der das regular (Copy) Listenelement „Info“ enthält. Größe: 11pt (Copy) Textfarbe: #76003D Gesamthöhe variabel, max. 12 Zeilen 7 7 202 Infobox „Vorteile“ Schrift (Grafik): Bliss 2 Mit der Infobox „Vorteile“ werden Stil: bold Vorteile und Besonderheiten von Größe: 14pt 68 Germanwings kurz und übersicht- Textfarbe: #FFEC00 lich herausgestellt. Sie setzen sich aus zwei Hauptelementen zusam- Schrift: Verdana men. Einem ein- bzw. zweizeiligen Stil: bold (Header) Modulheader (u.U. mit einer Foto- regular (Copy) grafie) und einem Textbereich, der Größe: 11pt (Copy) das Listenelement „Info“ enthält. Textfarbe: #76003D Gesamthöhe variabel, max. 12 Zeilen 7 7 202
  40. 40. 5.3.4 LAYOUTELEMENTE ELEMENTE DER SEITENSPALTE, RELATED LINKS (LINKS ZUM THEMA) ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 40/55 Related Links 22 Schrift: Verdana Linie: 1 px (#FFFFFF) Dieses Element soll dem Nutzer 21 Stil: bold Links zum Thema zur Verfügung Größe: 12pt stellen. Die Links führen alle zu Textfarbe: #FFEC00 den Seiten „Hilfe & Kontakt“, die sich in einem zusätzlichen Fenster Linie: 2 px (#FFFFFF) Schrift: Verdana öffnen. Der Nutzer behält seine Stil: bold (Header) eigentlichen Ansicht so im Blick- regular (Copy) feld bzw. im Hintergrund. Größe: 11pt Textfarbe: #76003D Gesamthöhe variabel, max. 12 Zeilen 7 7 202 Related Links im Unterneh- Schrift: Verdana mensbereich 22 Stil: bold (Header) regular (Copy) Größe: 12pt (Header) 11pt (Copy) Textfarbe: #76003D Gesamthöhe variabel, max. 12 Zeilen 8 8 202
  41. 41. 5.3.5 LAYOUTELEMENTE LAYOUTELEMENTE DER SEITENSPALTE, TOOLBOXEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 41/55 Toolbox mit Teasercharakter 22 Schrift: Verdana Stil: bold (Header) Gesamthöhe variabel, regular (Copy) Fließtext max. 2 Zeilen Größe: 12pt (Head) 11pt (Copy) 7 7 Textfarbe: #FFEC00 202 #76003D Toolbox „Sonnensuche“ Schrift: Verdana 22 Stil: bold (Header) regular (Copy) Größe: 12pt (Head) 11pt (Copy) Textfarbe: #FFEC00 #76003D Gesamthöhe variabel, Städtelistung max. 4 Zeilen 7 7 202
  42. 42. 5.4 LAYOUTELEMENTE LAYOUT-RASTER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 42/55 Raster 88 1p 87 1 Das Seitenraster wurde für eine 34 34 Bildschirmauflösung von 72 px op- 17 timiert. Die wichtigsten Seitenin- 23 halte sind in dem Standardformat (14 Zoll Monitore) von 1024x768 px sichtbar. 3 Der klar gegliederte Seitenaufbau 2p 2 4 bietet dem Benutzer schnelle Ori- entierung. Die Homepage besteht aus Hea- der (1), der Content-Related Spal- te (2), dem Content-Bereich (3) Basistemplate „Pop-Up“ und einer Add-on Spalte (4). 22 Die weiteren Seiten bestehen aus Header (1), der Content-Related 202 19 19 134 966 7 7 Spalte (2), dem Content-Bereich (3), einer Add-on Spalte (4) und zusätzlich einem Themen-Header 1 (5), der die Content-Related- Spalte und den Contentbereich übergreift. 90 5 135 Das Pop-Up Fenster besteht aus einem Header, der Bereichsaus- zeichnung, die sich auch in der 3 Linkbezeichnung (die das Pop-Up aufruft) wiedererkennbar machen 4 2 sollte. Bspw. „Sonnensuche“. Die Länge des Fensters sollte 600 PX nicht überschreiten. Das Fenster sollte sich nicht zu aufdringlich verhalten bzw. das Haupfenster komplett abdecken.
  43. 43. 6.1 STRUKTUR- UND SEITENTYPEN SITEMAP ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 43/55 Sitemap Home My Beförderungs- Buchung Fluginfos Service E-Specials Reiseziele Community Unternehmen Shop Germanwings beding. Günstig Was uns Business Flugsuche Flugplan Umbuchung Schlafen Städte bewegt Log-In Datenschutz Travel Gruppen- Flughafen-, Flugpreise Günstig Veranstalt- Flotte & Meine Presse Impressum buchung Infos erleben ungen Sicherheit Buchung Günstig Mein Hilfe & Nutzungs- Gutscheine fahren Aktion Unsere Crew Profil Kontakt hinweise Gepäck Regionen Karriere Umbuchung Newsletter Sitemap Gutschein Meta- Footer- Buchung Gewinnspiele Presse kaufen Navigation Navigation Ansprechpart- Check-In ner Registrierung Zahiung Travelpartner Werben bei An Bord Germanwings Betreut von emusici

×