Justlease_styleguide_Open Sans
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Online <strong>styleguide</strong>
Inhoudsopgave<br />
Merkenpaspoort<br />
p. 3<br />
Design principles<br />
p. 4<br />
Logo<br />
p. 5<br />
Toepassing logo<br />
p. 6<br />
Kleurgebruik<br />
p. 7<br />
Typografie<br />
p. 8<br />
Toepassing typografie<br />
p. 9<br />
Formulieren<br />
p. 10<br />
Buttons<br />
p. 11<br />
Grafische vormen<br />
p. 12<br />
Persona Rene<br />
p. 13<br />
Persona Egbert<br />
p. 14<br />
Persona Rosanne<br />
p. 15
Merkenpaspoort<br />
Merkdroom<br />
Merkbelofte<br />
Visie<br />
Online activiteiten en online kopen neemt steeds meer toe.<br />
Hierdoor staat het traditionele kanaal met service en prijs<br />
meer en meer onder druk. Klanten wensen steeds meer<br />
dienstverlening op hun moment, ongeacht locatie.<br />
De urban professional wordt in zijn werkzaamheden<br />
gedwongen zich te specialiseren om zodoende<br />
onderscheidend te zijn. Hierdoor ontstaat de behoefte om de<br />
focus te behouden en o.a. geholpen te worden in de complexe<br />
wereld van auto zoeken, selecteren en configureren.<br />
Missie<br />
<strong>Justlease</strong> wil de urban professional het meest optimale<br />
leaseaanbod doen waarbij de klant het gevoel heeft en houdt<br />
altijd zelf ‘in control’ te zijn en te blijven. <strong>Justlease</strong> biedt deze<br />
klant een bedieningsconcept dat vooraf en tijdens het<br />
leaseproces duidelijkheid verschaft.<br />
(Mobiliteits)oplossingen die je vrijheid geven.<br />
Merkwaarden<br />
Welkom bij de club<br />
We zijn persoonlijk en gelijkwaardig.<br />
Je wordt lid van de club, geen klant.<br />
Verassend<br />
Actie, we regelen het, we maken waar,<br />
we zijn slagvaardig.<br />
Relevant<br />
Kan niet bestaat niet. We zijn echt<br />
relevant en bieden toegevoegde waarde<br />
3
Design principles<br />
Persoonlijker<br />
Altijd menselijke touch op elke pagina<br />
Karakter tonen in de details<br />
Dichtbij de belevingswereld van onze<br />
persona’s, niet alleen auto’s voor geld,<br />
maar verbinding met dagelijkse leven<br />
Optimistischer<br />
Pittiger kleurgebruik, contrast, helder<br />
Luchtige toekomstgerichte ruime<br />
opzet, we zijn niet bang voor scrollen<br />
OPTIMISTISCH<br />
TOEKOMSTGERICHT<br />
GERUSTSTELLEN<br />
BETROUWBAAR<br />
Betrouwbaarder<br />
<br />
<br />
<br />
<br />
Matig gebruik van kortingsstickers,<br />
knalelementen en andere typische<br />
prijsvechterselementen<br />
Bij elk element is het duidelijk welke<br />
functie ze heeft<br />
Heldere hiërarchie, koppen zijn groot<br />
en dik, leestekst is clean en zonder<br />
onnodige opschmuck<br />
Service en contact zit altijd dichtbij<br />
PERSOONLIJK<br />
VRIENDELIJK<br />
4
Logo<br />
Het logo van <strong>Justlease</strong> is een uniek ontwerp, heeft een<br />
duidelijke, strakke vorm en is goed herkenbaar.<br />
Het logo, dat wil zeggen het woord <strong>Justlease</strong>, moet altijd als<br />
zodanig herkenbaar zijn. Het logo heeft twee vaste<br />
huisstijlkleuren: donkerblauw en oranje.<br />
De letter ‘J’ in het logo is gebruikt als onderkastletter en heeft<br />
een oranje punt. Hierdoor krijgt het logo een eigen identiteit<br />
en zorgt het voor meer herkenbaarheid en uniciteit.<br />
Het logo staat altijd in het lettertype Myriad Pro in kapitalen.<br />
Het lettertype is karakteristiek, waardoor het woordmerk<br />
fungeert als logo.<br />
5
Toepassing logo<br />
Hiernaast staan een aantal toepassingsvoorbeelden van het<br />
logogebruik <strong>Justlease</strong>.<br />
Full-colour<br />
Zowel het full-colour-gebruik voor bijvoorbeeld advertenties in<br />
kranten of dagbladen.<br />
Bij drukwerk in zwart-wit (bijvoorbeeld een fax), moet het<br />
beeldmerk in zwart worden toegepast.<br />
Bij 2 kleuren graag geen zwart maar blauw/oranje met wit.<br />
Zwart/Blauw/Oranje-wit<br />
6
Kleurgebruik<br />
Primair<br />
R = 250<br />
G = 104<br />
B = 0<br />
R = 0<br />
G = 69<br />
B = 125<br />
R = 246<br />
G = 249<br />
B = 252<br />
Oranje voor highlight kleur van titels, buttons of links.<br />
Donkerblauw vooral voor tekst.<br />
Lichter blauw voor achtergrond vlakken.<br />
#FA6800<br />
#00457D<br />
#F6F9FC<br />
CTA kleur<br />
Oranje, één van de kleuren uit het primair<br />
R = 250<br />
G = 104<br />
B = 0<br />
kleurenpalet, wordt als kleur voor call to action<br />
buttons ingezet.<br />
#FA6800<br />
Tekst achtergrond vlak<br />
#4C5DDA<br />
#007EE5<br />
R = 246<br />
G = 249<br />
B = 252<br />
Blauwe gradient wordt vooral als primair header<br />
achtergrond vlak ingezet.<br />
Lichtblauw weer voor secundaire achtergronden.<br />
#05D5FF<br />
#F6F9FC<br />
7
Typografie<br />
<strong>Open</strong> <strong>Sans</strong><br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
0123456789 !@#$%^&*()<br />
<strong>Open</strong> <strong>Sans</strong> is het<br />
font wat nu door de<br />
huidige site van<br />
<strong>Justlease</strong> wordt<br />
doorgevoerd.<br />
FontAwesome iconen<br />
✉ ☎<br />
<br />
Tekstlabels<br />
ZEER<br />
GOED<br />
EXTRA<br />
VOORDEEL<br />
8
Toepassing typografie<br />
Titel kop bold 24pt ‘<strong>Open</strong> <strong>Sans</strong>’ kleur: donker blauw, lineheight: 26<br />
Sub kop bold 18pt<br />
Sub kop bold 18pt<br />
‘<strong>Open</strong> <strong>Sans</strong>’ kleur: oranje, lineheight: 26<br />
‘<strong>Open</strong> <strong>Sans</strong>’ kleur: donker blauw, lineheight: 26<br />
Platte tekst Regular 14pt consectetur<br />
adipiscing elit. Donec risus elit, malesuada<br />
a pretium eget, vestibulum eget libero.<br />
‘<strong>Open</strong> <strong>Sans</strong>’ kleur: oranje, lineheight: 21<br />
Platte tekst Regular 14pt consectetur<br />
adipiscing elit. Donec risus elit, malesuada<br />
a pretium eget, vestibulum eget libero.<br />
‘<strong>Open</strong> <strong>Sans</strong>’ kleur: donker blauw, lineheight: 21<br />
9
Formulieren<br />
Naam<br />
Input veld met label<br />
Werknemer<br />
Naam<br />
Manon<br />
Input veld actief<br />
Voordelen<br />
<br />
<br />
Je komt niet voor (financiële)<br />
Manon<br />
Input veld ingevuld<br />
verrassingen te staan<br />
<br />
Zonder grote investering toch<br />
De heer<br />
Mevrouw<br />
Radio buttons<br />
<br />
een splinternieuwe auto<br />
Alles wordt voor je geregeld<br />
Optie 1<br />
<br />
Optie 2<br />
Check boxes<br />
<br />
<br />
Een vaste lage maandprijs<br />
Geen onderhoud of APK stress<br />
<br />
Geen bijtelling<br />
Blijf op de hoogte van alle acties!<br />
Voorwaarden<br />
<br />
E-mailadres<br />
Voorbeeld van invulveld<br />
met verzend pijltje<br />
10
Buttons<br />
Meer over de App<br />
Meer over de App<br />
Primaire CTA<br />
Height: 40px<br />
Fill/outline: #FA6800<br />
Text: #FFFFF<br />
Font: <strong>Open</strong> <strong>Sans</strong><br />
Afgeronde hoeken radius: 4px<br />
Schaduw: #646464, 50%, X-0, Y-2, Blur 4<br />
Schrijf ook een beoordeling<br />
Text link<br />
Text: #FA6800<br />
Font: <strong>Open</strong> <strong>Sans</strong><br />
11
Grafische vormen<br />
-5º<br />
Laag-hoog onderkant<br />
Hoog-laag onderkant<br />
Zowel beelden als een kleurvlak kunnen een schuine lijn aan<br />
de onderkant bevatten.<br />
Deze schuine lijn kan afhankelijk van de foto-tekst combinatie<br />
van laag naar hoog of van hoog naar laag geplaatst worden.<br />
De schuine lijn kan ook aan de bovenkant zitten, als 1 van de<br />
zijdes maar vlak is.<br />
Laag-hoog bovenkant<br />
Hoog-laag bovenkant<br />
12
Persona Rene<br />
Tone of voice<br />
Onderbouwend, overtuigend,<br />
betrouwbaar en persoonlijk<br />
Fotografie<br />
<br />
<br />
<br />
Het is slim.<br />
Alles geregeld.<br />
Een mooi complete oplossing.<br />
Voor de fotografie is het belangrijk dat de focus ligt op de persona zelf. In dit<br />
geval dus Rene. Een gezellige familie man van rond de 35.<br />
Beelden bevatten een schuine lijn aan de onderkant. Deze schuine lijn kan<br />
afhankelijk van de foto-tekst combinatie van laag naar hoog of van hoog<br />
naar laag geplaatst worden.<br />
13
Persona Egbert<br />
Tone of voice<br />
Snel en direct tot zaken komen<br />
(mag knallen)<br />
Fotografie<br />
<br />
<br />
<br />
<br />
Het is simpel.<br />
Geen spaargeld nodig.<br />
De laagste maandelijkse kosten<br />
De grootste zekerheden<br />
Voor de fotografie is het belangrijk dat de focus ligt op de persona zelf. In dit<br />
geval dus Egbert. Een vrolijke, vriendelijke man van rond de 50.<br />
Beelden bevatten een schuine lijn aan de onderkant. Deze schuine lijn kan<br />
afhankelijk van de foto-tekst combinatie van laag naar hoog of van hoog<br />
naar laag geplaatst worden.<br />
14
Persona Rosanne<br />
Tone of voice<br />
Alles inclusief. Alles geregeld. Butler<br />
service: vrijheid en zekerheid<br />
(pronken bij vriendinnen en feestjes)<br />
Fotografie<br />
<br />
<br />
<br />
Het is logisch. Past bij mij.<br />
Tijd- en zorgen besparend<br />
Representatieve auto.<br />
Voor de fotografie is het belangrijk dat de focus ligt op de persona zelf. In dit<br />
geval dus Rosanne. Een jonge spontane vrouw van rond de 30.<br />
Beelden bevatten een schuine lijn aan de onderkant. Deze schuine lijn kan<br />
afhankelijk van de foto-tekst combinatie van laag naar hoog of van hoog<br />
naar laag geplaatst worden.<br />
15
Change language