Styleguide W-lo

tyleguide
Inhaltsverzeichnis

Inhaltsverzeichnis
Einleitung 3
Logo 5
Logovariationen 6
Zu vermeiden 7
Schutzraum und Positionierung 8
Anwendungsbeispiele 9
Farben 10
Farbpalette 11
Farbeinsatz - Print 12
Farbeinsatz - Web 13
Schriftart 14
Futura 15
Verwendung 16
Stilelemente 18
Diagonale 19
Randabfallend 20
Beispiel Print 21
Verbindung Print - Shop 22
Bildwelt 23
Video 26
Webseite 28

inleitung

„KEIN SIEGER GLAUBT AN DEN ZUFALL.“
- FRIEDRICH NIETZSCHE
Unsere Marke W.lo ist ein wichtiger Erkennungsfaktor. Er widerspiegelt unsere
Grundwerte Persönlichkeit, Professionalität und Passion.
Naming
Nach unserem Gründer und mehrfachen Sieger in nationalen und europäischen
Rennen, Walter Locher. Walter Locher startete nach seiner bemerkenswerten
Karriere als Rennvelofahrer das Fachgeschäft W.lo, in welches er noch immer
mit Leidenschaft investiert.
Geschichte
Die einstige Werkstatt Locher wurde anfangs 20. Jahrhundert in der Agglomeration
der Stadt Zürich gegründet und vom Vater zum Sohn weitergegeben. Mit
dem Hauptfokus auf Velos war sie eine der ersten ihrer Art in der Schweiz und
hat sich unter den Radsportlern einen Namen gemacht. Ab den 1940ern wurden
sogar aus den Nachbarkantonen Zweiräder in die Werkstatt Locher gebracht,
was zu der Zeit eine wahre Qualitätsarbeit bewies.
Christian Locher, der Vater des heutigen Geschäftsinhabers Walter Locher, legte
seinem Sohn die Liebe zu den Zweirädern in die Wiege. Selber häufiger in der
Werkstatt oder auf Fachanlässen anzutreffen, unterstützte er den passionierten
Walter im jungen Alter mit seinen Beziehungen zu anerkannten Radrennfahrern
und seinem Fachwissen über die richtige Ausrüstung.
Mit 14 Jahren gewann Walter Locher seinen ersten kantonalen Wettbewerb, in
den nächsten zwei Jahrzehnten trat er an nationalen und europäischen Wettkämpfen
an und baute sich ein breites Fachwissen über Velos, insbesondere
Rennräder, auf. Nach Abschluss seiner Sportlerkarriere coachte er 11 Jahre lang
schweizerische ThriatletInnen und unterstützte die Werkstatt Locher als Experte
für Rennvelos.
4
Mit der Pension von Christian Locher 1993 begann eine neue Ära. Die bisherige
Werkstatt zügelte ins Herz der Stadt Zürich und erhielt ein neues
Exterieur. Walter übernahm die Werkstatt Locher ganz und gab dem
Geschäft den knackigen Namen “W.lo”. Das Angebot konnte dank
der standorttechnisch breiteren Nachfrage bald um den Verkauf von
Velos erweitert werden - erst nur Rennräder, später auch Mountainbikes
und BMX.
Mit der Übergabe von W.lo von Walter Sr. an Walter Jr.
wurde die Brand 2017 überarbeitet und ging 2018 mit
der Eröffnung der Werkstatt an einem neuen Standort in
Zürich an die Öffentlichkeit.
Über die Jahre hat sich ein wichtiger Grundsatz
etabliert: Die ganze erarbeitete Erfahrung zu Rate
ziehen, um dem Kunden sowohl beratungs- als
auch materialtechnisch die bestmögliche Qualität
zu bieten. W.lo setzt auf optimal verarbeitete
Veloausrüstung und persönlichen
Kundenkontakt, heute und morgen.
«Jedes reparierte und verkaufte Velo
ist ein kleiner Erfolg - jeder zufriedene
Kunde ein persönlicher
Sieg».
Walter Locher Sr.

ogo

Logovariationen
Das Logo wird wann immer möglich
auf weissen oder schwarzen Hintergrund
gesetzt. Einzige Ausnahmen sind
Produkte wie Velorahmen, -sattel, etc.
Logo
Negativ
6

Zu vermeiden
Schrägstellen.
Darf nur auf Produkten gezielt
eingesetzt werden.
Farbe verändern.
Das Logo darf nur in der
positiv- und negativ-Farbe
eingesetzt weden.
Quetschen.
Das Logo muss immer proportional
skaliert werden.
7

Schutzraum und Positionierung
Mindeströsse 10 mm
Auf Briefköpfen oder Web-Seiten
erscheint die Brandmark stets
oben links.
Schutzraum: Abmessung mit dem „l“
Ausnahme gilt, wenn das Logo gross
eingesetzt wird und dashalb randabfallen
gestaltet wird, oder keine
andere konkurrierende Elemente
vorhanden sind.
8
In Anzeigen erfüllt sie eher die
Funktion eines Absendersignets
und wird links unten platziert.
Wenn das Format es nicht zulässt,
ist es gestattet das Logo auch in
eine andere Ecke zu setzen.

Anwendungsbeispiele
Arbeitskleidung
Sattel
Briefschaften
Velorahmen
9

arben

Farbpalette
Name
CMYK
RGB
Pantone
HEX
Weiss Schwarz Hellgrau Aquamarin
0 / 0 / 0 / 0 75 / 65 / 60 / 80 38 / 28 / 30 / 7 72 / 15 / 20 / 6
255 / 255 / 255 31 / 31 / 31 163 / 166 / 165 51 / 164 / 193
Paper PANTONE Neutral Black U PANTONE 7538 U PANTONE + 7703 U
#ffffff #1f1f1f #a3a6a5 #33a4c1

Farbeinsatz - Print
Wir legen Wert auf einen grossen
Einsatz von Whitespace.
Optisch soll das Weiss die
Fläche dominieren.
Auf farbigem Hintergrund
wird der Text in
Weiss gesetzt.
Schwarz wird für Text
und die Diagonale
verwendet.
Grosse Hintergrundelemente,
welche eine
ergänzende
Funktion zum Titel
haben, werden in
Hellgrau gesetzt.
Aquamarin
wird gezielt
und spärlich eingesetzt.
Aquamarin
soll als Akzentfarbe
gelten.

Farbeinsatz - Web
Weiss
Hellgrau
Aquamarin
Schwarz
40%
70%
Auf der Webseite wird
100%
in erster Linie schwarz
und hellgrau eingesetzt,
um die Augen der Webseitenbesucher
möglichst wenig
mit grellem Licht zu ermüden.
Weiss wird nur für Formularfelder,
die Navigation und allenfalls
speziell hervorzuhebende Elemente
wie Störer verwendet, dann meist in
Kombination mit der Akzentfarbe
Aquamarin.
13

chriftart

Futura
Aa Aa
Futura PT Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Futura PT Heavy
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
15

Verwendung
Futura PT Heavy wird bei
Überschriften/Titeln oder zur
Hervorhebung verwendet.
F4
Fliesstext wird im Flattersatz linksbündig
in Futura PT Light gesetzt.
Ob Einsteiger oder Rennprofi mit dem F4 Trek Bike ist
jeder gut unterwegs. Das F4 Trek Bike ist das
perfekte Bike um jedes Rennen zu gewinnen. Das Bike
ist in verschiedenen Grössen sowie Farben erhältlich.
Wir freuen uns Sie im Shop beraten zu dürfen.
Rahmen: Carbon Rahmen
Gewicht: 7.9 kg
Grösse: 48, 51, 54, 56, 61 cm
Ab 2‘800.-
Gessnerallee 38 8001 Zürich
079 934 84 23 kontakt@w-lo.ch w-lo.ch
16

HEADLINE
Equae sitessi nonest id magnihi ligenimincia amet enet,
ommoluptis et es alibus aut eaquam nimaxim voluptae
ped estiumquatem as nonsequo tem fugit laccupitat re nem
eossernam sint plit faceprae. Nequam qui dolla plabore
persperi doluptiant deles sundam, cus molupta nam, eoste.
Headlines in Futura PT Bold
Leads in Futura PT Book
Lorem Ipsum
Elisto vollorenimet exere commos nos min rempor arcius et
intinvelit atur, qui consequ aspedi utemquam, voloremquam,
illecto vendel et et remporepudis consequam, autempore
dolorib uscipsum latur ad que pro officiu sandam, con percia
poribus dite sinveles doloriassum sit, idit velluptatur.
Fliesstext in Futura PT Light
Lorem Ipsum
Lorem Ipsum
Ebit, quam quo iumet veribusa doluptate dellecatas untia
dolorita venimoluptis ut odit facidus del inis eaquamenit quati
te num ipiendipsae labor simo dolor andaepero veniate on
res dolorro incipit iorrumquam ut quo beatemporem quibus
ea dolupti torio et facera qui si beatisc iustemporest libus ni
aliaspitis aut autessequi nonem nis dolum simetusam, imagnimagnat
reped quam videlissin repero vent as eum.
Überschrift in Futura PT Bold
Bildbeschreibung in Futura PT Book
17

tilelemente

Diagonale
60°
Das Hauptstilelement ist die Diagonale. Sie verläuft von unten links
nach oben rechts. Im Idealfall ist sie 60° abgeneigt.
19

Randabfallend
Folgende grosse Elemente werden randabfallend eingesetzt:
• Farbflächen
• Headlines
• Logo
• Coverbilder
eadline
Randabfallende Headline
Randabfallende Farbfläche
Randabfallendes Logo

Beispiel Print
21

Verbindung Print - Shop
22

ildwelt

Bildwelt
Wir möchten einen einheitlichen Bildstil in unserer Kommunikation verwenden.
Bildwelt A | Sportliche Erfolge und Highlights
Personen mit Fahrrad im Vordergrund, schwarz-weiss, deutliche Körnung,
leichte Sepiatönung erlaubt
Bildwelt B | Fahrrad als Produkt
Fahrrad auf Schwarz oder Weiss freigestellt mit schmalem Bodenschatten,
im Profil oder leicht angewinkelt positioniert
24

Bildwelt
Bildwelt C | Menschen, Sport und W.lo
Moderne Bildsprache, die Menschen anspricht. Die Bilder sollen spontan und
ungezwungen wirken. Sie zeigen Dynamik, Leistung und Menschlichkeit.
Ehrlich und emotional.
25

ideo

Video
1920px
610px
Bauchbinde | Pflicht bei Interviews und Statements
schlicht und elegant gehalten
Vorname Nachname: Futura PT Heavy, 55px
Funktion: Futura PT Light, 45px, auf bis zu zwei Zeilen möglich
Schriftfarbe: Weiss oder Schwarz
Positionierung im Freiraum (links oder rechts) gemäss nebenstehender
Grafik.
Bei schlechter Lesbarkeit kann eine Hintergrundfläche in Weiss
oder Schwarz mit 50% Deckkraft hinterlegt werden.
1080px
910px
Schnitt | Erlaubte Schnittarten
- Harter Schnitt
- Überblenden
- Schwarzblende
- Weissblende
Wir verzichten auf sonstige Effektblenden.
Schnitte werden passend zur Musik gemacht.
Cornerlogo | Wasserzeichen
In der oberen, linken Ecke darf zusätzlich das Logo in Weiss mit
25% Deckkraft eingefügt werden. Höhe=1/5 Bildhöhe
Outro | Endframe
Am Schluss wird das W.lo-Logo eingeblendet, ergänzt mit der URL
und/oder der Ladenadresse.
Als Hintergrund dient das Schwarz oder Weiss aus der Farbpalette.
27

ebseite

Webseite
Alternativschriften im jeweiligen Schriftschnitt
max. Breite 1200px
Primärschrift:
Sekundärschrift:
Tertiärschrift:
Futura PT
Helvetica
Arial
Abschnitt 1 Abschnitt 2
Abschnitt 3
Zuoberst auf jeder Seite befindet
sich ein Bild oder Video.
Navigationsabschnitte wechseln
sich in den Hintergrundtönen
Dunkelgrau und Hellgrau ab.
Seitenelemente befinden sich in
nur einem Abschnitt und dürfen
in keinen weiteren überlappen.
Abschnitt 2
Die Schriftfarben wechseln sich
gegengleich ab.
Abschnitt 3
29

Webseite
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed
diam nonumy eirmod tempor
invidunt ut.
Fotografien und Videos nehmen 80%-100% der
Seitenbreite ein. Bei weniger als 100% Breite müssen
sie eingemittet werden. Es dürfen sich keine weiteren
Elemente auf der gleichen Höhe befinden. Wegen der
ausfüllenden Grösse muss die Anzahl der Bilder sorgfältig
dosiert werden.
Ausnahme:
Gezeichnete Illustrationen, die einen weiterführenden
Bildlink darstellen, dürfen dann nebeneinander platziert
werden, wenn die Unterseiten offensichtlich miteinander
verwandt sind. Die jeweiligen Elemente müssen mindestens
10px Abstand voneinander haben. Auch hier muss
die Gruppierung der Bilder eingemittet werden.
30

Webseite
31

Inhaltsverzeichnis
© W.lo