There's more to life than Photoshop! Use a wireframing tool first.

When we get a new client, we're excited. The designer can't wait to jump into Photoshop and make something beautiful. The developer can't wait to see the Photoshop comps and start programming. But we're missing a step!

Planning

I have to first go on the record that I'm an "activator" (see Now Discover Your Strengths), which means I want to start now — planning can drive me crazy.

After going through the discovery process with clients, I would then fire up Photoshop or Fireworks and create a design to meet their needs. The problem with this approach is that there are two phases of the process that I was trying to accomplish with one tool.

1. Identify what should be on the screen in various parts of the site.
2. Design a look for the site.

One step at a time

When I am in Photoshop, the temptation is too great to make something look good. If I use a dedicated wireframing tool, I know that I'm only focusing on functionality and not aesthetics. In this way, I can mock up what will be on the main sections of the site and then present this to the client to help them think through what they want on the screen and how we want to organize information.

Once the client approves what is on the screen, we can easily make them pretty. This makes the design process much easier to run because the client can better focus on how it looks because they know they have already seen and discussed what is on the screen.

Wireframing made simple

I love my specialized tools, and my tool of choice for the wireframing process is MyBalsamiq. There are lots of wireframing tools out there, but this one sits a step higher than the competition. The mockups look hand-drawn and that really helps get the message across to focus on content and not aesthetics.

MyBalsamiq is the fastest wireframing tool I've ever used; just drag, drop and you are on the way.

With your next project, don't jump into Photoshop too soon. Try a wireframe and see how it benefits your project. 

Do you wireframe your projects? What tool do you use? Let me know in the comments!