Succesvolle producten ontstaan niet zomaar. Ze zijn het resultaat van zorgvuldige verkenning. Een belangrijke fase in het productontwikkelingsproces omvat representaties van producten, bekend als mockups. Mockups zijn een krachtig middel om productmanagers en relevante belanghebbenden te betrekken bij beslissingen over een definitief ontwerp. Ze dienen als een manier voor een ontwerpteam om feedback te verzamelen en kunnen ook een marketingtool zijn om het publiek enthousiast te maken over aankomende lanceringen.
Wat is een mockup?
Een mockup is een mooi afgewerkte visuele schets van een ontwerpconcept. Vaak zijn het statische afbeeldingen met gemiddelde tot hoge precisie, wat betekent dat ze de belangrijkste visuele elementen tonen zonder de volledige functionaliteit van het eindproduct te reflecteren. Mockups worden altijd digitaal gemaakt met ontwerpsoftware of vaste templates, en zijn te gebruiken voor allerlei soorten projecten — van apps en websites tot fysieke producten.
Wireframe vs. mockup
Een wireframe is een handgetekende of digitaal weergegeven schets van een webpagina of app-scherm. Wireframes en mockups dienen een vergelijkbaar doel door een productconcept visueel weer te geven zonder functionaliteit. Wireframes komen vóór mockups in het ontwerpproces en maken het makkelijker om snelle feedback over de algemene lay-out te verzamelen. Mockups maken het daarentegen mogelijk om gedetailleerde kritiek te ontvangen en verwerken, zodat deze wijzigingen doorgevoerd kunnen worden voordat het ontwerp definitief is.
Prototype vs. mockup
Een prototype is een niet-uitgebrachte versie van een product of een testproduct. Zowel prototypes als mockups zijn realistische weergaven van een product. Waar mockups laten zien hoe een product eruit kan komen te zien, zijn prototypes ook tastbaar, functioneel en bruikbaar. Het doel van een prototype is dan ook om feedback te krijgen op de functionaliteit van het product, terwijl mockups worden gebruikt om feedback te krijgen op het concept of ontwerp.
Soorten mockups
Ondanks de vele variaties tussen verschillende branches en sectoren, zijn er een aantal veelvoorkomende mockups:
Mockups van fysieke producten
Product mockups stellen jou en andere teamleden in staat om je product te visualiseren voordat je een prototype maakt. Ze helpen ook om het product in de context waarvoor het is ontworpen af te beelden. Je zou bijvoorbeeld mockups kunnen maken van een nieuw schoenontwerp — de ene mockup kan een 3D-weergave van de schoen zelf zijn, terwijl een andere kan laten zien hoe de schoen eruitziet wanneer deze gedragen wordt.
Sommige mockups kunnen ook fysieke modellen van het product zelf zijn. Ze verschillen van prototypes omdat ze niet de volledige functionaliteit bieden. Stel dat je een meubelontwerper bent die een stoel maakt; je zou een schaalmodel van 1/10 kunnen maken van je ontwerp voordat je je toewijdt aan het bouwen van een volledige stoel. Zo kun je zien hoe het ontwerp eruitziet als het af is, zonder de tijd en kosten die je nodig zou hebben om het eindproduct te creëren.
App- en website mockups
App- en website-mockups dienen als visuele weergave voor een gebruikersinterface. Dit maakt het mogelijk om apps en websites te previewen voordat ze beschikbaar zijn voor het grote publiek. Hoewel de interactieve functies van een mockup mogelijk niet werken, krijg je toch een gevoel van de gebruikerservaring.
Als je de app-versie van je webshop ontwerpt, zul je waarschijnlijk een niet-functionele versie van de app maken voordat deze gelanceerd wordt. Je kunt deze mockup gebruiken om de grootte van afbeeldingen en knoppen aan te passen, zodat het werkt op verschillende apparaten.
Branding-mockups
Branding-mockups zijn statische visuele weergaven die een scala aan branding ontwerpen presenteren. Het zijn vaak print mockups van items zoals visitekaartjes, verpakkingen en kledingstukken die het mogelijk maken om het ontwerp te onderzoeken en verfijnen voordat ze officieel geproduceerd worden. Branding-mockups helpen ontwerpers, stakeholders en fabrikanten om synchroon te werken en de beste versies van ontwerpen te creëren.
Tools voor het maken van mockups
Afhankelijk van je behoeften en vaardigheidsniveau, kies je waarschijnlijk tussen goedkope mockup-sjablonen of meer geavanceerde ontwerpsoftware.
Hoe jij je mockups gaat maken is afhankelijk van je behoeften en skills. Wanneer je geen design achtergrond hebt, kies je waarschijnlijk voor goedkope mockup templates, terwijl een ervaren designer vaak aan de slag gaat met geavanceerde ontwerpsoftware.
Online mockup-generator
Er zijn veel gebruiksvriendelijke mockup-generatoren voor een makkelijke en gestroomlijnde creatie van mockups. Of je nu een mockup-template voor een hoodie nodig hebt of een startpunt voor je website-mockup, je kunt online heel veel bestaande sjablonen vinden.
Als je een beginnend skincare bedrijf bent dat een mockup nodig heeft voor verpakkingen, kan een cloud-based ontwerptool zoals Canva je helpen bij het brainstormen van ideeën en uiteindelijk een mockup te maken om naar een fabrikant te sturen. Andere interessante en toegankelijke mockup-generatoren zijn Placeit en Smartmockups.
Goedkope online software kan je ook helpen om na te denken over website- en app-ontwerpen door gestructureerde containers te gebruiken waar visuele elementen zoals een logo, graphics en tekst kunnen worden ingevoegd. Het voordeel van deze online mockup-generatoren is dat het makkelijk te gebruiken is én dat de kosten een stuk lager liggen dan het aanschaffen van abonnementen op ontwerpsoftware — al zijn er wel een aantal gratis varianten te vinden.
Professionele ontwerp software
Het creëren van mockups in ontwerpsoftware is een industriestandaard voor ontwerpers. Maar als je nieuw bent in het ontwerpen van mockups, of als er geen aangewezen ontwerper in je bedrijf is, komt deze optie meestal met een steile leercurve en hogere prijzen in vergelijking met het gebruik van online sjablonen. Maar als je klaar bent om de sprong te wagen, kun je mockups helemaal zelf maken met ontwerpsoftware zoals Figma, Sketch, en Adobe XD.
Veelgestelde vragen over mockups
Waar komen mockups in het ontwerpproces aan bod?
Mockups komen meestal voor aan het einde van het ontwerpproces. Ze bieden waardevolle informatie die nodig is om het productontwerp definitief te maken.
Wat is een voorbeeld van een mockup?
Er bestaan verschillende soorten mockups:
- Product mockups: T-shirts, schoenen, verpakkingen en meer
- Web- en app-mockups: website layouts en app-designs
- Branding mockups: visitekaartjes, pennen, kledingstukken, verpakkingen enzovoorts
Waar kan ik mockups gebruiken of plaatsen?
Je kunt mockups gebruiken in zakelijke presentaties voor teams of stakeholders, zodat je belangrijke ontwerpelementen kunt bespreken. Daarnaast kun je mockups ook gebruiken op je website en social media als onderdeel van je marketingstrategie.
Waarom zijn mockups belangrijk?
Professionele mockups maken het mogelijk om feedback te verzamelen op het ontwerp voordat je overgaat op prototyping of productie. Aanpassingen zijn in dit stadium veel minder kostbaar dan wanneer je ze later in het productieproces moet verwerken. Daarnaast zorgen mockups ervoor dat het hele team, inclusief de niet-ontwerpers, het eens kunnen worden over een definitieve versie van het product.
