Huisstijlhandleiding
Versie 1.0
Huisstijlhandleiding 1.0
Pagina 1
Huisstijlhandleiding
Versie 1.0
Inhoudsopgave Hier staat alle inhoud van dit document.
Introductie
3
Lettertype 13
Welkom!
Typografie
Tone of voice 4
Iconen 14
Hoe we communiceren Wat we wel/niet zijn
Onze beeldtaal
Illustraties 15 Het logo 5 Onze trots Het gebruik Het beeldmerk Juist gebruik Onjuist gebruik
Beeldende representatie
Branding 16 De wolk Accentuering
Beeld 18 Kleuren 10 Primaire kleur Secundaire kleuren Steunkleuren
Beeldeisen Foutief beeld
Pagina 2
Huisstijlhandleiding
Versie 1.0
Introductie Welkom! Dit is het huisstijldocument van Geef.nl. In dit document worden de regels omtrent het gebruik van de huisstijl gehanteerd en gedocumenteerd. Geef.nl is een crowdfundingwebsite waar mensen een actie kunnen voeren voor een goed doel naar keuze. Op die manier kunnen zij meer geld ophalen dan met een donatie. Dit document dient niet openbaar te worden gedeeld.
Pagina 3
Huisstijlhandleiding
Versie 1.0
Tone of voice Hoe we communiceren Geef staat dichtbij je. Van Geef wordt je vrolijk, hij zal nooit negatief tegen je doen. Geef probeert altijd om gebruikers positief en hoopvol te stimuleren om hun favoriete goede doel zo goed mogelijk te kunnen steunen. Daarnaast is Geef enthousiast en actief, hij zit niet stil en is constant aan de praat. Het is een kwebbelkous.
Wat we wel/niet zijn We zijn leuk, prettig, positief, non-profit, persoonlijk, hoopvol, blij, samenhorig, actief, transparant en optimistisch. We zijn niet formeel, zakelijk, schokkerend, passief, pessimistisch, achterhoudend. De pay-off van Geef is:
‘Jij maakt het verschil’.
Pagina 4
Huisstijlhandleiding
Versie 1.0
Het logo Onze trots n e m r o v e d n
Ro
Dit is het Geef logo (rechts). Zowel een beeld- als woordmerk.
g n i g j i t s e v e i t i s o P
Het logo is het eerste dat mensen zullen zien met betrekking tot ons merk. Daarom is het belangrijk dat het logo precies reflecteert wat we willen dat het reflecteert. Deze waarden zijn terug te vinden in het hoofdstuk ‘tone of voice’. Lachend
e e’s
Pagina 5
Huisstijlhandleiding
Versie 1.0
Het gebruik Om te voorkomen dat het logo ‘stikt’ door ruimtetekort. Zijn er richtlijnen verbonden voor het communiceren van het logo. De ruimte die het logo in beslag neemt is ten alle tijden ‘y’. De ruimte die boven & naast het logo beschikbaar moet zijn, is ten alle tijden ‘½ y’. Digitaal
40px minimum y
1 cm minimum y
De bovenstaande restricties zijn bedoeld als minimum hoogte voor het gebruik van het logo.
½y
y
½y
Pagina 6
Huisstijlhandleiding
Versie 1.0
Het beeldmerk Soms is het niet nodig om het volledige logo kenbaar te maken of is er te weinig ruimte om het volledige logo te gebruiken.
1/3 x
x
1/3 x
In deze gevallen kan het beeldmerk worden gebruikt. De ruimte die het beeldmerk in beslag neemt is ten alle tijden ‘x’. De ruimte die boven & naast het logo beschikbaar moet zijn, is ten alle tijden ‘1/3 x’. Digitaal
40px minimum x
1 cm minimum x
De bovenstaande restricties zijn bedoeld als minimum breedte voor het gebruik van het beeldmerk.
Pagina 7
Huisstijlhandleiding
Juist gebruik
Versie 1.0
Dit is juist
Soms is het lastig om te pijlen hoe het logo gebruikt moet worden. Daarom is het belangrijk dat deze richtlijnen in dit document zijn vastgesteld. Dat zorgt namelijk voor consistentie in design en uitvoering. Het logo mag alleen op oranje, donkerblauw en wit worden gepresenteerd. Andere huisstijlkleuren zijn wel mogelijk bij het gebruik van het beeldmerk.
Pagina 8
Huisstijlhandleiding
Onjuist gebruik
Versie 1.0
Dit is onjuist
Omdat logo’s vaak niet op de manier worden gebruikt zoals ze bedoeld zijn, wordt hier omschreven wat niet de bedoeling is. De reden dat andere kleuren dan oranje beter niet gebruikt kunnen worden in samenhang met het woordmerk, heeft te maken met consistentie en herkenbaarheid. Op foto’s dient het logo of het beeldmerk enkel in wit gebruikt te worden, dit heeft te maken met het watermerken van foto’s. Meer informatie over het gebruik van kleuren is op de volgende pagina te vinden.
Pagina 9
Huisstijlhandleiding
Kleuren
Versie 1.0
Geef Oranje
Primaire kleur Het Geef oranje. De kleur die ons het allerbeste representeerd. Oranje is de kleur van activiteit, warmte, samenhorigheid, sociaal zijn, bekwaamheid, persoonlijkheid en vriendelijkheid. Naast het feit dat oranje de primaire merkkleur is, wordt hij gebruikt als aandachtstrekker. Onze primaire merkkleur is in elke tint te gebruiken, van 100% tot 1%. Daarnaast kan de kleur tot 50% donkerder door zwart toe te voegen.
100%
Kleurverloop
#FF663F RGB
255.102.64 CMYK
0.71.72.0
Pagina 10
Huisstijlhandleiding
Kleuren Secundaire kleuren
Versie 1.0
Geef Geel
Geef Groen
Geef Blauw
100%
100%
100%
Kleurverloop
Kleurverloop
Kleurverloop
#FFC600
#6AD246
#40BAF2
RGB
RGB
RGB
Geel, blauw en groen. De additionele merkkleuren die merkwaarden van Geef representeren. Groen voor duurzaamheid, gezondheid en natuur. Geel voor warmte, enthousiasme, vriendschap en optimisme. Blauw voor betrouwbaarheid en de non-profit gedachte.
255.195.0
106.210.70
64.185.242
CMYK
CMYK
CMYK
0.24.93.0
60.0.87.0
65.7.0.0
Pagina 11
Huisstijlhandleiding
Kleuren Steunkleuren Voor een goede balans met alle primaire en secundaire huisstijlkleuren, zijn er kleuren geselecteerd die worden gebruikt als steunkleuren. Deze kleuren worden vooral gebruikt in alle teksten die er geschreven gaan worden, maar kunnen ook terugkomen in andere vormen. Deze kleuren dienen met mate te worden gebruikt (met uitzondering van tekst). Aangezien het primaire of secundaire merkkleuren zijn.
Versie 1.0
Geef Donkergrijs
Geef Lichtgrijs
Geef Wit
100%
100%
100%
Kleurverloop
Kleurverloop
Geen kleurverloop
#202D3E
#8896A9
#FFFFFF
RGB
RGB
RGB
255.195.0
106.210.70
64.185.242
CMYK
CMYK
CMYK
0.24.93.0
60.0.87.0
65.7.0.0
+ Randen hebben altijd de kleur ‘Donkergrijs’ op 5% tot 15% tint. Met een dikte van 2px. + Schaduwen hebben altijd de kleur ‘Donkergrijs’ op 5% tot 15% tint. Met een minimale radius van 10px en een maximale radius van 20px
Pagina 12
Huisstijlhandleiding
Lettertype
Versie 1.0
H1 titel Museo Sans Rounded 44-60px
Onze typografie Voor alle teksten bij onze communicatie-uitingen geldt het volgende; Museo Sans Rounded voor titels, subtitels en buttons. Nunito Sans voor de body tekst. Rechts is te zien hoe de lettertypes in de praktijk gebruikt moeten worden.
H2 titel Museo Sans Rounded 30px
H3 subtitel Museo Sans Rounded 20-24px
Buttons
Wij kunnen alles Ik ga rennen voor KiKa
Ga skydiven!
Start een actie
Museo Sans Rounded 16-20px
Body tekst Nunito Sans 16-18px
Deze tekst is geschreven om na te bootsen hoe de body van alle teksten op Geef.nl er ongeveer uit moeten komen te zien.
Legal
Eerst akkoord gaan met de actievoorwaarden
Nunito Sans 12px
Pagina 13
Huisstijlhandleiding
Versie 1.0
Iconen Onze beeldtaal
Iconografie voor verduidelijking
Op Geef.nl zullen een groot aantal iconen worden gebruikt om tekst te verminderen op de website en andere communicatiemiddelen. Deze iconen zijn allemaal ‘flat’ om zo makkelijk mogelijk mensen duidelijk te kunnen maken welke mapping er waarschijnlijk plaatsvindt.
Iconografie voor features
Gedetailleerde iconen zijn niet toegestaan. Wel is het mogelijk om gedetailleerde illustraties te maken met meerdere kleuren en vormen.
+ Iconen hebben altijd vastgestelde afmetingen. De afmetingen bij het gebruiken van iconen zijn als volgt; 12x12px, 18x18px, 24x24px, 48x48px, 92x92px, etc.
Pagina 14
Huisstijlhandleiding
Versie 1.0
Illustraties Beeldende representatie Op Geef.nl zijn een aantal illustraties te vinden die te maken hebben met het verduidelijken van de boodschap of het accentueren van een onderdeel van de tekst. Deze elementen zorgen ervoor dat de boodschap beter op de gebruiker overkomt. Alle illustraties op Geef bestaan minstens uit twee merkkleuren.
+ Illustraties variĂŤren in grootte, over het algemeen zijn ze; 24x24px, 48x48px, 92x92px.
Pagina 15
Huisstijlhandleiding
Branding
Versie 1.0
De wolk variaties
De wolk Om Geef.nl uniek te maken en de huisstijl in elke uiting terug te laten komen, zijn er ‘brand elementen’ gemaakt.
Toepassing
Deze brand elementen komen terug in alle uitingen en zorgen voor consistentie en herkenbaarheid bij communicatie. Rechts is de toepassing te zien die verwacht wordt en een voorbeeld van een onjuiste toepassing. De wolk dient altijd om een geheel vlak te worden geplaatst, en niet als element individueel. Oranje en Blauw zijn de enige toegestane kleuren.
Pagina 16
Huisstijlhandleiding
Versie 1.0
Branding Accentuering
Accentuering variaties
Om ervoor te zorgen dat illustraties nog meer uit het oog springen, kan er een brand element worden toegevoegd aan een illustratie om meer aandacht te vestigen op de illustratie. Bij dit soort illustraties is het belangrijk dat de illustraties buiten de hoofcirkel vallen (Figure and Ground). Op die wijze springen de illustraties meer uit het oog. Daarnaast dienen de iconen die ondersteunend worden gebruikt naast de illustraties niet in een te grote kwantiteit te worden gebruikt 10 (minimaal) tot 20 (maximaal) elementen is meer dan voldoende.
Pagina 17
Huisstijlhandleiding
Versie 1.0
Beeld Beeldeisen Omdat beeld heel belangrijk is voor elk merk (dus ook voor Geef) moet er duidelijk zijn wat er wel/niet gebruikt moet gaan worden. Dit zijn de 5 beeldeisen: 1. Het beeld moet emotie tonen (deze emoties zijn; hoop, samenhorigheid, blijdschap, vreugde en vastberadenheid. 2. Het beeld moet niet schokkeren 3. Het beeld moet niet gekocht over komen. 4. Het beeld heeft geen toege voegde tekst. 5. Het beeld moet een boodschap hebben. Hiernaast zijn voorbeelden van goed beeld te zien.
Pagina 18
Huisstijlhandleiding
Versie 1.0
Beeld Foutief beeld Dit zijn beelden die niet aan de beeldeisen voldoen. De bovenste twee beelden schokkeren, de foto rechtsmidden heeft toegevoegde tekst, de foto linksmidden is irrelevant, de foto linksonder is een textuur (geen boodschap) en de foto rechtsonder is overduidelijk stockfotografie.
Pagina 19
Huisstijlhandleiding Geef Huisstijlhandleiding - Versie 1.0
Versie 1.0
Pagina 20