Voordat je kan gaan beginnen met content schrijven en de website echt opzetten, moet je nadenken over een huisstijl. Een website met een (goede) huisstijl zal veel meer in trek zijn bij de bezoeker dan een website die dat niet heeft. Voor een nieuwe affiliatewebsite hoef je echt niet de diepte in te gaan voor een nieuwe huisstijl. Je gaat wel nadenken over de kleuren op je website, het logo, de typografie en het beeldmateriaal. Dit kan voor een nieuwe website vrij kort, maar ik adviseer je om er toch even goed over na te denken. In dit artikel bespreek ik wat er in een huisstijl voor een website vastgelegd wordt. Ik vul dit stap-voor-stap in voor mijn nieuwe project, zodat je meteen een goed voorbeeld ziet.
Wat is een huisstijl voor een website?
Een huisstijl is een manier om een bedrijf of organisatie er altijd hetzelfde uit te laten zien. Het helpt mensen het bedrijf te herkennen en vertrouwen te hebben in wat ze doen. Een huisstijl bestaat uit verschillende dingen die samen een mooi en duidelijk plaatje maken. Hieronder bespreek ik per element van de huisstijl hoe je dit het beste aan kan pakken. Ook geef ik per element een korte uitleg.
Logo
Het logo is het meest herkenbare van een huisstijl van een website. Het moet echt de essentie van het merk of de organisatie samenvatten. Gaat je website groeien, dan zul je het logo ook gaan gebruiken op verschillende communicatiemiddelen, zoals facturen. We gaan in dit hoofdstuk nog geen logo maken. Dit doen we in de volgende twee hoofdstukken genaamd:
De reden dat we hier even mee wachten? Voordat je een logo kan gaan maken, moet je eerst de typografie en kleuren hebben bepaald voor je nieuwe website.
Kleurenpalet
Dit vind ik zelf een van de lastigste dingen aan een nieuwe website. Gelukkig zijn er veel hulpmiddelen online te vinden die je kunnen helpen bij het bepalen van een goed kleurpalet. Ook dit is een erg belangrijk onderdeel van de huisstijl van je website. Het kleurenpalet bestaat uit een selectie van kleuren die de merkidentiteit weerspiegelen.
Kleurenpsychologie begrijpen
Kleurenpsychologie is het bestuderen van de impact van kleuren op menselijk gedrag en emoties. Om een effectief kleurenschema te ontwikkelen, is het belangrijk om te begrijpen hoe verschillende kleuren mensen kunnen beïnvloeden. Natuurlijk heeft iedereen wel een ander beeld bij een bepaalde kleur, maar er gelden wel een aantal basisregels. Hier zijn enkele basisprincipes:
- Rood: Kracht, passie, liefde, energie
- Blauw: Betrouwbaarheid, kalmte, loyaliteit, wijsheid
- Groen: Groei, balans, natuur, welzijn
- Geel: Optimisme, geluk, energie, creativiteit
- Oranje: Vriendelijkheid, enthousiasme, warmte, avontuur
- Paars: Luxe, spiritualiteit, mysterie, creativiteit
- Wit: Puurheid, eenvoud, frisheid, helderheid
- Zwart: Kracht, elegantie, formaliteit, mysterie
Tool gebruiken
Ik gebruik regelmatig de Tool van Coolors (hier te vinden). Je kan hier eenvoudig kleurschema’s maken en al bestaande (werkende) kleurschema’s bekijken. Je bekijkt deze aan de hand van een hex-code per kleur. Kom je er zelf niet goed uit met de kleuren? Vraag dan zeker de mening van mensen in je omgeving over een kleurschema!
- Ga naar de website van Coolors
- Druk op Start the Generator
- Druk op de spatiebalk om een nieuw kleurpalet aan te roepen
- Vind je een kleur mooi? Druk dan op het slotje bij de kleur om deze vast te zetten
- Herhaal totdat je een mooi palet hebt gevonden!
Vier dingen om rekening mee te houden
Een effectief kleurenpalet bestaat meestal uit 3-5 kleuren. Deze werken goed samen en moeten een mooi geheel vormen. Ik kies er zelf vaak voor om 5 kleuren in een kleurpalet voor een website te gebruiken. Al wijk ik hier soms wel vanaf, zoals op deze website. Voor mijn nieuwe project wil ik wel 5 kleuren gaan bepalen voor de website. Hier zijn vier stappen om je te helpen bij het samenstellen van je kleurenpalet:
Basiskleur kiezen
Kies een basiskleur: Begin met het kiezen van een basiskleur die je merk weerspiegelt en de juiste emoties oproept. Deze kleur zal de basis vormen voor de rest van je kleurenpalet. Ik vind blauw wel een mooie kleur, omdat dit wijsheid uitstraalt. Daarnaast vind ik het ook een kleur die goed bij technologie past. Iets wat goed past bij GPS-trackers. Na even zoeken op Coolors ben ik uitgekomen op de kleur #47536b blauw. Een vrij donkere kleur blauw.
Voeg een accentkleur toe
Kies een accentkleur die contrasteert met je basiskleur en die helpt om bepaalde elementen op je website te benadrukken, zoals bekijk-hier knoppen of belangrijke informatie. Deze kleur moet opvallen zonder de basiskleur te overschaduwen. Hier kan je een hele kleurenleer op loslaten, maar ik kies voor een lichtere kleur, een soort lichtgrijs oranje, #fae8e0.
Ik weet nog niet of ik alle knoppen op de website in deze kleur ga maken, maar dat is iets voor later. In de onderstaande tabel zie je een aantal geschikte contrastkleuren van elkaar! Ik heb dus gekozen voor een oranjeachtige kleur als contrast.
| Kleur 1 | Kleur 2 |
| Blauw | Oranje |
| Rood | Groen |
| Geel | Paars |
| Zwart | Wit |
| Donkergrijs | Lichtgrijs |
| Donkerblauw | Lichtblauw |
| Donkergroen | Lichtgroen |
| Donkerpaars | Lichtpaars |
| Donkerrood | Lichtroze |
| Donkeroranje | Lichtoranje |
| Donkergeel | Lichtgeel |
| Marineblauw | Geel |
| Turquoise | Koraalrood |
| Roze | Mintgroen |
| Lavendel | Goudgeel |
| Olijfgroen | Perzik |
| Bordeauxrood | Zeegroen |
| Magenta | Limegroen |
| Bruin | Lichtturquoise |
| Kobaltblauw | Zalmroze |
Selecteer neutrale kleuren
Voeg een of twee neutrale kleuren toe die goed passen bij je basiskleur en accentkleur. Neutrale kleuren zoals wit, grijs en beige kunnen worden gebruikt voor de achtergrond, tekst en andere elementen die niet de aandacht hoeven te trekken. Ik kies hier ook voor een ander soort blauw, omdat ik dit mooi vind passen. Ik voeg hier #4974a5, #dbbaac en #9f9590 toe aan mijn pallet. In totaal heb ik nu 5 kleuren.
Samenhang bekijken
Voeg alle kleuren toe aan het pallet van Coolors of aan het merkmateriaal van Canva. Bekijk nu of je deze kleuren mooi vind, zit er een contrastkleur in? Passen de kleuren goed samen? Vraag ook meningen van anderen. Ik ben op het volgende pallet uitgekomen:
Voorbeelden van kleurschema’s
Een aantal voorbeelden en ideeën op een rij. Je moet per kleurschema nog wel twee kleuren toevoegen die je er goed bij vindt passen.
Kleurenschema 1: Vertrouwen en technologie
- Donkerblauw (#1A3A72): Betrouwbaarheid, professionaliteit, technologie
- Lichtblauw (#47A3FF): Innovatie, helderheid, communicatie
- Grijs (#8C8C8C): Neutraliteit, stabiliteit, balans
Kleurenschema 2: Avontuur en natuur
- Groen (#2E8C4E): Groei, natuur, avontuur
- Oranje (#F67C01): Energie, enthousiasme, warmte
- Beige (#D9CAB3): Rust, betrouwbaarheid, aarding
Kleurenschema 3: Modern en dynamisch
- Paars (#5A3B8A): Creativiteit, luxe, innovatie
- Geel (#FFC857): Optimisme, energie, helderheid
- Lichtgrijs (#E1E1E1): Neutraliteit, moderniteit, eenvoud
Typografie bepalen
De typografie is ook een belangrijk onderdeel van de huisstijl. Iets waar ik misschien nog wat meer aandacht aan mag besteden op mijn affiliatewebsites. Het lettertype moet goed leesbaar zijn, zowel op mobiel als op grotere schermen. De stijl moet passen bij je merk. Maak je een tech-website, dan kies je eerder voor een moderner lettertype. Je bepaalt naast het lettertype ook de regelafstand en de grootte van de tussenkopjes en alinea’s. In principe mag je voor deze stap ook alleen het lettertype bepalen. De rest kunnen we eventueel ook later instellen! Hieronder een aantal veelgebruikte lettertypen met daarbij de uitstraling die het kan hebben op de lezer.
| Lettertype | Uitstraling |
| Helvetica | Modern, zakelijk, neutraal |
| Times New Roman | Klassiek, traditioneel, formeel |
| Arial | Eenvoudig, zakelijk, universeel |
| Futura | Geometrisch, modern, minimalistisch |
| Garamond | Elegant, tijdloos, verfijnd |
| Georgia | Leesbaar, klassiek, web-vriendelijk |
| Baskerville | Autoriteit, betrouwbaarheid, literair |
| Comic Sans | Informeel, speels, luchtig |
| Lobster | Decoratief, vriendelijk, opvallend |
| Montserrat | Modern, strak, veelzijdig |
| Roboto | Functioneel, geometrisch, modern |
| Lato | Professioneel, veelzijdig, zakelijk |
| Playfair Display | Klassiek, verfijnd, luxe |
| Open Sans | Universeel, leesbaar, web vriendelijk |
| Raleway | Elegant, modern, geometrisch |
| Poppins | Modern, strak, vriendelijk |
Tip: Kijk op www.fonts.google.com naar de diverse fonts. Je ziet er meteen een goed voorbeeld van.
De typografie die ik heb gekozen
Mijn keuze is voor het nieuwe project gevallen op Poppins. Dit vind ik zowel op mobiel als desktop een fijn lettertype. Ik gebruik het voor meerdere projecten.
Google font
- Poppins
Dit is het lettertype wat ik ga gebruiken op de gehele website. Je zou zelf ook kunnen kiezen om bijvoorbeeld de Headings (tussenkopjes) in een ander lettertype te weergeven.
Body
- Standaard lettertypegewicht en stijl
- Lettertype grootte: 17px
- Regelhoogte: 1,5px
- Letterspatiëring: standaard
- Ondermarge van de alinea 1,5 em
Koptekst H1
- Standaard lettertypegewicht en stijl
- Lettertype grootte: 42px
- Regelhoogte: 1,2px
- Letterspatiëring: standaard
- Marge onderkant 20px
- (misschien) #47536b als kleur
Koptekst H2
- Standaard lettertypegewicht en stijl
- Lettertype grootte: 30px
- Regelhoogte: 1,2px
- Letterspatiëring: standaard
- Marge onderkant 20px
- (misschien) #47536b als kleur
Koptekst H3
Overnemen van H2, maar dan met lettertype gewicht 500.
Goed om te weten: Wat je nu vastlegt kun je gaandeweg natuurlijk gewoon aanpassen als je dat nodig vind. Ik vind het wel altijd erg fijn om van tevoren alvast een lijn uit te zetten. Ik probeer me er vervolgens wel zoveel mogelijk aan te houden.
Beeldmateriaal en andere grafische elementen
In dit gedeelte leg je kort vast wat voor soort afbeeldingen je wil gaan gebruiken. Voor de GPS-tracker website bepaal ik het volgende:
- Ik gebruik waar mogelijk foto’s met een witte of neutrale achtergrond
- Er komen heldere, scherpe foto’s van GPS-trackers en relevante technologieën op de website te staan
- Ik kies voor een eenduidige illustratiestijl, onder andere door het gebruik van pictogrammen en illustraties.
- Ik Integreer elementen gerelateerd aan locatie, kaarten en navigatie, zoals kompassen, kaarten en pin-icoontjes op de website
Huiswerkopdracht
Vul voor jezelf ook een huisstijl in (op het logo na). Bij de typografie mag je er voor kiezen om alleen het lettertype te bepalen als je al het andere nog niet weet. Leg de huisstijl vast in en document. Met name de hex-codes van de kleuren zijn erg fijn om altijd snel terug te vinden.
