Reflectie op de overgang van ontwerpen op gevoel naar ontwerpen vanuit een design system.
Zet deze leesmodus aan om de beoordelingscriteria op de pagina te highlighten én mijn expliciete verantwoording per criterium in te zien.
Je vergelijkt verschillen tussen praktijk en opleiding en onderbouwt naar welke aanpak de voorkeur uitgaat in deze context.
Je analyseert systematisch de mogelijke impact van de ontwerpoplossing voor zowel de toepassingscontext als de samenleving en legt uit wat jij daarvan vindt.
Je construeert een aanzet voor een persoonlijke visie op het ontwerperschap (of scherpt deze aan) en formuleert hierbij passende leerambities met concrete leerdoelen.
Op mijn stage moest ik ineens werken aan een design system. Dat was even wennen, want op school ontwierp ik eigenlijk nooit zo systematisch.
Op school kozen we wel lettertypes, groottes en stijlverschillen zoals regular of bold. Maar met vaste grids, spacing-regels of herbruikbare componenten werkten we eigenlijk niet consistent genoeg. Ontwerpen zagen er op het eerste gezicht prima uit, maar als je goed keek, klopte er van alles niet.
Op mijn stage zag ik dat het in de praktijk gewoon anders werkt. Daar werd duidelijk dat de kwaliteit van een ontwerp niet alleen zit in hoe het eruitziet, maar vooral ook in de structuur erachter. In deze reflectie kijk ik naar dat verschil, wat de impact ervan is, en hoe het mijn kijk op het vak heeft veranderd.
Methode: Om het verschil tussen school en stage goed te laten zien, vergelijk ik drie concrete situaties. Per verschil beschrijf ik eerst hoe ik het op school deed, dan hoe het op mijn stage ging, en tot slot naar welke aanpak mijn voorkeur uitgaat en waarom.
Op school werkten we vaak samen aan schermen die er gewoon goed uit moesten zien. We kozen dingen voornamelijk op basis van gevoel: staat deze tekst goed? Klopt de afstand een beetje? Is deze heading groot genoeg? We maakten wel keuzes, maar niet als onderdeel van een echt systeem.
Op mijn stage werd daar heel anders mee omgegaan. Bij het opzetten van het design system werkten we met duidelijke regels voor typografie, spacing en opbouw. Keuzes moesten niet alleen mooi zijn, maar ook reproduceerbaar en overdraagbaar naar developers. Een maat of afstand moest niet alleen "goed voelen", maar ook uit te leggen en te herhalen zijn.
Dit heb ik ook meteen zelf toegepast. In plaats van direct schermen te gaan maken, heb ik eerst een typografische schaal (Perfect Fourth) en vaste spacing-regels (8-point system) vastgelegd. Headinggroottes en afstanden werden daardoor niet meer per scherm bepaald, maar vooraf gedefinieerd en herbruikbaar.
Het verschil komt eigenlijk vooral door de context. Op school werkte ik in nog lerende teams aan een afgebakend resultaat. In de praktijk moet een ontwerp ook op langere termijn bruikbaar zijn en door anderen toegepast kunnen worden, hier kun je niet zomaar even iets in elkaar flansen. Juist daarom wordt systematiek belangrijker. Dat past bij het principe van consistency and standards: consistente patronen zorgen voor voorspelbare en begrijpelijke interfaces.
Mijn voorkeur gaat hier duidelijk uit naar systematisch werken. Niet omdat gevoel onbelangrijk is, maar omdat gevoel alleen niet genoeg is als een ontwerp groter, consistenter en overdraagbaar moet worden.
Op school dacht ik vooral per scherm. Een pagina moest kloppen (Tekstgrootte, font, consistente knoppen), maar ik dacht niet goed genoeg na over hoe bijvoorbeeld grid, spacing en andere elementen van de website consistent op andere pagina's terug zouden komen. Daardoor kon elk scherm er op zich goed uitzien, maar op totaalniveau zaten er toch verschillen in ritme, uitlijning of hiërarchie.
Op mijn stage werd duidelijk hoe belangrijk het is om niet alleen losse schermen te maken, maar een systeem te bouwen waar die schermen uit voortkomen. Concreet betekende dat: eerst componenten en stijlen opbouwen in Figma (tekststijlen, buttons, secties), en dan pas schermen samenstellen. Nieuwe schermen bouw je dan op vanuit die bouwstenen, waardoor inconsistenties vanzelf minder worden.
Dit verschil heeft te maken met schaal en samenwerking. Op school bleef de impact van inconsistentie beperkt, omdat het meestal kleine of tijdelijke projecten waren met (meestal) onervaren ontwerpers. In de praktijk heeft inconsistentie sneller gevolgen: voor de kwaliteit van het product, de samenwerking met development en de snelheid waarmee je nieuwe schermen maakt.
Daarom gaat mijn voorkeur uit naar ontwerpen vanuit een samenhangend systeem. De consistentie die je daarmee bereikt, zorgt niet alleen voor een beter product, maar ook voor een snellere en rustigere samenwerking met development.
Op school was de kwaliteitsmaatstaf vrij simpel: ziet het er goed uit? Een ontwerp was (volgens de studenten) af als het visueel klopte. We hielden ons bezig met kleuren, lay-out en typografie, maar niet goed genoeg met de vraag of iemand anders ons ontwerp kon overnemen of uitbreiden.
Op mijn stage kwam daar een laag bij: het ontwerp moest ook overdraagbaar zijn naar development en bruikbaar blijven voor uitbreidingen. Dat betekende dat ik niet alleen schermen maakte, maar ook zorgde dat stijlen en componenten logisch waren opgebouwd in Figma, via text styles en componentvarianten. Zo kunnen anderen mijn ontwerpkeuzes makkelijker begrijpen en toepassen.
Daardoor ging ik anders naar kwaliteit kijken. Ik begon te zien dat een goed ontwerp niet alleen mooi of logisch hoeft te zijn, maar ook technisch en organisatorisch bruikbaar. Een vaste set stijlen, verhoudingen en componenten helpt daarbij veel meer dan losse keuzes per scherm.
Mijn voorkeur gaat uit naar een aanpak waarin visuele kwaliteit en overdraagbaarheid samenkomen. Een ontwerp dat er alleen goed uitziet maar niet schaalbaar of herbruikbaar is, is in de praktijk minder sterk dan een ontwerp dat op beide niveaus klopt.
Die overgang voelde in het begin wel echt als inleveren op creativiteit. Tijdens de eerdere studiejaren was ik best wel gewend geraakt aan ontwerpen als een soort zolderkamertjeskunst. Je trekt wat lijntjes in Figma, zoekt een lekker font uit en als het plaatje voor je neus klopt, is je taak klaar. Best makkelijk eigenlijk, als je er nu op terugkijkt.
In de dagelijkse praktijk kom je er snel achter dat die werkwijze waardeloos is voor een team. Het gaat er niet om of mijn individuele schermpje visueel perfect is; het moet schaalbaar en overdraagbaar zijn. Een button is niet zomaar een blauwe rechthoek, het is gedocumenteerde logica die straks ergens anders hergebruikt moet kunnen worden. Ik had de theorie daarover op school heus wel meegekregen, ik voelde de urgentie ervan alleen nog niet.
Als je nu mijn oude schoolwerk ziet (Nieuwsbegrip bijvoorbeeld) dan is dat pijnlijk om te zien. Ik zou nu echt nooit meer iets ontwerpen zonder op z'n minst een basale typografische schaal en een paar harde spacing regels vast te tikken. Al is het alleen al om mezelf later de koppijn te besparen als ik nog wat aan moet passen.
Methode: Voor deze impactanalyse gebruik ik de denkwijze van Value Sensitive Design (Friedman & Hendry, 2019). Dat kader dwingt je om impact op twee niveaus te analyseren: de directe toepassingscontext (het project en de stakeholders) en de bredere maatschappelijke laag (wie worden er indirect geraakt?). Hieronder doorloop ik beide niveaus.
Binnen het project zelf maakt een consistent design system direct verschil. Als typografie, spacing, grids en componenten goed zijn vastgelegd, wordt de interface rustiger, samenhangender en herkenbaarder.
Tijdens mijn stage merkte ik dat concreet. Nieuwe secties ontwerpen ging sneller, omdat de basiskeuzes al vastlagen. Waar ik eerder per scherm opnieuw moest nadenken over afstanden en hiërarchie, kon ik nu gewoon werken met bestaande stijlen en componenten. Dat scheelde correctierondes en zorgde voor meer consistentie tussen schermen.
In feedbackmomenten viel ook op dat ontwerpen rustiger en consistenter oogden. Gewoon omdat overal dezelfde regels werden toegepast.
Dat is te verklaren vanuit Gestalt-principes zoals herhaling en nabijheid. Die zorgen voor duidelijkere visuele patronen en betere informatieverwerking.
Voor het team heeft dit ook praktisch effect. Keuzes worden minder willekeurig, er is minder kans op fouten, en nieuwe schermen zijn sneller uit te werken. En in de samenwerking met development helpt het ook, omdat ontwerpbeslissingen duidelijker en consistenter zijn.
Als je breder kijkt, zeker bij grote platforms voor B2B en (semi-)overheid gaat een consistent ontwerp verder dan alleen gebruiksgemak. Het raakt aan digitale inclusie en toegankelijkheid. Tijdens het bouwen van dit systeem zag ik hoe theorie die maatschappelijke impact onderbouwt:
Doordat deze principes via het design system worden ingebouwd in herbruikbare Atomic Design componenten, is toegankelijkheid geen afterthought per scherm, maar iets dat standaard geborgd is in het systeem. Visuele ruis wordt weggenomen, en als ontwerper draag je zo bij aan een inclusievere digitale samenleving.
Ik moet hier eerlijk zijn: een strak design system heeft ook een keerzijde. Tijdens het bouwen merkte ik dat ik soms bewust creatieve keuzes achterwege liet, puur omdat ze niet in het systeem pasten. Een kop die nét iets groter moest zijn voor emotionele impact, een uitsnede die net afweek van het grid, dat soort dingen gingen verloren.
Dat spanningsveld is reëel. Een systeem dat te streng is, kan leiden tot wat je design by committee zou kunnen noemen: alles klopt, maar niks verrast meer. Zeker bij merken die zich juist willen onderscheiden door een eigenzinnige visuele identiteit, kan een rigide systeem averechts werken.
Daarnaast is er het risico van contextblindheid. Als je alles via tokens en componenten regelt, is het verleidelijk om te vergeten dat verschillende eindgebruikers in verschillende situaties zitten. Een formulier voor een re-integratietraject vraagt misschien om een warmere, persoonlijkere visuele toon dan een zakelijk B2B-dashboard, ook al komen ze uit hetzelfde systeem. De uitdaging zit erin om het systeem flexibel genoeg te houden voor dat soort contextuele gevoeligheid, zonder de consistentie op te geven.
Tot slot moeten we eerlijk zijn over wie er baat bij heeft. Een design system verlaagt drempels voor teams die met meerdere designers en developers werken. Maar voor een solo-ontwerper op een klein project kan de overhead van een volledig uitgewerkt systeem ook overkill zijn. De waarde hangt af van de schaal en de context.
Mijn standpunt is dus genuanceerder dan "systeem = goed". Ik geloof dat de echte vaardigheid zit in het schakelen: weten wanneer structuur nodig is en wanneer je juist los moet laten. Dat is iets wat ik niet op school had geleerd, en ook niet volledig op mijn stage, het is iets wat ik nu pas begin te begrijpen doordat ik beide kanten heb meegemaakt.
Mijn visie op ontwerperschap: Schön (1983) beschrijft hoe professionals hun visie ontwikkelen door een voortdurende wisselwerking tussen doen en nadenken, wat hij reflection-in-action noemt. Precies dat heb ik tijdens dit project ervaren. Waar ik de ontwerper eerst zag als iemand die losse, mooie schermen bedenkt, zie ik de ontwerper nu meer als een systeemdenker. Goed design is onzichtbaar gestructureerd. Een moderne ontwerper is niet alleen een vormgever, maar iemand die zorgt dat ontwerpen toegankelijk, onderbouwd en herbruikbaar overdraagbaar zijn.
Maar ik merk ook dat systeemdenken alleen niet genoeg is. CMD leert ons om te ontwerpen voor mensen, en mensen zijn geen systemen. Ze hebben emoties, beperkingen, culturele achtergronden en verwachtingen die niet in een token passen. Door mijn stage ben ik gaan inzien dat de CMD'er een soort vertaler is: iemand die de brug slaat tussen wat technisch mogelijk is en wat menselijk wenselijk is. Die vertaalrol brengt ook een verantwoordelijkheid met zich mee. Als ik een interface maak die duizenden mensen dagelijks gebruiken, dan bepaal ik mede hoe zij digitale diensten ervaren. Of dat nu een re-integratieportaal is of een bedrijfswebsite: de keuzes die ik maak in typografie, hiërarchie en interactie hebben direct invloed op of iemand zich welkom voelt, of juist buitengesloten.
Ethisch ontwerpen betekent voor mij niet dat je bij elk project een WCAG-checklist afvinkt. Het betekent dat je jezelf de vraag stelt: voor wie ontwerp ik dit eigenlijk, en wie sluit ik onbewust uit? Dat is de vraag die ik voortaan bij elk project als eerste wil stellen. Vanuit die bredere kijk heb ik drie concrete leerambities voor mijn toekomstige projecten:
Bij toekomstige projecten leg ik vóór de uitwerking van schermen een bewuste ontwerpbasis vast (typografie, spacing, grid en componentlogica), inclusief ruimte voor contextuele afwijkingen waar de doelgroep daar baat bij heeft.
SuccescriteriumBij minimaal twee projecten binnen deze stageis deze basis aantoonbaar vooraf opgesteld, en kan ik per project benoemen waar ik bewust van het systeem ben afgeweken en waarom.
Ik onderbouw ontwerpkeuzes niet alleen met theorie of systeemregels, maar ook vanuit het perspectief van de eindgebruiker. De vraag "voor wie maak ik dit?" wordt onderdeel van mijn ontwerpproces.
SuccescriteriumBij belangrijke ontwerpbeslissingen kan ik per keuze zowel een theoretische onderbouwing als een gebruikersargument benoemen.
Ik toets bij elk project actief of mijn ontwerp niemand onbedoeld uitsluit. Toegankelijkheid en inclusie zijn geen nagedachte, maar onderdeel van mijn ontwerpfundament.
SuccescriteriumBij minimaal één project binnen deze stage heb ik aantoonbaar een inclusiecheck uitgevoerd (contrast, leesbaarheid, cognitieve belasting) en de resultaten verwerkt in het eindontwerp.
De voornemens uit de vorige fase ben ik meteen gaan toepassen. Bij mijn werk voor het Flexis Herontwerp zie je dat ik niet meer zomaar op gevoel dingen in elkaar zet.
Concreet: ik begon het Flexis-project niet met schermen schetsen, maar met een data-extractie van de bestaande merkidentiteit. Typografie, kleuren en grids werden eerst objectief vastgelegd voordat ik überhaupt een pixel verschoof. Dat is leerambitie 1 in de praktijk.
Bij de selectie van het uiteindelijke concept (de Hover-Expansie) heb ik elke variant niet alleen langs theorie gelegd (Hick's Law, Fitts's Law), maar ook steeds de vraag gesteld: wat werkt voor de eindgebruiker? De twee doelgroepen — werkzoekenden in re-integratie en zakelijke recruitmentpartners — hebben fundamenteel andere behoeften. Die moesten allebei bediend worden zonder dat de een de ander in de weg zat. Dat is leerambitie 2.
En bij de oplevering heb ik bewust gekeken naar toegankelijkheid: kleurcontrast tussen de teal (re-integratie) en oranje (recruitment) kolommen, leesbare typografie op beide helften, en een interactie die ook zonder hover begrijpelijk is. Niet perfect, maar wel een eerste stap richting leerambitie 3.
De structuur van deze reflectie en de gemaakte afwegingen leunen op de volgende methodieken en theorieën:
De gehele opbouw van
dit document (Fase 1 t/m 5) volgt de reflectiecyclus van Korthagen. Dit helpt om systematisch terug te
blikken, bewustwording te creëren, en concrete leerambities te destilleren uit de stage-ervaring.
Lees over het Korthagen
Reflectiemodel ↑
De conceptuele theorie
achter het gestructureerd opbouwen van een UI. Het ontwerpen in 'atomen', 'moleculen' en 'organismes' ligt
ten grondslag aan de gemaakte afweging tussen losse schermen versus een samenhangend ecosysteem (verschil
2).
Raadpleeg het gratis e-book
Atomic Design ↑
Theoretische
onderbouwing van de maatschappelijke impact van consistente systemen. Het standaardiseren van patronen
(Jakob's Law) minimaliseert de cognitieve belasting (Cognitive Load), wat cruciaal is voor digitale
inclusiviteit en voorspelbaarheid.
Lees het NN/g
artikel over Cognitive Load ↑
De perceptiewet:
objecten dicht bij elkaar worden door het menselijk brein geregistreerd als één groep. Deze theorie
verantwoordt de noodzaak voor voorspelbare marges (zoals een 8-point systeem) en heldere hiërarchie,
besproken in sectie 5.2.
Lees over the Law of Proximity
↑
De wereldwijde
toegankelijkheidseisen die de maatschappelijke impact van het project borgen. Regels omtrent
kleurcontrast, interactiestaten en schaling die als bindende elementen aan het begin van een goed design
system moeten worden ingebakken.
Raadpleeg de standaard voor
toegankelijkheid ↑
Het theoretisch kader
voor de systematische impactanalyse in sectie 5.2. Value Sensitive Design biedt een gestructureerde
methode om impact te analyseren op twee niveaus: de directe toepassingscontext (stakeholders, project) en
de bredere maatschappelijke laag (indirecte gebruikers, samenleving).
Lees over Value Sensitive
Design (MIT Press) ↑
De theoretische
grondslag voor de visievorming in sectie 5.3. Schöns concept van reflection-in-action beschrijft
hoe professionals hun visie ontwikkelen door een voortdurende wisselwerking tussen doen en nadenken,
precies het proces dat ik in dit project heb doorgemaakt.
Lees over The Reflective
Practitioner ↑