Wireframes laten maken

Een wireframe is de bouwtekening van je site. Welke pagina's, welke onderdelen, in welke volgorde, en wat de bezoeker op elk punt moet doen. Zonder kleur en beeld, zodat het gesprek gaat over structuur en niet over smaak. Het is de goedkoopste fase om van gedachten te veranderen. Wie wireframes laat maken, legt de basis waar ontwerp, bouw en content later op voortbouwen.

Waarom eerst wireframes laten maken?

Een pagina verplaatsen in een wireframe kost minuten. In een visueel ontwerp kost het een dag. In een gebouwde site kost het uren en een discussie. Een wireframe dwingt keuzes af terwijl ze nog goedkoop zijn: wat staat bovenaan, wat mag weg, waar moet de bezoeker naartoe. Het voorkomt ook dat een ontwerp wordt goedgekeurd op kleur en sfeer, terwijl de structuur eronder niet werkt.

Wanneer heb je een wireframe nodig?

Altijd bij een nieuwe site of applicatie. Extra belangrijk als er veel mensen meepraten, als de site veel pagina's heeft, of als de structuur van de huidige site het probleem is en niet de vormgeving. Een wireframe geeft iedereen hetzelfde beeld om op te reageren, in plaats van losse ideeën in mails en vergaderingen. Zo komen discussies over inhoud en structuur vroeg op tafel, als aanpassen nog goedkoop is.

Wat zit er in een wireframe ontwerp?

Een sitemap met alle pagina's en hun onderlinge relatie. Per belangrijke pagina een schematische opbouw: koppen, tekstblokken, beelden, knoppen, formulieren, op hun plek en in verhouding. Toelichting per onderdeel: wat het doet en waarom het daar staat. Voor applicaties en portals ook de schermen achter de inlog en de stappen ertussen. Zo is vooraf duidelijk wat er gebouwd wordt, voor wie en in welke volgorde.

Hoe wij wireframes maken

In Figma, klikbaar, zodat je door de site kunt lopen alsof hij bestaat. We beginnen met de homepage en de pagina waar het geld wordt verdiend, daarna de rest. Feedback verwerken we in Figma zelf. Na akkoord gaan we door naar visueel ontwerp. Omdat hetzelfde bestand doorloopt, gaat er tussen de stappen niets verloren.

Wat kosten wireframes en hoe lang duurt het?

Een wireframe is onderdeel van elk website- of applicatieproject en zit in de vaste prijs daarvan. Los kan ook, bijvoorbeeld als basis voor een offerteaanvraag bij meerdere partijen. De omvang hangt af van het aantal unieke paginatypes of schermen. Met een wireframe als bijlage krijg je offertes die je wel met elkaar kunt vergelijken. Wireframes laten maken is daarmee ook bij een aanbesteding zinvol.

Wanneer zijn wireframes niet nodig?

Voor een enkele landingspagina is een schets van één scherm genoeg. En bij een kleine aanpassing aan een bestaande site slaan we deze stap over. Dan is het sneller om direct in het ontwerp of op staging te laten zien wat er verandert. Twijfel je, dan zeggen we vooraf of een wireframe iets toevoegt.

Verder lezen

De stap ervoor: strategie en advies. De stap erna: visueel ontwerp. Het geheel: webdesign.