Wireframes

Vervolgens kijken we naar hoe je deze pagina’s logisch kunt indelen. Welke informatie erop moet staan, welke call-to-action knoppen en andere functionaliteiten. Dit gaan we doen aan de hand van Wireframes. 

Een wireframe kun je zien als een schets van de layout van een webpagina. Hierop zijn alle elementen van de interface zichtbaar en zie je op welke plek binnen de pagina ze terecht komen.  

Wireframes zijn enorm belangrijk bij het maken van een website. Op papier kun je namelijk makkelijk een paar verschillende opties voor het ontwerp van de pagina uitproberen, maar als je de pagina direct digitaal zou maken kost dit natuurlijk veel meer tijd dan een simpele schets. 

Het makkelijkste is om wat papier en stiften te pakken en gewoon eens wat schetsen te maken van de belangrijkste webpagina’s. Maar je kunt er natuurlijk ook voor kiezen om de wireframe digitaal te maken. Je kunt dit al eenvoudig doen op de website van Balsamiq: www.balsamiq.com/‎

Start met het maken van het wireframe van jouw homepagina. En kies daarna nog twee pagina’s uit die je alvast wilt uitdenken. 

Een wireframe kan er bijvoorbeeld zo uitzien als een van de onderstaande afbeeldingen. Zoals je ziet is het een globaal plaatje. Er staan nog geen echte teksten of afbeeldingen in. Hier ga je later invulling aangeven. Het belangrijkste is dat je ongeveer weet wat je waar kwijt wilt. Dan is het straks ook duidelijk welke afbeeldingen en teksten je nodig gaat hebben voor jouw website!

Tip: als je niet zo goed weet wat je op elke pagina kwijt wilt bekijk dan eerst het volgende deelhoofdstuk. Daarin staan een paar voorbeelden voor je uitgewerkt.