De blauwdruk van jouw website onder de loep nemen is belangrijk om inzicht te krijgen in hoe de website in elkaar zit.

De basisstructuur van een webpagina geschetst als wireframe.

Het wireframe is een schematische weergave van een website met daarin de visuele representatie met structuur en indeling van een website of applicatie. De belangrijkste knoppen zoals navigatie, knoppen, formulieren en bepaalde inhoudsgebieden zijn in een blauwdruk weergegeven. Dit is vaak op A4-formaat en wordt weleens uitgelegd op een tafel om hier overheen te kijken.

Een eenvoudige weergave zonder gedetailleerde ontwerpelementen, zonder uitgebreide kleuren of afbeeldingen. De nadruk ligt op functionaliteit en gebruiksvriendelijkheid. Zo weet je wat de indeling is van de website en designers en webbouwers kunnen dit altijd raadplegen om een overzicht te krijgen van deze bouwtekening.

Het doel van wireframes is om duidelijkheid te krijgen van de opbouw van de website en de focus ligt dan niet op de content die wordt geplaatst. Je maakt een verbinding in de informatiearchitectuur zodat dit logisch verloopt. Hieraan kun je bepaalde functionaliteiten koppelen en daaraan gekoppelde informatie.

Wireframe tools

Je hebt verschillende wireframetools om een design te maken. Snel en efficiënt een mock-up maken van een design op een snelle gemakkelijke manier. Een goede tool heeft een gebruiksvriendelijk interface. Schaalbare mock-ups waarin je kunt samenwerken. Daarnaast zijn exportopties van belang zodat je de HTML-code of basis CSS-code gemakkelijk kunt gebruiken bij het ontwikkelen van de website. Je hebt veel wireframe tools, hier een aantal tools om te overwegen: Figma, Adobe XD, Sketch, Lucidchart, Justinmind, Uizard, Balsamiq Wireframes, Mockflow, Moqups, Framer, Mockplus, Visio en UXPin.

Maak een duidelijke overzichtelijke opzet van jouw website met behulp van een wireframe. Designers en webbouwers kunnen dit document raadplegen en hierop voort te bouwen.