1 webmiles-Styleguide/Online

www.webmiles.de 

webmiles-Styleguide 

» Online » Übersicht 

webmiles-Styleguide/Online 

Stand: September 2009 

1. Grundsätzliches 

2. Die webmiles-Schreibweise 

3. Das webmiles-Logo 

4. webmiles-Produktlogos 

5. Anwendungsbeispiele 

6. Der webmiles-Claim 

7. Der Hangtag 

8. Die webmiles-Währung 

9. Der webmiles-Coin 

10. Die webmiles-Farben 

© 2009, arvato onlines services GmbH 

1

1. Grundsätzliches 



» Online » Grundsätzliches 

Der vorliegende Auszug aus dem webmiles-Styleguide definiert den Umgang mit dem webmiles- 

Logo, dem webmiles-Badge, der Darstellung der webmiles-Währung und der Verwendung des 

Wortes „webmiles“ formal. 

Um eine Verquickung des Unternehmensnamens und der Währung webmiles zu vermeiden ist es 

besonders wichtig, dass auf einen konstanten, einheitlichen Markenauftritt in allen Medien und 

Kanälen geachtet wird. 

Die Logorichtlinien sind ein bindender Leitfaden für alle markengestaltenden Instanzen (Agenturen, 

Partner und Lieferanten) intern sowie extern. 

Das webmiles-Logo, den webmiles-Hangtag, sowie das webmiles-Währungszeichen haben Sie 

zusammen mit dieser Präsentation digital erhalten. Weiteres Material finden Sie unter 

www.webmiles.de/styleguide. 

Die in diesem Styleguide angeführten Definitionen und Attribute für Schriften und Farbgebungen 

sind auf die Erstellung von Grafiken und Content für den Online-Bereich ausgelegt. Als Standardprogramm 

ist Adobe Photoshop vorgesehen. 

Es wird grundsätzlich mit folgenden Farbeinstellungen gearbeitet: 

• Europa, universelle Anwendungen 2 

• RGB: sRGB IEC61966-2.1 

• CMYK: Coated FOGRA27 (ISO 12647-2:2004) 

Sollten Sie Fragen haben helfen wir Ihnen gerne weiter. Wenden Sie sich bitte dazu an Ihren 

webmiles-Ansprechpartner. 


2

2. Die webmiles-Schreibweise 



» Online » Die webmiles-Schreibweise 

„webmiles“ IMMER komplett klein schreiben. 

Der Name webmiles wird grundsätzlich NIE in Versalien, mit großem „W” oder kursiv geschrieben. 

Steht webmiles zu Beginn eines Satzes, wird webmiles ebenfalls immer klein geschrieben. 

• Als Beschreibung „webmiles“ oder „Bonusmeilen“ verwenden; nie „Punkte“ o.ä. 

• Zum Thema „Sammeln“ ist auf eine wertige Formulierung zu achten, wie z.B. „sammeln“, 

„belohnt werden“, und nicht „absahnen“, „abkassieren“ oder „punkten“ 

• webmiles ist ein „(offenes, online-basiertes) Bonusprogramm“oder eine „Shopping-Portal“ 

bzw. ein „Online-Shopping-Club“, kein „Prämiensystem (im Internet)“ o.ä. 

• Um die Verständlichkeit zu fördern, zusammengesetzte Begriffe mit einem Bindestrich zu 

verbinden, wie z.B. „webmiles-Partner“, „webmiles-Prämienshop“, etc. 

Beispiel: 

Beim Einkauf im Internet sparen: webmiles ist Ihr Shopping-Portal mit Bonusprogramm. Bereits 

über 2,5 Millionen Teilnehmer sammeln bei hunderten webmiles-Partnershops wertvolle Bonusmeilen, 

die sie in ihre persönlichen Traumprämien einlösen. Vom iPod bis zur eigenen Insel - im attraktivsten 

Prämienshop im deutschsprachigen Raum ist alles dabei! 

Zudem halten die Partner viele Aktionen und Sonderrabatte für die webmiles-Teilnehmer bereit, 

sodass hier Shoppen clever ist und Spaß macht. webmiles – Mein Leben belohn ich mir. 


3

3. Das webmiles-Logo 

1. Logo positiv (auf hellem Hintergrund) 

2. Logo negativ (auf dunklem Hintergrund) 

3. Logo s/w (auf hellem Hintergrund) 

3. Logo s/w (auf dunklem Hintergrund) 



» Online » Das webmiles-Logo 

Schriftzug: 

• Dunkelblau/Pantone 540 

• CMYK: 100-080-000-040 

• RGB: 000-046-110 

• HKS 41 

• # 003446 

Schriftzug: 

• Weiß 

• CMYK: 0-0-0-0 

• RGB: 255-255-255 

• # ffffff 

Schriftzug: 

• Schwarz (bzw. weiß) 

• CMYK: 050-0-0-100 

• RGB: 0-0-0 

• # 000000 

Schriftzug: 

• Weiß (bzw. schwarz) 

• CMYK: 0-0-0-0 

• RGB: 255-255-255 

• # ffffff 

Das webmiles-Logo können Sie in allen gängigen Dateiformaten unter folgendem Link 

herunterladen: www.webmiles.de/styleguide/ 


4

4. Die webmiles-Produktlogos 



» Online » Produktlogos 

Für webmiles-Subkategorien (z.B. Reisen, Flüge, Bücher) sind folgende Logozusätze entwickelt 

worden: 

Beispiel: webmiles-Bonusprogramm 

Beispiel: webmiles-Flüge 

Schriftzug: 

• TheMixBold-Italic 


• CMYK: 100-080-000-040 

• RGB: 000-046-110 

• HKS 41 

• # 003446 

Weitere Enwicklungen sind mit dem webmiles-Marketingteam abzustimmen. 


5

5. Das webmiles-Logo – Anwendungsbeispiele 

Beispiele für fehlerhafte Verwendung des webmiles-Logos: 

• Das Logo nicht stauchen oder verzerren 

• Den Coin nicht separat stellen oder den Schriftzug durch eine andere Schrift ersetzen 

• Das Logo nicht in einen Rahmen setzen 

• Muss das Logo innerhalb eines Rahmens platziert werden, ist zum Logo immer ein Abstand in 

Größe des halben Coins – besser eines ganzen Coins – einzuhalten 

• Bei hellem Hintergrund das Logo mit blauer Schrift, bei dunklem Hintergrund das Logo mit 

weißer Schrift verwenden 

• Das Logo nicht innerhalb von Fließtext setzen 

• Das Logo nicht mit Werten kombinieren 

Im Fließtext nicht das Logo verwenden, sondern 

webmiles ausschreiben 



» Online » Anwendungsbeispiele 

Lorem ipsum quantum totum. 

100 

Insomnia, 

adversus requiem prohibt. In memoriam. 

Logo nicht in direkter Verbindung mit Zahlenwerten 

verbinden 

Logo nicht stauchen oder strecken Schriftart des Schriftzuges nicht verändern 

Keinen Rahmen um das Logo ziehen Bei hellem Hintergrund negativ Logo verwen- 

den und nicht dunklen Hintergrund einfügen 


6

6. Der webmiles-Claim 



» Online » Der webmiles-Claim / Die Claim-Logo-Kombination 

Der webmiles-Claim kann sowohl in Offline- und Online-Werbemitteln zum Einsatz kommen. Auf 

den webmiles-Webseiten und in E-Mail-Templates wird er in Kombination mit dem Logo verwendet, 

zusätzlich findet er im Hangtag Verwendung. 

Deutschsprachige Version: 

Mein Leben 

belohn ich mir. 

Französischsprachige Version: 

Je me 

récompense. 

Die Claim-Logo-Kombination 

Deutschsprachige Version: 

Französischsprachige Version: 

Schriftzug: 

• Helvetica Neue LT std 

• CMYK: 100/080/000/040 

• RGB: 000-046-110 

• HKS 41 

• # 003446 

Den Claim sowie die Logo-Claim-Kombination können Sie in allen gängigen Dateiformaten 

unter folgendem Link herunterladen: www.webmiles.de/styleguide/ 


7




» Online » Der Hangtag 

Der webmiles-Hangtag wird als Designelement im Online- und Offline-Bereich verwendet. 

Er kann die Claim-Logo-Kombination enthalten, nur das Logo, innerhalb der Claim-Logo- 

Kombination kann das Logo mit oder ohne webmiles-URL dargestellt werden. 

Die Kordel des Hangtags sollte nie im „Leeren“ enden. Entweder ist gemäß der Abbildungen ein 

Loch zu verwenden, oder die Kordel sollte hinter einem grafischen Element (Farbfläche, Linie) bzw. 

außerhalb des Dokumentenrandes enden. 

Variante blau 

• Neigungswinkel: (min. 4°max. 12°) 

Füllung-Verlauf: 

• CMYK 100/080/000/040 zu 

090/060/000/005 

• RGB: 000-046-110 zu 000-094-163 

• #002f6b zu #005ea3 

Schatten: 

• Position: Multipliziert mit 0,5 x nach 

rechts und unten verschoben 

• CMYK 050/045/045/010 

• RGB 129/124/122 

• #817c7a 

Schrift / Grafik: 

• Weiß 

• CMYK: 0-0-0-0 

• RGB: 255-255-255 

• # ffffff 

Den Hangtag können Sie in allen gängigen Dateiformaten unter folgendem Link 



8




» Online » Der Hangtag 

Da der Hangtag in den unterschiedlichsten Umgebungen zum Einsatz kommen kann, steht auch 

eine weiße Variante zur Verfügung. Beide Varianten sollten immer im optimalen Kontrast zum jeweiligen 

Hintergrund eingesetzt werden. 

Variante weiß 

• Neigungswinkel: (min. 4°max. 12°) 

Füllung: 

• Weiß 

• CMYK: 0-0-0-0 

• RGB: 255-255-255 

• # ffffff 

Schatten: 

• Position: Multipliziert mit 0,5 x nach 

rechts und unten verschoben 

• CMYK 050/045/045/010 

• RGB 129/124/122 

• #817c7a 

Schrift / Grafik: 

• CMYK: 100/080/000/040 

• RGB: 000-046-110 

• HKS 41 

• # 002f6b 

Den Hangtag können Sie in allen gängigen Dateiformaten unter folgendem Link 



9


Beispiel: Das webmiles-Währungszeichen 



» Online » Die webmiles-Währung 

webmiles-Wertangaben werden immer mit dem webmiles-Währungszeichen („Currency-w“) dargestellt. 

Analog dem Euro-Zeichen wird es der Wertangabe immer vorangestellt. 

Das webmiles-Währungszeichen wird proportional an der Größe der Wertangabe ausgerichtet. Die 

Farbe des webmiles-Währungszeichens kann – gemäß der Verwendung des Euro-Zeichens – an 

jede Schriftfarbe angepasst werden. 

Auf Partnerseiten kann in Ausnahmefällen der webmiles-Coin zur Darstellung der Bonifizierung 

verwendet werden. Allerdings nur, wenn eine ausreichende Prominenz der Darstellung der webmiles-Bonifizierung 

aus Gründen des restlichen Seiten-Layouts durch die Darstellung mit dem Währungszeichen 

nicht gewährleistet wird. Zu bevorzugen ist allerdings eine farbliche Hervorhebung 

des webmiles-Währungszeichens. 

Innerhalb von Fließtexten kann bei Bedarf der Begriff webmiles auch ausgeschrieben werden. 

In diesem Fall steht der Begriff webmiles hinter der Wertangabe (Analog zur Ausgeschriebenen 

Schreibweise bei Euro-Werten). 

Das Währungszeichen dient ausschließlich zur Angabe der Incentivierung. Für alle anderen Darstellungen 

von webmiles ist das Logo unverändert zu verwenden. 

webmiles-Werte werden immer unter Verwendung von Tausender-Trennzeichen dargestellt. 

Für den deutsch-/österreichischen Raum wird dies durch Punkte dargestellt (100, 1.000, 10.000, 

1.000.000), für den schweizer Raum sind Hochkommata zu verwenden (100, 1‘000, 10‘000, 1‘000‘000). 

Das webmiles-Währungszeichen können Sie in allen gängigen Dateiformaten unter folgendem 

Link herunterladen: www.webmiles.de/styleguide/ 


10





Das webmiles-Währungszeichen in Verbindung mit Wertangaben 

Standardverwendung innerhalb der webmiles-Kommunikation (grafische Darstellung) 

Verwendung im Fließtext: 

1.000 webmiles pro Bestellung 

1.000 webmiles pro Bestellung 

Verwendung im Rahmen von Teasern und Aktionen: 

• Schrift: Univers LT Std / Schnitt: 67 Bold 

Condensed 

• freie Farbwahl gemäß des webmiles- 

Farbspektrums (bei Verwendung auf 

Partnerseiten in das dort gültige Farbspektrum 

anzuwenden). 

Ausrichtung: 

• Das Währungszeichen entspricht der 

Höhe der Wertangabe 

• Der Abstand ist analog der Abstände 

innerhalb des Wertes zu setzen. 

• webmiles-Währungszeichen mit 

Mindesthöhe von 21x12 px. 

• Fließtext: Arial, 12 px 

• Ausrichtung: Mittig zum Text 

ausgerichtet 

• Kann im Fließtext auch typografisch / an 

den jeweils gewählten Font angepasst 

verwendet werden. 

• Bei der Gestaltung von Werbemitteln 

kann die Schriftart des Wertes entsprechend 

der Schriften, die in diesem 

Zusammenhang verwendet werden, 

angepasst werden. Es ist dabei darauf 

zu achten, dass – entsprechend des 

Währungszeichens – der Schriftschnitt 

bold verwendet wird. 


11


Anwendungsbeispiele 




webmiles-Bonifizierung, Standard-Darstellung 

mit vorgestelltem webmiles-Währungszeichen 

Darstellung besonderer Bonifizierungen (doppelte 

webmiles, dreifache webmiles) werden 

immer wie im Beispiel dargestellt. 


12




» Online » Der webmiles-Coin 

Der webmiles-Coin wird ausschließlich zur Erstellung von Werbemitteln verwendet. Er dient zur 

Illustration von Bonifizierungsmöglichkeiten und kann so relativ flexibel in bestehende Fotos und 

Grafiken integriert werden. Grundsätzlich ist er – wie auch beim Logo – in 2 Varianten einsetzbar. 

1. Farbige Variante 

Outlines / Volltöne 


• CMYK: 100-080-000-040 

• RGB: 000-046-110 

• HKS 41 

• # 003446 

Verlauf 

• CMYK: 000-000-007-002 

zu 

• CMYK: 027-000-009-000 

Der farbige Coin kann innerhalb von Werbemitteln skaliert, gedreht sowie perspektivisch verzerrt 

werden, um einen räumlichen Eindruck (z.B. den Eindruck eines „Coinregens“) zu erzeugen. Für 

diese Zwecke kann er auch mit Schlagschatten, Gloweffekten oder einer weiteren weißen Outline 

versehen werden. 

Unzulässig sind: 

• Veränderungen der Outline- / Volltonfarben 

• Veränderungen der Verlaufsfarben 

• Veränderungen der Linienstärken- und Verhälntisse innerhalb des Coins 

• Überlagerung des Coins mit weiteren Verläufen 


13







14






Der Coin darf nicht mit weiteren Verläufen 

überlagert werden 

Der Coin darf in seiner Farbigkeit nicht verändert 

werden 

Eine Verzerrung, die nicht deutlich als perspektivische 

Darstellung erkannt werden kann, 

ist nicht zulässig 


15


2. Outline-Variante 




Der Outline-Coin kann innerhalb von Werbemitteln skaliert, gedreht sowie perspektivisch verzerrt 

werden, um einen räumlichen Eindruck (z.B. den Eindruck eines „Coinregens“) zu erzeugen. 

Unzulässig sind: 

• Veränderungen der Linienstärken- und Verhälntisse innerhalb des Coins 


Im Gegensatz zur vollfarbigen Variante kann 

die Outline-Version des Coins farblich im Rahmen 

des webmiles-Farbspektrums angepasst 

werden, um auf Hintergrundfarben oder andere 

grafische Elemente im Umfeld einzugehen. 


16

10. Die webmiles-Schriften 

Anwendung: 

• Seitenüberschrift 

• Wird pro Seite nur einmal verwendet 

Anwendung: 

• Überschrift für Boxen 

• Strukturierende Überschrift für einzelne 

Bereiche 

Anwendung: 

• Standardüberschrift im Creative-Bereich 

• Wird nur innerhalb von Creatives verwendet 



» Online » Die webmiles-Schriften 

• Schrift: Univers LT Std 

• Schnitt: 57 Condensed 

• Größe: 24 px 

• Zeilenabstand: 26px 

• Rendering: schärfer 

Farbe: 

• RGB: 008-079-139 

• # 094c8b 

• Schrift: Univers LT Std 

• Schnitt: 57 Condensed 


• Zeilenabstand: 22px 


Farbe: 

• kann gemäß des webmiles-Farbspektrums 

variabel gewählt werden 

• Schrift: Helvetica Neue LT std 

• Schnitt: 43 light 

• Größe: variabel 

• Zeilenabstand: variabel 


Farbe: 

• kann gemäß des webmiles-Farbspektrums 

variabel gewählt werden 


17

10. Die webmiles-Schriften 

Anwendung: 

• Subline für die Überschrift erster Ordnung 

• Strukturierende Überschrift innerhalb 

von Fließtexten 

Anwendung: 

• Fließtext 

Anwendung: 

• Verlinkungen innerhalb von Fließtexten 



» Online » Die webmiles-Schriften 

• Schrift: Arial 

• Schnitt: Bold 


• Zeilenabstand: 17 px 

Farbe: 

• RGB: 008-079-139 

• # 094c8b 


• Schnitt: Regular (Bold für Hervorhebungen) 



Farbe: 

• RGB: 102-107-108 

• # 575757 


• Schnitt: Bold 



• Unterstrichen 

Farbe: 

• RGB: 251-128-000 

• # fb8000 


18

11. Die webmiles-Farben 



» Online » Die webmiles-Farben 

Die hier angegebenen Farben beziehen sich ausschließlich auf die Verwendung im Screenbereich. 

Maßgeblich zur Verwendung sind die angegebenen Hexwerte der einzelnen Farben. 

1. Primärfarben 

2. Sekundärfarben 

# 003466 # 575757 

# 094c8b # cecece 

# 679fca # e9e9e9 

Blautöne Rottöne Orangetöne Grüntöne 

# bfddff # 980d0d 

# cbe0ee # cc0001 

#e0eef8 # fe0000 

# ee7023 

# fd9300 

# febf36 

# 009900 

# 73a92d 

# e8fbce 


19

1 webmiles-Styleguide/Online

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?