• Save
Digital Branding for an Airline
Upcoming SlideShare
Loading in...5
×
 

Digital Branding for an Airline

on

  • 832 views

 

Statistics

Views

Total Views
832
Views on SlideShare
831
Embed Views
1

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Digital Branding for an Airline Digital Branding for an Airline Presentation Transcript

  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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.
  • 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)
  • 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)
  • 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
  • 3.4 DESIGNGRUNDLAGEN ILLUSTRATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 18/55 Anwendungsbeispiele Banner und Preisaktionen
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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“
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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.
  • 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)
  • 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.
  • 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)
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 6.2 STRUKTUR- UND SEITENTYPEN BASISTEMPLATES ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 44/55 Basistemplate Contentseiten Basistemplate A ist Grundlage der Home, Basistemplate B bildet die Grundlage aller Contentseiten der Germanwings Website. Die Basis- templates bestimmen den klassischen, einfachen Aufbau der Seiten: eine Dreiteilung in Header, Contentbereich und Fußzeile. Der Contentbereich gliedert sich in drei Spalten: Die linke Spalte enthält Content Related Module; im mittleren Bereich können Contentelemen- te klar und gleichzeitig flexibel angeordnet werden; die rechte Spalte ist für Partnerangebote sowie Banner vorgesehen. Basistemplate B zeichnet sich durch einen Themen-Header aus, der sich über der Content Related Spalte und der mittleren Contentspalte ausstreckt. Basistemplate A, Home Basistemplate B, Contentseiten Basistemplate Popup-Fenster Das Basistemplate für das Popup-Fenster besteht aus einer einfachen Zweiteilung in Header und Contentbereich. Es bietet bei der Strukturie- rung des Contents eine hohe Flexibilität. Popup-Fenster werden nur für funktionalen Zusatzcontent, wie das Sonnensuche-Tool oder die Self-Check-In-Slideshow eingesetzt. Popup- Fenster haben eine einheitliche Breite von 585px. Die Länge der Fenster kann dem Content angepasst werden. Basistemplate „Pop-Up“
  • 7.1 BEISPIELSEITEN HOME ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 45/55 Home Die Homepage bietet den verschiedenen Zielgruppen (Ideenstöberer, Schnäppchenjäger, Schnellbucher) einen gezielten Einstieg. Es werden Flugziele, Angebote und die Möglichkeit der sofortigen Buchung kom- muniziert. In der Content Related Spalte befindet sich die Quick Search-Flug- suche. Die mittlere Contentspalte wird durch das Hero-Modul (Flug- streckenkarte/Preisaktion) dominiert. Darunter befinden sich diverse Teaser für Angebote von Germanwings und der Kooperationspartner. Zusätzlich werden aktuelle Informationen über einen Newsticker kom- muniziert. Home
  • 7.2 BEISPIELSEITEN FLUGINFORMATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 46/55 Fluginformationen, Übersicht Die Fluginformationen-Übersichtsseite bietet einen Einstieg in die Ab- frage des Flugplans und zu den Flughafeninformationen. Die German- wings-Heimatflughäfen werden über bebilderte Infomodule zusätzlich herausgestellt. Die Seite besitzt mit vielen nützlichen Zusatztools, wie z.B. dem Routenplaner in der Content Related Spalte, einen hohen Ser- vice- und Informationswert. Fluginfos, Übersicht Fluginformationen, Unterseite Die Fluginformationen-Unterseiten bieten ausführliche praktische Informationen zu den einzelnen Flughäfen und vereinfachen so die Reiseplanung und Durchführung. In der Content Related Spalte befin- det sich eine statische Umgebungskarte des Flughafens. Der mittlere Contentbereich zeichnet sich durch eine hohe Textmenge aus und erhält dadurch einen informativen und rationalen Charakter. Fluginfos, Unterseite
  • 7.3 BEISPIELSEITEN REISEZIELE ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 47/55 Reiseziele, Übersicht Die Reiseziele-Übersichtsseite spricht mit Bildern und Illustrationen emotional Urlaubsgefühle an und soll die Nutzer über inspirierende Informationen zur Buchung führen. Ideenstöberer können hier über verschiedene Sucheinstiege zu Reise- und Urlaubsideen finden. Weiter unten bietet die Seite Platz für das Bewerben von Aktionen und neuen Germanwings Flugzielen. Reiseziele, Übersicht Reiseziele, Unterseite Die Reiseziele-Unterseiten besitzen durch den Einsatz vieler Bilder einen emotionalen Charakter und durch ausführliche Informationen zum Reiseziel gleichzeitig einen hohen Nutzwert. Der obere Abschnitt des Contentbereichs beinhaltet eine Kurzinformation zum Reiseziel sowie ein typisches Fotomotiv des Urlaubsortes. Darunter befinden sich de- tallierte Informationen zum Urlaubsziel, die den Leser neugierig machen sollen. Reiseziele, Unterseite
  • 7.4 BEISPIELSEITEN E-SPECIALS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 48/55 Die E-Specials-Seiten schaffen durch besondere Preise und Rabatte für Zusatzleistungen Reiseanreize. Zielgruppe sind vor allem die Schnäpp- chenjäger, die am Preis orientiert buchen. E-Specials, Übersicht Im oberen Contentbereich der E-Specials-Übersichtsseite ist ein Modul platziert, das dem Nutzer die Suche in den E-Specials erleichtern soll. Darunter befindet sich eine Liste von E-Specials-Teasern, die einen ge- zielten Einstieg zu den einzelnen Angeboten bietet. E-Special, Übersicht E-Specials, Unterseite Die E-Specials-Unterseite stellt ein Angebot ausführlich dar und leitet zur Buchung des E-Specials und eines passenden Fluges an. Der Einsatz von Störerelementen und Bildern im mittleren Contentbereich soll der emotionalen Ansprache dienen. Wenn es sich um kein Partnerangebot handelt, befindet sich in der unteren Hälfte des Contentbereichs ein Buchungsformular. E-Special, Unterseite
  • 7.5 BEISPIELSEITEN SERVICE- / HILFE & KONTAKT, MY GERMANWINGS ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 49/55 Service, Übersicht Die Service-Übersichtsseite gibt einen schnellen Überblick über Bestim- mungen und Prozesse rund um Buchung und Durchführung des Fluges. Dabei werden in einem einleitenden Absatz Qualitätsmerkmale von Germanwings in den Vordergrund gestellt. Darunter befindet sich eine Liste von Infomodulen, die zu detaillierten Informationen verlinken. Service, Übersicht Service, Unterseite; Hilfe & Kontakt Die Service-Unterseiten bzw. die Hilfe & Kontaktseiten greifen alle Fra- gen rund um Germanwings (Preise und Buchung bis hin zu Sicherheit und Komfort an Bord) auf und stellen den Nutzern ausführliche Infor- mationen und Hilfestellungen bereit. Der Contentbereich besteht aus einem Textmodul und hat einen rein informativen Charakter. Service, Unterseite ; Hilfe & Kontakt My Germanwings Die „My Germanwings“-Home bietet registrierten Kunden je nach Nut- zungsziel drei Einstigesmöglichkeiten in den personalisierten Bereich. Unregistrierte Nutzer können sich für die Komfortbuchung registrieren. Der „My Germanwings“-Bereich ist stark serviceorientiert. My Germanwings
  • 7.6 BEISPIELSEITEN BUCHUNG ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 50/55 Buchung Die Buchungsseiten bieten den Nutzern eine schnelle und einfache Flugsuche und Abwicklung des Buchungsprozesses. Im Bereich des (The- men-) Headers befindet sich die Schritt-für-Schritt-Buchungsleiste. Im Contentbereich sind die Formularfelder platziert. Darunter befindet sich ein Teaser, der auf die Vorteilsangebote hinweist. Buchung
  • 7.7 BEISPIELSEITEN UNTERNEHMEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 51/55 Die Unternehmensseiten vermitteln den Erfolg der Airline und informie- ren über Daten, Fakten und Rahmenbedingungen. Unternehmen, Übersicht Die Unternehmensübersichtsseite bietet im Contentbereich einen Einstieg zu den verschiedenen Themen. In der oberen Zeile werden Infomodule mit Fotografien der Flotte und Crew eingesetzt, um der Unternehmenspräsentation mehr Leben zu verleihen und Vertrauen aufzubauen. Unternehmen, Übersicht Unternehmen, Unterseite Auf den Unternehmens-Unterseiten wird der service- und informati- onsorientierte Stil fortgeführt. Die Seiten vermitteln durch detaillierte Informationen mit contentbezogenen Fotografien Vertrauen in Ger- manwings und tragen zum positiven Image des Unternehmens bei. Unternehmen, Unterseite
  • 7.8 BEISPIELSEITEN PARTNERSEITEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 52/55 Partnerseiten Die Einstiegsseiten der Germanwings-Kooperationspartner werden in die Germanwings-Website integriert. Im oberen Abschnitt des Cont- entbereichs befindet sich ein Formular zur Detailsuche in den entspre- chenden Partnerangeboten. Darunter sind Partnerteaser mit weiteren Angeboten platziert. Die Unterseiten werden in einem einheitlich Germanwings-gebrande- ten externen Fenster geöffnet. Dabei soll die Verbindung zu German- wings ebenso wie die Eigenständigkeit als Partnerseite sichtbar werden. Partner
  • 7.9 BEISPIELSEITEN NEWSLETTER ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 53/55 Newsletter Der Germanwings Newsletter ist ein kundenbindendes Instrument mit aktuellen Angeboten und Informationen. Der Newsletter ist die wichtigste aktuelle Informationsquelle für Ger- manwings-Kunden und ein zusätzliches Darstellungsforum für Koopera- tionspartner. Das Layout orientiert sich an dem der Website. Header Der Header enthält Brandelemente, die Germanwings als Sender identi- fizierbar machen. Die Kunden werden mit einem kurzen Text persönlich begrüßt. Hero-Modul (Preisaktion) Im Hero-Modul wird durch einen emotionalen Text und ein Illustra- tionsmodul plakativ für ein exklusives Angebot geworben. Der Leser wird durch eine prominente Aufforderung zum Klicken auf das Angebot bewegt. E-Specials Die E-Specials werden durch einen Störer, der einen klaren Preisvorteil für den Leser kommuniziert, sowie durch einen »Weiterempfehlen« Link (Send-A-Friend) begleitet. News Hier erhält der Leser aktuelle Informationen zum Unternehmen sowie speziellen Aktionen und Angeboten. Gewinnspiele In diesem Abschnitt des Newsletters wird auf laufende Gewinnspiele hingewiesen. Newsletter
  • 8 TECHNISCHE ANFORDERUNGEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 54/55 Bildschirmauflösung Die Website ist für eine Auflösung von 1024 X 768 Pixel und eine Farbtiefe von 16 bit optimiert. Der Content ist in der oberen linken Ecke des Brow- serfensters fix ausgerichtet und wird nicht dynamisch angepasst. Wenn das Fenster breiter als 1024 Pixel ist, hat der Content immer noch ein Maximum von 1024 Pixel und die freie Fläche neben den Inhalten wird mit weiß aufgefüllt. Browser Versionen Die Inhalte der Germanwings-Website sind in allen gängigen Browsern voll funktionstüchtig. Die fol- gende Liste führt die letzte Version aller gängigen Browser auf, die die Nutzer installiert haben müssen, so dass die Seite richtig funktioniert: Microsoft Internet Explorer (5.5 oder später) Netscape Navigator (7.0 oder später) Firefox (1.0 oder später) Safari (2.0 oder später) Flash Versionen und Alternativen 768 Die Website enthält Macromedia Flash- Elemente. Die Nutzer müssen den Macromedia Flash Player (5.0 oder später) installiert haben. Wenn der Browser nicht auf den geeignten Macro- media Flash Player zurückgreifen kann, werden alter- nativ statische Bilder des Flashfilmes angezeigt.
  • 9 KONTAKTINFORMATIONEN ONLINE STYLEGUIDE . VERSION 1.1 // © 2005 NEUE DIGITALE GMBH // SEITE 55/55 Sie haben Fragen? Wir helfen Ihnen gerne bei der Umsetzung und Anwendung der in diesem Styleguide aufgeführten Regeln. Über eine Kontaktaufnahme freuen sich: NEUE DIGITALE Germanwings GmbH Kreativagentur für digitale Markenführung GmbH Terminalstraße 10 Falkstraße 5 51147 Köln 60487 Frankfurt/Main Internet: http://www.neue-digitale.de Internet: http://www.germanwings.com Ihr Ansprechpartner: Ihre Ansprechpartnerin: Kai Greib Katrin Hock Key Account Management Content Management & E-Commerce Telefon: 069-70403-170 Telefon: 02203-1027-409 Fax: 069-70403-500 Fax: 02203-1027-301 E-Mail: kai.greib@neue-digitale.de E-Mail: katrin.hock@germanwings.com