What are wireframes and why are they important?

Website wireframes are often misunderstood, but they are an invaluable tool and can deliver much more than mere mock-ups. The UX team at Ridgeway examines the pros and cons of wireframing and it’s all in black and white.

I was once presenting a set of wireframes to a client, and had walked them through a couple of pages when I paused to ask for comments. The first reply was “It’s a bit black and white”.

I was mystified, I had been polishing the layout for days… it was at that moment I realised where I was going wrong.

Wireframes are the key tool for planning out an experience where users are able to accomplish their goals with as little friction as possible.

Jeff Dance@ Fresh Consulting

So much emphasis had been placed on the presentation of a polished wireframe, it had been assumed that what we were presenting was the finished design of the website.

We were presenting wireframes in the wrong way, and it was clear their purpose was misunderstood. This made me look at the fundamentals of what a wireframe needs to achieve.

What are wireframes?

Perhaps the easiest way to understand wireframes is to think of them as a blueprint layout that illustrates the structure of key webpages, and a critical part of the interaction design process. A wireframe allows you to rapidly validate and test thinking with stakeholders and users.

Why are wireframes useful?

Wireframes are used to plot user journeys, illustrate planned interactions and discuss strategies based on any objectives set out at the conception of a project. Wireframes provide the project team with valuable insights early on in a project lifecycle, and the ability to learn and make decisions to align goals with stakeholder’s objectives and user feedback.

What are the different types of wireframes?

It’s important that the terminology associated to wireframes is correctly understood to help prevent misunderstandings and misconceptions. How a wireframe manifests can vary from sketches to a fully interactive page layouts which demonstrates functionality .Below explains some details behind what to expect from each fidelity wireframe.

What are low fidelity wireframes?

Low fidelity wireframes contain enough detail to provide a contextual overview of the elements that build a structure of a page. They can be sketches or something more formal that is annotated for presentation. They can also be used to outline any functionality, content flow requirements and interactions that need discussing to help define the scope for key features.

What are medium fidelity wireframes?

A medium fidelity wireframe begins to analyse a project’s core characteristics. They contain proto content into a page to set expectations around content requirements. These wireframes can be used to explore micro copy that will aid the tone of voice of a project.They can alsoadd some basic interactions to explore user journeys and open up discussions around the shape of your solution with both stakeholders and users.

Example wireframe (medium fidelity) with annotations:

Medium fidelity wireframe

Interactive wireframes rewrite the rules of functionality and design

Once a structure is set, an interactive wireframe is built. Exploring interactions between elements has huge benefits for a project and allows you to play the role of the user. For example, you can evolve the wireframe into a functional tool, where any usability issues can be addressed.

The ability to demonstrate interactivity will also open up broader discussions around functionality and enables a clearer understanding of how a component or page will come together.

This allows for more accurate estimates for front and back end development.,

Interactive wireframes also help to share conclusions with stakeholders and users allowing you to build further insight, and assess how a user will behave and react to your solution.

How does Ridgeway use wireframing?

We initially use sketches to flesh out early stage thinking for a project. This is a session that takes place between the UX Team and the Development Team.

The UX team discuss ideas based on the outcomes and objectives set out during the discovery workshops with a client. The sketches provide the Development Team with a structure to begin creating a functional specification.

The UX Team use the sketches toexplore the structure and interactions across devices to generate a set of interactive wireframes.

What are the best tools for wireframing and prototyping?

At this point we use Axure to build layouts that provide us with a view of all the templates, components and widgets a page will require. These are created at a level of fidelity that will allow us to share, discuss and ultimately test with stakeholders and the project team.

Wireframes form a fundamental cog in a project’s lifecycle. We reference them at all stages of our projects as the best reflection of the functional discussions between the project teams and project stakeholders.

Making the most from wireframing

Wireframes are so much more than just a black and white design, and it is crucial that their purpose is explained to avoid confusion as it can be a costly exercise.

A wireframe needs to be flexible and easy to update based on ideas that are uncovered during discussions with the wider project team.

Labouring over the details in a wireframe can only cause issues, wireframes are not meant to be visually appealing, they need to be functional. Wireframes are used to clearly demonstrate where the page content and functionality are positioned for users, and to give designers and developers the core information they need to move a project forward.

A good wireframe is a collaborative tool that encourages project teams and stakeholders to constructively discuss and focus on engagement in line with objectives and goals.