We denken altijd heel bewust om te gaan met de vaktermen die we gebruiken. Maar jargon zit in een klein hoekje. Soms kunnen klanten ons toch echt even niet volgen. In deze post leggen wij uit waar we het nou eigenlijk over hebben als we het over een wireframe prototype hebben, en wat je eraan hebt.

Wat is een wireframe?

Een wireframe is een digitale schets van een website. Het geeft globaal weer welke layout de website zal krijgen en welke content erin zal komen. Een wireframe bevat dan ook geen vormgeving, maar is als het ware het ‘skelet’ van de website.

twdc

Wireframe homepage provincie Noord-Holland. Scroll binnen de laptop om de hele pagina te bekijken.

Het nut van wireframes

Wireframes zijn een snelle manier om de eerste ideeën voor een website te visualiseren. De klant geeft een briefing en daar gaat de ontwerper mee aan de slag. Het is niet altijd makkelijk voor de klant om een structuur vast te stellen of om zich de ideeën van de ontwerper voor te stellen. Wanneer dit zo snel mogelijk tastbaar gemaakt wordt, gaat het direct meer leven en kan er in een vroeg stadium al feedback gegeven worden. Ook kan de klant intern zo makkelijker draagvlak creëren. Het afstemmen van de inhoud wordt voor iedereen een stuk makkelijker en sneller.

Omdat een wireframe geen vormgeving bevat, kan de ontwerper zich volledig focussen op de flow en interacties van een website.

Wireframes zijn een snelle manier om de eerste ideeën voor een website te visualiseren en deze direct te testen.

Direct testen

Wireframes kunnen klikbaar gemaakt worden. Hierdoor kan een website direct getest worden. Je kunt er dan doorheen klikken alsof het een echte website is. Dit heet wireframe prototyping. Wanneer je een website echt kunt gebruiken, kun je veel sneller problemen tackelen en het ontwerp daarop aanpassen.

De mate waarin een prototype van een website wordt uitgewerkt, verschilt. Om bijvoorbeeld de flow van een website te testen heb je een minder gedetailleerd prototype nodig, dan wanneer je kleine interacties wilt testen.

In de praktijk

We beginnen altijd met het ontwerpen van de losse pagina’s. Vervolgens verbinden we deze om er een prototype van te maken. We testen deze zelf en passen de ontwerpen aan waar nodig. Als het dan volgens ons niet beter kan, publiceren we de wireframes online en sturen we ze op naar de klant. De klant stuurt ons feedback en deze voeren wij door in een definitief prototype.

Tools

Voor het maken van wireframes, kunnen verschillende tools gebruikt worden. Je kunt een combinatie van design tools en prototyping tools gebruiken, of een tool die beide kan. Voorbeelden hiervan zijn (combinaties van) Sketch, Marvel, Adobe XD, Invision en Axure RP.

Hier bij Rox gebruiken we al jaren Axure. De reden dat we deze tool gebruiken, is omdat het speciaal gemaakt is voor het ontwerpen van interactieve wireframes. Daardoor hebben we alles wat we nodig hebben in één tool. We kunnen hiermee snel pagina’s opzetten met vooraf ingestelde widgets en door middel van hot spots items interactief maken. De wireframes delen we vervolgens met de klant door het vanuit Axure online te publiceren.

Van wireframe naar ontwerp

Na het maken van de wireframes, worden de visuele ontwerpen gemaakt. Hierin wordt de stijl van een website bepaald. Een wireframe is echter geen kleurplaat. De visuele ontwerpen kunnen afwijken van de wireframes, zolang de flow en interacties van de website hier niet onder lijden.

Hieronder zie je het verschil tussen een wireframe en visueel ontwerp voor de website van provincie Noord-Holland.

Versleep de lijn om het verschil tussen wireframe en visueel ontwerp te bekijken.

Ons advies

Omdat wireframes een snelle manier zijn om ideeën te visualiseren en te communiceren, ze draagvlak creëren en ervoor zorgen dat je al in een vroeg stadium problemen kunt tackelen, raden wij aan ze zo veel mogelijk toe passen op projecten. Het zorgt niet alleen voor een vlotter en duidelijker verloop van een project, maar ook voor een beter eindproduct. Het is een hulpmiddel dat tot in de laatste fase van een project waardevol is. Klanten krijgen meer duidelijkheid en het projectteam zelf ook.

Vragen over dit bericht?

Neem contact met ons op