|
4 min leestijd - 9 jul 2025
Een mockup (of mock-up) is een realistisch model van een product, gemaakt op schaal of op ware grootte. Mockups worden gebruikt om te demonstreren hoe een product eruitziet en hoe het zal werken of om een product te evalueren, zodat risico’s bij het bouwen van het uiteindelijke product worden geminimaliseerd. Als ontwerper, en zeker als UX/UI designer, hoor je het woord mockup regelmatig voorbij komen, en wordt je ook weleens gevraagd om een mockup te maken.
Belangrijkste conclusies
🔎 Wat is een mockup? Een realistisch model van een product, gemaakt op ware grootte of als schaalmodel. Mockups worden gebruikt om te demonstreren hoe een product eruitziet en hoe het zal werken of om een product te evalueren. Wat is mockup in het Nederlands?Het woord mockup komt uit het Engels.
Je kun het in het Nederlands vertalen met:
Wat is een mockup in UX/UI design?UX en UI designers ontwerpen digitale user interfaces. Deze zijn heel vaak onderdeel van een product, of worden getoond op een toestel (een laptop, mobiele telefoon, ticketautomaat, etc.). Een mockup wordt gemaakt door middel van ontwerpsoftware en ligt daardoor qua vorm al heel dicht bij het uiteindelijke ontwerp. Je kunt een mockup in die context ook een voorontwerp noemen. Het maken en bespreken van een mockup tijdens een design review meeting helpt ontwerpteams om het eens te worden over ontwerpbeslissingen.
Wat is het verschil tussen een mockup en een wireframe?Een wireframe focust op de lay-out, de benodigde componenten of content, de navigatie. Een wireframe is eerder het 'skelet' van een ontwerp. Het maken van een wireframe is volgens UX Coach ook voor het maken van je mockup of prototype een essentiële stap. Het doel van een mockup is om de werking of het visuele design van een product te evalueren. Bovenop het 'skelet' is daarom nog een UI design nodig, het toepassen van de look-and-feel, of het visuele design.
Wat is het verschil tussen een mockup en een prototype?Het verschil tussen een mockup en een prototype is klein. In UX/UI design kan een mockup hetzelfde zijn als een prototype. Miro zegt dat een mockup statisch is en een prototype interacties tussen het ontwerp en de gebruiker toelaat. Maar zowel een prototype als een mockup bestaan vaak uit meerdere schermen, die je best presenteert door eenvoudige interacties die tonen wat de flow van scherm naar scherm zou kunnen zijn. Het toevoegen van interacties is een groot voordeel bij het demonstreren van de werking van het product of de digitale user interface.
Hoe kun je een mockup maken?Bij een mockup kun je soms starten van een bestaand design. Door elementen hieruit te herschikken (knippen en plakken) of te herontwerpen, kom je al gauw tot een mockup. Je kunt ook from scratch een mockup maken. Door bijvoorbeeld door een componentenbibliotheek te gebruiken, waarin knoppen, links, titels, paragrafen, afbeeldingen, dropdowns, checkboxes, etc. al zijn uitgewerkt in een bepaalde stijl.
Je neemt best niet teveel tijd om je mockup te maken. Het doel van een mockup is namelijk om je ontwerp te demonstreren of te evalueren. Het is soms juist goed dat je mockup nog niet volledig ‘af’ is. Dit laat ruimte voor de betrokkenen (stakeholders) om feedback te geven of ideeën voor uitbreiding te formuleren. Door in een vroeg stadium van je ontwerpproces je mockup naar buiten te brengen en feedback te verzamelen, maak je snelheid, en kom je eerder tot een sterk design, dat klaar is om gebouwd te worden. FAQsWat is een mockup?Een realistisch model van een product, gemaakt op ware grootte of als schaalmodel. Mockups worden gebruikt om te demonstreren hoe een product eruitziet en hoe het zal werken of om een product te evalueren. Waarom maak je best een mockup?Een mockup is een voorontwerp, dat je toelaat om met anderen, zoals collega's of de uiteindelijke gebruikers te bespreken hoe het product eruit zal zien of zal functioneren. Zodat je het kunt aanpassen naar aanleiding van de feedback die je krijgt. Hoe kun je een mockup maken?Als je een mockup van een interface (UI) wilt maken, gebruik dan design software, zoals Figma, Adobe XD of Canva. Als je snelheid wilt maken, gebruik dan een componentenbibliotheek, waaruit je standaard knoppen, teksten, dropdowns etc. kunt kiezen om op je schermen te plaatsen. Waar komt het woord mockup vandaan?Het engelse woord "mockup" werd mogelijk al in de twintigste eeuw gebruikt tijdens de Eerste wereldoorlog, in de militaire scheepsbouw. Het betekent ook wel "simulatie" of "model". Wat is het verschil tussen een mockup en een wireframe?Een wireframe is eerder het 'skelet' van een ontwerp. Daar is nog geen aandacht besteed aan de styling van het ontwerp (denk aan de kleuren, de fonts, de afbeeldingen). In een mockup komt alles bij elkaar, dus bovenop het skelet wordt juist wel de styling toegevoegd. UI designer of UX designer worden?Al eens gedacht om je te specialiseren en zelf UI designer of UX designer te worden? UX Coach kan je helpen met een korte of lange design opleiding, of individuele coaching. Vraag eens vrijblijvend naar de mogelijkheden om te groeien als professioneel UX UI designer door contact op te nemen met UX Coach.
|
UX design opleiding volgen?We organiseren een (online) training zodat jij en/of je collega's bijleren over een UX design tool of methode en ermee aan de slag kunnen in het dagelijks werk.
|
Lees meer over User Experience (UX) design
UX design
|
|
