This is a surprisingly contentious debate, and an important one that determines where the development budget gets spent. Nonetheless, let’s take a few moments to make sure we’re all on the same page before we get into the ‘meat’ of it.

What is wireframing?

A wireframe is a sketch or visual depiction of what a web page or mobile app will look like. They are sometimes called ‘screen blueprints’ or ‘page schematics’ as well. They are used to establish the core elements of a web page’s visual design and functionality – to set down what it will look like and what it will do. It can then be passed on to the designers, developers, copy writers, customers and anyone else involved in the project.

Wireframing, then, is the process of building your wireframe. It means establishing the core functions of your website, the way these functions will be displayed, and the basics of how the user will interact with the site in general. It is (or rather it can be) the first step in virtually all the core processes of website design – visual design, UE, SEO and even organising the actual text.

What does wireframing achieve?

At its core, the process of wireframing is about saving time, effort and expense.

As they say, a picture is worth 1000 words. What wireframes really achieve is getting all of your creative and business stakeholders ‘on the same page’ at the very beginning of a project.

Whether this is achieved by getting them all together to produce the initial wireframe (preferable) or simply having a meeting where they are presented with a completed wireframe before they begin thinking about the project in detail (still quite useful), the process can virtually eliminate the wasted effort that results when your ‘UE guy’ starts working on something inherently incompatible with the template your web designer is producing, and neither of their concepts support the text your marketing team wrote.

It is always worth a small investment of time and effort to get everyone in the same room and brainstorming together, even if you can only spare a few hours. Then they are all actually working on the same project, rather than 4 different, incompatible visions.

When is the right time to wireframe?

Simply put, the sooner the better. Every project should start with a low resolution wire frame, even if it is drawn on the proverbial ‘back of a serviette’. As soon as you get the idea for an app, web page or just about anything else that is both visual and interactive, you need to start wireframing. It will not only help to ‘ground’ your ideas in practical, visual terms, it will establish a core idea which all other work can be made in accordance with, or which can be changed to fit necessity in a way that all the other stakeholders can quickly be made aware of.

When is the right time to stop wireframing?

Here there are 2 schools of thought. Some processes stop wireframing as soon as the coders or UE specialists start producing prototypes and mock-ups. Others keep making updated wireframes to distribute to the rest of the team all the way up until the site or app is coded and put to bed. In either case, keep using wireframes until the issues they represent are decided and finalised.

Who needs to have access to (and input on) these wireframes?

Just about everyone on your project!

Access to the latest wireframe is vital to anyone working on the project, so they can avoid wasting time on features that won’t work, or won’t work the way they had envisioned.

As to the ability to modify wireframes, if you have very large teams, you might do better to only give specific team leaders the ability to alter wireframes or generate new versions. Even then, consider having all modification be made in a meeting with all available stakeholders, so as not to ruin the work of an entire team by making changes they were not aware of.

The more the individuals or teams involved in different aspects of your project actively collaborate, the more efficient your project will become. The more you test, review feedback and make iterations as a group, the better the final product.

How do wireframes impact your process?

Wireframes serve to focus all of your efforts on the same deliverables. They let you test different approaches rapidly, and generate nearly immediate feedback. In the end, the time and effort you invest in wireframing will be repaid several times, especially on larger or more involved projects.

What could skipping wireframes entirely cost you?

The short answer is, as always, ‘that depends on what you are working on’. Realistically, though, we’ve been in the business long enough to give you a real answer, based on averaging the various projects we’ve been involved with over the years.

Wireframing is typically 5-6% of your total development budget. However, it enhances the effectiveness of almost every other aspect of your work. For example: On average the final costs for coding are 60% less for well wireframed projects. RFC (Request For Change) costs typically drop by 80%.

What that means for you is that even if it were to cost 3-4 TIMES what it really does to wireframe, you’d be saving time and money by doing it.

Making the most of a limited wireframe budget

There are a few tips and tricks we can present for doing good wireframing, even if the bean-counters don’t appreciate its real importance:

• Choose a wireframe tool that is easy to use, or one that you already know how to use well. This will save you time getting up to speed.
• Create multiple variations, especially early on. This will let you eliminate unworkable arrangements quickly.
• Get key stakeholders involved early, and incorporate their feedback into new versions.
• Conduct user testing to determine if your wireframe will be usable by your intended audience or market.
• Generate new iterations for the wireframe until all key stakeholders are satisfied (or resigned to compromise).
• Make sure you won’t have to go ‘back to the drawing board’ after design or coding has started.