Wireframe design
Your site's blueprint: what goes where, in what order, and why. Functional design before any color is applied.
Everyone talks about color and imagery, while the real problem is that no one knows what should be on the site or why.
Does this sound familiar?
Tell me what isn't working or what's taking up too much of your time, and I'll let you know what I would do and roughly what it would cost. You'll be speaking directly to me, not an account manager.
A wireframe is the architectural drawing of your site. It defines which pages and components are included, their order, and what the visitor should do at every point. It excludes color and imagery so that the conversation focuses on structure rather than taste. It is the most cost-effective stage to change your mind.
Why start with a wireframe
Moving a page in a wireframe takes minutes. In a visual design, it takes a day. In a built site, it takes hours and a discussion. A wireframe forces decisions while they are still inexpensive: what goes at the top, what can be removed, and where the visitor needs to go.
When you need this
Always for a new site or application. It is especially important when many people are involved in the decision-making process, when the site has many pages, or when the structure of the current site is the problem rather than the design.
What is included
A sitemap showing all pages and their relationships. A schematic layout for every key page: headings, text blocks, images, buttons, and forms, all in their proper place and proportion. Explanations for each component: what it does and why it is placed there. For applications and portals, this also includes screens behind the login and the steps between them.
How we work
In Figma, which is clickable so you can walk through the site as if it already exists. We start with the homepage and the page where the revenue is generated, then move on to the rest. We process feedback directly in Figma. Once approved, we move on to visual design.
Costs and timeline
A wireframe is part of every website or application project and is included in the fixed price. It can also be done separately, for example, as a basis for a request for proposal from multiple parties. The scope depends on the number of unique page types or screens.
When it is not needed
For a single landing page, a one-screen sketch is sufficient. And for minor adjustments to an existing site, we skip this step.
Read more
The previous step: strategy and consulting. The next step: visual design. The big picture: web design.
How can we help?
Cases
Get more out of your website
DeDigitaal Clients
Questions about
Wireframe design
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.