Het korte antwoord
Sterke huisstijlen delen vier eigenschappen: ze gebruiken weinig kleuren, ze houden typografie eenvoudig, ze hebben een consequente beeldstijl en ze zijn herkenbaar zonder het logo. Goede voorbeelden zijn NS (geel en blauw), PostNL (oranje) en Coolblue (een herkenbare, informele toon). Kijk bij voorbeelden dus niet naar het logo maar naar wat er gebeurt als je dat wegdenkt. Blijft het merk dan nog herkenbaar aan kleur, vorm en toon, dan is de huisstijl sterk. De belangrijkste les uit vrijwel elk goed voorbeeld: consequent toepassen levert meer op dan mooi ontwerpen.
Kijk naar het patroon, niet naar het plaatje
De verleiding bij het bekijken van huisstijlvoorbeelden is om te zoeken naar iets moois om na te doen. Dat werkt zelden, omdat wat bij een sportmerk past bij een accountantskantoor ongeloofwaardig oogt. Wat je wel kunt overnemen zijn de onderliggende principes, en die zijn opvallend consistent over branches heen.
Het eerste patroon is beperking. Sterke huisstijlen gebruiken minder kleuren en minder lettertypes dan je zou verwachten, vaak twee van elk. Dat voelt bij het ontwerpen karig, maar het is precies wat herkenning oplevert.
Het tweede patroon: dezelfde keuzes op elk contactmoment. De kleur van de website is de kleur van de factuur, de bus, de handtekening onder de mail en de badge op een beurs. Merken die je moeiteloos herkent doen niets bijzonders per uiting; ze doen op honderd plekken hetzelfde. Dat is een discipline, geen ontwerpvondst.
Zes huisstijl voorbeelden van bekende Nederlandse merken
De sterkste voorbeelden liggen gewoon op straat. Een gele trein herken je als NS, een oranje bus als PostNL, een geel busje langs de snelweg als de Wegenwacht. Niemand hoeft daarvoor het logo te lezen. Dat is precies wat een huisstijl moet doen: een merk herkenbaar maken voordat de naam in beeld komt.
In de tabel hieronder staan zes merken die elk één ding opvallend goed doen. Ze hebben grote budgetten, maar de les is niet duur. Wat ze gemeen hebben, is dat ze een beperkt aantal keuzes maken en die jarenlang overal doorvoeren. Dat kan een bedrijf met vijf medewerkers net zo goed.
| Merk | Wat je herkent | Wat jij ervan leert |
|---|---|---|
| NS | Geel en blauw, van trein en station tot app | Twee kleuren, maar dan overal en altijd dezelfde |
| PostNL | Oranje op bussen, bezorgers en brievenbussen | Eén kleur die je eigen maakt, werkt beter dan vijf |
| ANWB | Felgeel, van de Wegenwacht-auto tot de winkel | Een kleur die past bij de belofte: zichtbaar en behulpzaam |
| Coolblue | Blauw met oranje accenten en een informele, grappige toon | Tone of voice is net zo goed huisstijl als kleur |
| HEMA | Rood, en een eigen, eenvoudige vormgeving van producten en verpakkingen | De huisstijl stopt niet bij het logo, maar loopt door tot in het product |
| KLM | Het eigen blauw en de kroon, van vliegtuig tot uniform | Consequent toepassen maakt een kleur tot bezit |
Tip: Kies één merk uit de tabel dat qua sfeer bij je past en schrijf op wat het in één zin anders doet dan zijn concurrenten. Die zin is bruikbaarder in een briefing dan tien screenshots.
De logo-test
Een bruikbare manier om voorbeelden te beoordelen: dek het logo af en kijk of je nog weet van welk bedrijf je kijkt. Bij sterke huisstijlen lukt dat, doordat kleur, vormtaal en fotografie het werk al doen. Bij zwakke huisstijlen valt alles weg zodra het logo verdwijnt, wat betekent dat het merk volledig op dat ene element leunt.
Doe die test ook op je eigen materiaal. Leg je website, je offerte en je socialmediaprofiel naast elkaar met de logo's afgedekt. Lijkt het op drie bedrijven, dan weet je waar je moet beginnen, en meestal is dat niet bij een nieuw logo maar bij het gelijktrekken van kleur en typografie over die drie uitingen heen.
Tip: Print je drie belangrijkste uitingen uit, dek de logo's af en leg ze naast elkaar op tafel. Deze test kost vijf minuten en laat directer zien waar je huisstijl rammelt dan welk ontwerpgesprek ook.
Wat je per branche ziet werken
In zakelijke dienstverlening zie je terughoudende paletten met één opvallende accentkleur, veel witruimte en fotografie van echte mensen in plaats van stockbeelden. Dat werkt daar omdat de aankoop op vertrouwen draait en overdaad juist twijfel zaait. In de bouw en techniek zie je het omgekeerde: verzadigde kleuren, stevige letters en beeld van het werk zelf, omdat daar vakmanschap het argument is.
In horeca en retail domineert beeld boven tekst, met een huisstijl die vooral bepaalt hoe foto's worden bewerkt. En bij webshops zie je dat de huisstijl ondergeschikt wordt gemaakt aan de productfoto's: rustige achtergronden, één accentkleur voor knoppen, zodat het product de aandacht krijgt. Dat laatste is de meest gemaakte fout bij shops die opvallen belangrijker vinden dan verkopen.
| Type bedrijf | Wat je typisch ziet | Waarom het werkt |
|---|---|---|
| Zakelijke dienstverlening | Rustig palet, veel witruimte, echte mensen | Aankoop draait op vertrouwen |
| Bouw en techniek | Verzadigde kleuren, stevige letters, werkbeeld | Vakmanschap is het argument |
| Horeca en retail | Beeld voorop, huisstijl stuurt de fotobewerking | Sfeer verkoopt |
| Webshops | Rustige basis, één accentkleur voor knoppen | Het product moet opvallen, niet de site |
Drie fouten die je in slechte voorbeelden ziet
De eerste is het regenboogpalet: vijf of meer kleuren zonder duidelijke hoofdkleur, waardoor niets meer opvalt en elke nieuwe uiting een discussie wordt. De tweede is het lettertype dat op de ontwerpcomputer stond maar niet op het web beschikbaar is, waardoor de site er anders uitziet dan de folder en niemand begrijpt waarom.
De derde en meest schadelijke: een huisstijl die alleen op papier is bedacht. Logo's die op een visitekaartje prachtig zijn maar onleesbaar worden als profielfoto van 40 pixels, of kleurcombinaties die op scherm te weinig contrast hebben om leesbaar te zijn. Aangezien vrijwel al je contactmomenten op een telefoonscherm plaatsvinden, is dat de duurste fout van de drie.
- Meer dan vier kleuren zonder duidelijke hoofdkleur
- Lettertypes die online niet beschikbaar zijn
- Geen logo-variant voor donkere of kleine weergave
- Te weinig kleurcontrast, waardoor tekst slecht leesbaar is
- Beeldstijl niet vastgelegd, waardoor foto's onderling botsen
Huisstijl op je website: zo ziet het eruit
Voor de meeste mkb-bedrijven is de website de plek waar de huisstijl het vaakst wordt gezien, en dus ook waar hij het meeste oplevert. Een paar keuzes doen daar het werk. Gebruik je accentkleur alleen voor knoppen en links, zodat bezoekers direct zien waar ze kunnen klikken. Zet je koppen in je merkletter en de lopende tekst in een rustig, goed leesbaar lettertype. En geef foto's één vaste behandeling, bijvoorbeeld altijd daglicht, echte mensen en dezelfde uitsnede, zodat de pagina's als één geheel voelen.
Ook de kleine teksten horen erbij. Een merk met een informele toon, zoals Coolblue, houdt die toon vast in knoppen, formulieren en foutmeldingen. Een knop die "Vraag je gratis ontwerp aan" zegt in plaats van "Verzenden" is ook huisstijl. Wil je zien hoe dat samenkomt in een site die is gebouwd om aanvragen op te leveren, kijk dan bij website laten maken.
- Eén accentkleur, alleen voor knoppen en links
- Koppen in de merkletter, lopende tekst in een leesbaar webfont
- Eén vaste fotostijl voor alle pagina's
- Dezelfde iconenset overal, in dezelfde lijndikte
- De tone of voice ook in knoppen, formulieren en foutmeldingen
- Logo-varianten voor licht en donker en voor kleine weergave
Waar vind je goede huisstijl voorbeelden?
Voor visuele inspiratie zijn Pinterest, Behance en Dribbble de bekende plekken. Pinterest is handig om een moodboard te maken, Behance en Dribbble laten complete huisstijlprojecten van ontwerpers zien, vaak met logo, kleuren, typografie en toepassingen naast elkaar. Voor kleuren is Coolors bruikbaar om paletten te maken en te testen. Let bij al deze platforms op één ding: je ziet het ontwerp, niet of het in de praktijk werkt.
Daarom zijn twee andere bronnen minstens zo waardevol. Kijk naar bedrijven in je eigen branche die een stap verder zijn dan jij, en noteer wat hun website, offerte en socialmediaprofiel gemeen hebben. En kijk naar huisstijlhandboeken die organisaties openbaar maken, zoals de Rijkshuisstijl van de overheid. Daarin zie je niet alleen het resultaat, maar ook de afspraken die ervoor zorgen dat honderden mensen hetzelfde merk op dezelfde manier gebruiken.
Van voorbeeld naar je eigen huisstijl
Verzamel vijf tot tien voorbeelden die je aanspreken, en schrijf bij elk in één zin op waarom. Niet dit is mooi, maar dit voelt rustig en betrouwbaar door de witruimte. Die zinnen samen vormen je briefing, en die is waardevoller dan de plaatjes zelf. Voeg er ook twee voorbeelden aan toe die je juist niet wilt, want een grens aan de andere kant scherpt de opdracht.
Begin de uitwerking daarna bij het scherm, niet bij drukwerk, en pas de huisstijl als eerste toe op je website. Daar zie je meteen of het werkt onder echte omstandigheden: kleine schermen, snel scrollen, weinig aandacht. Wat het laten maken kost en hoe zo'n traject loopt staat in huisstijl laten maken; de onderdelen zelf staan in wat is een huisstijl.
Geschreven door
Lotte Bakker
UX/UI-designer bij Volstoom
