Definitie: Een design system is een samenhangende verzameling herbruikbare componenten, ontwerpregels, design tokens en documentatie waarmee een organisatie digitale producten consistent ontwerpt en bouwt. Het fungeert als gedeelde bron van waarheid voor ontwerpers en ontwikkelaars, zodat een knop, formulier of foutmelding overal hetzelfde werkt en eruitziet.
In het kort
- Een design system bevat meer dan een stijlgids: naast kleuren en typografie ook componenten in code, patronen, richtlijnen voor toegankelijkheid en tekst, en documentatie.
- Bekende voorbeelden zijn Material Design van Google, Carbon van IBM, Fluent van Microsoft, Lightning van Salesforce en de Human Interface Guidelines van Apple.
- De grootste winst zit in minder dubbel werk, meer consistentie en snellere ontwikkeling van nieuwe schermen.
- Een design system vraagt onderhoud en een eigenaar. Voor één kleine applicatie is een lichte variant vaak genoeg.
Wat is een design system?
Een design system is de set bouwstenen en afspraken waarmee je digitale producten maakt. Denk aan een doos met lego: elk blokje heeft een vaste vorm, en er zijn bouwinstructies die laten zien hoe je ze combineert. In een design system zijn die blokjes knoppen, invoervelden, tabellen, meldingen en navigatie. De instructies beschrijven wanneer je welk onderdeel gebruikt en hoe het zich gedraagt.
Het verschil met een losse huisstijl of stijlgids is dat een design system ook de werkende onderdelen omvat. Figma beschrijft het zo: een stijlgids richt zich vooral op de visuele kant, terwijl een design system breder is en ook code en bruikbaarheid omvat. Een ontwerper pakt een component uit de bibliotheek in de ontwerptool, en de ontwikkelaar gebruikt hetzelfde component in code. Zo spreken beide dezelfde taal.
Creately noemt een design system daarom een levende bron van waarheid voor productteams. Het is nooit af: het groeit mee met de producten die erop gebouwd worden.
Waaruit bestaat een design system?
De precieze indeling verschilt per organisatie, maar de meeste design systems bevatten deze onderdelen:
| Onderdeel | Wat het is | Voorbeeld |
|---|---|---|
| Ontwerpprincipes | De uitgangspunten achter keuzes | “Duidelijkheid gaat voor volledigheid” |
| Design tokens | Benoemde waarden voor kleur, afstand, lettergrootte en schaduw | kleur-primair, ruimte-m, tekst-klein |
| Fundamenten | Kleurpalet, typografie, iconen, raster en logo-gebruik | Lettertypes en hun toepassing per niveau |
| Componenten | Herbruikbare interface-elementen, in ontwerp en code | Knop, invoerveld, keuzelijst, melding |
| Patronen | Combinaties van componenten voor terugkerende situaties | Formulier met validatie, zoeken en filteren, lege toestand |
| Contentrichtlijnen | Afspraken over toon, woordkeuze en foutmeldingen | Hoe je een bevestiging of fout formuleert |
| Toegankelijkheidsrichtlijnen | Eisen aan contrast, focus en toetsenbordbediening | Minimaal contrast, zichtbare focusrand |
| Documentatie | Uitleg wanneer en hoe je elk onderdeel gebruikt | Do’s en don’ts per component |
Design tokens verdienen extra uitleg. Het zijn variabelen met een betekenisvolle naam. In plaats van overal een kleurcode te gebruiken, gebruik je “kleur-primair”. Wijzigt de huisstijl, dan pas je de waarde op één plek aan en verandert alles mee. Tokens maken ook een donkere modus of een tweede merk een stuk eenvoudiger.
Design system, stijlgids, UI-kit en componentbibliotheek: wat is het verschil?
| Begrip | Wat het omvat |
|---|---|
| Stijlgids | Visuele afspraken zoals kleuren, lettertypes en logo-gebruik |
| UI-kit | Een set ontwerpbestanden met interface-elementen, vaak alleen in een ontwerptool |
| Componentbibliotheek | Herbruikbare componenten in code, zoals knoppen en formulieren |
| Patroonbibliotheek | Beschreven oplossingen voor terugkerende interactievragen |
| Design system | Het geheel: principes, tokens, componenten in ontwerp en code, patronen, richtlijnen en documentatie |
Een design system bevat dus vaak de andere onderdelen. Een UI-kit alleen is nog geen design system, omdat de koppeling met code, de regels en de documentatie ontbreken.
Waar komt het design system vandaan?
Het idee van vaste ontwerpregels is ouder dan het web. Figma noemt de Graphics Standards Manual van NASA uit 1976 als vroeg voorbeeld, en Apple, dat in 1987 al richtlijnen voor de interface van zijn computers publiceerde. In de jaren 2000 kwamen patroonbibliotheken op voor websites. In 2013 introduceerde Brad Frost atomic design, een methode die interfaces opbouwt uit atomen, moleculen en organismen. Die denkwijze legde de basis voor veel moderne design systems.
Voorbeelden van bekende design systems
- Material Design (Google). Gebruikt in Android-apps en veel webapplicaties, bekend om de uitgebreide documentatie.
- Carbon (IBM). Gericht op zakelijke applicaties met veel gegevens, zoals dashboards en beheeromgevingen.
- Fluent (Microsoft). De basis voor de interface van Microsoft-producten.
- Lightning (Salesforce). Standaardiseert de interface binnen het Salesforce-platform.
- Human Interface Guidelines (Apple). De richtlijnen voor apps op Apple-apparaten.
- NL Design System. Een gezamenlijk initiatief van Nederlandse overheden om componenten en richtlijnen te delen.
Veel van deze systemen zijn openbaar. Ook als je geen eigen design system bouwt, zijn ze een goede bron om te zien hoe anderen formulieren, tabellen en foutmeldingen aanpakken.
Een voorbeeld: één component uitgewerkt
Neem een eenvoudige knop. In een design system is die veel meer dan een gekleurd vlak met tekst. Er is vastgelegd:
- Varianten: primair voor de belangrijkste actie, secundair voor alternatieven, en een variant voor verwijderen.
- Toestanden: normaal, met de muis erboven, met toetsenbordfocus, ingedrukt, uitgeschakeld en bezig met laden.
- Maten: klein, normaal en groot, met vaste afstanden via tokens.
- Regels: maximaal één primaire knop per scherm, en een knoptekst die zegt wat er gebeurt, zoals “Offerte versturen” in plaats van “OK”.
- Toegankelijkheid: voldoende contrast, een zichtbare focusrand en bediening met Enter en spatie.
Omdat dit één keer goed is geregeld, hoeft geen enkel scherm er nog over na te denken.
Wat zijn de voordelen van een design system?
- Consistentie. Hetzelfde onderdeel werkt overal hetzelfde, wat gebruikers houvast geeft.
- Sneller bouwen. Nieuwe schermen worden samengesteld uit bestaande bouwstenen.
- Minder dubbel werk. Een knop wordt één keer goed ontworpen en gebouwd.
- Betere samenwerking. Ontwerpers en ontwikkelaars gebruiken dezelfde namen en onderdelen.
- Toegankelijkheid op één plek. Een toegankelijk component maakt elk scherm waarin het voorkomt beter.
- Eenvoudiger inwerken. Nieuwe teamleden zien snel hoe het werkt.
Wat zijn de nadelen?
Figma en Lollypop noemen dezelfde aandachtspunten. Een design system vraagt een investering vooraf, terwijl de opbrengst pas later zichtbaar wordt. Het moet worden onderhouden, anders raakt het verouderd en gaan teams eromheen werken. En te strikte regels kunnen creativiteit beperken. Daarnaast is draagvlak nodig: een design system dat niemand gebruikt, levert niets op.
Heb je een design system nodig?
Niet elke organisatie heeft een volledig design system nodig. Deze vragen helpen bij de afweging:
| Situatie | Advies |
|---|---|
| Eén kleine applicatie met één ontwikkelaar | Een lichte variant: tokens en een handvol vaste componenten |
| Meerdere applicaties of portalen met dezelfde gebruikers | Een gedeelde componentbibliotheek loont |
| Meerdere teams of externe partijen | Een gedocumenteerd design system voorkomt dat iedereen eigen keuzes maakt |
| Een product dat jaren meegaat | Investeren in een design system betaalt zich terug in onderhoud |
| Snel een eerste versie testen | Gebruik een bestaand open source design system of componentenpakket |
Een veelgekozen middenweg is een bestaand systeem als basis, aangepast met eigen tokens voor kleuren en typografie. Dan heb je de voordelen van een uitgewerkte set componenten zonder alles zelf te bouwen.
Hoe bouw je een design system?
Ramotion beschrijft een gangbare aanpak in vijf stappen:
- Inventariseer wat er is. Verzamel bestaande schermen en kijk hoeveel varianten er zijn van knoppen, formulieren en meldingen.
- Leg principes vast. Wat vind je belangrijk in je interface, en welke keuzes volgen daaruit?
- Maak herbruikbare componenten, in de ontwerptool en in code, met design tokens als basis.
- Documenteer. Beschrijf per component wanneer je het gebruikt, welke varianten er zijn en wat je vermijdt.
- Onderhoud en ontwikkel door. Wijs een eigenaar aan en spreek af hoe wijzigingen worden voorgesteld en doorgevoerd.
Tools die vaak worden gebruikt zijn Figma voor het ontwerp en Storybook om componenten in code te tonen en te testen.
Veelgemaakte fouten
- Beginnen met alles. Start met de componenten die het meest voorkomen.
- Alleen in de ontwerptool. Zonder code blijft het een UI-kit en lopen ontwerp en software uit elkaar.
- Geen eigenaar. Zonder iemand die het bijhoudt, veroudert het systeem snel.
- Geen voorbeelden van gebruik. Documentatie zonder voorbeelden van goed en fout wordt weinig gelezen.
- Toegankelijkheid als laatste stap. Juist in componenten is het eenvoudig en effectief om het goed te regelen.
Wat betekent dit voor jouw project?
Bij een nieuwe applicatie wil ik vooraf duidelijk hebben wat we met een eerste versie bedoelen. Een volledig design system hoort daar meestal niet bij. Wel een paar vaste afspraken over kleuren, typografie en de belangrijkste componenten, zodat schermen consistent blijven en later uit te breiden zijn.
Daarbij begin ik bij de gebruiker: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? De componenten die die taak ondersteunen, zoals een duidelijk formulier, een overzicht en een heldere melding, krijgen als eerste aandacht. Groeit de applicatie, of komen er meer tools bij voor dezelfde gebruikers, dan kan daar een gedeelde bibliotheek uit groeien.
Vraag? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook hoe ik een webapplicatie bouw.
Veelgestelde vragen over design systems
Wat is een design system?
Een design system is een samenhangende verzameling herbruikbare componenten, ontwerpregels, design tokens en documentatie. Het zorgt dat ontwerpers en ontwikkelaars digitale producten consistent ontwerpen en bouwen, met één gedeelde bron van waarheid.
Wat zijn voorbeelden van design systems?
Bekende voorbeelden zijn Material Design van Google, Carbon van IBM, Fluent van Microsoft, Lightning van Salesforce en de Human Interface Guidelines van Apple. Veel van deze systemen zijn openbaar en dienen ook als inspiratiebron.
Wat is het verschil tussen een design system en een stijlgids?
Een stijlgids legt vooral visuele afspraken vast, zoals kleuren, lettertypes en logo-gebruik. Een design system is breder en omvat ook componenten in ontwerp en code, patronen, richtlijnen voor toegankelijkheid en tekst, en documentatie over het gebruik.
Verwante termen
Wireframe · Mockup · Klikbaar prototype · Toegankelijkheid (WCAG) · Webapplicatie · Framework
← Terug naar de kennisbank