Styleguide: een gedetailleerd ontwerpconcept
voor je website

Styleguide: essentieel voor grotere projecten

Als je een website ontwerpt, zijn de herkenningswaarde en een consistente stijl essentieel. Zolang je alleen aan een designproject werkt, is dat meestal geen probleem. Maar bij digitale opdrachten op grotere schaal - bijvoorbeeld het ontwerpen en programmeren van een corporate website - werken meestal meerdere teams aan het design, de bouw en het onderhoud. De oplossing voor consistentie in dergelijke werkomgevingen is een styleguide. Maar wat betekent deze term nu precies? Hoe kun je snel en eenvoudig een styleguide maken en wat moet erin staan?


Wat is een styleguide?

Een styleguide (stijlgids) in online marketing beschrijft de richtlijnen voor het uniforme ontwerp van een website. Dit omvat niet alleen een website, maar ook alle bijbehorende apps en social media-accounts. Een styleguide hangt samen met het corporate design en de huisstijl van een bedrijf. Het zorgt ervoor dat de visuele identiteit van het bedrijf ook online direct herkenbaar is. Van social media-kanalen en e-mails tot de website, drukwerk en andere publicaties. In de styleguide staan richtlijnen voor alle medewerkers over hoe het bedrijf grafisch en tekstueel gepresenteerd moet worden, zodat je direct herkenbaar bent voor (potentiële) klanten.

Een digitale styleguide voor websites bevat veel meer dan alleen het logo en de vormgeving van de huisstijl. De stijlgids definieert ook de lettertypen en kleuren, de beeldtaal, het beeldontwerp of de rangschikking van elementen en de zogenoemde tone of voice van de teksten. Zolang iedereen zich aan deze richtlijnen houdt, heeft de website een uniforme uitstraling, zelfs als er verschillende webdesigners aan werken.


styleguide

Waarom is een styleguide zo belangrijk?

Bedrijfseigenaren staan vroeg of laat voor de vraag hoe de website het bedrijf het beste kan representeren. De styleguide geeft hier antwoord op. Die beschrijft namelijk de functies en vormt de basis voor het ontwerp van de website. Het is immers zaak dat bezoekers de website direct kunnen herkennen als visitekaartje van het desbetreffende bedrijf. Een styleguide is belangrijk omdat het de enige manier is om een consistente website te ontwerpen die goed is afgestemd op de doelgroep. En dat zorgt er weer voor dat je eigen merk snel herkenbaar is op internet. De perfecte website zorgt ervoor dat bezoekers zich gemakkelijker identificeren met het merk en dit merk misschien zelfs aanbevelen aan anderen.

Een homogeen vormgegeven website draagt bovendien bij aan de professionaliteit en geloofwaardigheid. Grote kans dat klanten en gebruikers zich aangetrokken voelen tot de site en dus ook langer blijven.


De ideale styleguide maken

Hoe maak je een goede styleguide? Dit begint met het in kaart brengen van de doelgroep van je website. Bijvoorbeeld: een financieel dienstverlener zou zijn klant nooit met ‘je’ aanspreken of -schrijven. De face-to-facecommunicatie bepaalt ook wat er op de website gebeurt: wordt in de sector in kwestie vooral ‘u’ gebruikt, dan doe je hetzelfde op de website en moet je hier ook in de styleguide uitdrukkelijk aan vasthouden. Start je daarentegen een online portaal voor jongeren, dan klinkt ‘u’ nogal formeel, wat de doelgroep zou kunnen afschrikken.


styleguide: Doelgroepanalyse

Doelgroepanalyse en bedrijfsfilosofie in de styleguide

Bij het maken van een styleguide moet je vooral de filosofie of identiteit van het bedrijf in het achterhoofd houden. Daarnaast is het zaak de doelgroep nauwkeurig te omschrijven. Om deze vast te stellen, heb je waarschijnlijk uitgebreide data en analyses nodig. Het doel is om de leeftijd, geslacht, opleiding, interesses en andere kenmerken van de doelgroep zo nauwkeurig mogelijk te definiëren. Want pas als je jouw klanten of lezers kent, kun je websites maken met de juiste inhoud voor deze doelgroep. De styleguide moet bovendien de bedrijfsfilosofie, doelstellingen en formulering bevatten. Waar staat het bedrijf voor? Welke woorden kunnen en moeten vooral op de website worden gebruikt om je ideeën over te brengen aan klanten en lezers?


styleguide: Tekst, kleur en lettertypen

Tekst, kleur en lettertypen definiëren

Het bedrijfsimago en de informatie over de doelgroep worden opgenomen in de specificaties van het websiteontwerp. Om de herkenbaarheid te vergroten, gebruiken de meeste websites bijvoorbeeld de kleuren van het bedrijfslogo. Maar de doelgroep heeft ook invloed op het kleurenschema: websites voor een jong publiek hebben vaak een opvallender kleurenschema dan websites voor een oudere doelgroep. Deze laatste doelgroep geeft namelijk meestal de voorkeur aan een eenvoudiger ontwerp met rustige kleuren. De interesse van een jonge doelgroep kun je daarentegen vaak wekken met ongewone lettertypen, maar de leesbaarheid moet hoe dan ook altijd voorop staan! Aan een hip lettertype dat moeilijk leesbaar is, zullen ook jongere bezoekers zich ergeren.

Wanneer je een styleguide gaat maken leg je verder vast welke kleuren, woorden, pictogrammen enzovoort niet mogen worden gebruikt. Ook kun je sommige woorden ‘verbieden’ omdat ze negatieve of verkeerde associaties kunnen opwekken bij de lezer of omdat jouw bedrijf zich van zo’n begrip wil distantiëren. Hetzelfde geldt voor kleuren en afbeeldingen: welke kleurcombinaties zijn ongewenst? Welke type foto’s moeten worden vermeden?


styleguide: focus op de details

De styleguide en de focus op de details

Hoe nauwkeuriger de specificaties, des te minder correcties achteraf. Dat bespaart tijd en geld. De styleguide moet daarom de richtlijnen zo gedetailleerd mogelijk formuleren: kleuren definieer je duidelijk met hex kleurcodes, RGB-waarden en een illustratie. Met een korte beschrijving kun je snel uitleggen hoe bezoekers en lezers de beoogde kleuren waarnemen. Bovendien moet altijd duidelijk zijn welke kleuren je voor welke elementen gebruikt. Voor pictogrammen, knoppen, banners en logo’s geef je aan waar ze moeten worden geplaatst en welke kleuren ze kunnen bevatten.

Een grafisch overzicht is vaak beter en duidelijker dan een tekstuele uitleg. In zo’n grafiek kun je ook de kolombreedte en rijhoogte opgeven, zodat de ontwerper direct kan zien hoe het geheel eruit moet zien op de afgewerkte pagina. En het is nuttig om de grootte van afbeeldingen, pictogrammen en logo’s te specificeren.

Bij de lettertypen is het slim om duidelijke functies en lettergroottes vast te leggen: waar en hoe gebruik je welk lettertype? In het ideale geval geeft de styleguide voorbeelden hiervan: bijvoorbeeld de lettertypen voor de koppen, tussenkopjes en de bodytekst, evenals de regelafstand en andere opmaakkenmerken, zoals de afstand tussen afzonderlijke pagina-elementen.


Voorbeelden van styleguides: zo doe je het goed

Hoe ziet een kant-en-klare styleguide voor websites eruit? Online vind je diverse voorbeelden: de Rijkshuisstijl van de Nederlandse overheid, of de styleguide van de Mozilla-groep. Omdat de styleguides als website beschikbaar zijn, kun je door de verschillende hoofdstukken klikken en zien hoe een richtlijn er in de praktijk uitziet.

In de Rijkshuisstijl wordt onderscheid gemaakt tussen diverse communicatiemiddelen. Er zijn algemene online richtlijnen die ook apps, mobiele applicaties en responsieve sites beslaan (testen of een website responsief is, kan met deze tools). Daarnaast zijn er bijvoorbeeld aanvullende richtlijnen voor social media. De huisstijl beschrijft onder meer de lettertypen, afbeeldingen, pictogrammen en kleuren. Ook specificaties voor de lay-out van pagina’s en van navigatieniveaus zijn beschikbaar. Elk subitem bevat voorbeelden van afbeeldingen, lettertypen, logo's en pictogrammen die de specificaties illustreren.

styleguide: Voorbeelden
Screenshot van de Rijkshuisstijl van de Nederlandse overheid met kleurenpalet en kleurwaarden. Bron: Rijksoverheid, https://www.rijkshuisstijl.nl/basiselementen/kleur/online-kleuren

De online styleguide van Mozilla is eveneens zeer uitgebreid: het logo en het correcte gebruik ervan worden hier bijvoorbeeld op een zeer goed geïllustreerde manier uitgelegd. Op deze manier kun je zien hoe het huidige logo afwijkt van de vorige versies (maar alleen de huidige versie mag worden gebruikt). De richtlijnen voor de kleurweergave van het woordmerk ‘Mozilla’ zijn minder strikt. Afhankelijk van de rest van het ontwerp kan dit in elke ondoorzichtige kleur worden weergegeven, al geeft deze styleguide bijvoorbeeld wel aan dat een regenboog kleurverloop niet toegestaan is.

styleguide: Voorbeelden
Screenshot van de Mozilla styleguide met richtlijnen voor het gebruik van het merk. Bron: © Mozilla, https://www.mozilla.org/en-US/styleguide/identity/mozilla/branding/

Beide voorbeelden tonen aan dat voor een handige styleguide weinig tekst nodig is: voor de meeste gidsen zijn korte beschrijvingen en goede illustraties voldoende. Een logische structuur is belangrijk: in Mozilla wordt de navigatie uitgevoerd door een menustructuur aan de linkerkant van de pagina. In de Rijkshuisstijl kun je doorklikken naar allerlei individuele elementen: van banners en online formulieren via relatiegeschenken tot wegwijzers.

Natuurlijk heeft niet elk bedrijf de mogelijkheid om een eigen website voor de styleguide te maken. Een goed gestructureerde handleiding - bijvoorbeeld in PDF-formaat - is meestal voldoende. Deze handleiding geef je aan je webdesigners vóór ze aan je project beginnen. Mocht je al een website hebben, dan kun je er ook voor kiezen deze in PDF-formaat op te slaan en te gebruiken als voorbeeld.

In de onderstaande tabel zetten we de belangrijkste punten van een goede styleguide op een rij.

Onderwerpen in de styleguide De essentiële vragen
Basis designprincipes Waar staat het bedrijf voor? Wat zijn de doelstellingen van de website? Welke ontwerpprincipes onderstrepen de bedrijfsfilosofie?
Doelgroep/personen Wie wil je bereiken met de website? Wat is de samenstelling van deze doelgroep? Wat zijn hun voorkeuren, wensen, interesses?
Tone of voice en verwoording Hoe moeten klanten/lezers/bezoekers worden aangesproken? Welke woorden zijn taboe of moeten juist wel worden gebruikt?
Logo en woordmerk Hoe zien het logo en woordmerk eruit? Wanneer, hoe en waar moeten ze worden gebruikt?
Basisstructuur van de website Hoe moet de website gestructureerd worden? Hoe breed zijn de kolommen en hoe hoog zijn de rijen? Hoe moeten elementen worden gerangschikt? Wat is de menustructuur?
Kleuren Welke kleuren onderstrepen de intentie van de website en richten zich op de doelgroep? Wat zijn de RGB-waarden en hexadecimale codes van deze kleuren?
Lettertypen Welke lettertypen moeten worden gebruikt voor welke teksten en elementen? Hoe groot moet het lettertype zijn en welke kleur moet het hebben?
Iconen/pictogrammen Welke iconen moeten worden gebruikt? Wat betekenen ze en waar moeten ze worden geplaatst?
Content (inhoud) Welke inhoud moet de voltooide website bevatten? En hoe wordt dit in beeld, tekst en multimedia geïmplementeerd?

De styleguide naleven én updaten

Zodra je een styleguide hebt gemaakt, begint het up-to-date houden van zowel de gids als je website(s), app(s) en social media kanalen. Want alleen door continu de styleguide na te leven, kun je homogeniteit in al je communicatiekanalen op de lange termijn waarborgen. En dit is een essentieel onderdeel van de branding van je onderneming. Maar dit betekent niet dat je styleguide nooit mag veranderen. Sterker nog, het is zinvol om de gids regelmatig te controleren: zijn de ontwerpen nog up-to-date, zijn de lettertypen nog actueel? Kan het logo worden verbeterd? Het voorbeeld van Mozilla laat zien dat logo's na verloop van tijd kunnen en soms zelfs móeten wijzigen. De smaak van je doelgroep kan immers ook veranderen. Uiteraard is het van belang om trouw te blijven aan de uniformiteit van je styleguide, maar met de tijd meegaan en inspelen op de smaak van je doelgroep is net zo belangrijk.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany