Value of Wireframing

I spend a lot of my helping to determine improvements to customer facing applications. Creating functional specs, user stories and use cases are all good. But there is just something about a good wireframe that speaks volumes.

I find wireframes do a number of things to help as a product manager:

• Make it easy to describe what you are trying to convey
• Allow you to run the concept by others to get feedback before development begins
• Enable easy course corrections before a line of code is written
• When you do have a working model, it help developers visualize the end result
• Wireframes do not need to be anything fancy. They can be written on a simple piece of paper. A wireframe can be a bunch of blocks cut out and arranged into a working model.

A number of good SaaS wireframing tools are available to help. They make it pretty easy to put together a starting layout. Marvel, Sketch, Framer, InvisionApp and Invision Studio are some that have received good recognition.

Even Adobe has entered the market with their Adobe XD application. One nice thing about it is that it runs on both Windows and Macs, whereas Sketch, the dominant tool, is only available on Macs.

You'll probably laugh at one of my favorite tools: Balsamiq. I'm pretty visual, so I spend quite a bit of time on wireframing. I want to see the layout, and how it works with other pages, to see the entire workflow. While Balsamiq is a low resolution tool, it is fast and allows pages to be easily linked together.

Some of the SaaS tools allow you to hook up pages together, so reviewers can see the flow. This has obvious benefits. Fireworks combines the best of showing page flow, but also allowing page detail that is close to real app pages.

I know find that while my PowerPoint layouts are find for single page enhancements, they are insufficient for multiple page app wireframes. So I'm now taking it to the next level: I build it out in HTML, CSS and JavaScript (mostly jQuery). The wireframes don't need to hookup to the backend data, they just show the layout in detail, the logic flow and some basic animation and events.

Not that you need to go that far. Start simple. Use it to get feedback. Save development costs by changing the wireframe before you begin coding. It's easy to get the benefits.

But I can't promise you — if you are a visual person like I am — that you won't want to just keep pushing it one step further…