Dit project maakt onderdeel uit van een afgeschermde assesssment. Voer de toegangscode in om te bekijken.
Onjuiste code ingevoerd. Probeer opnieuw.
← Terug naar HomeIn dit datapunt laat ik zien hoe ik voor de rebranding van Grafische Republiek naar Digitale Staat een design system heb ontwikkeld.
Zet deze modus aan om direct de leeruitkomsten (bewijsvoering) in de tekst te highlighten.
Duidelijk maken wat er gevraagd wordt en welke doelen de bijdrage dient te bereiken.
Relevante theorie over mensgerichte ontwerpmethodes inzetten om keuzes te onderbouwen.
Methodisch inzichten verzamelen en de toegevoegde waarde daarvan beoordelen.
Heldere conclusies formuleren waar bruikbare verbetersuggesties uit voortvloeien.
Voor de beoordeling van dit datapunt toon ik vier deelfacetten aan. Hieronder geef ik per criterium een korte onderbouwing in mijn eigen woorden, en verwijs ik naar de exacte plekken op deze pagina waar de bewijsvoering in context te vinden is.
Mijn onderbouwing: Ik laat in deze showcase niet zomaar gemaakte componenten zien, maar ik neem je bewust eerst mee in de ontwerpvraag ("Wat was het eigenlijke probleem?"). Ik omschrijf heel concreet welke randvoorwaarden en eisen er aan mijn bijdrage werden gesteld, en leg vast welke doelen (zoals schaalbaarheid en overdraagbaarheid) bepalen of mijn werk succesvol is geweest. Dit fundament stuurt alle keuzes die ik daarna in de uitwerking maak.
📍 Zie verderop (geel randje): De secties Doelen en Context en opdracht.
Mijn onderbouwing: UI-keuzes (zoals lettergroottes en de afstand tussen tekst) heb ik niet gemaakt omdat "het er wel mooi uitzag". Ze leunen zwaar op gevestigde theorieën over cognitie (Gestalt's wet van Proximity, NN/g's scanning onderzoeken) en leesbaarheid (WCAG). Ik gebruik deze literatuur expliciet om aan mijn stagebegeleider (en nu de lezer) te beargumenteren waarom één specifieke spacing wel werkt, en een willekeurige pixelwaarde niet.
📍 Zie verderop (groen randje): De theorieblokken onder de variabelen (Typografie, Line height) en de bronnenlijst onderaan het document.
Mijn onderbouwing: Omdat gebruikers op straat niet direct abstracte spacing en typography multipliers kunnen evalueren, heb ik als test-methode gekozen voor iteratieve expert reviews. Ik heb hierbij mijn ontwerpproces opgedeeld in losse variabelen. Elke iteratie heb ik methodisch geëvalueerd met een Senior Designer. Het opdelen van variabelen voorkwam dat we discussieerden over "het totaalplaatje", maar forceerde gerichte inzichten per fundamentele stap.
📍 Zie verderop (paars randje): De sectie Methodische aanpak en de onderzoek/test alineëas per variabele.
Mijn onderbouwing: Verder in deze showcase behandel ik het uiteindelijke systeem kritisch aan de hand van de initiële doelen. In de conclusies ga ik actief in op de frictiepunten ("Wat schaalde niet goed, wat leverde frictie op?"). Ik stop niet bij de probleemstelling, maar formuleer aan de hand hiervan concrete, bruikbare adviezen (zoals het wijzigen van de kolomverdelingen of CSS tokens) die developers en designers in een volgende fase daadwerkelijk kunnen oppakken en implementeren.
📍 Zie verderop (oranje randje): De sectie Conclusies en verbetersuggesties.
Digitale Staat had behoefte aan een professionele website om nieuwe klanten aan te trekken en hun werk (cases) overtuigend te showcasen. Dit vereist een marketing- en portfolio-omgeving die vertrouwen uitstraalt.
Binnen het traject was er al een visuele opzet voor de homepage, maar zonder expliciete ontwerpregels. Ik heb het onderliggende fundament gebouwd en getest, zodat toekomstige pagina's niet op losse keuzes zouden worden gebouwd, maar op één samenhangend, systematisch en schaalbaar systeem.
Aanvullend dragen deze doelen bij aan het grotere projectdoel van Digitale Staat: het neerzetten van een professionele digitale identiteit die vertrouwen wekt bij potentiële klanten.
Hoewel de daadwerkelijke development-fase buiten de scope van mijn stage viel, was het doel om het ontwerp zo op te leveren dat front-enders later zonder interpretatie of giswerk kunnen starten met bouwen.
Om te bepalen of het design system daadwerkelijk bijdraagt aan consistentie, overdraagbaarheid en schaalbaarheid, heb ik vooraf toetscriteria opgesteld.
Deze criteria zijn niet willekeurig gekozen, maar afgeleid uit geobserveerde problemen in de bestaande homepage en onderbouwd met theorie en praktijkinput.
Typografische keuzes zijn onderling consistent en herleidbaar naar een onderliggend systeem, zonder dat per component losse, niet-onderbouwde keuzes ontstaan.
ResultaatEr ontstaat een samenhangend typografisch geheel waarin hiërarchie herkenbaar en reproduceerbaar is.
Line heights volgen een consistente logica die aansluit op de typografische keuzes en worden niet willekeurig toegepast.
ResultaatTekst blijft leesbaar en visueel samenhangend over verschillende secties en componenten.
Afstanden tussen elementen zijn consistent toegepast en herleidbaar naar een onderliggend systeem, zonder willekeurige afwijkingen.
ResultaatVisuele groepering van elementen is duidelijk en wordt op dezelfde manier toegepast binnen de gehele pagina.
Lay-outs zijn opgebouwd volgens een consistente en herkenbare structuur, waarbij uitlijning niet willekeurig afwijkt.
ResultaatComponenten zonder herinterpretaties opnieuw kunnen worden toegepast op andere pagina's en schermformaten.
En hoe zorg ik ervoor dat dit systeem schaalbaar is over verschillende pagina's en devices, en duidelijk overdraagbaar is naar development?
Binnen mijn stage werkte ik aan de nieuwe digitale identiteit van Digitale Staat. Omdat zij via hun website grote, professionele klanten willen aantrekken, moest het nieuw portfolio structuur en absolute kwaliteit uitstralen.
Er lag al een eerste visuele schets voor de homepage, maar zonder regels voor typografie, spacing of grid. Dat bracht risico's met zich mee:
Ik heb niet direct een einddesign gemaakt, maar gewerkt via gecontroleerde experimenten per variabele, getoetst via expert reviews.
Omdat directe gebruikerstesten op een abstract niveau (zoals line-height) lastig zijn met eindgebruikers, heb ik gekozen voor iteratieve expert reviews. Deze methode is gekozen omdat de onderzochte variabelen (zoals typografie en spacing) zich op een abstract niveau bevinden en moeilijk direct door eindgebruikers beoordeeld kunnen worden, terwijl expert reviews gericht inzicht geven in visuele consistentie en toepasbaarheid in complexe layouts. Ik formuleerde per variabele hypotheses en werkte meerdere varianten uit. Deze heb ik geëvalueerd in feedbacksessies met mijn stagebegeleider (een ervaren senior designer).
Hierbij werd met een kritische designerblik gekeken of de aannames standhielden in complexe portfolio-layouts. Door keuzes te isoleren voorkwam ik dat beslissingen elkaar beïnvloedden zonder dat duidelijk was wáárom iets wel of niet werkte.
Vanuit mijn stagebegeleider kreeg ik randvoorwaarden:
Een vaste typescale zorgt voor meer consistente hiërarchie dan losse fontgroottes.
ProbleemEerdere versies hadden losse groottes zonder systeem, waardoor hiërarchie onduidelijk was.
Onderzoek & Test BC 8.3.1Tijdens expert reviews met mijn stagebegeleider (Senior Designer) hebben we vier wiskundige schalen vergeleken: Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333) en augmented Fourth (1.414). De Minor Third bleek te subtiel voor de gewenste high-end uitstraling, terwijl de Perfect Fourth exact het gewenste contrast bood voor grote headings zonder dat de hiërarchie op mobiel uit elkaar viel.
Resultaat1.333 werkte het best. De stap naar 89px (de volgende in de schaal) is bewust niet meegenomen, omdat dit onwerkbaar groot is. De definitieve typografische indeling is geworden:
Een vaste schaal voorkomt willekeur en maakt keuzes reproduceerbaar.
Gebruikers lezen zelden elk woord in een interface; ze scannen op basis van visuele hiërarchie. Een strikte 1.333 typescale garandeert wiskundig contrast en eenduidige niveaus. Door willekeurige tussenmaten te elimineren, is de hiërarchie onmiddellijk intuïtief scanbaar, wat resulteert in wezenlijk lagere cognitieve belasting.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Line height moet proportioneel afnemen naarmate de font-grootte toeneemt, voor optimale scanbaarheid en visuele rust.
ProbleemEerdere oplossingen hanteerden overal dezelfde line-height, waardoor grote koppen te ver uit elkaar stonden "omdat het kon", en kleine teksten moeilijk leesbaar waren.
Onderzoek & Test BC 8.3.1In Figma is een matrix opgebouwd. Per font size uit Variabele 1 zijn systematisch verschillende line-height multipliers (variërend van 1.0 t/m 1.6) getest en vergeleken in expert sessions. Hierbij werd specifiek gekeken naar de 'vertical rhythm' in complexe layouts met meerdere tekstkolommen.
Resultaat & InzichtKleinere teksten vereisen meer witruimte (1.5) voor leesbaarheid, terwijl grotere koppen juist een strakkere clustering (1.1 of 1.0) vereisen om als één blok te worden waargenomen.
Tijdens de tests bleek een lineaire afname van line-height (bijv. telkens -0.1) onvoldoende. De curve die we hebben vastgelegd is "handmatig geslepen" op basis van visueel gewicht. Zo behoudt een artikelkop (38px) zijn verbondenheid met de body-tekst, terwijl een display-titel (67px) krachtig blijft zonder dat de staarten van de letters de koppen van de volgende regel raken.
De 'Law of Proximity' stelt dat elementen die fysiek dichter bij elkaar staan, als eenheid worden waargenomen. Voor grote koppen (zoals 67px) is een line-height van 1.0 cruciaal om te voorkomen dat tekst uiteenvalt in losse objecten. Kleinere leesteksten (zoals 16px) vereisen daarentegen aanzienlijk meer inline whitespace (conform WCAG 1.4.12 Text Spacing) om 'tracking' te vergemakkelijken en leesachterstand te voorkomen.
Eén gedeeld typografisch en spacing-systeem over desktop (1512px) en mobiel (390px) zorgt voor meer consistentie dan aparte systemen per device.
ProbleemIn de eerste iteraties bestond de neiging om voor mobiel afwijkende fontgroottes en spacing te introduceren. Dit leidde tot twee onafhankelijke ontwerpsystemen die visueel uit de pas liepen. Koppen die op desktop krachtig aanvoelden, werden op mobiel disproportioneel verkleind, waardoor de hiërarchie verdween.
Test BC 8.3.1In Figma zijn naast elkaar drie varianten geplaatst: (A) volledig aparte typografie per device, (B) dezelfde typescale met een aangepaste display-size voor mobiel, en (C) exact dezelfde typescale op beide devices. Per variant zijn complexe portfolio-layouts gebouwd met koppen, subkoppen, body en meta-tekst.
Resultaat & InzichtVariant C bleek het meest consistent: dezelfde Perfect Fourth-schaal (16 → 21 → 28 → 38 → 67px) op beide devices. Enige uitzondering is de display-grootte (67px), die alleen op desktop wordt toegepast voor hero-secties. Op mobiel begint de hiërarchie bij 38px als H1.
De line-height ratio's, fontgewichten (Light 300 + Bold 700) en vergrotingsfactoren bleven identiek. Dit betekent dat er in het ontwerp slechts één typografische tabel verworven hoeft te worden — het systeem schaalt vanzelf mee.
Jakob's Law stelt dat gebruikers het merendeel van hun tijd op andere websites doorbrengen, waardoor ze verwachten dat jouw interface zich vergelijkbaar gedraagt. Wanneer de typografische hiërarchie op desktop fundamenteel verschilt van mobiel, doorbreekt dit het eerder opgebouwde 'Mentale Model'. Door één systematisch fundament af te dwingen voor typescaling blijft het gedrag consistent over alle touchpoints, zodat gebruikers niet opnieuw hoeven te assimileren hoe de interface werkt — ongeacht het device.
Hoe we een leerzame game ontwikkelden voor onderwijs.
Design SystemsHoe we een leerzame game ontwikkelden.
Design Systems| Token | Desktop | Mobiel | Status |
|---|---|---|---|
| Display | 67px | — | Alleen desktop |
| H1 | 38px | 38px | ✓ Identiek |
| H2 | 28px | 28px | ✓ Identiek |
| H3 | 21px | 21px | ✓ Identiek |
| Body | 16px | 16px | ✓ Identiek |
| Typescale | ×1.333 | ×1.333 | ✓ Identiek |
| Font | Geist | Geist | ✓ Identiek |
| Gewichten | 300 · 700 | 300 · 700 | ✓ Identiek |
Een fibonacci spacing-schaal (met stappen van 4px, zoals 4, 8, 12, 16, 20) biedt de broodnodige flexibiliteit om een rijke portfolio-website op te bouwen.
ProbleemMijn initiële aanname bleek fout. Tijdens de expert reviews met mijn stagebegeleider pasten we de fibonacci-schaal toe op de daadwerkelijke componenten. De senior designer wees me erop dat teveel opties juist zorgen voor willekeur en keuzestress. Het verschil tussen 16px en 20px was nauwelijks zichtbaar, waardoor groepering alsnog inconsistent aanvoelde.
Test BC 8.3.1Drie spacing-systemen getest: (A) Fibonacci-schaal met 15+ waarden, (B) 4pt grid met vaste stappen, (C) 8pt grid met veelvouden. Per systeem zijn identieke portfolio-layouts opgebouwd en vergeleken op visuele groepering, scanpatronen en reproceerbaarheid.
ResultaatIk moest mijn aanname bijsturen. De uiteindelijke spacing-set is gebaseerd op een 8pt grid (basis eenheid: 8px), maar met contextuele waarden die specifiek zijn afgeleid uit de daadwerkelijke componenten. De set bevat 14 vastgelegde waarden van 8px tot 126px — elk met een gedocumenteerde use-case. Dit forceerde een veel helderder contrast in whitespace.
Flexibiliteit is de vijand van consistentie. Door spacing niet vrij te kiezen, maar af te leiden uit 8pt-veelvouden met gedocumenteerde use-cases, stuur je het ontwerpproces en voorkom je willekeur in de implementatie.
Elementen die dicht bij elkaar staan worden instinctief als verbonden waargenomen (Gestalt). Het 8pt grid is de de-facto standaard in moderne UI-design (Material Design, Apple HIG) omdat het mathematisch deelbaar is door 2 en 4, waardoor het naadloos schaalt over pixeldichtheden (1x, 2x, 3x). Door de spacing-tokens te beperken tot veelvouden van 8 met specifieke contexten wordt het optische contrast tussen componenten voorspelbaar — hierdoor sturen de scanlijnen vanzelf de inhoudelijke relaties aan.
Een vast kolommengrid zorgt voor meer consistentie dan vrije plaatsing van elementen op het canvas.
ProbleemZonder grid ontstonden microscopische afwijkingen in uitlijning. Elementen die visueel 'gelijk' leken, weken in werkelijkheid 3-8 pixels af. Dit leidde tot subliminale visuele onrust die afbreuk deed aan de professionele uitstraling van het portfolio.
Test BC 8.3.1Drie grid-systemen uitgewerkt en vergeleken: (A) vrije plaatsing zonder grid, (B) 12-koloms grid (standaard Bootstrap-conventie), en (C) 10-koloms grid. Per variant zijn identieke layouts gebouwd met hero-secties, portfolio-cards, kennisbankartikelen en contact-formulieren.
ResultaatHet 10-koloms grid bleek het meest geschikt. Een 12-koloms grid bood teveel subdivisies, waardoor er opnieuw keuzestress ontstond bij designers. Het 10-koloms grid bood voldoende flexibiliteit (2-koloms, 5-koloms, en asymmetrische 6/4 splits) terwijl het aantal mogelijke layouts beperkt genoeg bleef om consistentie af te dwingen.
Structuur zonder grid is visueel kwetsbaar — elk klein verschil valt op. Het 10-koloms grid biedt de sweet spot tussen flexibiliteit en restricties die consistentie afdwingt.
Een grid creëert niet alleen wiskundig reproduceerbare verhoudingen voor UI-componenten, het verankert ook systematische opschaling naar adaptieve schermgroottes. Dieter Rams' principe "Gutes Design ist so wenig Design wie möglich" vertaalt zich hier naar: het grid elimineert de microscopische afwijkingen in vrije uitlijning die onbewust afbreuk doen aan trust en professionaliteit. Material Design bevestigt dat een deelbaar kolomsysteem (10 = 5×2 = 2×5) adaptieve breakpoints robuust ondersteunt.
Consistente toepassing van alle variabelen — gecombineerd met een vastgelegd kleurenpalet, border-radius systeem en componentbibliotheek — leidt tot een herkenbaar en professioneel designsysteem dat reproduceerbaar is.
ProbleemZonder gedeeld systeem leek elk scherm op zichzelf te staan. Kleuren werden ad-hoc gekozen, border-radiussen varieerden per component, en knoppen hadden inconsistente padding, fontgroottes en gewichten. Het gevolg: een visueel gefragmenteerde interface die geen vertrouwen uitstraalde.
Test BC 8.3.1Alle visuele primitives — kleuren, radii, font-gewichten, componenten — zijn geïsoleerd, gedocumenteerd en vervolgens consequent toegepast op 4+ pagina-templates (homepage, portfolio-case, kennisbank, contactpagina). Per iteratie is gecontroleerd of er afwijkingen ontstonden.
ResultaatHet definitieve design system bevat:
Een design system is pas écht consistent wanneer elke visuele beslissing — van kleur tot padding tot border-radius — herleidbaar is naar een expliciete token. Tokens elimineren interpretatie; ze dwingen reproduceerbaarheid af.
Design Tokens zijn de kleinste ondeelbare ontwerpeenheden (kleur, radius, spacing) die functioneren als het 'DNA' van een interface. Salesforce Lightning Design System introduceerde dit concept om de kloof tussen design en development te overbruggen. Brad Frost's Atomic Design Model beschrijft hoe atomen (tokens) combineren tot moleculen (componenten) die samen organismen (layouts) vormen. Door elk atoom expliciet vast te leggen, kan het systeem foutloos reproduceren zonder dat een designer elke pixel hoeft te controleren.
Webapplicaties card, websites card, article
CTA knoppen, formulier-inputs
Service tags, artikel-tags, navigatietags
Cover-afbeeldingen in boekensectie
Aan het einde van de ontwerpfase heb ik het fundament getoetst aan de kernvraag: Werkt dit schaalbaar in de praktijk? Onderstaande theorie vertaalt de waargenomen knelpunten (conclusies) in direct implementeerbare acties voor de realisatiefase (verbetersuggesties).
De onderstaande verbetersuggesties zijn een directe vertaling van ontwerpbeslissingen naar implementatie, zodat de consistentie van het systeem ook in development behouden blijft.
Tijdens de iteratieve expert reviews werd een duidelijke wrijving geobserveerd in de typografie: de vastgelegde multiplier van 1.333 (Perfect Fourth) biedt op de desktop superieure hiërarchie, maar leidt op een 390px mobiel viewport tot kritieke overflow. De hiërarchische niveaus kloppen abstract gezien, maar de fysieke ruimte is niet toereikend, waardoor H1-koppen buiten proportie treden of onnodig vaak afbreken.
Actie voor front-end developers: Migreer de absolute pixel-waarden (bijv. mobiel-H1 = 38px, desktop-H1 = 50px) naar een CSS clamp() fluid typography stelsel. Bereken de minimale multiplier op 1.200 (Minor Third) en de maximale op 1.333 (Perfect Fourth). Door niet in traditionele media-queries te springen, maar lineair te schalen met de viewport size, behouden we optische hiërarchie exact volgens de 8.1.2 theorie, zónder de tekst te laten overflowen in mobiele breakpoints.
Het grid en de layout functioneerden perfect op macro-niveau (paginaverdeling). Op micro-niveau, binnen complexe kaarten en navigatie-knoppen, leidde een strikte "veelvoud van 8px" echter structureel tot spanning. Een knop voelde "te leeg", of "te krap", wat ontwerpers dwong tot tijdelijke 'weeswaarden' van bijvoorbeeld 14px in plaats van 16px. Bovendien werd ontdekt dat token naamgeving gericht was op literal-names (--blue), wat foutgevoelig bleek tijdens theorie-expansies (theming).
Oplossing ter uitvoering: Ontkoppel macro-grid rules van padding/gap in component-states. Zorg ervoor dat de front-end developer een strikte "T-Shirt" spacing set implmenteert via CSS variables (bijv. --space-xs: 4px, --space-sm: 12px, --space-md: 16px). Daarnaast: weiger alle "primitive tokens" in de code. Dwing het gebruik van "semantic tokens" af (--color-background-brand). Hiermee waarborgen we niet alleen design-consistency op de lange termijn, maar reduceren we ook technische schuld waneer 'Digitale Staat' eventueel een dark mode overweegt in de toekomst.
Het design system is zo opgezet dat het direct overdraagbaar is naar development. Door het gebruik van consistente tokens (typescale, spacing, grid) en vastgelegde regels kunnen front-end developers zonder interpretatie of giswerk starten met bouwen.
Het design system voor Digitale Staat is gebouwd als een reproduceerbaar fundament — niet als een einddoel, maar als een levend systeem dat meegroeit met de organisatie.
Door elke variabele afzonderlijk te isoleren, te testen en te onderbouwen is er een systeem ontstaan dat visuele consistentie afdwingt, schaalbaar is over meerdere pagina's en devices, en duidelijk overdraagbaar is naar development.
De theorie en ontwerpprincipes die dit digitale systeem verantwoorden, zijn ontleend aan de volgende autoriteiten binnen Human-Computer Interaction (HCI) en visuele perceptie.
Onderzoeken inzake visuele hiërarchie, F-pattern scanning en Jakob's Law (behoud van mentale domein-modellen over platformen heen).
De Gestaltwetten van Perceptie, met de nadruk op 'Law of Proximity' (nabijheid) voor het structureren van spacing-grids en typografische eenheden.
Succescriterium 1.4.12 (Text Spacing) inzake de berekening van minimale regelafstand en paragraph spacing voor visueel en cognitief belaste gebruikers.
Rigoureuze best-practices aangaande adaptieve 12-koloms responsive gridsystemen in schaalbare web-architecturen.
Next project
Hallo Buur