Definitie: Een mockup is een statisch, gedetailleerd ontwerp van een scherm, website of app dat laat zien hoe het eindproduct eruit gaat zien, met kleuren, typografie, afbeeldingen en echte teksten. Een mockup is niet klikbaar; het toont de vormgeving, niet de werking.
In het kort
- Een mockup zit tussen een wireframe (de ruwe indeling) en een prototype (een klikbare versie) in.
- Mockups worden gebruikt om de uitstraling te beoordelen en goed te keuren voordat er gebouwd wordt.
- Bekende tools om mockups te maken zijn Figma, Sketch, Adobe XD en Penpot.
- Het woord mockup wordt ook gebruikt voor productafbeeldingen, zoals een ontwerp op een T-shirt of verpakking; in software gaat het om schermontwerpen.
Wat is een mockup?
Een mockup laat zien hoe een scherm er straks uitziet. Waar een wireframe vooral blokken en lijnen toont om de indeling te bepalen, voegt een mockup de visuele laag toe: de huisstijlkleuren, de lettertypes, de knoppen in hun definitieve vorm, afbeeldingen en echte teksten. Het resultaat lijkt sterk op het eindproduct, maar je kunt er niet doorheen klikken.
Mockups worden vaak gebruikt om een ontwerp voor te leggen aan opdrachtgevers en belanghebbenden. Het is makkelijker om te reageren op een concreet beeld dan op een beschrijving of een grijs wireframe. Daardoor komen opmerkingen over uitstraling en leesbaarheid vroeg op tafel.
Mockup als productafbeelding
Buiten softwareontwerp betekent mockup ook iets anders: een realistische afbeelding waarin een ontwerp op een product wordt getoond, zoals een logo op een visitekaartje, een print op een T-shirt of een app-scherm op een smartphone. Webshops en ontwerpers gebruiken zulke mockups om te laten zien hoe iets eruitziet voordat het geproduceerd is. In de context van apps en webapplicaties gaat het meestal om het schermontwerp zelf.
Wireframe, mockup of prototype?
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Detail | Laag: blokken en lijnen | Hoog: kleuren, teksten, beelden | Midden tot hoog |
| Interactie | Geen | Geen | Klikbaar |
| Doel | Indeling en structuur bepalen | Vormgeving beoordelen | Werking en route testen |
| Tijd om te maken | Kort | Gemiddeld | Gemiddeld tot langer |
| Wanneer | Vroeg in het ontwerp | Na het wireframe | Voor het testen met gebruikers |
In veel projecten volgen ze elkaar op: eerst wireframes om de indeling te bepalen, dan mockups om de vormgeving vast te leggen, en daarna een klikbaar prototype om de route te testen.
Waarom maak je een mockup?
- Vormgeving beoordelen voordat er gebouwd wordt, wanneer aanpassen nog goedkoop is.
- Goedkeuring krijgen van opdrachtgever of management op basis van een concreet beeld.
- Huisstijl toepassen en controleren of kleuren, contrast en lettertypes goed werken.
- Ontwikkelaars helpen, die precies zien hoe elk element eruit moet zien, inclusief afstanden, kleuren en lettergroottes.
- Leesbaarheid toetsen, met echte teksten in plaats van opvultekst.
Tools om mockups te maken
- Figma is de meest gebruikte tool voor schermontwerp, met samenwerking in de browser en de mogelijkheid om mockups later klikbaar te maken.
- Sketch is populair bij ontwerpers op macOS.
- Adobe XD maakt deel uit van de Adobe-omgeving.
- Penpot is een open source alternatief dat in de browser werkt.
- Canva is toegankelijk voor eenvoudige mockups en presentaties, maar minder geschikt voor complete applicaties.
Steeds meer tools bieden AI-functies om op basis van een beschrijving of wireframe een eerste mockup te genereren. Dat versnelt het werk, maar de keuzes over indeling en wat een gebruiker nodig heeft, blijven bepalend.
Veelgemaakte fouten
- Direct beginnen met vormgeving, voordat de indeling en de route vaststaan.
- Opvultekst gebruiken, waardoor pas later blijkt dat teksten niet passen.
- Alleen het ideale scherm ontwerpen, en geen lege staten, fouten of lange gegevens.
- De mockup als belofte behandelen, terwijl techniek of budget sommige details anders maakt.
Hoe maak je een goede mockup?
- Begin met een wireframe, zodat de indeling al vaststaat.
- Gebruik echte inhoud. Echte teksten en afbeeldingen laten zien of alles past.
- Pas de huisstijl consequent toe, met vaste kleuren, lettergroottes en afstanden.
- Ontwerp ook lastige situaties, zoals een lege lijst, een foutmelding of een lange naam.
- Maak mockups voor desktop en mobiel als de applicatie op beide moet werken.
- Let op toegankelijkheid, zoals voldoende contrast en leesbare lettergroottes.
- Werk met herbruikbare componenten, zodat knoppen, velden en kaarten overal hetzelfde zijn en de ontwikkelaar ze één keer hoeft te bouwen.
Wat betekent dit voor jouw project?
In mijn werkwijze zitten schermschetsen in de betaalde blauwdruk, samen met het afgebakende proces en een voorstel voor de eerste versie. Zo zie je voordat er gebouwd wordt hoe de belangrijkste schermen eruitzien, en kun je daarop reageren. De nadruk ligt daarbij eerst op de route en de informatie die een gebruiker nodig heeft; de vormgeving volgt daaruit.
Wil je zien hoe je idee eruit kan zien voordat er gebouwd wordt? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap.
Veelgestelde vragen over mockups
Wat is een mockup?
Een mockup is een statisch, gedetailleerd ontwerp van een scherm, website of app met kleuren, typografie, afbeeldingen en echte teksten. Het laat zien hoe het eindproduct eruitziet, maar is niet klikbaar.
Wat is het verschil tussen een mockup en een wireframe?
Een wireframe toont de ruwe indeling van een scherm met blokken en lijnen. Een mockup voegt de vormgeving toe, zoals kleuren, lettertypes en afbeeldingen, en lijkt daardoor sterk op het eindproduct.
Wat is het verschil tussen een mockup en een prototype?
Een mockup is een statisch beeld van het ontwerp. Een prototype is klikbaar, zodat je door schermen kunt navigeren en de werking en route kunt testen.
Verwante termen
Wireframe · Klikbaar prototype · Prototype · UX design · Functioneel ontwerp
← Terug naar de kennisbank