Wat betekend een wireframe eigenlijk?

Wanneer we spreken van de ontwikkeling van een wireframe binnen de website-ontwikkeling, hebben we het feitelijk over het ontwikkelen van een schetsmatig raamwerk van de website / webshop met haar functies. Zie het als een blauwdruk voor een gebouw. Eerst zet je schetsmatig op papier waar alle muren en elementen komen te staan, en vervolgens ga je ze verder concretiseren en invullen.

Wanneer begin je met het maken van een wireframe?

Het traject voor een wireframe is meestal redelijk aan het begin van de ontwikkeling van een website, webshop of app. Nadat je de behoeften hebt geïnventariseerd en alle must- en should haves op papier hebt gezet in de vorm van een functioneel ontwerp of projectvoorstel kunnen we beginnen met het schetsen.

In de basis starten we vaak met het uitschetsen van de homepage. Heb je het in dit geval over een webshop, dan leggen we vast waar de menu’s gaan komen, hoe de categorieën worden weergeven, wat de plaats gaat worden van het account en winkelwagentje. Ook een vlakverdeling van producten en reguliere (SEO) content vullen we in aan de hand van blokken.

Stap voor stap

Ben je klaar met de homepage, dan weet je over het algemeen beter welke pagina’s je nog meer moet maken. Over het algemeen dient een homepage namelijk als verzamelhub voor de rest. Gaandeweg krijg je op deze manier een verzameling aan pagina’s die de hele website beslaat. Ook pagina’s waar je misschien in eerste instantie niet meteen aan denkt, zal je op deze manier beter kunnen afvangen. In het onderstaande voorbeeld zie je hoe een wireframe er uit kan zien. In dit geval is het gebruikte voorbeeld een wireframe voor de nieuwe shop van PeterPrint.

De voordelen

Nu we alle pagina’s als raamwerk hebben uitgewerkt, weten we precies welke pagina’s in het ontwerptraject ontwerpen moeten worden. Als opdrachtgever en opdrachtnemer heb je hierbij het voordeel dat je precies weet welke pagina’s er gaan komen. Je krijgt een goed beeld van de scope van een project. Handig voor het maken van een realistische planning.

Daarnaast is het maken van iteraties binnen wireframes een stuk gemakkelijker. Je hebt immers conceptueel schetsen gemaakt die nog weinig detail bevatten en daardoor makkelijk aan te passen zijn. In een ontwerp zijn pagina elementen over het algemeen geoptimaliseerd voor een bepaalde locatie. Ga je deze verslepen, dan zal je deze opmaak (deels) moeten wijzigen. De veranderingen die je normaal gesproken in een ontwerpfase zou moeten doorvoeren ná een wireframefase zijn over het algemeen een stuk beperkter. Dit kan uiteindelijk een behoorlijke positieve impact hebben op de kosten.

En daarom..

Mede hierdoor raden we over het algemeen bij de ontwikkeling van een wat grotere website of webshop aan om te starten met een wireframetraject. Neem vrijblijvend contact met ons op om de mogelijkheden te bekijken voor jouw project.