Je hebt waarschijnlijk al een huisstijl: een logo op je bedrijfswagen, kleuren op je facturen, een visitekaartje dat klopt. Die uitstraling is in de loop der jaren vertrouwd geworden voor je klanten. Wanneer je dan een website laat maken, wil je dat dezelfde herkenning meekomt naar het scherm. Dat is geen kwestie van het logo ergens bovenaan plakken. Een huisstijl die op papier prachtig oogt, kan online juist plat of rommelig uitpakken als je hem klakkeloos overneemt. In deze gids laat ik zien hoe je je merk van papier naar scherm brengt, zodat je website voelt als een logisch vervolg op alles wat je al uitstraalt en niet als een losse afdeling.
Wat hoort er allemaal bij je huisstijl?
Een huisstijl is meer dan je logo alleen. Het is het geheel van vaste keuzes waaraan mensen je herkennen: je logo, je kleuren, je lettertypes, de manier waarop je foto's eruitzien en zelfs de toon waarop je schrijft. Samen vormen ze een soort visuele handtekening. Hoe consequenter je die gebruikt, hoe sneller iemand jouw bedrijf herkent, of dat nu op een folder is of op een scherm.
Voor een website betekent dat je niet één onderdeel overneemt, maar het hele samenspel. Een logo zonder de bijbehorende kleuren voelt los. De juiste kleuren met een willekeurig lettertype voelen rommelig. Pas wanneer alle elementen meekomen en met elkaar kloppen, ontstaat die directe herkenning. Dit raakt het bredere onderwerp van merkidentiteit op het web, waarin je leest hoe herkenbaarheid in elk detail terugkomt.
Waarom papier en scherm anders werken
De grootste valkuil is denken dat een huisstijl zich zomaar laat kopiëren van drukwerk naar website. Papier en scherm zijn twee verschillende werelden. Kleuren die op een gedrukte flyer rustig en warm ogen, kunnen op een beeldscherm ineens fel of hard worden, omdat een scherm licht uitstraalt in plaats van het te weerkaatsen. Een lettertype dat prachtig staat op een groot, gedrukt vlak kan op een telefoonscherm moeizaam lezen.
Daarbij is een website nooit één vast formaat. Een folder heeft een rand en een vaste maat, een website past zich aan elk scherm aan. Je huisstijl moet dus niet alleen mooi zijn op één moment, maar overeind blijven van een breed kantoorscherm tot een smalle telefoon. Daarom is vertalen het juiste woord: je behoudt de betekenis en de toon, maar past de uitvoering aan de nieuwe drager aan.
Je logo geschikt maken voor het web
Je logo is meestal het eerste wat meekomt, en juist daar gaat het vaak mis. Een paar punten om op te letten:
- Schaalbaarheid. Een logo moet groot in de hero net zo scherp zijn als klein in de hoek van een menu. Een schaalbaar bestand voorkomt dat het korrelig wordt op grote schermen.
- Leesbaarheid op klein formaat. Op een telefoon staat je logo vaak maar een paar millimeter breed. Een logo vol fijne details valt dan weg. Soms is een vereenvoudigde variant nodig speciaal voor het web.
- Werkt op je achtergrond. Een logo dat ontworpen is voor wit papier kan verdwijnen op een donkere balk. Een versie die op meerdere achtergronden werkt, lost dat op.
Heb je je logo alleen als een platte afbeelding uit een oud document, dan loont het om hem opnieuw scherp te laten opbouwen. Dat betaalt zich terug op elke pagina en elk apparaat.
Kleuren en lettertypes vertalen
Je merkkleuren krijgen op een website een rol, niet zomaar een plek. Eén kleur voert vaak de boventoon, een tweede ondersteunt en een accentkleur trekt de aandacht naar knoppen en links. Op papier mag je vrijer met kleur spelen, online helpt het juist om terughoudend te zijn, zodat de kleur die er echt toe doet opvalt. Hoe je dat opbouwt lees je in de gids over een kleurenpalet samenstellen.
Lettertypes vragen extra aandacht. Niet elk merklettertype is geschikt voor schermen, en niet elk gedrukt lettertype is online beschikbaar. We zoeken een webversie die dicht bij je huisstijl blijft en goed leest op elk formaat. Vaak combineer je een herkenbaar lettertype voor koppen met een rustig, goed leesbaar lettertype voor lopende tekst. Zo houd je het karakter vast zonder de leesbaarheid op te offeren. De gids over lettertypes kiezen en combineren gaat daar dieper op in.
Een goede vertaling van je huisstijl herken je niet aan losse onderdelen die kloppen, maar aan het gevoel dat het hetzelfde bedrijf is, ongeacht waar je het tegenkomt.
De sfeer vasthouden, niet alleen de losse delen
Je kunt het logo correct overnemen, de kleuren exact kopiëren en het juiste lettertype kiezen en tóch een website krijgen die niet als jouw merk aanvoelt. Dat komt doordat een huisstijl ook een sfeer draagt: rustig en degelijk, of speels en eigenzinnig, of strak en zakelijk. Die sfeer zit in de ruimte tussen de elementen, in het ritme van de pagina en in de toon van de teksten.
Bij het vertalen kijken we daarom niet alleen naar de losse ingrediënten, maar naar het gevoel dat ze samen oproepen. Een degelijk installatiebedrijf wil rust en vertrouwen uitstralen, een creatieve studio mag wat meer durven. Diezelfde sfeer laten we terugkomen in de hoeveelheid witruimte, het soort beeld en zelfs de bewegingen op de pagina. Zo is de website niet alleen herkenbaar, maar voelt hij ook echt als jij.
Zelf doen of uitbesteden?
Met een websitebouwer kun je kleuren en een logo invoeren en zo de oppervlakte van je huisstijl benaderen. Voor een eenvoudige situatie kan dat al een eind komen. Maar juist de vertaling, het deel waar papier en scherm uit elkaar lopen, vraagt een geoefend oog. Daar zit het verschil tussen een site die je kleuren gebruikt en een site die echt jouw merk uitstraalt.
Wil je dat je website voelt als een logisch vervolg op je bestaande uitstraling? Bekijk dan de pagina over webdesign of leg me je huisstijl voor via de contactpagina. Is je huidige stijl toe aan een opfrisbeurt terwijl we toch bezig zijn, kijk dan ook naar restyle en redesign.
Veelgestelde vragen
Niet helemaal. Papier en scherm gedragen zich anders: kleuren ogen feller op een beeldscherm, een logo moet ook piepklein nog leesbaar zijn en tekst leest op scherm anders dan op papier. De stijl blijft hetzelfde, maar de uitvoering vraagt aanpassingen zodat het op het web net zo sterk werkt.
Idealiter je logo in een schaalbaar bestand, je merkkleuren met hun exacte codes, de lettertypes die je gebruikt en een paar voorbeelden van bestaand drukwerk. Heb je dat niet, dan reconstrueren we de stijl aan de hand van wat er wel is. Hoe completer het uitgangsmateriaal, hoe vloeiender de vertaling verloopt.
Dan is dit een goed moment om hem licht op te frissen in plaats van klakkeloos over te nemen. Een website bouwen dwingt je toch om keuzes scherp te krijgen. Vaak knappen we de kleuren en typografie net even op, zonder dat je merk onherkenbaar wordt, zodat het online weer eigentijds aanvoelt.
Dan beginnen we bij het begin en bouwen we de basis op terwijl we de site maken: een logo of woordmerk, een paar kleuren met een vaste rol en een lettertypekeuze. Zo ontstaat je huisstijl en je website tegelijk, en sluiten ze van nature naadloos op elkaar aan.
Verder in de kennisbank: Merkidentiteit op het web · Een kleurenpalet samenstellen · Lettertypes kiezen en combineren