Hoe ik mijn design-systeem vanaf nul heb opgebouwd
Een praktische gids voor het maken van je eigen ontwerpsysteem, van de eerste audit tot implementatie, en de lessen die onderweg worden geleerd.
Jay Ho Oh
Na jarenlang elk project te zijn begonnen met een leeg Figma-bestand, heb ik eindelijk de sprong gewaagd en mijn eigen uitgebreide design system gecreëerd. Het proces was zowel uitdagend als ongelooflijk belonend, en ik wilde mijn aanpak delen met andere designers die dezelfde reis overwegen.
Ik begon met een audit van vijf van mijn recente projecten, waarbij ik veelvoorkomende patronen en componenten identificeerde die in verschillende ontwerpen terugkwamen. Dit onthulde inconsistenties in mijn werk die ik voorheen niet had opgemerkt—zeven licht verschillende knopstijlen, inconsistente spatiëringsregels en tekststijlen die zonder duidelijk doel varieerden.
In plaats van vooraf een rigide systeem te creëren, heb ik het iteratief opgebouwd via een echt klantproject. Voor de EcoTrack-app heb ik elke component gedocumenteerd terwijl ik deze ontwierp, waardoor een levend systeem ontstond dat meegroeide met de behoeften van het project.
De kern van mijn systeem bevat:
- Een flexibel kleursysteem met semantische naamgevingsconventies
- Typografie-schalen gebaseerd op de gulden snede
- Componentvarianten met duidelijke gebruiksvoorschriften
- Spatiërings- en lay-outregels die consistentie op alle apparaten waarborgen
De grootste uitdaging was niet technisch maar psychologisch—leren om het systeem te vertrouwen in plaats van voor elk nieuw probleem opnieuw oplossingen uit te vinden. Maar de beloning is enorm geweest: mijn ontwerpproces is nu 40% sneller, revisies door klanten zijn aanzienlijk afgenomen en de overdracht naar ontwikkeling verloopt veel soepeler.
Als je overweegt om je eigen systeem te bouwen, is mijn advies om klein te beginnen met kernelementen, ze te testen in echte projecten en gaandeweg te documenteren. Een goed design system moet voelen als een betrouwbare partner, niet als een reeks beperkingen.
Ik heb hieronder een template toegevoegd van mijn methode voor componentdocumentatie—voel je vrij om deze aan te passen aan je eigen workflow!
Van mockup naar markt: mijn end-to-end productontwerpproces
Een gedetailleerde uitsplitsing van mijn iteratieve ontwerpmethodologie, van het eerste onderzoek tot de eindaflevering, met praktische tips voor ontwerpers in elk stadium.
De psychologie van kleur in UI-design
Onderzoek naar hoe strategische kleurkeuzes het gebruikersgedrag kunnen beïnvloeden, emoties kunnen oproepen en de algehele gebruikerservaring van digitale producten kunnen verbeteren.