Een mockup is een statisch plaatje in volle kleur van hoe een scherm eruit komt te zien, gemaakt voordat er ook maar één regel code bestaat. Het toont de echte kleuren, fonts, witruimte, beelden en knoppen op hun definitieve plek, zodat iedereen het product ziet zoals het straks verschijnt. Wat het niet doet, is werken: er klikt niets, er beweegt niets.
Zie het als de ingekleurde bouwtekening van een huis, na de ruwe plattegrond maar voordat de bouwers komen. Je kunt een klant er kamer voor kamer doorheen leiden en het over de look eens worden terwijl een wijziging nog minuten kost, geen weken. Een mockup komt meestal na wireframing, dat de structuur vastlegt, en wordt gemaakt in een tool als Figma waar designers elk detail bijschaven.
Het verschil zit in de mate van detail. Een wireframe beantwoordt de vraag “wat staat waar”, in grijze blokken. Een mockup beantwoordt “hoe ziet het eruit”: precies het juiste merkblauw, de echte koptekst-font, de productfoto in de hero, de schaduw onder de card. Het is gedetailleerd genoeg dat een klant kan reageren op het echte gevoel van de pagina, niet op een ruwe schets die hij zelf moet inkleuren in zijn hoofd. Daar begint de eerlijke feedback. De waarde zit in afstemming. Als een klant een mockup goedkeurt, hebben beide kanten hetzelfde beeld van het resultaat, wat later veel “zo had ik het niet verwacht” voorkomt. Een meningsverschil over de layout hier oplossen kost een uurtje in een ontwerpbestand. Datzelfde na het coderen vinden kost dagen. De volgende stap is vaak om van de statische mockup een klikbaar prototype te maken om de flow te testen.
Bij TopDevs gebruiken we mockups om vroeg met klanten de visuele richting vast te leggen, zodat de bouwfase over bouwen gaat en niet over gokken.
