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. Maar wat zijn wireframes en prototypes nu precies, wat is het verschil en waarvoor worden ze ingezet?

Wireframe vs prototype: wat is het verschil?

Ontwerpbureau Stoere Binken Design legt het verschil van wireframe vs prototype uit:

  • Wireframe: is een abstract draadmodel waarin een overzicht getoond wordt van de onderdelen op een 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 een website. Een zeer eenvoudige tekening zonder inkleuring. Hierin wordt een overzicht getoond van de verschillende onderdelen die op een maatwerk WordPress website aanwezig zijn. Wireframes worden ook wel eens ‘interactie-design’ genoemd en kunnen gemaakt worden op papier, rechtstreeks in HTML/CSS of met behulp van software apps.

Doel van een wireframe

Het doel van een wireframe is de communicatie tussen alle betrokken (netwerk)partner bij het webproject: Stoere Binken Design als projectmanager, de klant, font-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.

Vormen van wireframes

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 website of (web)applicatie. Het dwingt ons om strategisch na te denken over de storytelling, 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. Wij zien dat veel Stoere Binken Design klanten hun markt heel goed kennen, maar onze expertise nodig hebben om deze te bereiken. Wij werken graag voor bedrijven met ambitie en visie. De vraag wireframe vs prototype willen we hiermee voor ze beantwoorden, zodat we effectiever kunnen samenwerken.
René Verkaart
Creative Director

Voordelen van een wireframe

Het wireframe informeert iedereen over wat er gedaan moet worden. Iedereen ziet het totaalplaatje en weet wat er van hem verwacht wordt om het eindresultaat te bereiken:

  • Wireframes zijn de basis voor het webdesign.
  • Wireframes dwingen je om strategisch na te denken. Eerst structuur, dan design.
  • Wireframes betrekken de klant direct bij het project, waardoor ze hun kennis en ervaring in kunnen brengen. 
  • Wireframes omvatten alle template pagina’s die uiteindelijk uitgevoerd gaan worden.
  • Wireframes tonen de storytelling, routing en functies van de pagina’s op de website. Je kunt alles stap voor stap zien en bekijken.
  • Wireframes kunnen snel aangepast worden om verbeteringen te testen voordat er überhaupt iets ontworpen is.
  • Wireframes zijn geschikt voor content uitbreiding omdat je rekening kunt houden met mogelijke uitbreidingen in de toekomst.
  • Wireframes informeren alle (netwerk)partners zodat iedereen precies weten wat er moet gebeuren.
  • Wireframes zijn een omvattende referentie voor het project.

Nadelen van een wireframe

Door het wireframe is iedereen op de hoogte over wat er gedaan moet worden, maar er zijn ook een paar nadelen aan wireframes:

  • Wireframes kunnen lastig te ontcijferen zijn voor sommige klanten, vooral omdat ze geen ontwerp en interactie bevatten. Grijze vlakken en Lorem ipsum teksten vereisen veel voorstellingsvermogen van klanten.
  • Wireframes leggen afspraken in het begin vast, terwijl sommige klanten tijdens de ontwerpfase nog van mening veranderen door voortschrijdende inzichten. Dit zorgt direct voor meerkosten, want klanten wederom moeilijk begrijpen.

Waarmee maak je een wireframe?

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

  • Sketch: Stoere Binken Design gebruikt Sketch. We uploaden het wireframe in Sketch Cloud zodat onze klanten deze op een passend moment in hun vertrouwde omgeving kunnen bekijken en bespreken. Sketch is het programma dat we ook gebruiken voor het webdesign. Deze leggen we feitelijk over het wireframe heen, zodat we sneller en efficiënter zijn. En voor de klant goedkoper.
  • Invision: Invision is de directe concurrent van Sketch. Het biedt vergelijkbare mogelijkheden en is eigenlijk uitsluitend geschikt voor de professionele webdesigner.
  • Balsamiq: Dit programma ziet eruit als een handgetekende schets, waardoor het duidelijk is dat het om de inhoud en niet het ontwerp gaat.
  • Mockingbird: Dit is een online tool waarmee je snel eenvoudige wireframes kunt maken én delen. Het lijkt een beetje op Balsamiq.
  • Adobe Indesign: Veel designers gebruiken nog Indesign (of zelfs Illustrator), hoewel dit voor wireframes niet echt geschikt is. Het is te log en bewerkelijk en vereist enige ervaring op hiermee om te kunnen gaan.
  • Microsoft Visio: Dit programma is ontwikkeld om complexe projecten te visualiseren en relaties in kaart te brengen. De functionaliteit gaat veel verder dan wireframes alleen, waardoor het voor beginners overweldigend kan zijn.
  • Papier: Ja, sommige bureau’s doen dit nog. Het lijkt oldskool, maar er zijn speciale schetsboeken met ‘gelinieerde browser papieren’ die het grid van de website visualiseren. Okay, met papier kun je als team snel werken bij SCRUM-sessies. Het nadeel is dat dit niet optimaal werkt als de klant in een andere stad zit.

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.

Vormen van prototypes

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 storytelling, 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 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 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 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 website praten?

Maak een persoonlijke afspraak