Intuitive Designs - Custom Web Design & Illustration Services

Doing a wireframe before each web site design is a crucial step. Actually, it’s more than crucial. Let’s put it this way, I divide my own work into two distinct periods. The “before the wireframing phase” and the “after I discovered the glorious virtues of wireframing” phase. I do one now for every single project, even the most basic ones.

Designing without a wireframe is like stumbling about blindly. Even if you have a general idea about the design direction and style you want to go in, how do you know where each thing is going to go? Have you stopped to consider where the most important elements on your site design need to be? Where should the eye be drawn? What should visitors read and do?

I know, I know.  That tedious stuff restricts your artistic freedom. How can you let your creative muse flow within all those boxes?

I’ll tell you what. Pretty much all websites should follow some kind of grid and layout. Sorry, that’s the way it works. Have you ever tried to read a flowy text and photos floating all over the place in a hodge podge manner newspaper? I thought not. Same thing (this may be a rant for my next blog post).

So, if you are going to be working on a grid anyway, you might as well start off on the right foot.

Here are some good reasons to start with a wireframe on your next project before you even think about the fancy design stuff:

• Save Time & Costs: I guarantee you will save tons of time by having a blueprint in hand first instead of having to knock down everything and start from scratch when the client asks for revisions to your mockup.
• More Collaboration: You get to spend more time collaborating with the client from the very beginning. This means you can figure out what’s important together. Also, a lot of clients also don’t feel comfortable with the creative aspects of the project, so this gives them room to voice their opinion on what’s important to them early on. That’s so much better than shooting in the dark and then praying the client likes it, isn’t it?
• Good Strategy: Before you even have to worry about what you are going to do with the design, you have the opportunity to focus on what you want the site to do, where everything should be, and how you want the site visitors to react. Taking a little more time to plan in the beginning increases your chances of having a successful project later on.
• Become a Better Web Designer: It’s true. By taking out colors, shapes, and shadows, you allow yourself to focus on the overall composition and layout alone. You may find yourself asking questions like, “Does this make sense?” and “Is this usable?”. That can never ever be a bad thing, no matter what stage of the project you’re in.

In case you are wondering what my process is, it’s actually pretty straight forward. There are a lot of great tools out there, but I like to keep it simple.

First, I draw up a basic and informal wireframe on graph paper. I sometimes make notes about the target audience to the right of the wireframe to help me keep the audience in mind and stay on track. I also sometimes make a list of the elements that need to go on the page so I don’t forget anything and their order of importance. For example, search form, newsletter sign up, rss feed link, banner ads, etc.

This is an example of a very basic wireframe I did for a recent project. The site is not live yet, so I have blurred out identifying information.

After I have done a few revisions of the informal wireframe and gotten it to the point where I think it’s the most logical, I will then do a more formal layout in photoshop to present to the client. Here’s an example of the top fold of the wireframe I did for the Wisebread.com site home page. They later used the layout as a base for their current design.

Want to try wireframing on your next project, but don’t know where to start? Here are a few good resources:

• Wireframes Magazine - Great blog with tons of info not just about wireframes, but also other information for IA’s. I could learn there forever.
• Balsamiq - I haven’t used this tool, but I’ve heard lots of great things about it. Supposedly, it’s just as easy as sketching by hand.
• “Get Wireframing: The All in One Guide” by Grace Smith - Monster list of resources in her article here.
• BoxesAndArrows.com - They also have quite a few wireframe articles.

Fellow designers and IA’s, I’d love to hear your thoughts. What tools do you use and process do you follow during the wireframe stage?