2017 Sep 28

As a UX designer I spend a lot of time creating wireframes. They are an essential part of the design process because they allow me to visually communicate research findings and explore design solutions.  Through wireframes I am able to map out user flows and visual hierarchies without having to create pixel perfect designs.

Wireframes are great for reaching a shared understanding with stakeholders, but they can be hard to conceptualize if you are not used to seeing them. Wireframes can feel sketchy and inadequate because they represent work-in-progress.  The majority of people only see and interact with final designs.  It can be hard to visualize the final product and understand functionality within a static black and white image.  

Despite this difficulty, I believe that skipping the wireframe phase is a big mistake!  I am a strong proponent for sharing work early and often.  In this article I will outline important benefits of creating and sharing wireframes.  But first, let’s start from the beginning...

What is a wireframe?

sample wireframe

Wireframes are the blueprint for your website or digital product. They use simple black and white layouts to outline structure and functionality.  Wireframes can range in levels of fidelity from rough sketches to very detailed digital representations.  The level of detail necessary depends on the ideas being communicated and your audience.  

Wireframes are purposely devoid of design elements such as colour, typography and images.  By doing this, wireframes allow you to focus on structure and functionality, without getting caught up in design decisions.  

It is also common for wireframes to be heavily annotated with design rationale and behavioural requirements. This is especially important for collaboration between design and development.  Wireframes bring development teams to the table sooner, so technical considerations can be brought to light.


Why are wireframes important?

1) Visually display navigation

Well-constructed navigation is essential for usability and consequently very important to get right.  Wireframes are the first step in creating a visual representation of your sitemap.  They take an abstract flow chart or navigational tree and turn it into something real and tangible. When navigation is well designed it becomes intuitive for your users to find the information they are looking for and complete their goals.

wireframes showing navigation

2) Create a visual hierarchy

Wireframes help organize and structure content to improve findability and discoverability.  It is important to create a visual hierarchy for your pages.  Essential information should be prominent and secondary information close at hand.  Through the placement and size of elements we try to guide users in their tasks and anticipate their needs.  Wireframes are a great way to evaluate the overall layout of your application.

wireframe showing visual hierarchy

3) Focus on usability and the user experience

When you create full colour mockups it is very easy to get caught up in minute design choices such as font-weight, drop shadows and colour gradients.  Wireframes remove these decisions and instead let you focus on the user experience.  With your target users in mind, wireframes organize the interface, map out transitions, and define interactions.  They are a great way of converting your research into a great design.  

wireframe showing a user flow

4) Allows for iterative design and early feedback

Starting with wireframes and sharing them early provides an opportunity for testing, analyzing, and refining.  If you have worked on a digital project then you know, it is easier and cheaper to make revisions sooner rather than later.  Sharing wireframes with the project team helps everyone reach a shared understanding and gives better visibility into progress at each iteration.

iterative wireframes

5) Provides clarity for the development team

Clear communication and close collaboration between design and development teams is essential for a successful project.  Wireframes provide visual clarity for functional requirements.  They work better than final designs for development handoff because the focus is on clarity and functionality rather than look and feel.  Wireframes can be annotated with technical specifications and used to supplement more traditional requirement documents.

design to development handoff

In Conclusion

Building something is a process and each step along the way contributes to the final product.  Wireframes serve an essential role in assuring that what you build makes sense and delights your users.  You wouldn’t build a house without first reviewing blueprints and I’d argue that you shouldn’t design a digital product without first reviewing wireframes.  Trust me, it is time well spent!