Improving Your Process: How Wireframes Can Help

Posted: December 03, 2007 Comments(8)

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?

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. While I only work on my own site and projects, I’ve used the method of wireframing just ONE – ever!
    It came in really useful!
    I went so far as to have it all layered (in Fireworks) for differing pages. My wife really liked it and we decided to use it for a previous site of mine.
    As for ‘other tools’ for wireframing, I also use ThinkingRock (http://www.thinkingrock.com.au/), an amazing tool for GTD implementation.

    Before I knew it, my ideas were just FLOWING like water! lol.
    I even carry a small notepad in my duct-tape-wallet to jot down ideas for my new fireframe for a new site
    🙂

  2. I have always used wireframes as a part of my development process. Having a visual aid before I start coding makes the design process move quicker.

    I normally use a notebook to draw quick wireframes. Sometimes I just use photoshop (or gimp in linux) to create the wireframe, then I can just do the mock up when everything is in place.

    I would definitly recommend designers to use wireframes in their process. While it gives you placement visuals, you can also decide what elements you would use in a certain place.

  3. I love using wireframes. In my full time job I use them nearly everyday (either designing or presenting them). I find them to be extremely helpful in talking with anyone on a project team, from art directors to developers even to upper management. It cuts away all the “pretty” and gets down to basics first.

    Visio is my tool of choice. It really is amazing at what it enables you to do.

    For all my freelance stuff I usually end up sketching out really rough wireframes in my moleskin. Since most of these projects are smaller in scale I spend more time on the design and less on the wireframes.

  4. @Jaime J Aleman: I’m glad to hear that wireframes have helped your process so much!

    @JR Tashjian: Awesome, I agree that they really can help in the right circumstances. Your process sounds very similar to my own.

    @Craig Kistler: It’s good to hear that wireframes help you as well as your colleagues. I’d have to assume that Visio is probably a popular choice for many people using wireframes.

Leave a Reply

Your email address will not be published. Required fields are marked *