Van kleuren tot componenten: de geheime motor achter ons strakke webdesign
Eerst een terugblik op vroeger, en dan praat ik echt over vroeger. Ver voor de tijd van Instagram, SnapChat en TikTok. Barack Obama was president van de Verenigde Staten en Corona was nog gewoon een lekker biertje. In die tijd kende wij nog geen design systemen, componenten en lokale variabelen.
Kort samengevat (TL;DR):
In dit artikel:
Vroeger werd webdesign per pagina opnieuw opgebouwd, zonder structuur of consistentie. Tegenwoordig werken we met een uitgebreide styleguide in Figma: een centraal systeem met kleuren, typografie, componenten en interactieregels.
Zo kunnen designers en developers sneller werken, blijft elk onderdeel van de website consistent, en voldoen alle elementen automatisch aan toegankelijkheidsrichtlijnen. Zonder styleguide ontstaan juist fouten, inconsistenties en extra werk.
Een goede styleguide vormt daarmee de stevige basis voor een schaalbare, professionele en toekomstbestendige website.
Webdesign was vaak ad-hoc, elke pagina werd apart ontworpen, kleuren en typografie werden per element gekozen en componenten zoals buttons of formulieren werden gekopieerd of opnieuw gemaakt. We maakten dit in Photoshop. Een tool die oorspronkelijk ontwikkeld was voor fotobewerking en geen enkele vorm van (technische) structuur bood.
Tegenwoordig werken wij anders. Met een volledig ingerichte styleguide in Figma hebben we alles vastgelegd: van kleuren en tekststijlen tot herbruikbare componenten en interactieregels. Zo ontwerpen we niet alleen sneller, maar zorgen we ook dat iedere pagina, button en kaart direct consistent is en voldoet aan bijvoorbeeld alle toegankelijkheidsregels. Het stelt ons in staat om nieuwe wensen van klanten snel te implementeren, zonder dat er handmatig overal aanpassingen nodig zijn.
Ik neem je graag mee in hoe onze styleguide eruitziet en hoe wij daar mee werken!
Wat zit er in onze styleguide?
Wat is een styleguide?
Laten we beginnen met het beantwoorden van de vraag: wat is een styleguide? Een styleguide is als het ware het regelboek en de gereedschapskist voor een website. Het legt vast hoe alle visuele elementen eruit zien en hoe ze zich gedragen: kleuren, typografie, spacing, buttons, formulieren, cards, headers, footers en zelfs interacties zoals hover- of focus-states zijn hierin vertegenwoordigd.
De onderdelen van het styleguide
Het styleguide kun je grofweg indelen in 3 onderdelen:
1 – Kleur- en tekststijlen
Allereerst de kleur- en tekststijlen. We leggen de volgende zaken vast:
Door deze basis in het gehele design te gebruiken, garanderen we dat elke pagina, button en tekstblok uniform en consistent blijft. Bovendien weet het hele team precies welke kleuren en lettertypes gebruikt moeten worden, en kunnen wijzigingen centraal worden doorgevoerd. Dit alles zonder handmatige aanpassingen.
2 – Herbruikbare componenten
Onze styleguide bevat zowel kleine als grote bouwstenen van de website:
Kleine elementen
Grote elementen
Door deze componenten centraal te beheren, kunnen nieuwe pagina’s of onderdelen in een fractie van de tijd worden toegevoegd en blijven deze altijd consistent met de rest van de website. Dat scheelt veel ontwikkeltijd, developers kunnen de elementen immers ook hergebruiken in plaats van steeds opnieuw variaties van een element te moeten ontwikkelen.
3 – Designregels
Naast stijlen en componenten bevatten we ook duidelijke regels voor interactie en toegankelijkheid:
Interactie: hover, focus, active en error states, interacties (door middel van prototyping) en animaties zijn vastgelegd om de gebruikerservaring consistent en intuïtief te maken.
Toegankelijkheid: alle elementen voldoen aan WCAG-richtlijnen, met goed contrast, leesbare tekstgroottes en duidelijke focus states, zodat de website voor iedereen toegankelijk is.
Waarom werken wij met een styleguide?
De voordelen voor klanten en het team
Het gebruik van een volledig ingericht stylesheet biedt duidelijke voordelen voor zowel klanten als ons design- en development team:
Wat er gebeurt zonder een styleguide?
Zonder een centrale styleguide werken is verre van ideaal. Het leidt tot inconsistenties, vertragingen en extra werk. Zowel voor designers als developers. Enkele veelvoorkomende problemen:
Met een goed ingerichte styleguide, besparen we dus tijd, verhogen we de kwaliteit en zorgen we dat een website vanaf dag één schaalbaar en consistent is.
Een sterke basis voor elk design
Een volledig ingerichte styleguide is meer dan alleen een verzameling stijlen of componenten. Het is de fundering van een toekomstbestendige website. Doordat alles vooraf zorgvuldig is gedefinieerd, van kleuren en typografie tot interacties en toegankelijkheid, kunnen we snel schakelen, consistent blijven en met vertrouwen doorontwikkelen.
Voor onze klanten betekent dat:
Oftewel: design met structuur betaalt zich altijd terug.
Benieuwd hoe wij jou kunnen helpen met een vernieuwde website met een schaalbaar en consistent design?
