Wireframe vs prototype: wat is het verschil?

Creative Director

Het verschil van een wireframe vs prototype kan voor klanten verwarrend zijn. Hoewel ze op elkaar kunnen lijken worden wireframes en prototypes verschillend ingezet. Het zijn twee design technieken uit de User Experience (UX) en User Interface (UI) expertises die we bij Stoere Binken Design inzetten voor webdesign.

Wij krijgen deze vraag heel vaak: Wat zijn wireframes en prototypes nu precies, wat is het verschil en waarvoor worden ze ingezet? Deze vraag beantwoorden we hier voor jou.

Inhoudsopgave van dit blog

Wireframe vs prototype: wat is het verschil?

  • Wireframe: is een abstract draadmodel waarin een overzicht getoond wordt van de onderdelen op een professionele website of app.
  • Prototype: is een doorontwikkeld en dynamisch wireframe, een visueel high-end ontwerp dat er uitziet en werkt als het eindproduct.

Wat is een wireframe?

Een wireframe is een abstract draadmodel, ofwel de bouwtekening van jouw professionele website. Een zeer eenvoudige tekening, vaak zonder kleuren, waarin een overzicht getoond wordt van de verschillende onderdelen die op je maatwerk WordPress website aanwezig zullen zijn. Wireframes worden ook ‘interactie-design’ genoemd en worden gemaakt met behulp van speciale software apps, direct in HTML/CSS of zelfs op papier.

Doel van een wireframe

Het doel van een wireframe is de communicatie tussen alle betrokkenen bij het webproject: Stoere Binken Design als projectmanager, de klant, front-end developer / programmeur, copywriter, fotograaf, SEO specialist, etc. Iedereen is dus op dezelfde pagina en kan meedenken en meewerken aan een succesvol eindresultaat. 
Het dient als visueel referentie model tijdens de webdesign fase en als projectomschrijving voor wat er afgesproken is.

3 Wireframe vormen

Stoere Binken Design werkt met 3 vormen van wireframes:

  • Low-fidelity: Wireframes op papier. Wij gebruiken deze uitsluitend voor de interne schets fase.
  • Medium-fidelity: Wireframes gemaakt in Sketch. We publiceren, bespreken en updaten de wireframe in Sketch Cloud zodat klanten en partners altijd up-to-date zijn. We plaatsen zoveel mogelijk concrete teksten om de storytelling aan te scherpen.
  • High-fidelity: Wireframes gemaakt in Sketch. Deze maken we alleen voor grote projecten. We gebruiken al kleuren, huisstijl lettertypes en afbeeldingen.

Stoere Binken Design gebruikt medium-fidelity wireframes als visueel hulpmiddel bij de ontwikkeling van een professionele website of (web)applicatie. Het dwingt ons om strategisch na te denken over de visuele storytelling, Customer Journey, doelstellingen, conversiepaden, gebruikersgemak, proposities, doelgroep, calls to action, positie van functies, etc. Bij de stelling ‘wireframe vs prototype’ is de medium-fidelity wireframe een winnaar.

In wireframes leggen we zaken vast als de navigatie, indeling, inhoud, storytelling, gebruiksvriendelijkheid (usability) calls-to-action, etc. Alles met ‘lorem ipsum’ fake tekst en zonder enig visueel ontwerp. Hierdoor focus je op de inhoud en niet op het design. Het webdesign gebeurt in de volgende fase. Eerst structuur, dan design.

Wij betrekken klanten direct bij het project

Klanten kunnen direct meedenken en hun eigen (markt)kennis inbrengen. Bij Stoere Binken Design zien we dat veel klanten hun markt heel goed kennen, maar onze expertise nodig hebben om deze onderscheidend te bereiken. De vraag ‘wireframe vs prototype’ willen we hiermee beantwoorden, zodat we effectiever met mensen kunnen samenwerken.
René Verkaart –
Creative Director

Voordelen en nadelen van een wireframe

Het maken van een wireframe, voordat je met het web design begint, heeft vele voordelen. Van het uitwerken van de structuur tot het informeren van teamleden en partners.
Natuurlijk zijn er ook nadelen, hoewel veel minder dan voordelen. De nadelen liggen vaak bij de klant, dus als design agency is het extreem belangrijk je klant op te vangen en te helpen bij het correct interpreteren van het wireframe.

Wil je alle voor- en nadelen van een wireframe weten? Lees dan ons artikel ‘Wireframe: de bouwtekening van jouw website‘.

Waarmee maak je een wireframe?

Er zijn veel desktop- en web-based wireframing tools. Er zijn zelfs bureau’s die nog wireframes op papier maken.
Afhankelijk van de omvang en doelstellingen van het project, het budget en de ambitie van de klant, kiezen we het juiste middel voor het maken van een wireframe. Hier lees je exact welke apps en mogelijkheden er zijn voor jouw website.

Wat is een prototype?

In tegenstelling tot een wireframe is een prototype dynamisch en bevat interactie. Het is een uitgebreide opzet van de maatwerk WordPress website. Je kunt er dus doorheen klikken, alsof het een echte website is. Sommige prototypes zijn zelfs zo high-end dat ze er uitzien als het eindproduct, maar zijn dit niet. Het is nog niet geprogrammeerd, maar een ver uitgewerkt visueel en interactief webdesign.

Doel van een prototype

Het doel van een prototype is het demonstreren en testen van een interactief ontwerp, vaak met echte gebruikers (user testing). Het simuleert het eindproduct in zijn beste vorm om de klant en betrokken (netwerk)partners op één pagina te krijgen.

Prototype vormen

Bij Stoere Binken Design werken we met 3 vormen van prototypes:

  • Low-fidelity: Prototypes met bijna geen visueel design. Uitermate geschikt om snel de indeling, routing en calls-to-action te testen en daarop het prototype aan te passen.
  • Medium-fidelity: Prototype gemaakt in Sketch. We publiceren, bespreken en updaten de wireframe in Sketch Cloud zodat klanten en partners altijd up-to-date zijn. We plaatsen zoveel mogelijk concrete teksten en afbeeldingen.
  • High-fidelity: Prototypes uitsluitend voor grote projecten met een apart budget voor high-fidelity prototypes. We gebruiken zoveel mogelijk het uiteindelijke visuele design zoals kleuren, huisstijl lettertypes, afbeeldingen, etc.

Stoere Binken Design gebruikt medium-fidelity prototypes als visueel hulpmiddel bij de ontwikkeling van een maatwerk WordPress website of (web)applicatie. Het dwingt ons om concreet na te denken over de visuele storytelling, Customer Journey, doelstellingen, conversiepaden, gebruikersgemak, proposities, doelgroep, calls to action, positie van functies, etc. Door de toegevoegde interactie kunnen we ontwerp en functionaliteit tegelijkertijd testen met echte gebruikers (user testing).

Wij zijn van mening dat er in het design proces nog ruimte moet zijn voor voortschrijdend inzicht en doorontwikkeling. Daarom timmeren we het project niet dicht met een high-end prototype, maar laten lucht voor iteraties en nieuwe ideeën.

Voordelen van een prototype

Het prototype informeert iedereen over wat er gedaan moet worden. Een goed prototype is een echte meerwaarde voor high-end projecten en biedt vele voordelen:

  • Prototypes kunnen perfect gebruikt worden voor user testing voordat de professionele website of app in development gaat. Hieruit haal je veel belangrijke informatie.
  • Prototypes tonen de (netwerk) partners precies hoe het eindproduct gaat worden. Zij werken hier allemaal naartoe.
  • Prototypes die goed uitgewerkt en getest zijn kunnen veel werk en geld besparen. 

Nadelen van een prototype

Door het high-end prototype kun je heel goed user testing uitvoeren, maar er zijn ook een paar nadelen aan wireframes:

  • Prototypes liggen zo dicht tegen het eindproduct aan dat veranderingen zeer waarschijnlijk meerkosten zullen opleveren.
  • Prototypes kosten veel tijd en geld om te maken, zeker als je website een klein budget heeft.
  • Prototypes kunnen voor sommige klanten verwarrend zijn, omdat het verschil tussen prototype en eindproduct vervaagt.

Waarmee maak je een prototype?

Er zijn veel desktop- en web-based prototyping tools. Dit zijn de meest gebruikte programma’s die we bij Stoere Binken Design in overweging genomen hebben:

  • Sketch: Stoere Binken Design gebruikt Sketch. Prototypes kunnen direct in Sketch gemaakt worden. Door de integratie met externe prototyping tools als Flinto kun je prototyping naar een hoger niveau tillen.
  • Axure: Dit programma is geschikt voor professionals. Het biedt koppelingen met de cloud, Sketch Assets, Slack, Microsoft Teams, en veel meer.
  • Invision: Invision is de directe concurrent van Sketch. Het biedt vergelijkbare mogelijkheden en is eigenlijk uitsluitend geschikt voor de professionele webdesigner.
  • Proto.io: Deze is een heel sterke web-based software. Het biedt veel functies voor rijke animaties, stijlen, acties, etc om high-end realistische prototypes te maken. Feedback van gebruikers is ook mogelijk. 
  • Mockplus: Dit programma is geschikt voor voor professionals. Het biedt demo projecten en templates. Daarnaast kan het ook Sketch files importeren.
  • Adobe XD: Dit programma is de Sketch clone van Adobe. Het biedt goede integratie met cloud platforms en -services. Grote bedrijven werken graag met Adobe XD.

Conclusie wireframe vs prototype: Wat is beter?

Vanuit onze zicht als webdesigners is er voor de vraag ‘wireframe vs prototype: wat is beter’ geen eenduidige winnaar. Zowel het wireframe als het prototype zijn voor ons geschikte tools in het webdesign proces. Ze dienen hun eigen doel en we zetten ze in waar nodig.

Een wireframe is uitermate goed geschikt om in het begin van het project strategisch na te denken over de professionele website of web applicatie. Een abstracte weergave om de puntjes op de i te zetten voor het concept, de indeling en doelstellingen van de website.

Een prototype kun je zien als een doorontwikkeld en met interactie verrijkt wireframe. Een high-end versie die heel dicht tegen het eindproduct ligt. Door de toegevoegde interactie kun je heel goed de routing door de professionele website testen en  een zo optimaal eindproduct beleven.

Zie je de voordelen voor jouw bedrijf?

Wil je ook eens vrijblijvend met ons over een wireframe of prototype voor je nieuwe professionele website praten?

Maak een persoonlijke afspraak