webmiles-styleguide/online

Transkript

1 » Online» Übersicht 1 webmiles-styleguide/online Stand: September 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

2 » Online» Grundsätzliches 2 1. 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 /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 IEC CMYK: Coated FOGRA27 (ISO :2004) Sollten Sie Fragen haben helfen wir Ihnen gerne weiter. Wenden Sie sich bitte dazu an Ihren webmiles-ansprechpartner.

3 » Online» Die webmiles-schreibweise 3 2. 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.

4 » Online» Das webmiles-logo 4 3. Das webmiles-logo 1. Logo positiv (auf hellem Hintergrund) Schriftzug: Dunkelblau/Pantone 540 CMYK: RGB: HKS 41 # Logo negativ (auf dunklem Hintergrund) Schriftzug: Weiß CMYK: RGB: # ffffff 3. Logo s/w (auf hellem Hintergrund) Schriftzug: Schwarz (bzw. weiß) CMYK: RGB: # Logo s/w (auf dunklem Hintergrund) Schriftzug: Weiß (bzw. schwarz) CMYK: RGB: # ffffff Das webmiles-logo können Sie in allen gängigen Dateiformaten unter folgendem Link herunterladen: /styleguide/

5 » Online» Produktlogos 5 4. Die webmiles-produktlogos Für webmiles-subkategorien (z.b. Reisen, Flüge, Bücher) sind folgende Logozusätze entwickelt worden: Beispiel: webmiles-bonusprogramm Schriftzug: TheMixBold-Italic Dunkelblau/Pantone 540 CMYK: RGB: HKS 41 # Beispiel: webmiles-flüge Weitere Enwicklungen sind mit dem webmiles-marketingteam abzustimmen.

6 » Online» Anwendungsbeispiele 6 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 Lorem ipsum quantum totum. 100 Insomnia, adversus requiem prohibt. In memoriam. Im Fließtext nicht das Logo verwenden, sondern webmiles ausschreiben 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 verwenden und nicht dunklen Hintergrund einfügen

7 » Online» Der webmiles-claim / Die Claim-Logo-Kombination 7 6. Der webmiles-claim Der webmiles-claim kann sowohl in Offline- und Online-Werbemitteln zum Einsatz kommen. Auf den webmiles-webseiten und in -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. Schriftzug: Helvetica Neue LT std CMYK: 100/080/000/040 RGB: HKS 41 # Die Claim-Logo-Kombination Deutschsprachige Version: Französischsprachige Version: Den Claim sowie die Logo-Claim-Kombination können Sie in allen gängigen Dateiformaten unter folgendem Link herunterladen: /styleguide/

8 » Online» Der Hangtag 8 7. 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: zu #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: RGB: # ffffff Den Hangtag können Sie in allen gängigen Dateiformaten unter folgendem Link herunterladen: /styleguide/

9 » Online» Der Hangtag 9 7. 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: RGB: # 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: HKS 41 # 002f6b Den Hangtag können Sie in allen gängigen Dateiformaten unter folgendem Link herunterladen: /styleguide/

10 » Online» Die webmiles-währung Die webmiles-währung Beispiel: Das webmiles-währungszeichen 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, , ), für den schweizer Raum sind Hochkommata zu verwenden (100, 1 000, , ). Das webmiles-währungszeichen können Sie in allen gängigen Dateiformaten unter folgendem Link herunterladen: /styleguide/

11 » Online» Die webmiles-währung Die webmiles-währung Das webmiles-währungszeichen in Verbindung mit Wertangaben Standardverwendung innerhalb der webmiles-kommunikation (grafische Darstellung) 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). Verwendung im Fließtext: Ausrichtung: Das Währungszeichen entspricht der Höhe der Wertangabe Der Abstand ist analog der Abstände innerhalb des Wertes zu setzen webmiles pro Bestellung webmiles pro Bestellung Verwendung im Rahmen von Teasern und Aktionen: 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.

12 » Online» Die webmiles-währung Die webmiles-währung Anwendungsbeispiele webmiles-bonifizierung, Standard-Darstellung mit vorgestelltem webmiles-währungszeichen Darstellung besonderer Bonifizierungen (doppelte webmiles, dreifache webmiles) werden immer wie im Beispiel dargestellt.

13 » Online» Der webmiles-coin 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 Dunkelblau/Pantone 540 CMYK: RGB: HKS 41 # Verlauf CMYK: zu CMYK: 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

14 » Online» Der webmiles-coin Der webmiles-coin Anwendungsbeispiele

15 » Online» Der webmiles-coin Der webmiles-coin Anwendungsbeispiele 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

16 » Online» Der webmiles-coin Der webmiles-coin 2. Outline-Variante 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. 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 Anwendungsbeispiele

17 » Online» Die webmiles-schriften Die webmiles-schriften Anwendung: Seitenüberschrift Wird pro Seite nur einmal verwendet Schrift: Univers LT Std Schnitt: 57 Condensed Größe: 24 px Zeilenabstand: 26px Rendering: schärfer Farbe: RGB: # 094c8b Anwendung: Überschrift für Boxen Strukturierende Überschrift für einzelne Bereiche Schrift: Univers LT Std Schnitt: 57 Condensed Größe: 18 px Zeilenabstand: 22px Rendering: schärfer Farbe: kann gemäß des webmiles-farbspektrums variabel gewählt werden Anwendung: Standardüberschrift im Creative-Bereich Wird nur innerhalb von Creatives verwendet Schrift: Helvetica Neue LT std Schnitt: 43 light Größe: variabel Zeilenabstand: variabel Rendering: schärfer Farbe: kann gemäß des webmiles-farbspektrums variabel gewählt werden

18 » Online» Die webmiles-schriften Die webmiles-schriften Anwendung: Subline für die Überschrift erster Ordnung Strukturierende Überschrift innerhalb von Fließtexten Schrift: Arial Schnitt: Bold Größe: 12 px Zeilenabstand: 17 px Farbe: RGB: # 094c8b Anwendung: Fließtext Schrift: Arial Schnitt: Regular (Bold für Hervorhebungen) Größe: 12 px Zeilenabstand: 17 px Farbe: RGB: # Anwendung: Verlinkungen innerhalb von Fließtexten Schrift: Arial Schnitt: Bold Größe: 12 px Zeilenabstand: 17 px Unterstrichen Farbe: RGB: # fb8000

19 » Online» Die webmiles-farben 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 # # # 094c8b # cecece # 679fca # e9e9e9 2. Sekundärfarben Blautöne Rottöne Orangetöne Grüntöne # bfddff # 980d0d # ee7023 # # cbe0ee # cc0001 # fd9300 # 73a92d #e0eef8 # fe0000 # febf36 # e8fbce