Een mockup is een goede manier om toekomstige gebruikers of investeerders een idee te geven van hoe een app of een ander product eruit zal zien. Wat is een mockup nou precies? En hoe laat je er een maken voor jouw product?
Wat is een digitale mockup?
Een mockup is een niet-functioneel ontwerp van een product. Dit kan zowel een fysiek product zijn als een digitaal product. Denk aan een visuele impressie van een website of een app.
Wanneer je een mockup maakt van een mobiele app of een website, hebben we het dus over een digitale afbeelding. Bij fysieke producten kan een mockup zowel digitaal als fysiek zijn. Dit ontwerp laat zien hoe jouw product eruitziet aan de ‘buitenkant’.
Belangrijk om te onthouden is dat het ontwerp slechts voor visuele doeleinden wordt gebruikt. Het is dus geen prototype. Het belangrijkste verschil is dat een prototype al iets van functionaliteit heeft – al is dat alleen maar het kunnen drukken op een knop. Technisch gezien zit een mockup tussen een wireframe en een prototype in.
Waarom zou je een mockup maken?
Een mockup is bijvoorbeeld handig om een beeld te krijgen van hoe jouw applicatie eruitziet. Als de app nog in een vroeg stadium zit brengt een mockup deze tot leven. Zo kunnen we dus ook effectiever het uiterlijk van de app testen voordat deze live gaat.
Het belangrijkste verschil is dat een prototype al iets van functionaliteit heeft – al is dat alleen maar het kunnen drukken op een knop.
Daarnaast is een mockup ook belangrijk wanneer je al vroeg gebruikers of investeerders probeert aan te trekken. Door ze een visueel beeld te geven van hoe de app eruit komt te zien, breng je meer overtuiging in je verhaal. Dit kan bijvoorbeeld ook dienen als een proof of concept (POC), doordat je om feedback kunt vragen.
Is jouw app of een ander product al gelanceerd? Dan gebruik je het design voor advertentiedoeleinden. Je kunt het bijvoorbeeld plaatsen op jouw website of delen op social media om nieuwe gebruikers aan te trekken.
Verschil tussen mockup, wireframe en prototype
De termen mockup, wireframe en prototype worden vaak door elkaar gebruikt, maar ze hebben elk een eigen betekenis en doel:
- Wireframe: zwart-witte schets van schermen die alleen de structuur en de plaats van elementen toont. Geen kleuren, geen echte content. Zie wat is een wireframe.
- Mockup: een statisch ontwerp met kleuren, typografie, foto’s en echte content. Lijkt al op het eindproduct, maar is niet klikbaar.
- Prototype: een klikbare versie waarin je door schermen heen kunt navigeren. Vaak vertrekt een prototype vanuit een mockup. Zie wat is een prototype.
In een typisch project van Appec lopen deze drie fasen door elkaar: we beginnen met wireframes, breiden uit naar mockups, en zetten die om in klikbare prototypes voor klantfeedback. Pas dan begint de bouw.
Welke tools gebruiken designers voor mockups?
De meest gebruikte tools voor het maken van mockups:
- Figma: marktstandaard, werkt in de browser. Klanten kunnen meekijken en commentaar achterlaten. Wij gebruiken dit bij Appec.
- Sketch: oudere standaard op macOS, wordt minder gebruikt sinds Figma de markt heeft overgenomen.
- Adobe Photoshop / Illustrator: werd vroeger veel gebruikt voor pixel-perfecte mockups, nu vooral nog voor grafisch werk.
- Affinity Designer: alternatief voor Adobe, populair bij freelance designers.
- Penpot: open-source alternatief voor Figma, in opkomst bij teams die geen cloud-tooling willen.
Wanneer maak je een mockup in een project?
Een mockup wordt meestal gemaakt nadat de wireframes zijn goedgekeurd, maar voordat de bouw begint. In een typisch app-project van 16-20 weken zit de mockup-fase rond week 3-5:
- Week 1-2: discovery en wireframes. Wat moet de app doen, voor wie, en hoe ziet de structuur eruit.
- Week 3-5: mockups en visuele richting. Hoe ziet elk scherm eruit, welke kleuren, welke typografie.
- Week 5-6: klikbaar prototype. De mockups worden gekoppeld zodat de klant er doorheen kan klikken.
- Week 7+: ontwikkeling. Developers bouwen op basis van de goedgekeurde mockups.
Het voordeel van mockups in deze fase: klanten zien iets dat al sterk lijkt op het eindproduct, voor de bouwfase begint. Wijzigingen in de mockup-fase kosten een paar uur werk. Wijzigingen in de bouwfase kosten dagen of weken.
Voorbeelden van mockups in Appec-projecten
Drie projecten waar mockups een grote rol speelden:
innerkidz: een platform voor pedagogische coaching
Voor innerkidz ontwierpen we mockups voor 22 schermen verdeeld over ouders, coaches en de organisatie. De mockup-fase nam 4 weken, de discussie over de hoofdkleuren en typografie alleen al 2 sessies van een halve dag. Eindresultaat: alle betrokkenen aan tafel akkoord, geen wijzigingen meer in de bouwfase.
MegaPrep: een interne tool voor plannen en orderbeheer
Voor MegaPrep maakten we mockups die nadrukkelijk leken op de bestaande Excel-flow van de planning. Dat versnelde de adoptie: medewerkers herkenden meteen wat ze zagen. De mockup-fase duurde 3 weken, daarna konden we direct door naar bouw.
Wat kost het laten maken van mockups?
Een mockup laten maken kost meestal 1.500 tot 5.000 euro, afhankelijk van het aantal schermen en het detailniveau. Voor een eenvoudige website van 5-8 schermen kom je op 1.500-2.500 euro. Voor een app of webapplicatie met 15-25 schermen, meerdere gebruikersrollen en realistische content reken op 3.500-5.000 euro. Bij Appec is de mockup-fase meestal onderdeel van een groter design- en ontwikkeltraject.
Veelgestelde vragen
Wat is het verschil tussen een mockup en een wireframe?
Een wireframe is een zwart-witte schets die alleen de structuur toont, een mockup is een gekleurd ontwerp met echte content dat al lijkt op het eindproduct. Een wireframe maak je in dagen, een mockup in weken. In een typisch project komt een wireframe altijd eerst, daarna pas een mockup.
Welke tool is het beste voor mockups?
Voor de meeste teams is Figma de beste tool voor mockups in 2026. Het werkt in de browser (geen software-installatie), klanten kunnen meekijken en commentaar achterlaten, en het integreert met de meeste andere designtools. Wij gebruiken Figma als standaard bij Appec, voor zowel web- als app-projecten.
Hoe lang duurt het om mockups te maken?
Mockups maken voor een app of webapplicatie duurt gemiddeld 2 tot 5 weken. Voor een eenvoudige website met 5-8 schermen is 1-2 weken voldoende. Voor een complete app met 20+ schermen, meerdere gebruikersrollen en realistische content reken op 4-5 weken. Hoe meer feedbackrondes met de klant, hoe langer de fase duurt.
Heb ik een mockup nodig of kan ik direct beginnen met bouwen?
Direct beginnen met bouwen zonder mockup is vrijwel altijd duurder dan eerst een mockup maken. Wijzigingen in de bouwfase kosten dagen of weken werk, wijzigingen in de mockup-fase kosten een paar uur. Wij raden aan om altijd minimaal een wireframe-fase en een mockup-fase te doorlopen, ook bij eenvoudige projecten.
Hoe kan je een mockup maken?
Een app-design kun je maken met een programma zoals Figma of Adobe XD. Dit soort designtools stellen je in staat om een app volledig visueel te ontwerpen. Je bent in deze fase dus nog niet bezig met het ontwikkelen van de app, maar slechts het ontwerpen van het UI/UX design.
Dit design kun je dan vervolgens in een frame van een telefoon zetten. Denk aan de populaire iPhone of Android-telefoon van het moment. Zo lijkt het design alsof het een échte app is. Bij een webapplicatie zou je het in de vorm van bijvoorbeeld een laptop zetten.
Jouw eigen app laten ontwerpen?
Ook wijzelf bouwen altijd een mockup wanneer onze klanten een app laten maken. Dit helpt ondernemers om hun app te promoten voordat ze officieel gaan lanceren of om investeerders aan te trekken.
Indien je een idee hebt voor een app en een ontwerp wil laten maken, kun je hier een vrijblijvende afspraak maken.