Project
UI Foundry
UX/UI Designer & Front-end Developer
Een online werkplaats voor UI: pas kleur, spacing of stijl aan en zie meteen hoe elke knop, elk formulier en elke kaart meeverandert. Ideaal om te testen vóór je iets in een echt project zet.
Projectlogo UI Foundry
Over dit project
UI Foundry is een werkende webapp waarmee je componenten, design tokens, patterns en toegankelijkheid op één plek kunt beheren. Ik bouwde het als een product dat laat zien hoe ik nadenk over interface-structuur, herbruikbaarheid en documentatie.
Het doel was niet een statische showcase, maar een tool waarin alles echt werkt: live theme editing, een playground met gegenereerde code, en health checks op basis van echte componentdata.
Wat ik bouwde
- 21 UI-onderdelen en 8 patroonvoorbeelden in één bibliotheek
- Live stijleditor: één wijziging, direct zichtbaar overal
- Playground en page builder om code te kopiëren en pagina's te testen
01 / Het project
Ik bouwde UI Foundry als design-system platform met een dashboard, component library, playground, token editor, pattern library, accessibility lab en page builder. Alle onderdelen delen dezelfde componentdefinities, zodat wijzigingen direct door de hele app lopen.
02 / Aanpak
- 01
Structuur bepalen
Eerst de navigatie, pagina-indeling en welke onderdelen een design system nodig heeft vastgelegd.
- 02
Componentdata centraal zetten
Alle componentinfo in één databron gezet, zodat overview, detail, playground en health score dezelfde bron gebruiken.
- 03
Bouwen & koppelen
Pagina voor pagina gebouwd en direct gekoppeld aan tokens, localStorage en live previews.
- 04
Testen & aanscherpen
Flows getest op desktop en mobiel, en interacties aangepast waar iets onduidelijk of te zwaar voelde.
03 / Ontwerp
Probleem
Component libraries laten vaak zien hóe iets eruitziet, maar niet waarom een component bestaat of wanneer je het wel/niet gebruikt.
Keuze
Ik voegde bij elk component uitleg toe met when to use, when not to use en het UX-probleem dat het oplost.
Keuze
Ik koos voor een rustige developer-tool stijl met veel witruimte en een vaste sidebar, zodat je snel kunt scannen zonder visuele ruis.
04 / Development
Ik bouwde de app in Next.js met TypeScript en Tailwind CSS. Componentdefinities sturen de playground, code-export en accessibility checks. Theme-wijzigingen gaan via design tokens en worden opgeslagen in localStorage.
De page builder en playground genereren echte React-code op basis van gekozen properties. Copy-to-clipboard en responsive previews zijn onderdeel van de workflow, niet alleen decoratie.
Stack
Client-side interactie, state en UI. Waar nodig gekoppeld aan backend, CMS of opslag.
05 / Resultaat
UI Foundry is een volledig werkende V1 met 21 componenten, 8 patterns, live theme editing en een design system health score. Het laat zien dat ik een complex idee kan structureren en omzetten naar een consistent, bruikbaar product.
06 / Geleerd
Losse pagina's leiden snel tot dubbele data. Eén componentdefinitie maakt het product consistenter en makkelijker uit te breiden.
Documentatie hoort niet achteraf. UX-uitleg naast de preview maakt duidelijk dat design systems meer zijn dan visuele varianten.