Building out a 50+ page wireframe deck is never easy, no matter which diagramming tool you use. Planning for iteration and change is the key to keeping your sanity and delivering a quality product. Here’s how I do it using pen, paper and Omnigraffle Pro on a Mac.
Plan Your Attack
Before you begin, study your user research, personas, requirements list, task flows, and site map. You did all these first, right? If not, stop thinking about wireframes for now and get everything a little more organized up front.
Assuming you did all your homework, take a good look at the overall site structure. What does the home page need to include? What will be included in the top-level nav? Make a few simple sketches on paper of the home page and several key sub-pages. Play with different ideas and layouts. Revise them in your sketchbook until you feel like they are solid. And by all means, think everything through carefully before you ever crack open your diagramming software.
Think In Layers
For a big deck use layers to keep things organized. This comes in extra handy when clients start making changes, which they will. Take a look at your notebook sketches. What can be divided into layers? What has to live in its own space? I usually break it out into the following:
- Container – stuff that stays the same on every page, like header, footer, and client logo
- Top level nav section
- Secondary nav if necessary
- Sketch box – this is where I put page-specific content (including page titles, numbers and annotations)
See zurb.com’s great article on using shared layers in Omnigraffle for more info.
Think of the entire site experience in layers. Look at your sketches for reference. The home page is usually its own animal, so you may need custom layers for it. After all this thinking and sketching you should have a good plan in place for organizing your wireframe document.
Now Open Up Your Software
Now it’s safe to open your diagramming software. Create your layers and start building out your pages. The most important thing to do right now is to stay focused on the overall user experience. As you build up the deck, make notes on all the little nit picky details that will need to be cleaned up later. There will be lots of them. I usually use a bright yellow sticky-note object so it will catch my attention when I’m on the 4th round of changes. I also keep a running “bug list” in a simple text file I keep open as I work. The devil is in the details and your clients expect and deserve pristine deliverables.
Setup Your Page Template
Proper template setup is a big key to effectiveness and efficiency. For most jobs I use a generic page template that I can customize on the fly. I made this a long time ago in Omnigraffle and set it as the default whenever I open a new file (see How to Make a Wireframe). Make sure you can output a PDF to the proper page size. If you don’t you’ll be scratching your head and cursing when it doesn’t print everything on a single 8 1/2 x 11 page. Other considerations for template setup:
- Setup for 1024×768 resolution (this leaves a 975×600 viewable area within most browsers)
- Setup measurements in pixels. You’ll be pushing plenty!
Common Wireframe Gotchas
- Page numbering
- Page titles
- Persistent objects
- Version numbering
Over To You
- How do you plan, create and manage a large wireframe deck? What are some of your success stories? Is there anything that could have been done more effectively? Please leave your thoughts in the comments.