Preventing Website Design Breakdowns, Part 2: Top 6 Wire Frame Tips

Top 6 Wire Frame Tips

Preventing Website Design Breakdowns, Part 2: Top 6 Wire Frame Tips

In Part 1 of this series, we learned how and why wire frames can prevent costly website design breakdowns. We also reviewed three key pre-wire frame steps: the strategic brief, the content inventory and the content outline.

Now, let's look at the top 6 tips on how to use wire frames.



1. Hold a kick-off meeting.

Find a whiteboard, grab your research and your features, buy your web development team lunch and let the brainstorming begin. During these meetings, our team usually comes up with a rough site map and then we start sketching out the main site pages on the white board.

2. Use tools.

Forget costly and complicated software. There are a variety of FREE wire framing tools you can use. TIP: If you're a designer, resist using Photoshop, as you may be tempted to use tools that create pretty pictures. We typically wire frame the homepage, a secondary page example, and a detail page example, such as a product page. Then we regroup to share feedback.

3. Write copy.

Wire frames without copy are like real websites without copy. They don't make sense. You need section names, page titles, headlines and body copy for them to make sense. Fill in your wire frames with as much copy as it takes for them to make sense.

4. Test drive them with the team.

Share your wire frames and test them against your team's content, features and functional requirements.

5. Test drive them with real users.

If you can find real users at this step in the process, they're worth their weight in gold (or bribes of free Starbucks) to your finished website design. That's because they can help you determine whether or not your design makes sense from a structural and functional standpoint. Ask them to complete tasks, find certain sections, search for keywords, add to their shopping cart, etc.

6. Revise and regroup as needed.

Once you get user and team feedback, revise the wire frames accordingly and then revisit them with your team.

Once all parties are comfortable with the wire frames, you can move onto the design phase with a well-tested road map to follow -- one that should prevent breakdowns as you finalize your website.

Have you test driven wire frames for your website design projects? Tell us what worked best for you.