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.
We draw every wireframe in Figma, so you can follow the structure live and leave comments on the exact spot.
How can we help?
Cases
Get more out of your website
DeDigitaal Clients
Questions about
Wireframe design
How much does a wireframe cost?
Wireframes are part of the project price. On their own, they are a fixed price for a few days of work, depending on the number of pages.
How long does it take to create wireframes?
Creating wireframes takes a week for an average site, including one round of feedback.
Do we need copy ready for the wireframes?
No, but it helps. We work with placeholder text of the right length, so you can see how much fits.
Is a wireframe the same as a prototype?
A wireframe shows structure. A prototype also shows behavior: what happens when you click. Our wireframes are clickable, so they sit somewhere in between.
Can we skip the wireframe phase?
For a single-screen landing page, yes. For anything larger we advise against it, because it is the phase where most of the discussion belongs.