Zo maak je wireframes voor je website
Bij het maken van een webshop, webapplicatie of website zijn wireframes onmisbaar. Maar hoe maak je ze effectief? Hieronder bespreken wij een aantal praktische mogelijkheden.
Wat zijn wireframes?
Je kan het vergelijken met een bouwtekening van je woning. Net zoals bij een woning is er bij het bouwen van een website e.d. ook een goed uitgetekend plan nodig. Bij een wireframe ligt de focus voornamelijk op de structuur en opbouw en minder op het design van je website. Door een onderscheid te maken tussen deze werkzaamheden kun je je beter focussen.
Let bij een wireframe op:
- Functionaliteit: Welke acties en functies kunnen er op de webshop/website uitgevoerd worden
- Layout: hoe is de indeling en verdeling?
- Structuur: Welke route gebruiken je gebruikers op je webshop/website
- Navigatie: de links op de pagina’s en het menu
Waarom is een wireframe een must?
Als je focus voornamelijk ligt op user experience (oftewel interactie met de gebruiker) is het erg handig om een wireframe te hebben. Een wireframe kan als leidraad gebruikt worden voor je developers, designers, copywriters en testers. Je schets in feite sneller een idee voor je interface. Er wordt nu nog niet gefocust op kleuren, afbeeldingen en lettertypes dit zorgt namelijk voor afleiding en kost daardoor ook tijd.
Voordat je aan een wireframe begint moet je wel de doelgroep(en) en doel van de website/webshop weten. Vooral in de complexere projecten kan een wireframe best veel werk zijn en tijd kosten maar op de langere termijn zorgt het ervoor dat de stappen erna sneller en efficiënter verlopen.
Ook kan een wireframe gebruikt worden als communicatiemiddel omdat ze visueel zijn en gemakkelijker aan te passen. Zodra de wireframe is goedgekeurd kan je je focus verplaatsen naar het design van website.
Hoe maak je een wireframe?
Er zijn verschillende manier om een wireframe te maken: ze hebben allemaal zo hun voor- en nadelen:
- Pen en papier
Voordelen: het staat meteen op papier en iedereen kan het
Nadelen: het delen van de wireframe is lastig en het is moeilijk aan te passen.
- Photoshop, Illustrator of Sketch
Voordelen: zijn gratis te gebruiken en makkelijk te delen
- CC
Voordelen: makkelijk te delen en geen (of gratis account) nodig om wireframe te maken en te linken.
- Balsamiq
Voordelen: eenvoudige werking maar met alsnog een heleboel functies.
Nadelen: betaald (maar wel als 30 days free trial beschikbaar)
Direct beginnen met wireframes
Het belangrijkste aan een wireframe is niet hoe je het maakt of hoe het eruit ziet maar wat het eindresultaat is. Onze ervaring is dat een wireframe een essentieel onderdeel is van een digitaal project. Elk project heeft met een wireframe meer kans om succesvol te zijn. Ga er dus z.s.m. mee aan de slag en kies een methode die jij het makkelijkst vindt werken.
