Voer het wachtwoord in om toegang te krijgen tot deze portfolio case.
Onjuist wachtwoord. Probeer opnieuw.
Dit project maakt onderdeel uit van een afgeschermde assessment. Voer de toegangscode in om te bekijken.
Onjuiste code ingevoerd. Probeer opnieuw.
← Terug naar HomeReflectie op de overgang van ontwerpen op gevoel naar ontwerpen vanuit een design system.
Tijdens mijn stage heb ik gewerkt aan het ontwerpen van een mobiele homepage en aan het verder structureren van een nieuw design system. In dit proces werd voor mij duidelijk dat er een groot verschil bestaat tussen ontwerpen op gevoel en ontwerpen vanuit een systematische basis.
In eerdere schoolprojecten werkte ik in groepsverband vaak vooral vanuit losse ontwerpkeuzes. We kozen wel lettertypes, groottes en stijlverschillen zoals regular of bold, maar we werkten meestal nog niet echt met vaste grids, duidelijke spacing-regels of een uitgewerkt systeem van herbruikbare componenten. Daardoor konden ontwerpen er op het eerste gezicht goed uitzien, maar ontstond er ook regelmatig inconsistentie.
Tijdens mijn stage merkte ik dat dit in de praktijk anders ligt. Daar werd veel duidelijker zichtbaar dat ontwerpkwaliteit niet alleen zit in het scherm zelf, maar ook in de structuur erachter. In deze reflectie analyseer ik dat verschil, onderzoek ik wat de impact daarvan is en leg ik uit hoe dit mijn visie op ontwerperschap heeft aangescherpt.
Methode: Om het verschil tussen beide contexten te analyseren, werk ik met een situationele vergelijking. Per verschil beschrijf ik eerst hoe ik in eerdere schoolprojecten werkte, daarna hoe dit tijdens mijn stage naar voren kwam, en vervolgens naar welke aanpak mijn voorkeur uitgaat en waarom.
In eerdere schoolprojecten werkte ik vaak samen met andere studenten aan schermen of prototypes die vooral visueel moesten kloppen. We maakten dan keuzes op basis van wat goed voelde: staat deze tekst goed, klopt de afstand ongeveer, is deze heading groot genoeg? Daarbij gebruikten we wel typografische keuzes, maar meestal nog niet als onderdeel van een echt systeem.
Tijdens mijn stage merkte ik dat daar anders naar werd gekeken. Bij het opzetten van dit nieuwe design system werd veel explicieter gewerkt met regels voor typografie, spacing en opbouw. Keuzes moesten niet alleen visueel goed zijn, maar ook reproduceerbaar en overdraagbaar naar developers. Dat betekende dat een maat, verhouding of afstand niet alleen "goed moest voelen", maar ook uitlegbaar en herhaalbaar moest zijn.
Dit heb ik ook direct toegepast in mijn eigen werkwijze. In plaats van direct schermen te ontwerpen, heb ik eerst een typografische schaal (Perfect Fourth) en vaste spacing-regels (8-point system) vastgelegd. Hierdoor werden keuzes zoals headinggroottes en afstanden niet meer per scherm bepaald, maar vooraf gedefinieerd en herbruikbaar gemaakt.
Het verschil wordt hier vooral verklaard door de context. In schoolprojecten werk je vaak in tijdelijke studententeams aan een afgebakend resultaat. In de praktijk moet een ontwerp ook op langere termijn bruikbaar blijven en door anderen toegepast kunnen worden. Juist daardoor wordt systematiek belangrijker. Dit sluit aan bij het principe van consistency and standards, waarbij consistente patronen zorgen voor voorspelbare en begrijpelijke interfaces.
Mijn voorkeur gaat in deze context duidelijk uit naar systematisch werken. Niet omdat gevoel onbelangrijk is, maar omdat gevoel alleen niet genoeg is zodra een ontwerp groter, consistenter en overdraagbaar moet worden.
In eerdere projecten dacht ik vooral per scherm of per onderdeel. Een pagina moest kloppen, maar ik dacht minder goed na over hoe dezelfde keuzes op andere pagina's of componenten terug zouden komen. Daardoor konden ontwerpen per scherm goed ogen, terwijl er op totaalniveau toch verschillen ontstonden in ritme, uitlijning of hiërarchie.
Tijdens mijn stage werd juist duidelijk hoe belangrijk het is om niet alleen losse schermen te ontwerpen, maar een systeem te bouwen waaruit die schermen logisch voortkomen. In mijn eigen werkwijze betekende dit dat ik eerst componenten en stijlen opbouwde in Figma, zoals tekststijlen, buttons en secties, en pas daarna schermen samenstelde. Nieuwe schermen werden opgebouwd vanuit deze bouwstenen, waardoor inconsistenties automatisch werden beperkt.
Dit verschil hangt samen met schaal en samenwerking. Binnen school bleef de impact van inconsistentie vaak beperkt, omdat het meestal om kleinere of tijdelijke projecten ging. In de praktijk heeft inconsistentie sneller gevolgen voor de kwaliteit van het product, de samenwerking met development en de snelheid waarmee nieuwe schermen worden gemaakt.
Mijn voorkeur gaat daarom uit naar ontwerpen vanuit een samenhangend systeem. Dat levert niet alleen een consistenter resultaat op, maar maakt ontwerpkeuzes ook sterker en beter verdedigbaar.
Binnen eerdere schoolprojecten lag mijn focus vooral op het visuele eindresultaat. Als het prototype overtuigend genoeg was en de schermen er goed uitzagen, was dat vaak het belangrijkste.
Tijdens mijn stage kwam daar een extra laag bij: het ontwerp moest ook overdraagbaar zijn naar development en bruikbaar blijven voor toekomstige uitbreidingen. In mijn eigen werkwijze betekende dit dat ik niet alleen schermen ontwierp, maar ook zorgde dat stijlen en componenten logisch waren opgebouwd in Figma, bijvoorbeeld via text styles en componentvarianten. Hierdoor konden ontwerpkeuzes eenvoudiger worden geïnterpreteerd en toegepast door anderen.
Daardoor keek ik anders naar kwaliteit. Ik begon te zien dat een goed ontwerp niet alleen mooi of logisch moet zijn, maar ook technisch en organisatorisch bruikbaar moet zijn. Een consistente set van stijlen, verhoudingen en componenten helpt daarbij veel meer dan losse keuzes per scherm.
In deze context gaat mijn voorkeur uit naar een aanpak waarin visuele kwaliteit en overdraagbaarheid samenkomen. Een ontwerp dat alleen visueel sterk is maar niet schaalbaar of herbruikbaar, is in de praktijk minder sterk dan een ontwerp dat op beide niveaus klopt.
De belangrijkste les voor mij is dat ontwerpkwaliteit niet alleen zichtbaar wordt in het eindbeeld, maar ook in de consistentie en logica van het systeem daarachter.
Dit sluit aan bij principes zoals cognitive load en consistency, waarbij consistente patronen ervoor zorgen dat interfaces sneller begrepen worden en minder mentale inspanning vragen.
Mijn voorkeur gaat daarom uit naar een gestructureerde aanpak waarin gevoel nog steeds een rol speelt, maar waarin ontwerpkeuzes uiteindelijk worden vastgelegd in duidelijke regels en patronen.
Methode: Voor deze impactanalyse kijk ik naar twee niveaus: de toepassingscontext en de bredere maatschappelijke context.
Binnen de toepassingscontext heeft een consistent design system direct invloed op de kwaliteit van het ontwerp. Wanneer typografie, spacing, grids en componenten systematisch zijn vastgelegd, ontstaat er meer rust, samenhang en herkenbaarheid in de interface.
Tijdens mijn stage merkte ik concreet dat het ontwerpen van nieuwe secties sneller ging, omdat basiskeuzes al vastlagen. Waar ik eerder per scherm opnieuw moest nadenken over afstanden en hiërarchie, kon ik nu direct werken met bestaande stijlen en componenten. Dit verminderde correctierondes en zorgde voor meer consistentie tussen schermen.
Daarnaast werd tijdens feedbackmomenten duidelijk dat ontwerpen rustiger en consistenter oogden, juist doordat dezelfde regels overal werden toegepast.
Deze effecten zijn te verklaren vanuit Gestalt-principes zoals herhaling en nabijheid, die zorgen voor een duidelijker visueel patroon en betere informatieverwerking.
Voor het team heeft dit ook praktische impact. Het maakt keuzes minder willekeurig, verkleint de kans op fouten en versnelt het uitwerken van nieuwe schermen. Daarnaast helpt het in de samenwerking met development, omdat ontwerpbeslissingen explicieter en consistenter zijn.
Voor de bredere samenleving — zeker in de context van dergelijke grote platforms voor B2B en (semi-)overheid — betekent een consistent ontwerp meer dan alleen gebruiksgemak; het raakt direct aan digitale inclusie en toegankelijkheid. Tijdens de ontwikkeling van dit systeem werd zichtbaar hoe theorie deze maatschappelijke impact onderbouwt:
Doordat deze principes via het design system structureel worden ingebakken in herbruikbare Atomic Design componenten, wordt toegankelijkheid een garantie geborgd in het systeem, in plaats van een afterthought per scherm. Visuele ruis wordt weggenomen, waardoor we als ontwerpers een inclusievere digitale samenleving faciliteren.
Mijn visie op ontwerperschap: Dit project heeft de manier waarop ik naar mijn vak kijk fundamenteel veranderd. Waar ik de ontwerper voorheen zag als degene die losse, visueel aantrekkelijke schermen bedenkt, zie ik de ontwerper nu in de eerste plaats als een systeemdenker. Goed design is onzichtbaar gestructureerd. Een moderne ontwerper is niet alleen een vormgever van pixels, maar een architect van logica die ervoor zorgt dat ontwerpen toegankelijk, theorie-gedreven en herbruikbaar overdraagbaar zijn. Vanuit deze aangescherpte visie heb ik drie concrete leerambities geformuleerd voor mijn toekomstige projecten:
Bij toekomstige projecten leg ik vóór de uitwerking van schermen de basis van het design system vast (typografie, spacing, grid en componentlogica).
SuccescriteriumBij minimaal twee projecten is deze basis aantoonbaar vooraf opgesteld en gebruikt in het ontwerp.
Ik onderbouw ontwerpkeuzes expliciet met ontwerpprincipes of systeemregels in plaats van alleen intuïtie.
SuccescriteriumBij belangrijke ontwerpbeslissingen kan ik per keuze minimaal één onderliggende regel of theorie benoemen.
Ik lever ontwerpen op die direct bruikbaar zijn voor anderen via gestructureerde Figma-bestanden met componenten en styles.
SuccescriteriumMinimaal één project bevat een herbruikbaar design system dat begrijpelijk is voor een externe partij.
Deze reflectie laat zien dat mijn ontwikkeling als ontwerper niet alleen zit in beter leren vormgeven, maar vooral in anders leren kijken naar kwaliteit.
In eerdere schoolprojecten werkte ik vaker vanuit losse keuzes en visueel gevoel. Tijdens mijn stage werd duidelijk dat een professioneel ontwerp sterker wordt wanneer het steunt op een consistent systeem.
Next datapunt
Making of: Design System