Website Wireframing and Prototyping UK

What wireframes and prototypes are

A wireframe is a simple plan of a page: boxes for the header, headline, text, images, buttons and forms, in the order they'll appear. It deliberately leaves out colours, fonts and photos, so the conversation stays on what the page needs to say and do. Think of it as the floor plan before choosing the paint.

A prototype links those screens together. You can click the menu, open a service page, press "Get a quote" and see the form, all before a line of code exists. Prototypes can be low fidelity, using the grey wireframes, or high fidelity, using finished UI designs that look like the real site.

Why plan before you design

Moving a box in a wireframe takes a minute. Moving a section after it has been designed, coded and filled with content can take a day, and it often breaks something else. Wireframing front-loads the important decisions:

• which pages exist and what each one is for
• what appears first on the home page on a phone screen
• where the main call to action sits and how often it repeats
• what fields the enquiry form needs
• how a visitor gets from a search result to contacting you

It also stops the common problem where a pretty design is approved, then the real content doesn't fit it. Wireframes use real headings and realistic text lengths wherever we can.

How we wireframe in Figma

1. Sitemap. We start with the page list and navigation, based on the UX work and the searches customers make.
2. Sketches. Quick low-fidelity layouts to compare two or three approaches for the home page and a service page.
3. Mid-fidelity wireframes. Proper grey layouts on a responsive grid, drawn at a mobile width of around 390 pixels and a desktop width of around 1440 pixels, using Figma auto layout so sections stretch and stack realistically.
4. Prototype. We connect screens with Figma's prototyping links so you can click through the main journeys on your laptop or phone.
5. Feedback. You and your colleagues leave comments pinned to the exact spot in Figma. We resolve them and update the file.

You see everything in your browser through a shared link; there's no software to buy.

Testing a prototype before you build

A clickable prototype is the cheapest place to find out whether people understand your site. We give a few people who match your customers a task, such as finding opening hours and booking an appointment, and watch where they hesitate. Problems found here cost almost nothing to fix. It's especially worth doing for booking sites, shops with complex filters and any site with a multi-step form.

Standalone wireframing for your team

Not every client needs us to build the site. We also produce wireframes and prototypes for in-house teams, freelance developers, agencies who need extra planning capacity, and businesses that want a clear brief before asking for quotes. You get an annotated Figma file explaining how each component behaves, what happens on errors, which content is editable and how layouts change on mobile, so a developer can build from it without guessing.

Wireframes also make quotes more accurate. If you plan to ask three developers to price a build, giving each the same annotated prototype means they quote for the same thing, and you can compare like with like instead of trying to decode three different interpretations of a written brief.

Price

Wireframes are part of every website we design: Starter from £250 + VAT, Business from £500 + VAT and Ecommerce from £750 + VAT. Standalone wireframing and prototyping is charged at £45 an hour + VAT, with the hours agreed before we start. A small brochure site might need a day; a shop or booking journey with several templates takes longer. See pricing or get in touch.

What you get

• Sitemap showing every page and how they connect
• Low-fidelity sketches to agree direction quickly
• Mid-fidelity wireframes for key templates at desktop and mobile widths
• Clickable Figma prototype of the main user journeys
• Annotations explaining behaviour, content and form rules
• Feedback rounds through Figma comments
• Handover file your developer can build from

Prices and how it works

Websites from £250 + VAT, business websites from £500 + VAT and ecommerce from £750 + VAT. Small changes are £45 an hour + VAT. You get a fixed quote before we start.

1. Free chat

   Tell us about your business, who your customers are and what the website needs to do. No charge, no obligation.

2. Fixed quote

   You get a fixed price and a clear list of what is included, in writing, before anything starts.

3. Design

   We plan the pages and design the site around your customers, then share it for your comments.

4. Build and test

   We build it mobile-first, write or polish the copy, set up SEO foundations and test it on real phones.

5. Launch and hand over

   We launch, connect analytics and Search Console, and show you how to update it. You own it all.

Related