Heb je een ontwerpsysteem nodig voor je website?
Een ontwerpsysteem is een set herbruikbare componenten plus de regels om ze te gebruiken. Op een grote site waar meerdere mensen wijzigingen doen neemt het enorm veel dubbel beslissingswerk weg. Op een brochuresite van vijf pagina's is het een kostenpost zonder rendement.
Deze gids behandelt waar de grens ligt, wat een minimaal bruikbaar systeem werkelijk bevat, en wat je in plaats daarvan doet als een volledig systeem niet te rechtvaardigen is.
Wanneer het loont en wanneer niet#
De waarde komt uit herhaling: dezelfde beslissing één keer genomen in plaats van veertig keer, en consistent. Is de herhaling er niet, dan is de waarde er ook niet.
| Situatie | Oordeel |
|---|---|
| Brochuresite van vijf pagina's, één ontwerper, zelden wijzigingen | Nee — een stijlgidspagina volstaat |
| Eén site, meerdere sjablonen, af en toe contentwijzigingen | Licht: tokens en een componentenblad |
| Site plus app die een merk delen | Ja — het gedeelde vlak is waar afwijking ontstaat |
| Meerdere sites binnen één organisatie | Ja — dit is het sterkste geval |
| Veel A/B-tests en campagnepagina's | Ja — snelheid van samenstellen is de opbrengst |
| Herbouw gepland binnen een jaar | Nog niet — bouw het systeem samen met de herbouw |
Het minimaal bruikbare systeem#
Het merendeel van het voordeel komt uit een kleine kern. Die bouw je in dagen, niet maanden, en ze volstaat voor de meeste sites die er überhaupt een nodig hebben.
- Tokens: kleur, typografische schaal, witruimteschaal, hoekradii, schaduwen, breekpunten — benoemd, geen vaste getallen.
- Typografie: kopniveaus en tekststijlen met hun responsieve gedrag.
- Knoppen en links: elke toestand — normaal, hover, focus, actief, uitgeschakeld, ladend.
- Formulierelementen: invoerveld, keuzelijst, tekstvak, aankruisvakje, keuzerondje, plus fout- en hintstijlen.
- Kaarten en lijsten: de twee of drie terugkerende contentcontainers die je site werkelijk gebruikt.
- Navigatie: koptekst, voettekst, kruimelpad, paginering.
- Terugkoppeling: lege toestand, foutmelding, laadtoestand, succesmelding.
Toestanden zijn het deel dat wordt overgeslagen en het deel dat er het meest toe doet. Een component die alleen in de normale toestand is gedefinieerd schuift elk randgeval terug naar wie hem implementeert.
De onderhoudskosten die niemand begroot#
Een ontwerpsysteem is een product met gebruikers en heeft een eigenaar nodig. Zonder eigenaar dwaalt het af: de site krijgt componenten die het systeem niet heeft, het systeem houdt componenten die niemand gebruikt, en na een jaar werken mensen eromheen in plaats van ermee.
- Iemand is eigenaar en beslist wat erin komt. Een systeem in handen van een commissie stopt met veranderen.
- Een gedocumenteerde route om een nieuwe component voor te stellen, zodat mensen het uitbreiden in plaats van omzeilen.
- Versiebeheer, zodat een wijziging niet stilletjes elke pagina in één keer verandert.
- Een periodieke controle van wat er op de live site staat maar niet in het systeem — dat gat is de gezondheidsmaat.
- Verwijderen. Ongebruikte componenten zijn kosten, geen waarde.
Lichtere alternatieven#
Ontbreekt de grond voor een volledig systeem, dan zijn er goedkopere stappen die veel van het consistentievoordeel opleveren.
| Optie | Inspanning | Goed voor |
|---|---|---|
| CSS custom properties voor kleur, typografie en witruimte | Uren | Elke site — dit is de ondergrens |
| Eén levende stijlgidspagina in de site zelf | Een dag | Kleine sites met incidentele bijdragers |
| Componentenbibliotheek in het CMS of de sjabloonlaag | Dagen | Contentteams die pagina's samenstellen |
| Gevestigd CSS-framework, licht in eigen stijl | Dagen | Interne hulpmiddelen en beheerschermen |
| Volledig gedocumenteerd ontwerpsysteem | Weken tot maanden | Meerdere producten of meerdere teams |
Een levende stijlgidspagina binnen de echte site verslaat een document: ze gebruikt dezelfde CSS en kan dus niet van de werkelijkheid afwijken zonder zichtbaar te breken.
Veelgestelde vragen
Kan ik een kant-en-klaar ontwerpsysteem gebruiken?
Ja, en voor interne hulpmiddelen is dat meestal de juiste keuze — de merkuitstraling telt weinig en je krijgt meteen toegankelijke, geteste componenten. Voor een publieke marketingsite is de afweging dat je site lijkt op elke andere site met hetzelfde systeem, dus de meeste organisaties passen hem zwaar aan, waarmee een deel van de onderhoudsbesparing verdwijnt.
Wie hoort eigenaar te zijn van het ontwerpsysteem?
Eén bij naam genoemde persoon, met inbreng van ontwerp en ontwikkeling. Gedeeld eigenaarschap tussen ontwerp en techniek klinkt samenwerkend en betekent in de praktijk dat niemand beslist, waardoor het systeem stopt met evolueren en mensen eromheen gaan werken. De eigenaar hoeft niet alles te bouwen; hij moet ja en nee zeggen.
Wat is het verschil tussen een stijlgids en een ontwerpsysteem?
Een stijlgids legt het uiterlijk vast: kleuren, lettertypen, logogebruik. Een ontwerpsysteem bevat dat plus werkende componenten, hun toestanden, de regels om ze te combineren, en meestal de code. Een stijlgids vertelt hoe dingen eruitzien; een ontwerpsysteem geeft je de onderdelen en vertelt wanneer je welk onderdeel gebruikt.
Hoe voorkom ik dat het veroudert?
Maak het de weg van de minste weerstand en controleer het gat. Is het systeem gebruiken trager dan eenmalige CSS schrijven, dan schrijven mensen eenmalige CSS. Zet periodiek op een rij welke componenten wel op de live site staan en niet in het systeem: een groeiende lijst betekent dat het systeem niet dient wie de pagina's bouwt, en dat is een ontwerpprobleem van het systeem zelf.
ontwerpsysteemstijlgids websitedesign tokenscomponentenbibliotheekconsistentie interfacedesign system web
