Speed Wireframing

Wireframing is like playing a piano: I’ve seen designers ripping like Vivaldi, and others plodding along like a drunken Tom Waits. Here are some techniques that can help ensure your designs make it from your whiteboard, or your head, into a digital wireframe as fast as possible.

Get enough screen real estate. Lots of it.

Studies have shown that larger screens can make people much more productive, reaching improvements of 40 – 75%. This is especially true with design applications like Visio, Axure, OmniGraffle, and Fireworks.

Having a second monitor can allow you to have a reference file on one side while wireframing on the other, reducing the need for window management.

Use scrolling shortcuts (and a mouse).

Scrolling around a large wireframe by clicking the scrollbars requires a lot of extra targeting with the mouse. Avoid scrollbars completely with the following shortcuts.

Most design applications follow these conventions:

Scroll up/down: Mouse wheel
Scroll left/right: Shift + Mouse wheel
Zoom in/out: CTRL + Mouse wheel
General scrolling: Space + Mouse button 1

Copy+paste an element: CTRL + Click an element, drag it to the target location.
Move an element, maintain alignment: Shift + click and drag

Pimp your program.

Adjust tools to fit your style of usage. Remove unnecessary toolbars and buttons; add useful ones. Learn keyboard shortcuts. Move panels around. Keep the process of making your process faster close at hand. Improve your own User Experience.

Watch your fidelity.

The lower your fidelity, the faster you can work. People’s natural tendency, though, is to make their designs look good. Be wary of any visual flourishes. It’s tempting to round the corners on that box, or put a little gradient on that button, but that’s a slippery slope. Wireframes can be made to look very good without many visual flourishes by using minimal colors (light grays work well), pleasing alignment, and appropriate whitespace.

Use open source stencil and icon libraries.

Don’t reinvent the wheel. There are great stencil libraries for Axure, Visio, and OmniGraffle, and hundreds of quality icons can be found at Wikimedia Commons. Build yourself a template or folder that has all of the elements you need prepacked for every project.

Use masters / backgrounds / reusable elements wisely.

When creating a widget, layout, navigation, or any other element that will be reused across pages, always consider making it a master or background. Consider what it will be like to change the wireframe in the future. Is there a complex widget that has been copied and pasted across many screens? Updates to that widget will require a lot of extra editing. Construct elements with the future in mind.

Do you have other techniques for speeding things up?

Pingback: Wireframe Websites That Wow | Web Design Blog by Union Room Web Design
http://www.flairbuilder.com Cristian Pascu

Very interesting reading and useful tips. I like working with large displays and use of master surely frees you from lots of pain.

Another very important thing is, in my opinion, the assurance that your wireframe will “get it right”, that is it will work properly. Of course, this is rather another story and sort of falls into prototyping area. But still, having a tools that kindda lets you do both, that is, wireframes with interactivity will get you to better results even faster.

Allow me to point out this quite young tool called FlairBuilder (www.flairbuilder.com) that lets you create wireframes as interactive as prototypes. So no lost of interactivity, no danger to get lost in endless color/gradients discussions. FlairBuilder supports master pages, a rich set of fully functional components like buttons, tabs, links, text boxes etc. as well as condition logic for interactions and pagination. It will soon also support user defined libraries.

I hope you’ll find it useful!

Cheers,
Cristian