Wireframing

When it comes to establishing a budget for a website, the value of wireframing is usually misunderstood and is the first phase cut out of a tight budget. This is a big mistake as proper wireframing is an essential stage in the strategic design process — good wireframes help you solve complex problems early, tailor your design to your user's goals, and save you money.

Before we get into the specifics, let's take a step back and briefly discuss what a wireframe is. Wireframes are the foundation on which to begin building your site; a wireframe determines the site's structure, organization and visual emphasis. Wireframing usually comes after the site architecture has been determined by a site map or flow chart of the Website's pages and before the visual design phase.

Wireframes Show a Site's Structure, not its Visual Design.

First, Start With Paper

While it's possible to create wireframes using programs like Visio, for your initial brainstorming sessions, you should stick to paper. Paper doesn't seem as permanent, and many people will assume you threw it together in 5 minutes and do not hesitate to give you constructive feedback. Paper wireframes are easy to do, and if you don't like it you can crumple up the paper, throw it in recycling and start over. Since it's quick, this gives you time and freedom to experiment and brainstorm creative solutions.

Example of a paper wireframe:

Benefits of Wireframing

1. Site Architecture A sitemap is an essential tool, but it can be a bit abstract, especially ones that are large. Taking the site map to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstractness of a sitemap into something real and tangible and this step ensures that all parties involved are on the same page.

2. Clear Interactive Features In many instances, clients may not comprehend what you mean when you say "dynamic slide show," "news feeds," "google map integration," "product filtering," "light boxes" and hundreds of other types of features. Wire framing specific interactive features such as these on a web site provides clear communication to a client how these features will function, where they will live on the specific page and how useful they might be. Sometimes you may decide to remove out a feature once it is wireframed due to the fact that it just does't work with what your site's goals are. Seeing the features without any creative influence really allows a client to focus on other equally important aspects of the project and clarifies any expectations about how features will behave.

3. Usability This is the one of the most important points of the entire wire framing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core. It forces everyone to look objectively at a web site's ease of use, conversion paths, naming of links, navigation placement and feature placement. Wireframes will point out flaws in your site architecture and show how users can complete actions easily.

4. Easy Tweaking With website wireframes, you have the benefit of tweaking a simple line to achieve the desired layout. Rather than move complex elements about a page, it can take very little time to drag a couple of boxes into new positions. It let's you and the client focus on one task at a time, structure then style.

5. Iterative Design Process Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows clients (and other team members) to provide feedback earlier in the process. Skipping wireframes delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.

6. Saves time on the entire project Wireframing saves time in a number of ways.

• Your designs are more thorough and better tailor to your audience.
• Your development team understands what they are building.
• Content strategy becomes much clearer & easier to create.

Everyone is on the same page about what the web site is supposed to do and how it is supposed to function.

Conclusion

A web development project is a complicated project, and involves teams of specialists working in cohesion to give concrete form to a client's vision. Wireframing is an essential tool for the team to visualize the site and strategize for it's success. We recommend every web project start with proper wireframing before the visual design starts.

Useful Resources on Wireframing: Smashing Magazine