In productontwikkeling, en met name wanneer je een app laat bouwen, wordt het woord “prototype” veel gebruikt. Wat is een prototype nou eigenlijk? En waarom is het zo belangrijk voor veel bedrijven? In dit artikel geven we een definitie van prototype. Ook leggen we uit hoe jij er zelf een kunt laten maken.
Wat is een protoype? De betekenis
Een prototype is een eerste incomplete versie van een product. Het wordt ontwikkeld om een beeld te krijgen van hoe de uiteindelijke versie eruit zal komen te zien. Door een visuele indruk te krijgen, kun je aanpassingen maken om het eindproduct te verbeteren.
Prototypes kunnen gebruikt worden in verschillende industrieën en voor verschillende soort producten. Voor in softwareontwikkeling/appontwikkeling wordt deze term met regelmaat gebruikt.
Wat betekent prototype in app development?
In app-ontwikkeling heeft het woord prototype een specifieke betekenis. Het ziet namelijk op een fase in het ontwerpproces. Dit is de fase waarin je een frontend (of UI/UX design) ontwikkelt. Je bouwt dus een visuele weergave van de app die nog niet functioneel werkt.
Prototypes kunnen gebruikt worden in verschillende industrieën en voor verschillende soort producten.
Het prototype kun je tonen aan een opdrachtgever voor feedback. Hier kun je vervolgens wijzigingen in aanbrengen voordat de appontwikkelaar daadwerkelijk begint met het ontwikkelen van de app.
Een prototype is puur bedoeld als een uitgebreidere mockup om te laten zien hoe de app eruit gaat zien. Zo kun je de verschillende menu’s bekijken en navigeren zonder dat je een complete app hoeft te bouwen.
Het gaat echter om meer dan slechts om grafisch design. Ook denk je hier al na over de user experience van de eindgebruiker.
In app design heb je ook een andere term: wireframe. Dit is de versie vóór het prototype. Daarbij bedenk je de structuur van het prototype zonder deze te veel uit te werken. Beide termen moeten dus van elkaar worden onderscheiden.
De voordelen van prototyping
De drie grootste voordelen van het laten maken van een prototype zijn als volgt:
1. Financieel
Een prototype is erg voordelig om te ontwikkelen. Op deze manier kun je dus in een vroeg stadium een beeld krijgen van jouw product. Indien bepaalde aspecten niet bevallen, kun je dit vroeg ontdekken en veranderen. Dit zorgt ervoor dat een app laten maken veel voordeliger uitkomt.
2. Efficiëntie
Door eerst een prototype te maken kun je veel efficiënter werken. Je werkt dus eigenlijk meer stapsgewijs met een prototype. Je kunt fouten al vroeg ontdekken, en dit verbeteren. Zo voorkom je dat je na het lanceren nog grote veranderingen moet maken. Het is veel beter om zo vroeg mogelijk feedback te verzamelen. Dit zorgt uiteindelijk voor een kwalitatiever eindproduct.
3. Investeerders overtuigen
Heb je al investeerders? Of ga je nog met investeerders in gesprek? Dan is een prototype belangrijk om te hebben, zodat je ze beter kunt overtuigen. Wanneer je investeerders zoekt in een vroeg stadium wil je ze namelijk wat kunnen laten zien. Zij hebben dan een veel beter idee van waar ze in investeren.
Hoe maak je een prototype voor een app?
Twee populaire programma’s voor prototyping zijn Figma en Adobe XD. Dit zijn programma’s die lijken op Photoshop, maar specifiek bedoeld om software te designen. Althans, dat is waar het veelal voor wordt gebruikt.
Een prototyping tool vergt veel kennis en oefening om goed te kunnen gebruiken. Om een professioneel prototype te kunnen ontwerpen heb je ervaring nodig. Ook moet je de principes van UX en UI goed begrijpen.
Soorten prototypes: low-fidelity en high-fidelity
Niet elk prototype is even uitgewerkt. Designers maken onderscheid tussen low-fidelity en high-fidelity prototypes, en welk type je nodig hebt hangt af van de fase van je project.
Low-fidelity: papieren schetsen en wireframes
Een low-fidelity prototype bestaat uit papieren schetsen of wireframes: zwart-witte schermen die alleen de structuur tonen, geen kleuren of foto’s. Voordeel: snel te maken, makkelijk weg te gooien als het idee niet werkt. Wij gebruiken low-fidelity in de eerste 1-2 weken van een project, vooral als de scope nog onduidelijk is.
High-fidelity: klikbare schermen in Figma
Een high-fidelity prototype lijkt al sterk op het eindproduct: echte kleuren, echte teksten, echte foto’s. Vaak ook klikbaar, zodat je in Figma of een vergelijkbare tool van scherm naar scherm kunt navigeren. Voordeel: je krijgt veel realistischer feedback van klanten, en je vermijdt verrassingen in de bouwfase. Nadeel: het kost meer tijd om te maken.
Tools voor prototypes
De meest gebruikte tools voor het maken van prototypes:
- Figma: marktstandaard voor app- en webdesign. Werkt in de browser, klant kan meekijken. Wij gebruiken dit bij Appec.
- Sketch: vooral op macOS, oudere standaard die door Figma wordt ingehaald.
- Adobe XD: onderdeel van Adobe Creative Cloud, gebruikt door bureaus die ook Photoshop en Illustrator inzetten.
- Marvel App: lichte tool voor snelle klikbare prototypes vanuit screenshots of schetsen.
- InVision: oudere tool, vooral voor klikbare prototypes en design-feedback.
Wat kost een prototype laten maken?
Een prototype laten maken kost in de praktijk tussen 2.500 en 8.000 euro, afhankelijk van het detailniveau en het aantal schermen. Een eenvoudig wireframe-prototype voor 5-8 schermen ligt op 2.500-4.000 euro. Een high-fidelity prototype voor een volwaardige app of webapplicatie met 15-25 schermen, klikbare flows en realistische content komt op 5.000-8.000 euro.
Bij Appec is de prototype-fase doorgaans onderdeel van een groter app- of webapplicatie-traject. Klanten die alleen een prototype willen om hun idee te valideren of aan investeerders te presenteren, kunnen dat ook los afnemen. Plan een gesprek als je benieuwd bent naar de mogelijkheden.
Wanneer prototype je en wanneer niet?
Een prototype maken is bijna altijd zinvol bij een nieuwe app of webapplicatie. Drie situaties waarin het echt onmisbaar is:
- Bij een nieuw idee waar nog geen markt voor bewezen is: laat het prototype aan 5-10 potentiële klanten zien voor je een regel code schrijft.
- Bij een project met meerdere beslissers die het oneens zijn: een prototype maakt abstracte discussies concreet, en je kunt eindelijk knopen doorhakken.
- Bij een complex proces dat gedigitaliseerd wordt: een prototype helpt om te ontdekken of de digitale versie van een papieren proces echt logisch werkt voor de eindgebruiker.
Wanneer is een prototype overbodig? Bij een eenvoudige uitbreiding van een bestaande app of website, waar het patroon al bekend is. Of bij een puur technische backend-bouw zonder gebruikersinterface.
Veelgestelde vragen
Wat is een ander woord voor prototype?
Een ander woord voor prototype is ‘proof of concept’ of ‘mock-up’. In de softwarewereld wordt ‘prototype’ gebruikt voor klikbare design-versies, ‘proof of concept’ voor technische haalbaarheidsproeven, en ‘mockup’ voor statische design-mock-ups. Zie ook proof of concept en wat is een mockup.
Hoe maak je een prototype?
Een prototype maken doe je in vier stappen: 1) Schets de schermen op papier of whiteboard, 2) Vertaal de schetsen naar wireframes in Figma of Sketch, 3) Voeg kleur, typografie en echte content toe voor een high-fidelity versie, 4) Maak schermen klikbaar zodat je door de flow kunt navigeren. Voor een eerste prototype reken op 2-4 weken werk.
Wat is het verschil tussen een prototype en een MVP?
Een prototype is een ontwerp dat je kunt klikken maar dat niet daadwerkelijk werkt: data wordt niet opgeslagen, accounts werken niet, integraties zijn alleen visueel. Een MVP (Minimum Viable Product) is een werkende eerste versie van je product met de minimale set aan functies. Zie MVP betekenis.
Hoe lang duurt het om een prototype te maken?
Een prototype maken duurt gemiddeld 2 tot 5 weken. Een eenvoudig wireframe-prototype is in 1-2 weken klaar. Een high-fidelity prototype met klikbare flows en realistische content kost 3-5 weken. Bij Appec doen we het altijd in nauwe samenwerking met de klant, zodat feedback direct verwerkt wordt.
Jouw app-idee laten prototypen?
Bij Appec hebben we ervaren designers in huis die jouw app kunnen ontwerpen. Nadat je tevreden bent met het prototype gaan we pas aan de slag met programmeren. Zo krijg je een professionele app die je kunt inzetten voor jouw bedrijf.
Heb je vragen? Lees dan meer over het proces van een app laten maken, of boek direct een kennismakingsgesprek.