Specialism · Wireframing
Wireframing: structure first, then design.
With wireframes we lay out a page or website schematically, without colours or photos. That way you first agree with head office, the locations and the web developer what needs to go where, before anything is designed and built.
When
Time for wireframing if…
- you’re having a new website or location page built
- design discussions get stuck on colours and photos
- the route from brand to location doesn’t feel logical
- the web developer and marketing don’t have the same picture in mind
What we do
From customer journey to a blueprint for the build.
- 01
Customer journey
We map out the steps a visitor takes, from search result to an appointment at the location.
- 02
Wireframes
For each page type we create a schematic layout with the elements that help the visitor move forward.
- 03
Alignment
We gather feedback and make sure design and development carry on from the same blueprint.
What wireframing is
A wireframe is the blueprint of a page.
A wireframe is a simplified representation of a website, app or other digital product. It shows the structure and layout: which blocks there are, in what order and roughly how big. You deliberately leave out colours, fonts and photos.
That makes for a better conversation. You talk about what the visitor needs and where it should go, not about the shade of a button. That way you map out which elements help the visitor along the customer journey and where they should go.
- Wireframe: the structure and layout, without styling
- Mock-up: the same, but with colours, images and typography
- Prototype: a clickable model you can use to test how it works
Wireframing and UX
Wireframing as part of UX and CRO.
Wireframing is a standard part of our UX work. With a wireframe we map out the website’s structure and the routes visitors take. It helps to gather feedback and to get marketing and development aligned.
For a franchise we usually create wireframes for a few templates that recur everywhere: the homepage, the location finder, the location page and the service or product page. Every location then benefits from the same well-thought-out structure, with room for local content within the brand guidelines.
Part of
Every specialism works for the whole franchise brand.
This specialism is part of Hybrid and On-demand, used for the brand and for every location. Not a franchise, but still have a question? You can also hire us for this on its own.
Other specialisms
Frequently asked questions
About wireframing.
What’s the difference between wireframes, mock-ups and prototypes?
A wireframe shows the structure. A mock-up adds the styling. A prototype is an interactive model you can click through to test how it works.
How detailed should a wireframe be?
Detailed enough to understand the layout and how it works, but without graphic detail. The focus is on the structure and the visitor’s next step.
Who uses wireframes?
Web designers, UX designers, developers and project managers. For a franchise, head office too, so everyone has the same picture before the build begins.
Which tools do you use to make a wireframe?
There are lots of tools, such as Balsamiq, Sketch, Adobe XD and Miro. The tool makes little difference to the result. What matters is the choices you capture in it.
A good conversation first, then a plan.
In one hour we discuss where you stand and which opportunities we see. If we are not the right fit, we will tell you.