Our Blog

10 Reasons for Wireframing

Wireframes are an important first step in website development. In essence a wireframe is an outline or blueprint of the functionality and navigation of the proposed website. They do not include colours, fonts or web copy – their purpose it to focus attention on the layout of the proposed website. In other words, wireframes help to visualise the interface elements and navigation of the site and how they will interact together.

There are three different types of wireframes:

• Low fidelity wireframes – These are very basic and are often drawn in Balsamiq for a simple hand-drawn look. Their purpose is to explore possible design layouts and navigation systems for the website. They are useful for tight timelines as they can be created and changed quickly. One surprising advantage of using low fidelity wireframes is that clients can be more honest in their opinions of the layout and navigation. This is because they feel that less work has been involved in creating a simple sketch compared to a demo website. So they believe that making changes won’t involve a lot of work and feel free to be honest in their opinions.
• Mid fidelity wireframes – These can be considered as prototypes of the proposed website. They are midway between a rough outline and a demo site, but still resemble the sketchiness of the low fidelity wireframes. The difference is that these include a higher level of functionality and information architecture (IA) as well as including place holders for web copy. These are often produced in Mockingbird but can also be created in Balsamiq.
• High fidelity wireframes – These fill in the details missing in low and mid fidelity wireframes. They are a mock-up of the final design and include colours, white space, samples of imagery and web copy. They give the client a good visual impression of the completed layout and navigation of the site. This is the final step before branding and full copy are included. High fidelity wireframes are often created in Photoshop.

Skipping wireframes can come back to bite you later on when the inevitable design changes need to be made. So in a nutshell – here are 10 reasons why your website should be wireframed before designing and developing:

1. Low fidelity wireframes show just enough detail to help the client clarify and conceptualise their goals and strategies for the website at the beginning of the design process.
2. Wireframes optimise workflow, are a more efficient use of both the developers and the client’s time and are more cost-effective than going directly to a demo site. The time it takes to create a wireframe will be repaid time and time again by not having to make complex changes at the demo stage. They make the project faster and cheaper for the client.
3. Functionality and navigation can be tested, refined and maximised early in the process.
4. Communication between the designer, developer, client and project manager is enhanced.
5. Interactive elements can be studied, tested and evaluated.
6. It allows the client to give productive feedback, early in the process, without being afraid of wasting time and money having to restart a nearly completed project. This means that the client is fully engaged in the process.
7. Misunderstanding about layout and functionality can be resolved by referring to the wireframe.
8. Mid to high fidelity wireframes give both the developer and the client a clear vision of how the final website will look. Problems such as too many product pages or a confusing navigation can be easily spotted and redesigned.
9. Wireframes shorten the project development time by clarifying strategies during the development phase of the process.
10. High fidelity wireframes help to improve content and user interface copy because fonts, lists, bullets, call to action buttons and text blocks can be visualised for user-friendliness. In a wireframe it is easy to move these different elements around to see what works best for conversions.

• Comments (0)
• Trackbacks (0)
• Permalink

Megan Kerr

Meg is a Project Manager/Producer at Cornerstone with a special interest in conversion rate optimisation. She has a business analysis background and thinks the web would be a better place if everyone looked at their web statistics daily.