Why Bother with Wireframes?

If you've received a wireframe without an explanation of what it is, you might be a little confused. With monochrome squares, rough lines, a placeholder logo, it can feel like an unecessary step in the design process. Here's why it's more important than you might think.

What is a wireframe?

A wireframe is a simple layout, usually without colour or decoration, used to outline the balance and layout of content, elements, features and navigation. Wireframes are deliberately kept simple to convey the structure of a website or app without getting lost in the details of visual design elements or content structure.

A wireframe can be a simple sketch on paper or a digital layout in a graphic editing or wireframing program. The complexity and medium for creating a wireframe will depend on the needs of the individual project.

A wireframe is not:

• A fully rendered design. Don't worry, your logo, fonts and colours will be there in there once we get to the visual aesthetics part of the design process!
• A finished website/app. Depending on the wireframe you might get some degree of interaction, but this is mainly to get an idea of layouts and how the parts fit together, so don't expect everything to work perfectly.
• The final say. The purpose of wireframes is to get everyone on board with the layout and structure, so if there are changes to be made then this is the best time to make them, rather than later in the process where they will take more time to implement.

Why are wireframes important?

1. Wireframes are quick to create.

Whilst it will depend on the project, wireframes are always faster to create than a fully rendered design or a complete working website. For this reason, the wireframe process is the best time to explore possible options and refine the layout and usability of a project, without having to worry about wasting time on details that aren't needed.

2. Wireframes are quick to edit.

Think of them as similar to house blueprints - making a change to the blueprint is much faster (and cheaper) than making changes once building has begun. Having a wireframe gives stakeholders a chance to understand the layout and request changes at an early stage in the process.

3. Wireframes make it easy to focus on what is important.

It can be easy to get caught up in colours or typefaces in design and miss important aspects of the layout and the delivery of content. Adding a stage just focused on these aspects allows everyone to see the “bones” of the page without just having a reaction to colour choices.

4. Wireframes help avoid mistakes, early.

Some things aren't clear until they're laid out on a page - a vital missing call to action, a structure that doesn't communicate the content clearly or a phone number that needs more prominence. Exploring different layouts through wireframes can help us craft the perfect homepage, and spot those simple mistakes early in the process, making them easy to address.

5. Wireframes can save time.

Once a wireframe has been approved, the more refined stage of the design process can begin with the confidence that the structure of the website or app is right for the job. Spending time on the planning and wireframing stage of the process will save time during the visual treatments down the track, as the scaffolding is already complete.

6. Wireframes show the information hierarchy.

A sitemap doesn't tell the whole story, especially for content within a page. A wireframe can make clear how pieces of content rank within the page, which ones might need to move up or be given more prominence, and where content is lacking.

7. Wireframes include the whole team.

Whilst one designer might be in charge of creating wireframes, the account manager, developer, and key stakeholders will often be involved in the process to make sure that everything looks correct and doable. This communication early on keeps the project running smoothly.

Summary

Including wireframing as part of the design process might feel like it's adding an extra step, but doing so can save time, frustration and changes down the track. The more complex the website or app and the user flow, the more important that this step becomes in figuring out the details and building a usable and high-quality product.