Wireframe ontwerp
De blauwdruk van je site: wat staat waar, in welke volgorde, en waarom. Functioneel ontwerp vóór er een kleur aan te pas komt.
Speelt dit bij jou?
Vertel wat er nu niet werkt of wat te veel tijd kost, dan hoor je wat ik zou doen en wat het ongeveer kost. Je spreekt mij, geen accountmanager.
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.
Waarom eerst een wireframe
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.
Wanneer je dit nodig hebt
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.
Wat erin zit
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.
Hoe wij werken
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.
Wat het kost en hoe lang het duurt
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.
Voor wie niet
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.
Verder lezen
De stap ervoor: strategie en advies. De stap erna: visueel ontwerp. Het geheel: webdesign.
Hoe kunnen we helpen?
Cases
Projecten
Haal meer uit je website
Vragen over
Wireframe ontwerp
Wat kost een wireframe?
Wireframes zijn onderdeel van de projectprijs. Los is het een vaste prijs voor een paar dagen werk, afhankelijk van het aantal pagina's.
Hoe lang duurt het maken van wireframes?
Wireframes maken duurt een week voor een gemiddelde site, inclusief een feedbackronde.
Moeten we al teksten hebben voor de wireframes?
Nee, maar het helpt. We werken met plaatsvervangende tekst in de juiste lengte, zodat je ziet hoeveel er past.
Is een wireframe hetzelfde als een prototype?
Een wireframe toont structuur. Een prototype toont ook gedrag: wat gebeurt er als je klikt. Onze wireframes zijn klikbaar, dus ze zitten ertussenin.
Kunnen we de wireframe-fase overslaan?
Bij een landingspagina van één scherm wel. Bij alles groters raden we het af, omdat het de fase is waar de meeste discussie thuishoort.