Skip to main content

Wireframes: Why We Sketch Before We Style

wireframing

Eyup. If you’ve ever kicked off a website project buzzing to see colours, fonts and pretty pictures, and instead we’ve handed you a screen full of grey boxes, we get it. It looks a bit underwhelming, but that grey box stage, wireframing, is one of the most important bits of the whole build, and skipping it is one of the quickest ways to end up with a website that looks good but doesn’t actually work for the people using it.

So what is a wireframe?

Think of a wireframe as the blueprint for your website. No colours, no branding, no polished imagery, just boxes, lines and labels showing where everything sits on the page. Where the navigation goes. How big the hero section is, where the call to action buttons live and what order the content appears in as someone scrolls down.

Why the plainness matters

When a design looks finished, it’s dead hard for anyone, us included, to focus on anything other than whether they like the colours or the photography. Stick a lovely image and a nice shade of green on a confusing layout and most people won’t clock the confusion, they’ll just say “yeah, looks good” and move on. Then months later you’re wondering why visitors aren’t converting.

Wireframes strip all that away. With nowt to look at but structure, everyone in the room, us, you, your team, can focus purely on one question; does this make sense for the person using it?

It’s all about the user journey

A good website isn’t a collection of nice looking pages, it’s a journey. Someone lands on your site with a problem or a question, and every screen should nudge them a step closer to sorting it, whether that’s booking a call, buying summat, or finding the information they came for.

Wireframing lets us map that journey properly before a single pixel gets polished, which means we can ask the important questions early; is this the first thing a visitor needs to see? Are we asking for too much too soon? Does this button actually make sense here, or is it just sat there because it looks tidy?

Sorting these things out at wireframe stage is much easier than after the full design is built, or worse, after the site’s gone live.

Our approach at Our Agency

Every web project we take on, from a straightforward brochure site to a bespoke web system, starts with wireframing. We map out the key pages and user flows, have a natter with you about how it all hangs together, and only move into full design once everyone’s happy the foundations are sound. It might feel like an extra step, but it’s the step that means the rest of the project runs smoother.

Reyt Good Questions

Yes, and for good reason. Once the structure is agreed, the design team can crack on knowing the layout, content order and user flow are all sound. Signing off wireframes first means far fewer changes further down the line, which keeps your project on time and on budget.

You can, but we wouldn't recommend it. Skipping wireframes might feel like it saves time upfront, but it usually means bigger changes are needed once the full design is built, which takes longer to fix than getting it right from the start. A quick wireframe stage is nearly always faster in the long run.

We use Adobe XD to build wireframes that are clear and easy for clients to review.

We share wireframes with every client before moving into full design, and we talk you through the thinking behind each layout. Your input at this stage is really valuable, you know your customers, and that insight helps us get the structure right before we start styling.

Fancy sorting the foundations of your next website?

Written by

Discovery Call

Book a no-strings attached discovery call to discuss the details of your project and see if it’s a fit for you and us.