UI (User Interface) omvat alle visuele en interactieve elementen waarmee een gebruiker een product bedient: knoppen, menu's, formulieren, iconen, typografie en kleur. UI-design richt zich op esthetiek, duidelijkheid en consistentie, zodat de interface gebruiksvriendelijk en aantrekkelijk is. Een goede UI sluit aan op de verwachtingen van de gebruiker en werkt samen met UX om een prettige totaalervaring te bieden. Een design system helpt om de UI consistent te houden.
MVC
A
Backend
Model-View-Controller
MVC is een ontwerppatroon dat applicatielogica splitst in Model, View en Controller. Het model bevat data en toepassingslogica, de view presenteert de UI en de controller handelt input af en coördineert. Deze scheiding verbetert onderhoudbaarheid en testbaarheid.
A
Backend
MVC View
AA
Backend
MVC View
De view presenteert data aan de gebruiker via templates of componenten. Hij bevat geen toepassingslogica, alleen presentatie- en formatteerlogica, en gebruikt input van het model. Voorbeelden zijn server-side templates of frontend componenten.
AA
Backend
Figma
A
Providers
Figma
Figma is de meestgebruikte cloudgebaseerde design- en prototypetool voor UI/UX-ontwerp. Het ondersteunt real-time samenwerking, vectorbewerking, prototyping, component libraries en een Dev Mode voor handoff naar developers. Alternatieven zijn Sketch en Adobe XD.
A
Providers
Design System
AA
Frontend
Design System
Een design system is een collectie van herbruikbare UI-componenten, stijlgidsen en tokens zoals kleur, typografie en spacing. Het zorgt ervoor dat alles er hetzelfde uitziet en makkelijk uitgebreid kan worden en wordt ondersteund met documentatie. Voorbeelden zijn Material Design en Lightning Design System.
AA
Frontend
Atomic Design
AAA
Frontend
Atomic Design
Atomic Design splitst de UI op in atoms, molecules, organisms, templates en pagina's. Deze hiërarchie bevordert hergebruik, consistentie en modulair denken bij component-gedreven development.
AAA
Frontend
React
AA
Frontend
React JavaScript Library
React is een component-gebaseerde JavaScript-library voor interactieve UIs. Het gebruikt een virtuele DOM voor efficiënte updates, JSX (JS + XML) en hooks voor state en lifecycle. Het ecosysteem is uitgebreid (React Router, Redux, Next.js) en React is dominant voor SPAs.
AA
Frontend
Een uitgebreide collectie begrippen voor elk niveau
Van HTML & CSS tot databases en security
Geschikt voor beginners en gevorderden
Ideaal als lesmateriaal of teambuilding tool
Fysiek aan de slag, zonder scherm