Styleguide voor websites: wat en waarom

De meeste projecten vliegen wij aan op Scrum-wijze. We werken in korte sprints om zo snel mogelijk een bruikbaar product neer te kunnen zetten. Omdat je aan de start van het project nog niet precies weet wat je uiteindelijk gaat maken, is het onmogelijk om alle pagina’s van te voren uit te werken in design. Hoe zorg je er dan voor dat je tijdens het Scrum-traject het design niet uit het oog verliest en de consistentie en look & feel kunt waarborgen? Het antwoord: de styleguide!
 

Webdesign & 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.

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?

• 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!
  
  

Hoe ziet de styleguide er uit?

Als voorbeeld delen we hier een aantal styleguides van onze webprojecten, namelijk ID Wear en Asser Institute.

Styleguide ID Wear

Styleguide T.M.C. Asser Instituut

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. 

Benieuwd wat we voor jou kunnen betekenen? 

Bekijk onze cases en stuur vrijblijvend een e-mail.