Wat is het verschil tussen een wireframe, mockup en prototype?
Het verschil tussen een wireframe, mockup en prototype zit in het detailniveau. Een wireframe toont de indeling, een mockup het uiterlijk en een prototype het gedrag.
Ze horen in die volgorde bij elkaar.
Je hebt ze zelden alle drie nodig.
Het wireframe
Grijze blokken die aangeven wat waar komt. Geen kleuren, geen lettertypen, geen beeld.
Bedoeld om over de indeling te praten zonder afgeleid te worden. Meer daarover lees je bij lorem ipsum.
De mockup
Hetzelfde scherm, nu met kleuren, lettertypen en echte afbeeldingen. Zo gaat het eruitzien.
Meer daarover lees je bij wat een mockup is.
Het prototype
Een mockup waarin je kunt klikken. Menu’s openen, knoppen brengen je naar het volgende scherm.
Handig bij ingewikkelde stappen zoals een bestelproces. Meer daarover lees je bij figma.
Mijn vuistregels
- Bij een gewone site: wireframe overslaan, meteen een mockup.
- Bij een webshop of portaal: alle drie.
- Prototype alleen voor de lastige stappen.
- Keur elke stap goed voordat je verder gaat.
Die eerste scheelt een ronde die zelden iets oplevert.
Wat elk kost
Een wireframe is snel, een mockup kost het meeste tijd en een prototype komt daar bovenop.
Meer daarover lees je bij wat een mockup kost.
Waar het misgaat
Als je over kleuren begint bij een wireframe, of over de indeling bij een prototype. Elke stap heeft zijn eigen vraag.
Meer daarover lees je bij design system.