Voordat een website of product wordt gebouwd, wil je zien hoe het eruit komt te zien. Een mockup is die realistische voorvertoning: het ontwerp, nog voordat het echt werkt.
In dit artikel lees je wat een mockup is, hoe het verschilt van een wireframe, en waarvoor je het gebruikt.
Een mockup is een statische, realistische visuele weergave van hoe een ontwerp eruit komt te zien, bijvoorbeeld van een website, app of verpakking, inclusief kleuren, beelden en stijl, maar nog zonder werkende functies. Het helpt je het eindresultaat te beoordelen en feedback te geven voordat er gebouwd wordt. Een mockup zit tussen een schets (wireframe) en het werkende eindproduct in.
- Wat is het verschil met een wireframe?
- Waarvoor gebruik je een mockup?
- Wanneer maak je er een?
Mockup, wireframe en prototype
In design zijn er drie niveaus. Een wireframe is een kale schets: blokken en plaatsing, zonder kleur of stijl, om de structuur te bepalen. Een mockup voegt het visuele toe: kleuren, lettertypen, beelden en de echte uitstraling, maar nog statisch. Een prototype is een mockup die je kunt aanklikken, zodat je de interactie test. Samen brengen ze een ontwerp stap voor stap dichter bij het echte product.
Een mockup is dus het moment waarop je voor het eerst echt ziet hoe iets eruit gaat zien, zonder dat er al iets gebouwd is.
Waarvoor je een mockup gebruikt
Een mockup is handig om het ontwerp te beoordelen en af te stemmen vóór de bouw, wanneer aanpassen nog makkelijker is. Je deelt hem met de klant of het team om feedback te verzamelen: klopt de uitstraling, past het bij het merk, staat alles op de juiste plek? Mockups worden veel gebruikt bij websites, apps, huisstijlen en verpakkingen. Bij een website laten maken hoort vaak een mockup-fase. Bekijk het volledige proces in website bouwen voor MKB.