Part of: UX
Website wireframing and prototyping
Wireframing and prototyping let you agree how your website is organised and how it behaves before anyone builds it. We start with simple layouts, move to interactive prototypes you can click through and hand off clearly to theme development, so changes are made on paper, not in code.
Is this right for you?
Who it is for
Stores planning a rebuild or migration, teams launching new templates or landing pages, and anyone who wants to see and agree a structure before paying for development.
When it is not
Small changes to an existing page, which are usually quicker to make directly. Also not the right fit if the structure has been decided and you only need the build.
What is included
- Low-fidelity wireframes for key templates, covering structure and content order
- High-fidelity designs for the pages that matter most, using your brand
- An interactive prototype to click through on desktop and mobile
- Notes on behaviour, such as menus, filters, the basket drawer and form errors
- A hand-off pack for developers, with spacing, states and content notes
- A short review session to agree changes before build starts
Who wireframing and prototyping is for
Wireframes and prototypes suit anyone about to commit to a build. That might be a new store, a move from another platform, a redesigned product page or a new set of landing pages. They make disagreements visible while changing them still costs very little.
If you only need a small change to a page that exists, you probably do not need this. It is usually quicker to make it directly. If you are unsure what the problems are, UX research is a better place to start.
What is included
We begin with low-fidelity wireframes for the templates that matter, such as the homepage, collection, product, basket and key landing pages. Then we create high-fidelity designs for the most important pages and join them into an interactive prototype. You can click through it on a phone and a laptop before anything is built.
The prototype also records behaviour that a still image cannot show, such as how filters open or what happens when a form has an error. The hand-off pack gathers spacing, states and content notes for developers.
You receive the wireframes, the high-fidelity designs and a clickable prototype in Figma, plus a PDF of the key screens and the hand-off notes. A typical project covers the homepage, a collection page, a product page, the basket and one or two key landing pages.
How we do it
We work in rounds. First comes structure, then appearance, then behaviour. Each round is reviewed with you before the next, so you are never asked to react to a finished design.
When the design is agreed, it goes to the people building it. For many clients that is our own Shopify development, where the prototype becomes the brief. The same process works for lead-gen websites, where the order of information and the placement of calls to action matter most.
What it costs
Wireframing is priced by scope, usually by the number of templates, and can be part of a wider build. See pricing for how we approach it.
Priced per project, with a fixed quote in writing before work starts. Up to three rounds of revisions are included. See the pricing page.
What we measure
A prototype is a plan, so we do not claim results from it. We check whether the people who will use it can complete the main tasks, whether the stakeholders agree on the structure and whether developers can build from it without constant questions. When the build is live, we agree what to track, so the effect of the change can be seen honestly.
Where it connects
If you are building pages for a campaign, wireframing works well alongside landing page optimisation, where the message and layout need to match the advert that brought people there.
How we do it
Every project is different, so timings depend on its size and complexity. You get a realistic timeline in writing before work starts, and we never promise results by a date.
Step 1: Plan
We agree the pages and journeys that matter, using your analytics, any research and your brand. A typical project covers the homepage, a collection page, a product page, the basket and one or two key landing pages, and we agree the list in the quote.
Step 2: Sketch
We create simple wireframes that show structure and content order, without colour or imagery getting in the way.
Step 3: Design
We apply your brand to the important pages and turn them into an interactive prototype you can try on a phone.
Step 4: Hand off
We prepare the files and notes for developers and stay available while the theme is built.
What it costs
We price this by what you need, so you can start small and add stages later. You see the quote in writing before work starts. Our pricing page explains how we approach design and creative work.
Questions people ask
What is the difference between a wireframe and a prototype?
A wireframe is a simple layout that shows what goes where. A prototype is a clickable version that shows how the pages behave, so you can try the menu, filters and basket before anything is built.
What is the difference between low and high fidelity?
Low fidelity is plain boxes and text, which keeps the conversation on structure. High fidelity uses your colours, type and images, so you can judge the look and feel as well.
Which tool do you use?
We design and prototype in Figma, so you can click through the work and leave comments. If your team works in another tool, we hand over files it can use.
Do you hand over to our developers, or build it as well?
Either. The hand-off is written so any competent developer can work from it. If you want us to build it, the next step is Shopify development, and the prototype becomes the brief.
Do I need wireframes for a small store?
Not always. For a few template changes, working directly may be quicker. Wireframes pay off when the structure is changing, when several people need to agree or when a rebuild is expensive to change.
Will a better structure increase conversion?
A clearer structure often makes it easier for people to find what they want. We cannot promise a specific result. Prototype testing and later experiments are how we check the change is working.
Ready to talk it through?
Get a free UX and conversion review of your website, focused on how your creative affects performance. A subject matter expert at Advent reviews it, and we aim to send it within 5 working days.