Wireframe Nirvana: Plan Ahead For Changes

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
• Tabs
• Version numbering
• Date

It’s also critical for everything to match up with the site map, so if you make any changes to the site structure during the wireframe stage make sure you update your site map accordingly.

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.

Subscribe

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. Here’s how I do it using pen, paper and Omnigraffle Pro on a Mac.Plan Your AttackBefore you begin, study your 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. Refine them and 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 LayersFor 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 logoTop level nav section

Secondary nav if necessarySketch 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 your navigation in layers. The home page is usually its own animal, so begin with your top level nav. Add each level of navigation accordingly.

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 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 will expect pristine deliverables.Setup Your Page TemplateProper 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: etup for 1024×768 resolution (this leaves a 975×600 viewable area within most browsers)- setup measurements pixels. you’ll be pushing plenty!Common Wireframe GotchasPage numberingPage titlespersistent objects tabsversion numberdate

Site map matching – it’s critical for everything to match up with the site map, so if you make any changes to the site structure during the wireframe stage make sure you update your site map accordingly.Use Page Components To Save TimePage components are all the design elements and functionality pieces that make up an individual web page. These include search boxes, login forms, email signups, list boxes, and the like. Having a collection of stencils made up of pre-defined page components will save you a ton of time. Think about it. Almost every site has a horizontal navigation scheme. Almost every site has a logo in the top left and a copyright footer. Most have images and all have headlines and text. Some agency clients will expect you to use their branding standards on wireframes – they’ll even ask you to use a certain shade of gray instead of black and a custom font besides Arial. If you choose to accept this, create a custom stencil for them so you don’t have to spend extra time customizing your wireframes. Get it done the way they want from the beginning.

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.