Waarom wij “Front-End Style Guides” gebruiken?

Geschreven door: Stefan Hellings

Het bouwen van websites is geen simpele taak. Het vergt vaak een team van experten die elk hun onderdeel van een complexe puzzel uitwerken. Eén van die puzzelstukken is de “Front-end”, ofwel het interactieve gedeelte van een website waar gebruikers mee werken. Een manier om ervoor te zorgen dat iedereen op dezelfde golflengte zit wanneer men met zijn eigen puzzelstuk bezig is, is door gebruik te maken van een Front-end Style Guide.

Wat is een Style Guide?

Een style guide (of huisstijlgids) is, in’t kort, een uitgeschreven set aan ontwerp-standaarden en best practices die algemeen gebruikt moeten worden tijdens de vormgeving en communicatie van een brand of merk. Het is als het ware een handboek over hoe je al je communicatie stijl en vorm geeft. Het gebruik van een style guide maakt het mogelijk om met meerdere personen een duidelijke en consistent communicatie aan te houden.

Voorbeeld huisstijlgids Antwerpen [bron - http://www.ondernemeninantwerpen.be/sites/default/files/documents/Huisstijlgids.pdf]

Voorbeeld huisstijlgids Antwerpen [bron - http://www.ondernemeninantwerpen.be/sites/default/files/documents/Huisstijlgids.pdf]

Style Guide vs. Front-End Style Guide

Waar een style guide enorm uitgebreid kan zijn, gaande van kleur gebruik, typografie, fotografie, tone of voice, tot belettering op auto’s en bus bestickering, focust een front-end style guide zich puur op het web. Het spreekt dan ook voor zich dat een front-end style guide meer gericht is naar webdesigner en webontwikkelaars en minder naar DTP’ers en grafisch ontwerpers.

Een front-end style guide bevat naast de algemene vormgeving en stijl elementen ook een aantal coding conventions of schrijfregels en afspraken waar ontwikkelaars zich aan moeten houden. Ook best practices en interacties worden gedocumenteerd. Denk bijvoorbeeld aan foutmeldingen op een formulier, of de manieren waarop je je wachtwoord kan veranderen.

In tegenstelling tot gewone style guides worden er in front-end style guides geen uitgebreide regels gehanteerd ivm. logo gebruik of schrijfstijlen. Er worden wel responsive design patterns uitgewerkt zoals grid layouts (de positie van elementen op je website) over verschillende scherm-groottes heen, spaties en ruimtes rondom componenten, en guidelines voor het plaatsen van specifieke componenten (bv. plaatsing van een cookiemelding of de overgang van een mobiele navigatie naar een desktop navigatie).

Flat UI front-end style guide [bron - https://designmodo.com/flat-free/]

Flat UI front-end style guide [bron - https://designmodo.com/flat-free/]

Hoe pakken wij het aan

Om onze front-end style guide zo efficient mogelijk op te bouwen schrijven wij onze css met SASS en hanteren wij de BEM methodologie. We zullen hier niet technisch op ingaan, maar indien je toch meer hierover wil weten kan je hier info vinden over SASS en hier meer lezen over de BEM methodology. Om het kort samen te vatten schrijven wij elk onderdeel van een website apart uit. Iedere button, titel, artikel-item, grafisch element, … werken we uit als een individueel component met zijn eigen html, css en javascript. Zo bouwen we een verzameling aan componenten uit die we nadien samen voegen in één groot geheel, de webpagina.

Elk component moet onafhankelijk werken, waar in de website het zich ook bevindt, en mag geen invloed uit oefenen op, of beïnvloed worden door andere componenten. Dit maakt dat het gemakkelijker is om op alle verschillende browsers je site te testen, je test geen volledige website in één keer maar je test elk component individueel, terwijl je de onderdelen uitwerkt. Dit bespaart je nadien veel werk uit als je een volledige site nog eens doorneemt op de verschillende browsers. Alle onderdelen zijn namelijk al individueel getest en de kans dat je een onderdeel over het hoofd ziet is miniem.

Om tijd te besparen vertrekken we per project van een vooropgestelde front-end style guide met een aantal standaard ingebouwde functionaliteiten, waaronder bijvoorbeeld live form validatie, de afhandeling van fout- en cookie meldingen, en meer. Eénmaal alle andere componenten zijn opgebouwd beginnen we hiermee pagina’s samen te stellen en ondergaan de individuele pagina’s nog een laatste browser-test voor ze doorgegeven worden aan de ontwikkelaars.

Enkele extra voordelen die we halen uit het opbouwen van een front-end style guide zijn:

  • Het is gemakkelijk uitbreidbaar en aanpasbaar. Een nieuw component kan je er snel bij zetten of er terug uit halen. Heb je een component al eens eerder geschreven dan kan je deze gemakkelijk hergebruiken in dit project zonder veel extra moeite. Je site is hierdoor als het ware “Future-proof”.
  • Je creëert consistentie in zowel kleine als enorm grote websites. Geen website meer met 10 verschillende button-stijlen of paragrafen in 6 verschillende lettergroottes of lettertypes. Alles is hetzelfde. De volledige site, of je nu op de éérste of op de 30ste pagina staat, vormt één mooi geheel.
  • Het is gemakkelijk om complexe pagina’s in een mum van tijd op te bouwen. Al je componenten staan namelijk al klaar. Je hoeft ze alléén nog maar te copy-pasten op je pagina en je bent vertrokken.
  • Eén zelfde code-base maakt dat een team, of het nu een klein of groot team is, werkt met dezelfde standaarden. Je verbetert de work-flow en maakt het mogelijk voor andere team-leden om zelf pagina’s samen te stellen indien nodig. Dit is een zeer groot voordeel over een pagina-tot-pagina aanpak.

Meest gebruikte UI componenten in een Front-End Style Guide

Elk project heeft zijn eigen stijl en vormgeving, maar dat wil niet zeggen dat elk project een unieke front-end style guide heeft. Een groot aantal componenten wordt gedeeld over elk project. Ben je van plan om zelf een front-end style guide te maken, vergeet dan zeker niet deze elementen:

  • Alert modals
  • Animaties (hovers, popups, loading schermen, etc…)
  • Breadcrumbs
  • Buttons
  • Checkboxen
  • Facebook OG images
  • Favicons
  • Formulier elementen (inputs, selects, textareas, radio buttons)
  • Grids, foto’s en andere media objecten
  • Icoontjes
  • Kleuren
  • Lijsten
  • Navigaties
  • Tables
  • Typografie & Fonts

Een vooraf gemaakte style guide bespaart je een hoop werk en garandeert dat je geen enkel basis element vergeet. Je kan indien gewenst ook al enkele veelgebruikte pagina’s opstellen. Denk maar bijvoorbeeld aan een tekstpagina of algemene-voorwaarden pagina. Deze zijn voor vele websites vaak hetzelfde.

Inspiratie nodig?

Heb je wat inspiratie nodig voor jouw eigen front-end style guide? Neem dan zeker eens een kijkje op onderstaande links:

Van links naar rechts de style guides van: Barricade, AListApart, CodePen, Familysearch

Van links naar rechts de style guides van: Barricade, AListApart, CodePen, Familysearch

Wat vinden jullie?

Wij zijn alvast overtuigd van de vele voordelen van een front-end style guide. Maar wat is jullie mening hierover? Heb je er zelf al ééns mee gewerkt? Laat het ons weten in de comments.

 

Schrijf je in op onze maandelijkse developers nieuwsbrief als je op de hoogte wil blijven van wat onze developers lezen over webdevelopment.

0 Reacties op deze blogpost:

Er zijn momenteel nog geen reacties op deze blogpost.

Reageer ook op dit artikel

U kan optioneel inloggen met Twitter of Facebook. U krijgt dan de mogelijk om uw reactie ook te delen via Twitter of Facebook
Login with twitter
Aanmelden
{* Remarketing tag *}