Een designsysteem is een set regels en bouwstenen voor het maken van ontwerpen. Het beschrijft bijvoorbeeld welke kleuren, lettertypes, knoppen en layouts je gebruikt. Door deze regels te volgen blijven alle ontwerpen van een merk er hetzelfde uitzien. Dat zorgt voor herkenbaarheid en duidelijkheid. Een designsysteem helpt ook om sneller te werken, omdat je niet elke keer opnieuw hoeft te bedenken hoe iets eruit moet zien. Verschillende ontwerpers kunnen met dezelfde regels werken en toch consistente ontwerpen maken. Zo wordt het makkelijker om websites, apps en andere visuals te maken die bij elkaar passen en professioneel ogen.
1. Merk & Intentie
Deze vragen bepalen de fundamentele ontwerpkeuzes.
- Wat is het doel van het merk of product?
- Welke emoties moet het ontwerp oproepen?
- Welke drie woorden beschrijven het merk het best?
- Wat moet een gebruiker voelen wanneer hij de pagina ziet?
- Wat is de doelgroep (leeftijd, context, cultuur)?
- Wat onderscheidt dit merk van concurrenten?
- Is het merk formeel of informeel?
- Is het merk premium, toegankelijk of speels?
- Is het merk minimalistisch of expressief?
- Welke merken lijken visueel op dit merk?
2. Kleuren
Kleurregels bepalen herkenbaarheid.
- Wat is de primaire merk-kleur?
- Welke kleuren ondersteunen de primaire kleur?
- Wat zijn de achtergrondkleuren?
- Welke kleuren mogen nooit gebruikt worden?
- Hoeveel kleuren mogen tegelijk gebruikt worden?
- Wat is de standaard tekstkleur?
- Wat is de kleur van interactie-elementen (bijv. knoppen)?
- Hoe veranderen kleuren bij hover of interactie?
- Hoe wordt kleur gebruikt om hiërarchie aan te geven?
- Hoe wordt kleur gebruikt voor toegankelijkheid?
3. Typografie
Typografie bepaalt structuur en leesbaarheid.
- Welke fontfamilie wordt gebruikt voor koppen?
- Welke fontfamilie wordt gebruikt voor bodytekst?
- Hoeveel verschillende fonts mogen gebruikt worden?
- Wat is de schaal van koppen (H1, H2, H3)?
- Wat is de standaard lettergrootte voor bodytekst?
- Hoe groot mag tekst maximaal worden?
- Hoe groot mag tekst minimaal worden?
- Welke lettergewichten zijn toegestaan?
- Hoe wordt typografie gebruikt om hiërarchie te tonen?
- Wanneer wordt tekst gecentreerd of links uitgelijnd?
4. Layout & spatiëring
Dit bepaalt consistentie en ritme.
- Wat is de maximale breedte van de pagina?
- Hoeveel kolommen gebruikt het grid?
- Wat is de standaard marge rondom content?
- Welke spacing-schaal wordt gebruikt (bijv. 8px)?
- Hoeveel ruimte zit tussen secties?
- Hoeveel ruimte zit tussen componenten?
- Wanneer gebruik je volledige breedte?
- Wanneer gebruik je gecentreerde layouts?
- Wat is de standaard padding binnen elementen?
- Hoe wordt witruimte gebruikt om nadruk te leggen?
5. Componenten
Componenten maken ontwerpen schaalbaar.
Voor elke component stel je dezelfde vragen:
Knoppen
- Welke vormen hebben knoppen?
- Wat is de standaard padding?
- Hoe zien primaire knoppen eruit?
- Hoe zien secundaire knoppen eruit?
- Hoe zien disabled knoppen eruit?
Cards
- Hoeveel informatie bevat een card?
- Hoeveel cards staan er naast elkaar?
- Hebben cards schaduwen of borders?
Navigatie
- Waar staat de navigatie?
- Hoeveel items mogen in de navigatie staan?
- Hoe wordt actieve navigatie getoond?
Formulieren
- Hoe zien inputvelden eruit?
- Hoe worden fouten getoond?
- Hoe wordt focus getoond?
6. Beeldgebruik
Afbeeldingen bepalen sfeer.
- Welke stijl fotografie wordt gebruikt?
- Zijn afbeeldingen realistisch of illustratief?
- Welke kleuren domineren in beeldmateriaal?
- Hoe worden afbeeldingen bijgesneden?
- Hoeveel ruimte krijgen afbeeldingen?
- Worden beelden full width gebruikt?
- Hoe worden afbeeldingen gecombineerd met tekst?
- Hoe consistent moet beeldstijl zijn?
7. Iconografie
Iconen moeten herkenbaar zijn.
- Welke iconstijl wordt gebruikt (lijn, solid)?
- Hoe dik zijn iconlijnen?
- Welke kleuren mogen iconen hebben?
- Hoe groot zijn iconen standaard?
- Wanneer gebruik je iconen?
- Wanneer gebruik je tekst in plaats van iconen?
8. Interactie & gedrag
In digitale systemen is gedrag onderdeel van het ontwerp.
- Wat gebeurt er bij hover?
- Hoe reageren knoppen op interactie?
- Hoe worden animaties gebruikt?
- Hoe lang duren animaties?
- Wanneer worden animaties gebruikt?
- Wanneer moeten animaties vermeden worden?
9. Content & tone of voice
Tekst is onderdeel van het systeem.
- Is de tone of voice formeel of informeel?
- Wordt “je” of “u” gebruikt?
- Zijn zinnen kort of lang?
- Wordt humor gebruikt?
- Welke woorden passen bij het merk?
- Welke woorden moeten vermeden worden?
10. Consistentie & schaalbaarheid
Dit zijn systeemvragen.
- Kan iemand anders met deze regels ontwerpen maken?
- Werkt het systeem voor meerdere pagina’s?
- Werkt het systeem voor meerdere ontwerpers?
- Werkt het systeem voor meerdere platforms?
- Welke regels zijn absoluut?
- Welke regels zijn flexibel?