The Importance of Wireframes

I read an article the other day about how important the wire-framing stage is to web development. It was really good timing because we are currently in this phase with one of our projects. This particular client is simply interested in seeing complete design compositions, skipping the wire-framing stage alltogether. So, I thought it would be very beneficial to discuss this phase more in-depth.

Paul Boag writes about the benefits of hand-drawn wireframes in The 7 Wonders of Wireframes and that many can be done in a small amount of time. More importantly, I think, he identifies the key reasons of why this stage is so successful:

1. Improves Team Work
Wire-framing brings together all members of the team. These discussions help manage roles, responsibilities and scope.

2. Better Communication
This stage not only improves team work but it also makes the subsequent steps in the project run much smoother by bringing developers and designers together early on in the project.

3. Engages Our Clients
By including our clients in the wire-framing step we can educate them on all aspects of web development; from key terms to technologies utilized. This also increases the chance of meeting client expectations and goals early on in the project.

4. More Choices
Because wireframes are easy and fast to produce we can show more options at this phase and inevitably have the best result at the design phase.

5. A Testing Stage
A wireframe is the visual representation of our textual “use cases”. A “use case” documents the flow and functionality of key elements on a page. We can use wireframes and “use cases” to internally test how these key components should function.

6. Easier to Rework
Through the use of wireframes our clients can start to see how the site will be laid out. Since they are much faster to produce than design compositions, many more changes and tweaks can be done at this stage without a significant amount of rework.

7. Keeps Projects Within Budget
Wireframes bring together our teams, improve communication with clients and are easily changed and reworked. With all of these important factors projects can run smoothly and more efficiently to save time and costs.

Finally, it is our job to educate clients on how and why we have these processes. That even though this stage can be a bit slow and visually unexciting, it is advantageous to the end result. It is crucial in the beginning to step back from any design aesthetics and plan the best flow, hierarchy and functionality for each project.