Home » Blog » Wireframes voor je website — door Robert van Eekhout

Wireframes voor je website

De wireframes van je website zijn een onderdeel van je functioneel ontwerp en geven een duidelijke visuele representatie van hoe je pagina eruit komt te zien en welke functionaliteiten die bevat. Hoe zien wireframes eruit, hoe maak je die en wat zijn dingen waar je op moet letten als je ze maakt?

Wat zijn wireframes?

Eerst even naar het begin, want wat zijn wireframes eigenlijk? De wireframes van je website kun je zien als het “skelet” van iedere pagina die in je website komt. Hieronder zie je een voorbeeld van de wireframes die gebruikt zijn voor de blog detail pagina van onze eigen website, de pagina die je nu bekijkt.

Wat je ziet is een schematische weergave van de elementen die op de pagina moeten komen. Bovenin beginnen we met de header, in dit geval het logo links en de menuknop eronder. Dan volgt rechts daarvan de titel van de post, een introtekst, een knop met categorienaam en zo verder tot de onderkant van de pagina.

Zijn wireframes hetzelfde als een design?

Wat je hierboven in het wireframe ziet, lijkt in de verste verte nog niet op het ontwerp van deze pagina. In de wireframes letten we puur op indeling en functionaliteit. Het gebruik van visuals, kleuren en effecten is hier achterwege gelaten. Het is wel zo dat er al wat design “hints” in zitten, dingen waar de ontwerper straks rekening mee moet houden. Bijvoorbeeld de sectie waar gebruikers zich kunnen inschrijven op de nieuwsbrief. Daar zie je twee elementen die speels van elkaar gepositioneerd zijn. Of de horizontale lijnen, die aangeven dat je naar een ander gedeelte van de pagina gaat. Hoe de designer dat oplost en hoe dat eruit komt te zien, dat bepaal je in de designfase.

Begeleidend document

Naast het maken van een wireframe per pagina (of template) maak je bij de wireframes ook een begeleidend document. In dat document geef je per element speciale toelichting over de werking ervan indien dat nodig is. Een goed voorbeeld is de afbeelding helemaal onderaan in de footer met de titel “vliegende koe”. We willen daar een afbeelding van een koe hebben die bij een klik van de gebruiker als het ware “wegvliegt” en de gebruiker automatisch weer helemaal naar boven scrolt. Zulke functionaliteit is niet goed weer te geven in een wireframe, vandaar dat je dat separaat met tekst en uitleg erbij zet. De ontwerper weet dan dat hij een effect moet bedenken voor een koe die wegvliegt en de developer van de site weet dat hij een functie moet inbouwen die bij een klik op de koe de gebruiker naar boven laat scrollen.

Ons advies is om echt alles wat je ziet te beschrijven in een begeleidend schrijven, dit kan onderdeel zijn van het Technisch Document. Sommige zaken lijken heel vanzelfsprekend, maar schijn bedriegt soms. Neem bijvoorbeeld de paragraaf die is weergegeven in het wireframe. Dat is in de wireframe gewoon een stuk tekst, maar grote kans dat je daar straks ook een plaatje in wilt zetten. Daar is nu geen rekening mee gehouden in de wireframes, oftewel, er is nu geen consensus over hoe een inline afbeelding weergegeven moet worden. En er zijn best wat details die je daarin moet afstemmen. Wil je bijvoorbeeld een caption onder de afbeelding of wil je een grote border eromheen? Als je dit soort dingen nu niet vastlegt leidt dat tot verwarring, teleurstelling of discussie achteraf. Een ontwerper en een developer kunnen niet iets ontwerpen of bouwen waarvan ze niet weten dat het bestaat of hoe het eruit ziet.

Door alle elementen in je wireframes na te lopen en te omschrijven geef je duidelijk aan wat je wilt en kom je er snel achter of je zaken vergeten bent toe te voegen in je wireframes. Beter dat je in de wireframefase iets vergeet dan wanneer je website al live staat!

Maak je voor iedere pagina een wireframe?

Nee, in principe maak je alleen wireframes voor de verschillende templates of contentblocks die in je website voorkomen. Je kunt namelijk meerdere pagina’s hebben die allemaal hetzelfde template gebruiken of dezelfde contentblocks hergebruiken. Het template van deze blogpagina is hetzelfde template als de blogpagina die we vorige week gepubliceerd hebben. Twee pagina’s dus, maar ze gebruiken allebei hetzelfde template.

De hoeveelheid templates in een website bepalen voor een groot deel ook de benodigde tijd (en dus de kosten) om een website te realiseren. De kleinste verschillen tussen twee pagina’s kunnen er al voor zorgen dat er twee losse templates gemaakt moeten worden. Bijvoorbeeld, je hebt een wireframe voor een “over ons” pagina. Dat is een vrij eenvoudige pagina met een titel, wat tekst, plaatje, header en footer. Stel je maakt een contactpagina die er precies hetzelfde uitziet, alleen bevat deze pagina aan de rechterkant een extra kolom met contactgegevens van jouw bedrijf. Dat betekent dat je twee losse templates nodig hebt, eentje voor “over ons” en eentje voor “contact”. Dat betekent extra werk voor de ontwerper en extra werk voor de programmeur.

Kijk altijd kritisch naar de hoeveelheid templates die je nodig hebt. Vaak kun je door het doen van kleine concessies grote kostenbesparingen maken. Als je de rechterkolom in je contactpagina weglaat en je contactgegevens als tekst onderaan de pagina zet, spaar je het maken van een extra template uit.

Tip: denk alvast na over de content!

TIjdens de wireframefase leg je alle elementen vast die in je website moeten komen. Eigenlijk is dit ook hét moment om na te denken over de content die je op je website wilt hebben. Wanneer je de wireframes van je website voor je hebt kun je precies zien waar je ruimte hebt voor tekst en kun je dus ook bepalen of je genoeg ruimte hebt, of te weinig of misschien zelfs teveel ruimte. Niks beter dan in deze fase daar alvast voor te corrigeren en aanpassingen te maken. Want beter dat je nu al ziet dat je niet genoeg ruimte hebt (of teveel) voor je content, dan wanneer de site bijna live staat en je erachter komt dat je niet goed uitkomt met de teksten!

Met welke tool maak ik een wireframe?

Er zijn heel veel manieren om wireframes voor je website te maken. De eerste en meest eenvoudige is met pen en papier. Omdat je in een wireframe nog niet pixelperfect hoeft te werken, kun je de elementen globaal intekenen. Wireframes schetsen vereist ook geen enorme tekenvaardigheden dus pen en papier is als eerste opzet goed te gebruiken.

Makkelijker is het uiteraard om dit meteen digitaal te doen. De tool die wij bij Van Ons gebruiken heet Balsamiq Mockups. Met dat programma zet je een canvas op en sleep je alle elementen in je canvas. Het wireframe hierboven is gemaakt met Balsamiq.

Je kunt wireframes ook maken met InDesign of Photoshop. Het nadeel daarvan is dat je wireframes er vanaf het begin – en dit klinkt misschien gek – te mooi uit zien. Met Photoshop en InDesign zijn standaard elementen zo mooi weergegeven of afgewerkt dat je bijna kunt denken dat je wireframes je designs zijn. Om die miscommunicatie te voorkomen adviseren we je een tool te gebruiken die de wireframes zo eenvoudig mogelijk (bijna lelijk) neerzet.



Ook een wireframe maken voor je site?

Bel ons of vul onderstaande formulier in. We nemen dan contact met je op en gaan zo snel mogelijk om tafel om te beginnen met tekenen!