Van visitekaartje naar scherm: uw huisstijl vertalen naar een website

Veel ondernemers hebben ooit een huisstijl laten maken. Er is een logo, er zijn twee of drie kleuren, een lettertype, en misschien een pdf met regels erbij. Op het briefpapier, de bus en het visitekaartje ziet het er goed uit. Dan komt de nieuwe website, en blijkt dat niet alles van papier zomaar naar een scherm gaat. Een huisstijl op uw website vraagt om een vertaalslag. Hieronder leest u wat er verandert en waarom.

Waarom een huisstijl op de website anders werkt

Papier is statisch. U bepaalt precies hoe groot iets wordt, welk papier het is en hoe het licht erop valt. Een website verschijnt op een breed computerscherm, een tablet, een kleine telefoon in de zon en soms op een televisie. De bezoeker kan inzoomen, het lettertype groter zetten of de donkere modus aan hebben. Uw huisstijl moet op al die plekken overeind blijven.

Daarbij komt dat een website dingen heeft die op papier niet bestaan: knoppen, links, formulieren, foutmeldingen, een menu dat openklapt. Daar zegt een oude huisstijlgids meestal niets over. De bouwer vult dat aan in de lijn van wat er al is.

Het logo

Op een website staat het logo meestal klein, linksboven, op een telefoon nog kleiner. Een logo met een lange slogan eronder of fijne lijntjes wordt dan onleesbaar. Vaak is er een compacte variant nodig: alleen het beeldmerk, of de naam zonder slogan. Die variant wordt ook gebruikt als favicon, het icoontje in het tabblad van de browser.

Lever het logo aan als vectorbestand (SVG, of anders EPS of AI). Dat blijft scherp op elk formaat. Een JPG van het visitekaartje, gefotografeerd met de telefoon, zorgt voor een wazig logo. Heeft u geen vectorbestand meer, vraag het dan op bij de ontwerper van destijds. Lukt dat niet, dan kan het logo worden nagetekend, maar reken daar tijd voor.

De kleuren

Een drukker werkt met CMYK of Pantone. Een scherm werkt met RGB, en websites gebruiken hexcodes zoals #1F5A3C. Staan die codes niet in uw huisstijlgids, dan worden ze omgerekend. Dat geeft bijna nooit precies dezelfde kleur, omdat een scherm licht uitstraalt en papier licht weerkaatst. Een ietwat aangepaste tint is daarom normaal.

Een tweede punt is leesbaarheid. Een lichtgele of lichtgroene huisstijlkleur is prachtig als vlak op een folder, maar witte tekst erop is op een scherm vaak slecht te lezen. Dan gebruikt de bouwer de kleur voor vlakken en accenten, en een donkerdere variant voor knoppen en tekst. Hoe u daar zelf mee omgaat, leest u in kleuren kiezen voor uw website.

Het lettertype

Het lettertype uit uw huisstijl is misschien niet geschikt voor het web, of de licentie dekt alleen drukwerk. Webfonts hebben soms een aparte licentie. Daarnaast is een sierlijk lettertype voor een kop prima, maar voor lopende tekst op een telefoon vaak te vermoeiend. Een gebruikelijke oplossing: het huisstijllettertype voor koppen en een rustig, goed leesbaar lettertype voor de rest. Meer daarover in een lettertype kiezen voor uw website.

Foto’s en beeld

Een huisstijl gaat ook over het soort beeld. Licht of donker, mensen of producten, buiten of binnen. Op een website is beeld een groot deel van de eerste indruk. Als uw huisstijlgids daar niets over zegt, is dit het moment om het te bepalen. Foto’s van uw eigen team en werk passen vrijwel altijd beter bij een huisstijl dan beelden uit een fotobank.

Wat u aanlevert

• Het logo als vectorbestand, en indien aanwezig een liggende en een compacte variant.
• De kleurcodes, het liefst met hexcodes of RGB-waarden erbij.
• De naam van het lettertype en, als u die heeft, de licentie of de bestanden.
• De huisstijlgids, ook als die oud is.
• Voorbeelden van drukwerk dat u goed vindt.

Heeft u nog geen huisstijl?

Dan kan een webbouwer een eenvoudige basis neerzetten: een kleurenpalet, een lettertypekeuze, afspraken over knoppen. Dat is geen volledig huisstijltraject zoals een grafisch ontwerper dat doet, en dat mag uw bouwer ook eerlijk zeggen. Voor veel zzp’ers is het genoeg om mee te beginnen.

Huisstijl en de keuze voor een thema

Hoe strikter uw huisstijl, hoe meer het uitmaakt waarmee de site wordt gebouwd. Een standaardthema met een paginabouwer laat zich aanpassen, maar soms blijven er sporen van het oorspronkelijke ontwerp. Een thema op maat wordt vanaf het begin rond uw huisstijl gebouwd. Wanneer dat de moeite waard is, leest u op de pagina over een WordPress-thema op maat laten maken. Wij maken het ontwerp altijd in uw huisstijl, en als een kleur of lettertype op een scherm niet werkt, laten we u vooraf zien waarom en welk alternatief we voorstellen.