Het verschil tussen wireframes en prototypes
Je wilt een professionele website laten maken maar je wil graag eerst een schets van hoe het er zou kunnen uitzien? Start dan bij het opmaken van wireframes: een visuele voorstelling van je nieuwe website of applicatie.
Net zoals je een architect een plan laat opmaken bij het bouwen van een huis, laat je een UX-designer een wireframe (en informatiearchitectuur) uittekenen bij het maken van een website. Bij UXMen gaan we graag een stapje verder en bieden we interactieve prototypes aan. Wat het verschil is tussen een wireframe en een prototype leggen we je in deze blog uit.
Wireframes zijn visuele voorstellingen van hoe bepaalde pagina’s op je website worden opgebouwd. Zowel inhoudelijk als functioneel ga je uittekenen wat de websitebezoeker te zien krijgt alsook welke acties hij/zij kan uitvoeren. Daarom is het belangrijk om ook tijdens deze fase rekening te houden met de customer journeys. Echter zijn deze wireframes meestal statisch en ervaar je als klant de user flows amper tot niet.
Wireframes worden na grondige analyses opgemaakt en vormen een handige structurele houvast tijdens de ontwikkeling. De basisstructuur van je pagina’s zal zowel designers als developers al een heel stuk in de juiste richting sturen.
We sommen enkele voordelen op van het gebruik van wireframes bij het ontwerpen van een nieuwe website.
Daarnaast zijn aanpassingen tijdens deze fase eenvoudiger en sneller uit te voeren t.o.v. tijdens de design of development fase.
Een prototype (of een dynamische wireframe) is een visuele voorstelling van je website, net zoals bij de statische wireframes, alleen is deze interactief en dus aanklikbaar. Je kan als het ware door de wireframe-designs surfen om je meteen het gevoel van je eigen nieuwe website te geven. Zo zal je op knoppen kunnen klikken, de navigatie kunnen uittesten en de user flows zelf ervaren. Daarbovenop voorzien we deze prototypes van echte beelden en copywriting om een vertrouwd gevoel op te wekken. Een absoluut pluspunt als je collega’s en/of management moet overtuigen van de nieuwe structuur op de website. Laat het hen dus zeker zelf ervaren.
De voordelen zijn quasi dezelfde als deze bij de wireframes. Alleen krijg je bij prototypes een extraatje qua interactiviteit en ervaring.
Zowel statische als dynamische wireframes vormen een belangrijk onderdeel in de user interface design. Zo zal de UX/UI-designer starten met het uittekenen van statische wireframes die hij/zij vervolgens omzet in dynamische of interactieve prototypes. Tijdens dit gehele proces bepaalt hij/zij welke interface elementen er gebruikt zullen worden in de pagina layouts. Belangrijk bij customer journeys van je websitegebruikers.
Het grootste verschil ligt in de interactiviteit en visuele voorstelling van de ontwerpen. Wireframes zijn vaak zwart-wit uitgetekende basisstructuren terwijl prototypes visueel aangekleed en aanklikbaar zijn. Prototypes simuleren de ervaring van je echte website.
Een nieuwe website maak je niet op 1 2 3. Er zijn een aantal nodige stappen die je moet doorlopen om tot een goede performante website te komen. In dit artikel bespreken we het verschil tussen wireframes en prototypes maar vergeet evengoed niet dat grondige analyses een belangrijk onderdeel zijn die vooraf aan de wireframes moeten uitgevoerd worden. Ook de informatiearchitectuur (IA) zal een onmisbaar onderdeel zijn bij de bouw van een nieuwe, conversiegerichte website.
Door in een vroeg stadium van het project te werken met wireframes of prototypes kan je de basisstructuur en de navigatie van je website vastleggen en/of goedkeuren. Zo kan je als klant niet enkel zelf ervaren, maar stelt het je in staat om ook collega’s en/of management gemakkelijker te overtuigen. Daarnaast bespaar je in latere fases tijd en geld door in deze fase reeds goede afspraken te maken.
Eenmaal de wireframes/prototypes uitgetekend en goedgekeurd zijn kan je bij verschillende leveranciers de ontwikkelingskosten opvragen. Zo kan je ook afwegen welke technologie je verkiest bij de verdere ontwikkeling, indien je dit nog niet moest beslist hebben. Prijzen vergelijken wordt daardoor een pak gemakkelijk. Zo zal je de voor- en nadelen van de verdere ontwikkelikkingen beter kunnen vergelijken.
