Waar is een mockup voor
Een losse screenshot is plat en zonder context. Dezelfde screenshot in een telefoon laat een product zien dat je in je hand zou kunnen houden. Klinkt als een kleinigheid. Op een storepagina of in een advertentie is het vaak het verschil tussen doorscrollen en tikken.
Je ziet mockups in:
- screenshots in de App Store en Google Play;
- openingsbeelden en productvideo's op websites;
- posts op Instagram, TikTok en LinkedIn;
- klantpresentaties en portfolio's;
- pitch decks voor investeerders.
Voor ontwerpers is er ook een praktische kant. Een klant die naar een platte PNG kijkt, vraagt altijd: "Hoe ziet dat eruit op een telefoon?" Een mockup geeft het antwoord voordat de vraag komt.
Soorten mockups
Je ziet er vandaag drie, en elk is goed in iets anders.
Platte (2D) mockup
De screenshot zit in een apparaatkader dat recht van voren te zien is. Snel gemaakt, kleine bestanden, voor de stores vaak genoeg. Maar alles komt uit dezelfde hoek, dus een pagina vol 2D-mockups wordt snel eentonig.
Fotomockup
Iemand fotografeert een echt apparaat, bijvoorbeeld een telefoon in de hand of een laptop op een bureau. Het schermgebied wordt gemarkeerd en jouw ontwerp wordt er met het juiste perspectief in gezet. Licht en ruimte zijn echt, daarom zien fotomockups er het meest natuurlijk uit en werken ze zo goed op social media en websites.
3D-mockup en mockupvideo
Een driedimensionaal model van het apparaat. Je draait de telefoon in elke hoek, verplaatst het licht en de schaduw beweegt mee. De echte kracht is beweging: het apparaat draait of de laptop gaat open terwijl je app op het scherm speelt. Voor lanceringsvideo's en App Store-previews is dit inmiddels de populairste soort.
Mockup, wireframe en prototype
Ze worden steeds door elkaar gehaald. Een wireframe is het skelet van een scherm: blokken, lijnen, tijdelijke tekst, geen kleur. Daarmee spreek je af wat waar komt. Een prototype is klikbaar: tik op een knop en het volgende scherm opent. Dat leg je voor aan testers.
Een mockup laat het afgemaakte, of bijna afgemaakte, ontwerp zien in een realistische omgeving. Klikken kan niet; het is om naar te kijken.
Hoe maak je een mockup
Vroeger waren er twee wegen: een PSD met slimme objecten openen in Photoshop, of een scène bouwen in een 3D-programma zoals Blender of Cinema 4D. De eerste is snel maar beperkt. De tweede is krachtig, maar het leren kost weken.
Nu zijn er apps die er speciaal voor gemaakt zijn. In Mockup Center gaat het zo:
- Sleep je screenshot of schermopname in de app.
- Kies een apparaat (iPhone, Galaxy, iPad, MacBook, Apple Watch en meer) of open een geanimeerd sjabloon.
- Stel hoek, licht en achtergrond in en exporteer als PNG of video.
De gids mockup maken loopt elke stap door.
Wat maakt een mockup goed
Na veel storepagina's en lanceringsposts zien we bij de goede steeds dezelfde gewoontes:
- De screenshot is scherp. Een wazig scherm maakt zelfs een dure 3D-scène goedkoop. Maak hem op de echte resolutie van het apparaat.
- De statusbalk is netjes: 9:41, volle batterij, geen meldingen. Een detail, maar het valt op.
- De achtergrond concurreert niet met het product.
- Elk beeld zegt één ding, met één functie en één kop.
