Improving Your Process: How Wireframes Can Help

One of the things I love about working on the Web is the pace of which change takes place. Things in general move at an alarming rate. What’s on the forefront today is yesterday’s news tomorrow. I’m not sure exactly why that aspect of the industry interests me so much as it can be viewed as a curse.

How can you expect yourself to excel in a medium which changes so rapidly, abruptly, and repeatedly? While some people may view it as a curse, I think of it as a challenge. I think of it as a welcome change to a daily routine. I loves me some variance.

Every Web designer or developer I’ve observed or read from does things a bit differently than myself. I’m always interested in finding out what they’re doing different because I can learn from their experience. If they’ve overcome a hurdle which still gives me trouble, I’m all ears for a solution to try. Quite some time ago, I came across a number of articles in a short time which mentioned wireframes for Web design. The articles spoke of information architecture, design improvements, and overall organization improvements as a result of using wireframes in the design process. I was intrigued.

Why I like the idea of wireframes

One of the best qualities of excellent Web design is the structure of the page. A properly structured design is really what makes good design great. Wireframes are a really great tool to help you visualize the structure of your designs. Keeping it simple with geometric shapes on a plain background really help you focus on the task at hand; design. You’re able to keep an eye on which elements are given more of a spotlight based on their physical size and placement before their color and contrast. Personally I find this to be quite helpful.

Wireframes have also helped exponentially with client work. They’ve allowed a new level to be integrated in the approval process. Many clients have an idea of what their website should look like. This assumption is based on their personal preference of what they see around the Internet every day. Their likes and dislikes can severely bias any opinion they’ve got of your work before it’s even seen.

This is a major hurdle for Web designers the world over. Wireframes can really help you to take the offensive with a site design. When you lay out a wireframe and submit it for approval, you’re given the opportunity to explain the reasons behind your design decisions. You can explain that the logo is the size it is because the important element on the page is the content.

Just like design comps, you could insist that your wireframes are signed off upon. When a wireframe has been agreed on, you’re much less likely to hear a client request that the navigation be moved to the other side of the page and the logo size be increased by 400%. Should the request surface anyway, you’ve got your approved wireframes for support. At the end of the day, you will always be asked to move things, but wireframes can really help to keep the design on track.

A wireframing stage can also to avoid conversations surrounding link color and font size too early in the game. While unavoidable, this dialog can take place after a major milestone in the design has been completed; the structure.

My personal success with wireframes in client work is one of the main reasons I like working with them. There have been a number of clients with projects that would have ended in disaster had a wireframe not been approved. Giving supportive reason why certain elements appear as they do help to deter changes for the sake of change.

Tools for Wireframing

If you’re not wireframing, I’d say give it a shot on a project or two, especially for client work. I still enjoy wireframing on paper at first. It’s difficult to explain why, but I really think a pencil and piece of paper can help sketch a wireframe a bit faster than going straight to the computer. After some ideas have been sketched on paper, I’ll sit down and digitize them for client approval.

There are a number of tools to use for wireframing. Personally I’ve come to really like using Fireworks to create wireframes. Using the vector tools it’s quite easy to put together wireframes very quickly. The way in which you’re able to select elements to either copy or move them also really helps me with the process. Many other designers will use Photoshop to produce their wireframes, and there are a number of applications specifically aimed at wireframe production. One thing to keep in mind, no matter which application you’re using to create wireframes, working on top of and snapping to a grid can really help out.

Wireframes have helped me out, what about you?

Wireframes have really helped the Web design process at my company. The entire process seems to move at a much more steady pace, and designs are looking increasingly like the original intent of the designers. Do you currently include wireframing as part of your process? Have you tried doing so only to find that it adds another level of unnecessary complexity?