Anthony Mcloughlin

The chances are that you will have heard the term “wireframing” when working with web designers in the past. However, many people are still unsure about what this means for their company and web presence.

What is a wireframe?

The process of wireframing refers to the design period in which clients and web experts come together to determine the informational hierarchy of a webpage, so that it’s easier to plan the arrangement of content, and user experience. Wireframes are simple, low fidelity layouts that outline the placement and rough size of specific page elements, from conversion areas, to site features. Wireframes ensure that each page has a purpose, achieves the goals set out in the client brief and define a logical navigation for your website.

Wireframes are devoid of any artistic choices regarding font, logos, or colour, because they focus entirely on the structural elements of the website. In a way, the wireframe allows you to work on the foundation of your website, before you add all the aesthetic appeal. Making structural changes to a low fidelity wireframe is much faster than making structural changes to a fully designed page concept.

wireframe before and after example

What Makes Wireframing so Useful?

So, why do designers set out creating the skeleton for their new website project with wireframing? Why don’t they simply jump into the fun stuff by creating beautiful and detailed designs from scratch? Many clients can get carried away with the excitement of creating a website, and forget that without a strong foundation, the surrounding website could be inefficient.

During a wireframe project, web designers have the chance to focus on user experience only – the factor that matters most to everything from conversion, to customer loyalty. Without the distraction of fonts, colours and imagery, wireframes can allow designers to work on the underlying elements of a website, and eliminate the need for expensive changes in the long-run.

Here are five key reasons why you should consider wireframing as a key element of any web design project.

1. Developing Layout and Structure

Most companies begin developing a website with a long list of ideas in mind about features and content that they would like to include. Wireframes help a designer to determine which elements should be included in each page, and the functionality requirements that need to be set in place for those elements.

Simply put, a wireframe allows designer and client to work together in creating a solid page structure before the design is fully implemented.

2. Creating an Informational Hierarchy

Another important benefit of wireframing is that it allows companies to forget about styles and colours so that they can focus on the essential elements of navigation and information. Creators can ask themselves what they want their users to do when they visit their website, and establish the information that needs to be provided to move the user along to the correct pages, and find the information they need.

When a wireframe is created, designers and clients can see which page elements are more important than others, and the black-and-white or low fidelity nature of the frame allows each person to easily see how the information on each page falls neatly into place.

3. Focusing on User Experience

As we mentioned above, wireframes have the unique ability to draw unparalleled attention to the basic structure and function of a website – the elements that will have an impact on user experience. Designers who skip the wireframing phase can easily get caught up in the elements of making a site look good, and forget about things much more important than design – such as usability, functionality and user experience.

By eliminating imagery, colour, and other details, a designer is able to think more about the functionality of each element on a page, placing a strong focus on developing the best possible user experience.

4. Clarifying Features

Wireframing helps you to determine which features are wanted on a website, and which elements are needed. In the early stages of development, clients and web designers can work together to try out different potential applications and tools that might offer better usability to their visitors, to aid conversions.

Sometimes, you may choose to remove a feature once it has been wireframed because you can see that it simply doesn’t help towards the goals of your website. Seeing features without creative influence can help you to focus on clarifying which elements really matter.

5. Saving Time

Finally, one of the biggest benefits of any wireframing project is that it saves time in the long-run. While it may seem like more effort to dedicate a few days to producing a full set of of wireframes, it actually saves time throughout the project lifecycle.

Designers lucky enough to have a UX team behind them will receive the approved wireframes from which to design to. This makes their phase of the process much simpler, as they no longer have to spend the time (which comes with the added pressure) of ensuring that each page has a flow and a purpose. They can simply do what they do best; make a low fidelity wireframe look pretty by turning it into a full design concept.

 A Process for Specifying your Website

Perhaps the most important thing to remember when considering the usefulness of wireframes in web design, is that wireframing allows you to think through problems carefully and determine the performance of your website. Like other aspects of a development process however, wireframing can have pitfalls if shortcuts are taken.

Remember, when creating the perfect responsive wireframe, you should avoid:

1. Placing an emphasis on design and colour: Working in greyscale helps to maintain the focus on the functional process of designing a website. The idea is to finalise structure, layout and purpose of the page; not the design.

2. Adding too much detail: You can always apply extra detail to show to your clients and team in the latter stages of a project, but starting with too much detail can lead to confusion. Try to keep wireframes low-fidelity to make the process as simple and as straightforward as possible. Think grey rectangle for image blocks and Lorem Ipsum for body copy.

3. Creating a wireframe for every possibility: Wireframing is a great way to try out different ideas, but you need to settle on a concept eventually. Stick to only what is important for your business or client, and avoid getting carried away with a range of different features and structures. e.g. Create one ‘Default Pagetype’ wireframe as opposed to creating a Terms and Conditions wireframe, a Privacy Policy wireframe etc. since these types of pages will follow the same default structure in most cases.

Featured image credit: Aurimas via Flickr. Licensed under CC 2.0

Share this post

Was this article useful?

Subscribe to our monthly mailing list to receive more articles like this.

Anthony Mcloughlin

Posted By Anthony Mcloughlin

Anthony is a key member of the digital team at Tone, helping dig deep into stats to further understand user behaviours. Follow him on Twitter @anthony_mac85 and on Google+