Collaboratieve Design Reviews: Feedback van Klanten Ophalen
Hoe je een design review-sessie inricht zodat stakeholders daadwerkelijk nuttige feedback geven en niet alleen maar “mooi” zeggen.
Figma van Begin tot Eind: Je Eerste Wireframe
Stap voor stap: componenten aanmaken, grids opzetten, en je eerste lage-getrouwheid wireframe in twee uur afmaken. Inclusief tips voor samenwerking.
Waarom beginnen met wireframing?
Je gaat niet meteen naar Figma om pixelperfecte designs te maken. Dat’s later. Eerst maak je een wireframe — een soort blauwdruk van je idee. Het’s eigenlijk gewoon rechthoeken, lijnen en wat tekst.
Wireframing helpt omdat je snel kunt testen of de opzet werkt. Je klant ziet meteen waar buttons komen, hoe veel ruimte content krijgt, en wat het navigatiepatroon is. Geen afleiding van mooie kleuren of lettertypes — alleen de structuur.
Voordeel: Wijzigingen in dit stadium kosten je 30 minuten, niet drie dagen herschetsen van je design.
Stap 1: Plan je wireframe op papier
Voor je Figma opent, pak je pen en papier. Schets gewoon in 10 minuten hoe je pagina eruit moet zien. Waar komt de header? Sidebar of niet? Hoeveel kolommen voor content?
Dit’s niet netjes, het hoeft niet perfect. Het gaat erom dat jij en je team op dezelfde pagina zitten. Regelmatig zie je dat klanten dan al zeggen: “Eigenlijk willen we dat daar niet.”
- Schets de main layout
- Bepaal waar navigatie komt
- Plan je content-secties
Stap 2: Grid en componenten in Figma
Nu je schets klaar is, open je Figma. Je maakt een artboard aan — meestal 1440 pixels breed voor desktop. Dan voeg je een grid in: 12 kolommen met 20 pixels spacing. Dit’ je vriendelijkste manier om alles netjes uit te lijnen.
Maak je eerste component: een knop. Geen styling, gewoon een grijze rechthoek met witte tekst. Dit wordt je herbruikbare bouwsteen. Je klant ziet: “Dit’s een knop,” en meer hoeft niet. Je spaart jezelf uren werk als je componenten correct instelt.
Pro tip: Gebruik 8px-grid voor spacing. Alles past dan netjes op elkaar — geen gekke tussenafstanden.
Stap 3: Bouw je wireframe op
Je begint boven: header met logo en navigatie. Gebruik rechthoeken voor menu-items. Dan de hero-sectie — één grote rechthoek met wat tekst eronder. Voeg je eerste content-sectie toe: drie kolommen met grijze blokken als placeholder voor afbeeldingen.
Hier’s het grappige: je bent nu al 45 minuten verder, en je hebt eigenlijk een werkend ontwerp. Niet mooi, maar werkend. Dit is precies wat je klant moet zien. Feedback op dit niveau is veel goedkoper dan feedback als je al twee weken aan visuele design werkt.
Hou het minimaal. Grijs, wit, zwart. Een duidelijk font zoals Helvetica of Arial. Klaar. Niet meer.
Samenwerking met je team
Share je design
Figma’s sharing is simpel. Je klikt op “Share” en geeft een link. Je klant kan direct feedback geven met comments. Geen e-mails met “ik vind dit beter,” gewoon live aanwijzingen.
Comments in realtime
Je klant ziet je wireframe en plaats een comment op een knop: “Dit’s te klein.” Jij past het aan — hij ziet het meteen. Geen versie-chaos, geen “welk bestand is de nieuwste?”
Goedkeuringen sneller
Omdat je wireframe eenvoudig is, kan je klant snel oordelen. “Ja, dit ziet er goed uit.” Geen lang wachten op feedback, geen eindloze iteraties.
Praktische tips voor je eerste wireframe
1
Zet consistent spacing in
8px, 16px, 24px, 32px. Dat’s je spacing-schaal. Alles valt eronder. Dit scheelt later enorm veel werk voor developers.
2
Geen kleur, geen typografie
Grijstinten. Één font. Wireframing gaat over structuur, niet over looks. Spaar de kleurkeuzes voor later.
3
Label alles duidelijk
“Hero banner met CTA” staat eronder. “Footer navigation” staat erboven. Je klant snapt meteen wat waar is.
4
Maak meerdere pagina’s
Homepage, productpagina, contactpagina. Toon alle states. Dit helpt je klant om de volledige flow te begrijpen.
Van wireframe naar design
Je wireframe is goedgekeurd. Nu gaat het interessant worden. Je neemt je wireframe, dupliqueer het artboard, en voegt kleuren toe. Je kiest je typografie. Je voegt iconen toe. Langzaam wordt je grijze bouwplan je werkelijke design.
Het mooie: je structuur staat al vast. Je hoeft niet meer over “waar komt deze knop” na te denken. Je weet het al. Je klant heeft het al goedgekeurd. Je kan je concentreren op het maken van iets moois.
Dit’s waarom wireframing niet saai is — het’s de basis van alles wat daarna komt. Een goed wireframe maakt je design beter. Een slecht wireframe — of helemaal geen wireframe — leidt tot herontwerp en tijdsverspilling.
Je eerste wireframe: klaar in twee uur
Je hebt nu het stappenplan. Papier, schets. Figma, grid, componenten. Bouw je wireframe op. Share het. Krijg feedback. Pas aan. Goedkeuring.
Dit hele proces — van schets tot goedgekeurd wireframe — duurt twee uur als je weet wat je doet. Niet meer. En je hebt dan al een solide basis voor je verdere design-werk.
Wireframing voelt misschien als een extra stap, maar het scheelt je weken herwerk later. Probeer het volgende keer. Je klant zal het waarderen, en je werk wordt beter.
Klaar om je volgende project te starten met wireframing?
Terug naar alle gidsenDisclaimer
Dit artikel is bedoeld als educatief materiaal voor designprofessionals. De aanbevelingen en technieken beschreven zijn gebaseerd op best practices in de design-industrie, maar kunnen variëren afhankelijk van je specifieke project, team en klantbehoeften. Dit is geen vervanging voor professioneel advies. Raadpleeg altijd je team en klanten bij het toepassen van deze methoden op je eigen werk.
Gerelateerde gidsen
