Digital Branding for an Airline

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


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


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

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

DESIGNPRINZIPIEN

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

DIFFERENZIERUNG NACH SEITENTYPEN

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

DIFFERENZIERUNG NACH NUTZERTYPEN

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 Fotograﬁe

3.1 DESIGNGRUNDLAGEN
FARBEN

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

TYPOGRAFIE

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

TYPOGRAFIE

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

TYPOGRAFIE

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

FOTOGRAFIE

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-Fotograﬁe
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-Fotograﬁe mit einer Sonderfarbe

FOTOGRAFIE, FLUG & REISE

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.

FOTOGRAFIE, BANNER & TEASER

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.

ILLUSTRATIONEN

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)

ILLUSTRATIONEN

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)

und Preisaktionen Linie: 2 px
(#76003D)

273

592

Anwendungsbeispiele Regio-
nenkarte (E-Specials)

ILLUSTRATIONEN

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

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

ILLUSTRATIONEN

und Preisaktionen

ICONS

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

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

GLOBALE NAVIGATION

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

META & FOOTER NAVIGATION

Meta Navigation Schrift: Verdana
Größe: 10pt
Passiv Rollover Aktiv Textfarbe: #FFEC00 bzw.
#FFFFFF
Hintergrund: #76003D

Footer Navigation Schrift: Verdana
Größe: 10pt
Passiv Rollover Aktiv Textfarbe: #FFEC00 bzw.
#FFFFFF

Footer & Meta Navigation
Darstellung & Abstände

4
24

22

Linie: 1 px

CONTENTNAVIGATION

Schrittweiser Buchungsprozess
Die graﬁsche Ü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 beﬁndet
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

CONTENTNAVIGATION

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

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
#FFEC00

Anker im Text
Schrift: Verdana
Stil: regular/bold
Größe: 11pt
#000000

INTERAKTIONSELEMENTE, TEASERPFEILE

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

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

INTERAKTIONSELEMENTE, BUTTONS

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.

ELEMENTE DES CONTENTBEREICHS, THEMEN-HEADER

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

ELEMENTE DES CONTENTBEREICHS, TEXT & LISTEN

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

ELEMENTE DES CONTENTBEREICHS, MODULHEADER

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
12
22

31
7 7

Modulheader im Unterneh-
mensbereich Schrift: Verdana
Stil: bold
Größe: 11 pt
Farbe: #76003D

ELEMENTE DES CONTENTBEREICHS, TABELLEN

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.

ELEMENTE DES CONTENTBEREICHS, FORMULARE

Eingabeformular im Buchungs- Schrift: Verdana
prozess Stil: bold (Headline und
Subheadline)
regular (Copy)
Größe: 11pt
Textfarbe: #FFEC00 (Head-
line)
#76003D (Copy)

7

7

592
7
Linie: 2 px (#D5D5D5)


Bestätigungsformular im Bu- Schrift: Verdana
chungsprozess Stil: bold (Headline und
Subheadline)
regular (Copy)
Größe: 11pt
Textfarbe: #FFEC00 (Head-
line)
#76003D (Copy)
#E7E7E7 (Subhead-
line)

ELEMENTE DES CONTENTBEREICHS, FORMULARE

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.

ELEMENTE DES CONTENTBEREICHS, KARTEN

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)

ELEMENTE DES CONTENTBEREICHS, TEASER

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

ELEMENTE DES CONTENTBEREICHS, INFOMODULE

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

ELEMENTE DER SEITENSPALTE, TEASER

Aktionsteaser 22 Schrift: Verdana
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

ELEMENTE DER SEITENSPALTE, BANNER

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.

ELEMENTE DER SEITENSPALTE, INFOBOXEN

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
max. 12 Zeilen

7 7
202

ELEMENTE DER SEITENSPALTE, RELATED LINKS (LINKS ZUM THEMA)

Related Links 22 Schrift: Verdana
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
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

max. 12 Zeilen

8 8
202

LAYOUTELEMENTE DER SEITENSPALTE, TOOLBOXEN

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

Städtelistung max. 4 Zeilen

7 7
202

5.4 LAYOUTELEMENTE
LAYOUT-RASTER

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

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 Proﬁl 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

Digital Branding for an Airline

Digital Branding for an Airline

Recommandé

Recommandé

Contenu connexe

Similaire à Digital Branding for an Airline

Similaire à Digital Branding for an Airline (20)

Plus de Marc-Oliver Gern

Plus de Marc-Oliver Gern (18)

Digital Branding for an Airline