„Wer liefert was“-Styleguide

wlw Logo

Visuelles Erscheinungsbild von „Wer liefert was“


Der vorliegende Styleguide gibt einen Überblick über die Struktur und die Elemente des Corporate Designs von „Wer liefert was“. Er dient als Leitfaden für die Erstellung gedruckter und digitaler Kommunikationsmittel und trägt dazu bei, ein konsistentes und gleichzeitig lebendiges Erscheinungsbild des Unternehmens über alle Medien hinweg zu erzielen.

Corporate Design ist der visuelle Ausdruck der Identität und des Charakters eines Unternehmens. Eine konsequente Anwendung auf jeder Kommunikationsebene gewährleistet Wiedererkennbarkeit und erhöht die Bekanntheit. Neben Hinweisen zur Anwendung unseres Corporate Designs bei gedruckten Materialien gibt dieser Styleguide auch Hilfestellung bei der Gestaltung von digitalen Formaten. Der Styleguide erhebt keinen Anspruch auf Vollständigkeit und deckt somit nicht alle Anwendungen ab.
In diesem Leitfaden finden Sie alle wichtigen Dokumente zum Download. Erläuternde Texte und Bilder sollen Ihnen helfen, die Werkzeuge zur Gestaltung unseres Erscheinungsbilds (Logo, Farben, Typografie etc.) richtig einzusetzen.

1. Basiselemente

Alle Basiselemente herunterladen [16.7 MB]

In diesem Bereich stehen Ihnen erläuternde Texte und Bilder zur Verfügung, die Ihnen helfen sollen, die Werkzeuge zur Gestaltung unseres Erscheinungsbilds richtig einzusetzen.

1.1. Wort-/Bildmarke

Basislogo herunterladen

Logo & Wortmarke

Das Logo ist eine wichtige Komponente innerhalb des Erscheinungsbilds. Plakativ und klar bringt es den Grundgedanken und die Positionierung der Marke „Wer liefert was“ auf den Punkt und bildet die Grundlage für alle weiteren Gestaltungselemente.

Die Wortmarke „Wer liefert was“ wird innerhalb des Logos und in Fließtexten ohne Fragezeichen geschrieben. In der Firmierung bleibt das Fragezeichen dagegen erhalten – hier heißt es weiterhin Wer liefert was? GmbH. Das „Wer liefert was“-Logo wird auch für die Eintragung der Marke im Rahmen des Markenschutzes genutzt.

logopanel

Bildmarke

wortmarke

Wortmarke

Markenschutzraum

Eine fest definierte Schutzzone positioniert das Markenzeichen eindeutig und betont seinen Wert. Im Bereich des Schutzraums dürfen keine anderen Elemente, wie Schrift oder Fremdlogos, positioniert werden.

logoclearspace

Position im Print-Layout

Das „Wer liefert was“-Logo wird im Print-Layout grundsätzlich in der rechten unteren Ecke platziert.
Der Abstand des Logos zum rechten und unteren Rand muss immer größer sein als das grüne Quadrat im Logo.
In Ausnahmefällen sind andere Logopositionen möglich.

logo-position

Größendefinition

logo_100

Printbereich 100 %-Größe

logo_80

Printbereich 80 %-Größe = Mindestgröße
Um eine optimale Präsenz des Markenzeichens in allen Medien zu garantieren, darf dieses nur bis zu einer minimalen Größe von 28 mm gedruckt werden.

logo_online-size

Digitale Medien

Formate und Verwendung

Der Einsatz verschiedener Dateiformaten und Farbversionen wird hier am Beispiel des Basis-Logos dargestellt.

logopanel

Sonderfarbe, 2c (Pantone-Töne)
Briefbogen, Visitenkarten

logopanel

RGB
Online-Anzeigen, Website, PPT

logooutlinecolour

Negativ-Outline-Logo, zweifarbig
(Autobeschriftung)

logooutlineblack

Outline-Logo, schwarz
Freistempler, Gravuren

logopanel

CMYK, 4c
Broschüren, z. B. Media-Broschüre, Print-Anzeigen

logobw

Schwarz-weiß-Logo
Fax, Stellenanzeige

logooutlinewhite

Negativ-Outline-Logo, weiß
Screenprint

Domainzusatz

Für den klar definierten Einsatz in den Ländern Deutschland, Schweiz und Österreich sind drei Logovarianten mit dem entsprechenden Domainzusatz vorgesehen. Das Basislogo kommt zum Einsatz, wenn eine Verwendung des Domainzusatzes nicht möglich ist.

logodomain_de

„DE“-Domainkürzel für Deutschland

logodomain_at

„AT“-Domainkürzel für Österreich

logodomain_ch

„CH“-Domainkürzel für die Schweiz

1.2. Claim und URL

Einsatz Claim und URL

Claim-Einsatz auf Printmedien
Ergänzend zu der Wort-/Bildmarke wird bei Printmedien der Markenclaim „Der führende B2B-Marktplatz“ eingesetzt. Grundsätzlich erfolgt die Verwendung des Logos zusammen mit dem Claim. Für den Printbereich wird zusätzlich zum Claim die Kurz-URL eingesetzt.

  • Die URL wird in Fettdruck (bold) und im „Wer liefert was“-Grün dargestellt.
  • Drei Leerzeichen zwischen Claim und URL trennen die beiden Elemente klar voneinander ab.
claim-lockup_1
claim-lockup_2

Position von Claim und URL im Layout

Position 1
Unser Markenclaim ist links neben dem Logo positioniert. Wenn es mehrere URLs gibt, werden diese in separate Zeilen gesetzt.

Wird das Logo in 100 % verwendet, ist die Schriftgröße 13,5 pt und der Zeilenabstand 15,75 pt.
In diesem Fall wird der obere Rand der Großbuchstaben auf der Grundlinie des Wortes „WER“ im Logo ausgerichtet.
Die Grundlinie der zweiten Zeile richtet sich an der Grundlinie des Wortes „WAS“ aus.

Der Abstand zwischen dem Logo und dem rechten Rand des Claims beträgt 75 % der Breite des grünen Quadrats des Logos.

claim-lockup_1a
claim-lockup_1b

Position 2
Der Markenclaim kann auch als Überschrift in die Fußzeile gesetzt werden, wenn es weiteren Text gibt, z. B. einen Adressblock.

Diese Position kann ebenfalls verwendet werden, wenn der Claim ohne das Logo steht (siehe als Beispiel die Fußzeile auf unserer Website).

claim-lockup_2a
claim-lockup_2b

1.3. „Wer liefert was“ und EUROPAGES

Logodateien herunterladen

Gemeinsame Darstellung

„Wer liefert was“ und EUROPAGES agieren als eigenständige Schwestergesellschaften unter dem Dach von Paragon Partners. Die gebildete Allianz der beiden größten europäischen B2B-Marktplätze wird durch ein gemeinsames Signet visualisiert. Innerhalb der Schreibweise wird EUROPAGES stets in Versalien geschrieben.

Position Logos

Die beiden Logos werden zentral übereinander gesetzt. Der Abstand zwischen den Logos beträgt 1/2 x.
Eine fest definierte Schutzzone von 1 x positioniert das Markenzeichen eindeutig. Im Bereich des Schutzraums dürfen keine anderen Elemente, wie Schrift oder Fremdlogos, positioniert werden.

logo-kombi-wlw-ep_muster
logo-kombi-wlw-ep_abstaende

1.4. Typografie

Source Sans Pro herunterladen

Source Sans

Wie bei unserem Logo stärkt der konsequente Einsatz unserer Hausschrift Source Sans die Markenidentität von „Wer liefert was“.
Source Sans Pro ist eine Grotesk-Schrift mit humanistischem Aussehen. Die leicht schmalen Buchstaben von Source Sans Pro sind ideal für Benutzeroberflächen, die wenig Platz bieten. Source Sans funktioniert in Druckmedien ebenso wie auf dem Bildschirm.

Source Sans ist auch als Webfont verfügbar und kann bei Google Fonts gefunden werden.
Source Sans-Webfont

Source Sans Pro

SourceSans Beispiele

Source Sans A-Z and numbers

Source Sans A-Z, Zahlen und Sonderzeichen


Printmedien

In Printmedien verwenden wir eine breite Palette von Schriftbreiten: Light, Regular, Semibold, Bold und Black. Wir versuchen immer, die Typografie eher leicht/luftig einzusetzen.

  • Große Überschriften (top headlines) sollten in Source Sans Light gesetzt werden.
  • Für den Fließtext wird Source Sans Regular benutzt.
  • Wir verwenden Source Sans Bold, um eine Hierarchie herzustellen und gelegentlich zur Betonung/Hervorhebung von Text.
  • Source Sans Black wird sehr spärlich eingesetzt, vor allem für spezielle Elemente wie Störer.
  • Source Sans Italics wird zur Betonung/Hervorhebung verwendet – aber nur in Light und Regular.
  • Source Sans Semibold Italic und Source Sans Bold Italic werden nicht benutzt.
Font weights

Breiten


Digitale Medien

In digitalen Medien werden folgende Schriftstärken der Hausschrift Source Sans eingesetzt: Light, Regular und Semibold.
Die Schriftgrößen für den Bildschirm folgen einer harmonischen Abstufung. Diese erleichtert die Organisation von Inhalten und schafft eine ausgewogene typografische Hierarchie. Unsere größten Größen – Kilo, Mega und Giga – sollten sparsam und nur für spezielle Inhalte verwendet werden, z. B. für „große Zahlen“.

Source Sans Pro

Schriftstärken und -größen für digitale Medien

Fallback-Schrift: Arial

Um eine maximale Kompatibilität mit Browsern und Betriebssystemen zu gewährleisten, wird für die Website Arial als Fallback-Font hinterlegt. Die Arial ist eine Sans-Serif-Schriftart und kann aufgrund ähnlicher Laufweite ohne aufwändige Anpassungen eingesetzt werden.
Arial wird immer dann benutzt, wenn kein Webfont geladen werden kann, zum Beispiel für E Mail-Newsletter bzw. E-Mail-Kommunikation.

Fallback fonts

Arial

CSS-Font-Stack

font-family: "Source Sans Pro", Arial, "Helvetica Neue", Helvetica, sans-serif;

Textausrichtung

Fließtext wird immer linksbündig (im Flattersatz) ausgerichtet.
Es gibt ein paar wenige Ausnahmen für den Einsatz von zentriertem Text: große Zahlen, "Key Points" in Verbindung mit einem Icon/Symbol, Störer und Landingpage-Überschriften.

flushleft

Linksbündiger Fließtext

centeredtext

Zentrierter Fließtext

--

flushright

Text nicht rechtsbündig ausrichten

justified

Text nicht im Blocksatz ausrichten


Text auf Farbe

Es ist erlaubt, weißen Text auf dunkle Farben zu setzten. Wir empfehlen jedoch, sich dabei auf Überschriften und kurze Texte zu beschränken.
Farbiger Text darf nicht auf einen farbigen Hintergrund gesetzt werden.
Einzige Ausnahme: die URL in wlw-Grün wird auf wlw-Blau gesetzt.

Fallback fonts

Weißer Text auf Farbe

Fallback fonts

URL in Grün auf Blau ist erlaubt

Fallback fonts

Farbiger Text auf Farbe

shadowtext

Niemals Schatten um den Text setzen

1.5. Farben

ASE-datei herunterladen

Primärfarben

Unsere Hauptfarben „Wer liefert was“-Blau und „Wer liefert was“-Grün verkörpern unsere Marke. Im Gesamteindruck wird Weiß die dominierende Farbe darstellen.

„Wer liefert was“-Blau wird vor allem für Überschriften verwendet und kann auch reduziert als Hintergrund oder Flächenelement eingesetzt werden.

„Wer liefert was“-Grün wird für Highlight-Elemente und „große Zahlen“ verwendet. In unserer UI wird es benutzt, um „Call-to-Action“ zu anzuzeigen.

colours_primary
colours_white

Sekundärfarben

Unseren Hauptfarben stellen wir ausgewählte Zweitfarben zur Seite: zwei Grau-Abstufungen, Hellblau, Türkis, Iris/Violett (?) und Orange.

Hellblau wird im Bereich Marktplatz verwendet, entweder als Hintergrund oder um Elemente wie Symbole, Buttons oder Links hervorzuheben.

Türkis wird hauptsächlich dafür verwendet, die Premium Service Pakete hervorzuheben. Es kann außerdem für die weiche Hervorhebung von Labels, Panels, Infografiken etc. verwendet werden.

Iris kann ebenfalls für weiche Hervorhebungen in Labels, Panels, Infografiken etc. verwendet werden.

Dunkelgrau wird für Texte verwendet.

Hellgrau wird für Hintergründe verwendet.

Orange wird für aufmerksamkeitsstarke Eye-Catcher-Motive verwendet. Zudem kann es als Warnfabe eingesetzt werden, z.B. in Fehlermeldungen.

colours_secondary_01
colours_secondary_02

Warnfarben (Plattform)

Die Warnfarben werden ausschließlich für die Hervorhebung dringender, wichtiger Informationen im Kernprodukt genutzt.

Rot wird verwendet, um Fehler oder kritische Infos hervorzuheben.

Gelb wird verwendet, um die Aufmerksamkeit des Users zu fokussieren.

colours_alert


Farbreferenzen

  • „Wer liefert was“-Blau PANTONE 289 CMYK 100 | 60 | 0 | 65 RGB 0 | 25 | 60 HEX #00193C
  • 80% RGB 51 | 71 | 99 HEX #334763
  • 60% RGB 102 | 117 | 138 HEX #66758A
  • „Wer liefert was“-Grün PANTONE 376 CMYK 55 | 0 | 100 | 0 RGB 137 | 186 | 23 HEX #89BA17
  • 80% RGB 161 | 200 | 69 HEX #A1C845
  • 60% RGB 184 | 214 | 116 HEX #B8D674
  • White CMYK 0 | 0 | 0 | 0 RGB 255 | 255 | 255 HEX #FFFFFF
  • Bright blue PANTONE 299 C CMYK 86 | 8 | 0 | 0 RGB 0 | 163 | 222 HEX #00A3DE
  • 80% RGB 51 | 181 | 229 HEX #33B5E5
  • 60% RGB 102 | 200 | 235 HEX #66C8EB
  • Turquoise PANTONE 326 C CMYK 81 | 0 | 39 | 0 RGB 0 | 178 | 169 HEX #00b2a9
  • 80% RGB 51 | 193 | 186 HEX #33C1BA
  • 60% RGB 102 | 209 | 206 HEX #66D1CE
  • Iris PANTONE 7456 C CMYK 72 | 55 | 0 | 0 RGB 96 | 110 | 178 HEX #606eb2
  • 80% RGB 128 | 139 | 193 HEX #808BC1
  • 60% RGB 160 | 168 | 209 HEX #A0A8D1
  • Dark grey PANTONE 432 C CMYK 23 | 0 | 0 | 79 RGB 71 | 83 | 91 HEX #47535B
  • 80% RGB 108 | 117 | 124 HEX #6C757C
  • 60% RGB 145 | 152 | 157 HEX #91989D
  • Light grey PANTONE COOL GREY 3 C CMYK 25 | 19 | 19 | 0 RGB 202 | 201 | 199 HEX #CAC9C7
  • 80% RGB 213 | 212 | 210 HEX #D5D4D2
  • 60% RGB 223 | 223 | 221 HEX #DFDFDD
  • Orange PANTONE 144 C CMYK 0 | 47 | 100 | 0 RGB 255 | 135 | 0 HEX #FF8700
  • 80% RGB 255 | 159 | 51 HEX #FF9F33
  • 60% RGB 255 | 183 | 102 HEX #FFB766
  • PANTONE 192 C CMYK 0 | 96 | 60 | 0 RGB 228 | 22 | 72 HEX #E41648
  • 80% RGB 233 | 69 | 109 HEX #E9456D
  • 60% RGB 239 | 115 | 145 HEX #EF7391
  • PANTONE 123 C CMYK 5 | 26 | 94 | 0 RGB 244 | 191 | 12 HEX #F4BF0C
  • 80% RGB 246 | 204 | 61 HEX #F6CC3D
  • 60% RGB 248 | 217 | 109 HEX #F8D96D
  • RGB 218 | 221 | 222 HEX #daddde
  • RGB 236 | 237 | 238 HEX #ecedee
  • RGB 246 | 246 | 247 HEX #f6f6f7

1.6. Product icons

Leistungspakete

Diese Icons helfen dabei, die Service Pakete als Einheit mit all ihren Zusatznutzen wahrnehmbar zu machen. Sie sind teilweise abstrakt, eher suggestiv denn illustrativ.

Jedes Icon verweist dabei implizit auf die jeweilige geographische Reichweite des Pakete, das es repräsentiert.

Für ”Basic”-Pakete werden unsere Markenfarben verwendet. Premium-Pakete erhalten zusätzlich einen türkisfarbenen Akzent.

Download Package icons in CMYK [5.3 MB]
Download Package icons in RGB [5.4 MB]
Download Package icons for web [89 KB]

packages
packages

Standard-Pakete
National | Europa | Global
Lokal

packages
packages

Premium-Pakete

Online-Marketing- und Marktplatz-Services

Die Icons übersetzen die teilweise komplexen Produkte in einfach zu verstehende Symbole.

Jedes Icon stellt einen Kernaspekt des Produkts dar, das es repräsentiert.

Download Product icons in CMYK [8.4 MB]
Download Product icons in RGB [8.7 MB]
Download Product icons for web [170 KB]

packages
packages

Reichweitenverstärker | Homepage | Top Ranking
etracker | SEO | D-A-CH

packages
packages

wlw Europe | Active Hosting | wlw Retargeting
Product Upload Service | Product Data Feed | Sponsored Product


Größen

Wenn Sie die Icons für Screendesign nutzen, verwenden Sie bitte die vorgegebenen Größen. So vermeiden Sie gepixelte Darstellungen.
Bitte verändern Sie die Größe der Icons nicht willkürlich. Achten Sie auf den Begrenzungsrahmen um sicherzustellen, dass die Icons proportional vergrößert oder verkleinert werden.
Dies sind die Grundgrößen:

  • 64 x 64 px
  • 128 x 128 px
  • 256 x 256 px
packages
packages

Schutzraum

Alle Produkt-Icons haben einen festgelegten Schutzraum, der als 1/4 der Icongröße definiert ist. In diesem Raum oder diesen Raum überlappend dürfen keine anderen Inhalte platziert werden. Der Schutzraum erweitert sich auf die Breite und Grundlinie des Icon-Namens, wenn dieser verwendet wird.

packages
packages
packages

Typographie: Schriftschnitte und -Größen

Pakete

Schriftschnitt: Semibold + Regular
Schriftgröße: 0,375 x Icon-Höhe
Zeilenabstand: 0,375 x Icon-Höhe
Farbe: wlw Blue + Turquoise

Produkte

Schriftschnitt: Light
Schriftgröße: 0,375 x Icon-Höhe
Zeilenabstand: 0,375 x Icon-Höhe
Farbe: wlw Blue

packages
packages
packages

Typografie: Primary position

Unterhalb zentriert

Schriftschnitt: Light
Schriftgröße: 0,375 x Icon-Höhe
Zeilenabstand: 0,375 x Icon-Höhe
Farbe: wlw Blue

Der Produktname steht immer zentriert unter dem Icon auf einer Erweiterung des Icon-Rasters.
Der Abstand vom Mittelpunkt des Icons zur Grundlinie des Textes entspricht der Höhe des Icons.
Der Abstand von der Unterkante des icons zur Grundlinie des Textes entspricht 1/2 der Höhe des Icons.

packages
packages
packages
packages

Typografie: Secondary position

Rechte Seite mittig
Nur verwenden, wenn die primäre Position nicht anwendbar ist.

Schriftschnitt: Light
Schriftgröße: 0,375 x Icon-Höhe
Farbe: wlw Blue

Der Produktname steht neben dem Icon, vertikal mittig ausgerichtet.
Die Entfernung zwischen der rechten Kante des Icons und der linken Kante des Textes beträgt 1/4 Breite des Icons.

packages
packages

Typografie: Inline

Wenn Sie die Icons im “inline”-Stil verwenden, achten Sie bitte auf den Schutzraum um das Icon.
Normalerweise werden die Icons vertikal mit dem Text ausgerichtet.

Idealerweise ist die Schriftgröße nicht größer als 3/4 der Icon-Höhe..

inline icons

Farbiger Hintergrund: dunkler Hintergrund

Die Icons können auf „Wer liefert was“-Blau oder Dunkelgrau platziert werden.
Die dunkelblauen Linien, sowie die Produkt/Paket Bezeichnungen, sind für den dunklen Hintergrund in weiß angelegt.

Reversed Package icons [293 KB] herunterladen
Reversed Product icons [803 KB] herunterladen

icon_icons_products_reversed
icon_icons_packages_reversed
icon_icons_products_reversed_name

Farbiger Hintergrund

Die originalen Icons können auf einen hellgrauen Hintergrund platziert werden (wlw hellgrau). Um den Kontrast zu erhalten, darf der Hintergrund jedoch nicht dunkler als 60% hellgrau sein.

icon_icons_products_light_background
icon_icons_packages_light_background

1.7. Symbole und Icons

Runde Symbole

Runde Symbole sind Elemente, die den Weg weisen. Sie helfen dem Benutzer, schnell eine Seite nach spezifischen Informationen abzusuchen, oder geben Feedback zu einer (abgeschlossenen) Aktion. Runde Symbole sollten in inhaltsorientierten Zusammenhängen verwendet werden, z. B. in Marketing/Vertrieb-Proofpoints, Dashboards usw.

Symbole herunterladen

symbols
symbols

UI-Icons

UI-Icons symbolisieren eine Aktion, eine Datei oder einen Status. Ihre Formen sind vereinfacht und geometrisch, um Lesbarkeit und Klarheit auch bei kleineren Schriftgrößen zu gewährleisten. Sie sollten in handlungsorientierten Kontexten verwendet werden, z. B. in Links, Buttons, Benachrichtigungen usw. Sie werden ausschließlich auf unseren Domains verwendet.

Farbe
Auf einem hellen Hintergrund, ist die Füllfarbe der UI-icons, die gleiche, wie die Textfarbe: # 47535b.
Die Farbe der inaktiven/deaktivierten icons ist: # b5babd.

UI-icons herunterladen

Weitere Einzelheiten finden Sie in unserer CSS-Pattern-Library:
https://www.wlw.de/wlw_styleguide#atoms-general-icons

symbols

1.8. Diagrammstil

Diagramme helfen, Entwicklungen und Statistiken transparent, plakativ und nachvollziehbar darzustellen. Bei der Umsetzung einer Grafik sollte der Diagrammstil so gewählt werden, dass er den Inhalt am einfachsten und am eindeutigsten wiedergibt. Hierfür stehen zwei Darstellungsformen zur Verfügung: Kreisdiagramme und Balkendiagramme.

diagramm_barchart

Beschränken Sie die Verwendung von Farbe.

diagramm_barchart_highlight

Verwenden Sie eine Farbe, wenn das Diagramm ein Key-Visual ist.

diagramm_barchart_blue

Falls erforderlich, verwenden Sie eine Farbe zum highlighten.

diagramm_piechart

In den Kreisdiagrammen, Farbcode-Kategorien.

1.9. Bildwelt

bildwelt
bildwelt

Die Bildwelt von „Wer liefert was“ ist ein starkes Werkzeug, das uns hilft, unser Produkt und unsere Markenwerte zu kommunizieren, zu positionieren und von anderen zu unterscheiden. Fotos sollen den Kunden (oder Mitarbeitern) auf authentische Weise eine Erfahrung dokumentieren, sodass diese sich damit identifizieren können.

Versuchen Sie immer, authentische Umgebungen, natürliches Licht und reale Menschen in ihrer Arbeitsumgebung darzustellen. Verwenden Sie Bilder, die erklären und vorsätzlich gemacht wurden. Erzählen Sie eine Geschichte. Entfachen Sie Neugier und Engagement.

Ja und Nein

Das Konzept ist verständlich

Ein klares Konzept zeigt eine authentische Szene mit echten Menschen und keinen „Models“. Das Bild zeigt kein gestelltes Shooting sondern eine Aufnahme aus einer realen Szene in natürlichem Licht.

discuss

Ja.
Ein klares Konzept in authentischem Umfeld und natürlichem Licht. Gestik und Mimik der gezeigten Personen spiegeln die Realität wider und wirken nicht gestellt.

stock_board

Nein.
Das Bild wurde aufgehellt, die Protagonisten sind Models und stehen nicht im direkten Kontext zueinander. Das Bild zeigt eine austauschbare Situation und hat keine Bildtiefe.

Keine Stock Photos benutzen, wenn möglich.

Verwenden Sie nur Bilder, die eine echte Geschichte erzählen und eine unverwechselbare Stimme haben.
Für bestimmte Gegebenheiten verwenden Sie bestimmte Bilder. Für abstraktere Inhalte können Sie interpretierender sein.
Benutzen Sie keine Stock Photos. Stock Photo Imagery und Clip Art ist weder spezifisch noch interpretierend.

pleased

Ja.
Das Bild zeigt eine reale Szene.

handshake

Nein.
Der Bildauschnitt ist aus dem Kontext herausgenommen und somit austauschbar und bedeutungslos.

Erzählen sie eine Geschichte

Kreieren Sie eine spannende Geschichte und erzeugen Sie einen Gefühl des Zusammenhangs. Machen Sie die Stimmung sympathisch und greifbar. Was ist die Geschichte, die das Bild unterstreichen soll? Wie ist die Atmosphäre? Konzentriert? Feierlich? Ist die Firma klein oder groß?

arteka_task

Ja.
Das Bild zeigt eine echte Szene mit klarem Bezug zum Umfeld.

arteka_produkt

Ja.
Das fokussierte Produkt steht im Kontext zu seinem Umfeld. Bildtiefe durch klare Schärfe und Unschärfe.

task_bad

Nein.
Ein Bild, dessen Geschichte fehlt, verliert die Möglichkeit, Stimmung, Marke und den Kontext zu vermitteln.

duesenhalter_arteka

Nein.
Ein Motiv, das aus dem Kontext herausgelöst ist, ist uninteressant.

Referenzen

Verwenden Sie ein Standard-Bildformat für Referenzporträts. Die Hexagon-Form ist für Leistungspakete vorbehalten.

reference_sq

Ja.
Verwenden Sie ein Standard-Bildformat für Referenzporträts.

reference_hexagon

Nein.
Die Hexagon-Form ist für Leistungspakete reserviert.


Seitenverhältnis

Zur Gewährleistung der Kohärenz, sollten Bilder immer in einem Standard-Seitenverhältnis beschnitten werden. Die folgenden Seitenverhältnisse werden empfohlen:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
image ratios


Text auf Bildern: Lesbarkeit gewährleisten

Um die Lesbarkeit von Text auf einem Bild sicherzustellen, benutzen wir einen transparenten Verlauf, der auf dem Bild sitzt. Es ist ein semi-transparenter Verlauf aus schwarz. Der Text, der darauf sitzt, ist weiß.

textscreen

Um sicherstellen, dass die Transparenz einen allmählichen Auslauf hat, wird der Wert von 50% auf 1/3 Abstand von der 100% Marke geschoben.

textscreenapply

Normalerweise wird die Transparenz auf ca. 30-70% eingestellt. Je nach Bild kann das variieren.

2. Anwendungen Printmedien

Im Druck verwenden wir die Standard-DIN-Formate.

DIN A4 210 x 297 mm (2480 x 3508 px bei 300 dpi)
DIN A5 148 x 210 mm (1748 x 2480 px bei 300 dpi)
DIN A6 105 x 148 mm (1240 x 1748 px bei 300 dpi)

printdin-formats

Beispiele

2.1. wlw-Broschüre

Download wlw-Broschüre [3,2 MB]

Cover

Bildmarke
Für die A4-Media-Broschüre wird das Logo in 100 % eingesetzt.

Ränder und Spalten
Kopfsteg: 11,6 mm
Fußsteg: 25 mm
Bundsteg: 14,5 mm
Außensteg: 11,6 mm
Spalten: 8
Spaltenabstand: 12 pt

titel

Innenseiten (Doppelseite)

Innenseiten
Generelle Headline: Source Sans Pro Semibold / light 27 pt / ZAB 28 pt in Blau (Pantone 289 C)
Fließtext: Source Sans Pro Regular / 11 pt auf 14 pt in Dark Grey (Pantone 432 C); Abstand zur Headline 1x ZAB
Gefetteter Fließtext: Source Sans Pro Semibold in Dark Grey (Pantone 432 C)
Zwischenheadlines: Source Sans Pro Semibold / light / 14 pt / 14 pt ZAB in Bright Blue (Pantone 299 C) oder in Blau (Pantone 289 C)
Informationstexte (Bullet-Points): Headline: Source Sans Pro light / 14 pt / ZAB 14 pt; Fließtext Source Sans Pro regualr 8 pt / 10 pt ZAB (nur 1. Zeile auf Raster)
Fussnoten: Source Sans Pro Regular / 7pt / 10 pt ZAB, nicht auf Raster in Dark Grey (Pantone 432 C)
Flächen über Bildern: 55% Deckkraft, normal, Bright Blue (Pantone 299 C)

innen_1
innen_2

Lead-in/Rückseite

back

2.2. Flyer DIN A4 quer

flyer-design-muster-2016

Bildmarke
Für Flyer im Format A4 wird das Logo in 90 % eingesetzt.

Ränder und Spalten
Rand: rundum 12,75 mm
Grundraster: 12 Spalten á 18,5 mm, Spaltenabstand 4,5 mm
Kopflinie: Position 1mm stark, Position 40 mm von oben
Contentbereich: Position 55 mm von oben
Markenschutzraum: Position 164,5 mm von oben

Schriften
Source Sans Pro
Headline: 24 Punkt light/regular, 30 Zeilenabstand
Content-Bereich: Headline 12 Punkt semibold, Fließtext 9 Punkt regular, Zeilenabstand 13 Punkt
Claim/URL: 12,5 Punkt regular/bold
Adressdaten 7 Punkt semibold/regular, 9 Punkt Zeilenabstand

Farben
Headline, Kopflinie, Slogan: Pantone 289 (dunkelblau)
URL: Pantone 376 (grün)
Texte im Content-Bereich und Adressdaten: Pantone 432 (dark grey)


flyer-design-muster-2016_raster

Anwendungsbeispiele:

preisliste
flyer_wlw_europe

3. Anwendungen Digitale Medien

3.1. Newsletter-Templates (BETA)

E-Mail mit Bild-Header

Beispiel: Erfolgsanalyse

Gestalterisch orientiert sich die E-Mail-Vorlage an der Website von „Wer liefert was“. Die Farben bedienen sich aus der Primär- und Unbuntpalette von „Wer liefert was“.

erfolgsanalyse_email
email_erfolgsanalyse_structure

Elemente

Header mit Bild

emailheader_ratio
emailheader_typo
emailheader_focus
Hauptinhalt

Der Hauptinhalt ist textlastig und hat einen starken Fokus auf den primären Call-to-Action.
Ergänzende Inhalte erweitern den Hauptinhalt. Sie sind auf dem gleichen Panel positioniert, aber der Hintergrund ist hellgrau.

email_maincontent
email_secondarycontent
Zusätzliche Inhalte und Fußzeile

Zusätzliche Inhalte werden auf einzelnen Panels platziert und durch einen Absatz getrennt.

email_support

Die Fußzeile wird reduziert dargestellt, um Übersichtlichkeit zu gewährleisten und den Markenclaim hervorzuheben. Der Link zum Impressum von wlw.de enthält alle rechtlichen Angaben.
Eine mögliche Alternative ist die erweiterte Fußzeile, die alle rechtlichen Angaben und Partnerlogos beinhaltet.

email_footer
email_footer_extended

E-Mail ohne Bild-Header A / B

email_no-hero
email_text-only

3.2. Pattern library

In unserer Pattern-Library finden Sie alle dokumentierten UI-Elemente der wlw.com-Plattform.
→Pattern library

5. Info & Support

Weitere Informationen
Ansprechpartner:
Jochen Baumann
Senior Brand Manager
T +49 (0)40 2 54 40-153
Jochen.Baumann@wlw.de

Kontakt
Wer liefert was? GmbH
ABC-Straße 21
20354 Hamburg