Styleguide voor websites: wat en waarom

Websitedesign & Agile / Scrum

Voorafgaande aan het Scrum-traject starten we vaak met de zogenaamde sprint 0. Deze fase heeft geen vaste tijdsspan, en is bedoeld om de look & feel voor een nieuwe website te bepalen. Meestal doen we dit door één van de belangrijkste pagina’s of doelen op de website uit te werken in design. Samen met de klant bepalen we of de neergezette stijl past bij het bedrijf en de doelen die we willen bereiken. Als dit het geval is, maken we tijdens deze sprint 0 een styleguide. Deze styleguide zal tijdens het hele project gebruikt worden door de designers en (front-end) developers.

 

Meer weten over de Scrum-methode? 

 



Waarom een styleguide?

De styleguide vormt een gids met stijlregels voor iedereen die betrokken is bij de bouw van de website. Omdat een Scrum-traject soms enkele maanden kan duren, is het belangrijk om van te voren vast te leggen hoe elementen als kleur, lettertype, formulieren, iconen enzovoorts eruit gaan zien. Bij elke nieuwe functionaliteit of pagina die gebouwd wordt, raadplegen we de styleguide. Op deze manier kan de look & feel van de website tijdens het gehele traject gewaarborgd worden. En natuurlijk ook daarna, bij uitbreidingen aan de site.

 

Wat staat er in een styleguide?


Logogebruik

Vaak is in de huisstijlgids van het bedrijf waar we voor werken al precies vastgelegd hoe het logo gebruikt moet worden. Soms is het handig om de verschillende versies van het logo toch vast te leggen in de styleguide, bijvoorbeeld als een logo met of zonder tagline gebruikt wordt of om aan te geven hoe deze op een achtergrondkleur of foto wordt gebruikt.

 

Lettertypen

Voor front-end developers is het erg prettig als alle lettertypen en de versies die daarvan gebruikt worden zijn vastgelegd. Dan hoeven ze er zelf niet meer over na te denken ;). Het gaat dan om titels, koppen, subkoppen en tekst.

 

Links & knoppen

Hoe reageert een link of button wanneer je eroverheen gaat met je cursor? Hoe zie je welke tab actief is op een pagina? Hoe zien secundaire buttons eruit? Hoe groot is de tekst op de button?

 

Menu

Ook het menu kent vaak verschillende statussen. Denk aan uitklapmenu’s, ingelogde varianten en zogenaamde ‘sticky’ menu’s: de versie van een menu als je een stukje gescrollt hebt. Vaak klapt het menu of logo dan een stukje in, om ruimte te maken op je scherm. Verder wordt er in de styleguide rekening gehouden met hoe het menu zich aanpast aan verschillende beeldformaten en devices.

 

Iconen

Wanneer er een iconenset gebruikt wordt op de website, kan deze opgenomen worden in de styleguide. Developers hebben de iconen dan meteen bij de hand en kunnen ze ook zelf inzetten waar nodig, zonder telkens een nieuw ontwerp nodig te hebben.

 

Formulieren

Één van de meest tijdrovende onderdelen van een website zijn vaak de formulieren. Vroeger werd er voor elk formulier op de website een ontwerp gemaakt, wat vervolgens nagebouwd werd door developers. Een erg tijdrovende klus, waarbij de kans groot is dat er inconsistenties ontstaan tussen formulieren. Met een styleguide kunnen we voor elk veld een stijl vastleggen. Bij een nieuw formulier hoeft er dan alleen bepaald te worden wat er in het formulier moet komen en welke typen velden daarbij horen. Scheelt een hoop werk!

 

Een styleguide is nooit af

Aangezien we de styleguide gebruiken om het Scrum proces te stroomlijnen, is deze nooit af. Gedurende het project zal het regelmatig voorkomen dat er nieuwe elementen ontwikkeld moeten worden. Denk bijvoorbeeld aan extra iconen, een nieuwe kleur of een extra menu item. Door de styleguide constant up-to-date te houden, zorgen we ervoor dat we er nu en in de toekomst de meeste waarde uit kunnen halen.

Ontvang nu onze whitepaper 'Hoe optimaliseer je jouw digitale strategie in 6 stappen?'

Wij helpen je graag met jouw online projecten!

Als fullservice digital agency hebben wij al meer dan 20 jaar ervaring met het bouwen van online platforms en websites. Wij helpen je daarom ook graag verder. Benieuwd naar wat wij voor jou kunnen betekenen? Bekijk eens onze cases of neem contact op met Yorick!

Bel met Yorick Of stuur hem een mail