Hoe maak je de beste wireframes?

Een wireframe is de bouwtekening van je website. Deze tekening geeft een overzicht van de verschillende onderdelen die op een website aanwezig zijn, zoals het navigatiemenu, de plaats van tekstblokken en afbeeldingen. Een goed wireframe zorgt ervoor dat je weet wat er gaat gebeuren, voordat de bouw van de website begint.

De kracht van een goed wireframe zit hem in zijn eenvoud. Verplaats je in het hoofd van je klant en bedenk hoe hij zonder enige kennis van je product of dienst door je website zou moeten navigeren.

Lees hieronder in een ultiem 5 stappenplan hoe je een uitstekend wireframe maakt. Veel kun je zelf doen. Het enige dat je ervoor nodig hebt is een flip-over of een whiteboard, een team mensen met gezond verstand en minimaal één persoon met een achtergrond in online marketing. Heb je die niet, bestel er dan een bij ons.

een wireframe ontwerpen

Stap 1 plan een gratis demo

Bepalen wat je met een website wilt is essentieel. Weten of dit ook kan is cruciaal. Plan een gratis demo dan schuif ik graag een keer aan om te vertellen wat het belang is van een goed wireframe voordat je aan de website begint. De demo neemt 15 minuten van je tijd in beslag.

Stap 2 bepaal vooraf wat de behoeftes zijn

De behoeftes van een website vooraf bedenken zorgt ervoor dat de uitvoering sneller verloopt en minder geld kost. Dit doe je door het ontwerpen van een wireframe. Hierin leg je vast wat je van plan bent om te gaan bouwen.

Als je van te voren weet wat je gaat bouwen, wordt het bouwen zelf een stuk makkelijker. Gebruik de onderstaande 7 onmisbare vragen bij het ontwerpen van een wireframe ter voorbereiding op het bouwen van je website. Dat bespaart een hoop stress.

checklist

7 onmisbare vragen bij het ontwerpen van een wireframe

nummer 1   Uit hoeveel pagina’s bestaat de website?

nummer 2   Wat is het doel van de website?

nummer 3   Is er een menu benodigd?

nummer 4   Moet de website in meerdere talen worden geschreven?

nummer 5   Wil je er een zoekfunctie ingebouwd hebben?

nummer 6   Is er een inlogmogelijkheid vereist?

nummer 7   Wat is de CTA (Call To Action)?

Stap 3 ga van start

Nu je weet wat de behoefte is (stap 2) kunnen we gaan bepalen hoe de website eruit moet komen te zien. Het is nu tijd om te beginnen aan de opmaak van het wireframe. Leg bij het bepalen van de structuur de focus op gebruiksvriendelijkheid. Als een bezoeker niet snel genoeg vindt wat hij zoekt, klikt hij weer weg en ben je hem kwijt.

Mannen klikken gemiddeld binnen 3 seconden weg. Vrouwen zijn iets geduldiger en verlaten je pagina als zij niet binnen 5 seconden vinden wat ze zoeken.

Het ontwerpen van een wireframe neemt ongeveer 12-16 uur in beslag, afhankelijk van de complexiteit en het aantal pagina’s. Hulp nodig bij het ontwerpen van een wireframe? Maak een afspraak

voorbeeld van een wireframe

Stap 4 van wireframe naar mock-up

De mock-up is een schets van het eindresultaat. In deze fase wordt er gekeken naar de vormgeving, kleuren, typografie en andere grafische elementen. Lege blokken worden gevuld met afbeeldingen en goede SEO teksten. Daarbij wordt ook rekening gehouden met tone-of-voice en technische haalbaarheid. De mock-up zorgt voor overzicht en geeft een helder beeld van de gebruiksvriendelijkheid. Je kunt nu goed zien waar nog verbeteringen moeten worden toegepast. Met een mock-up wordt orde geschept in de wirwar aan ideeën. Zo kun je als klant makkelijker goede keuzes maken.

Tone-of-voice

Als bedrijf is het belangrijk om gedurende een lange periode consequent een krachtig en eenduidig beeld uit te stralen. Dat roept herkenning op. Herkenning wekt vertrouwen, en vertrouwen verkoopt. Ook online.

Tone-of-voice is de manier waarop een bedrijf of merk communiceert met haar doelgroep.

wireframe

Wireframe

mock up

Mock-up

Stap 5 van mock-up naar prototype

Het prototype brengt je wireframe tot leven. Je krijgt een goed beeld van hoe de website eruit komt te zien. Ook kun je nu testen hoe je eindgebruiker de website ervaart. Dit is tevens het laatste moment om kleine aanpassingen door te voeren. Pak het professioneel aan en laat je wireframe ontwerpen door Marketools. Maak hier een afspraak

nieuwe burotronic website