Prototyping with Visio

When creating non-interactive GUI prototypes in Windows, you don’t have many choices. Surely, you may try playing with one of numerous specialized tools, but none of them is mature enough to be useful even for basic design mock-ups.

Actually, sooner or later you come to Visio. It doesn’t provide you with pixel-perfect results like ones you may get with Photoshop (or any other bitmap image editor), but it has nearly no completers when it comes to fast iterative GUI design.
The easiest way to start is using build-in Software stencil library. At first, it looks amazing as you have dozens of controls you may easily put on a form and create basic forms in minutes:

Basic Visio form
It’s even better that these forms look exactly like ones in Windows XP and that only increases the “wow factor”. Actually, if all you need to do is making some basic layouts for simple XP applications you may stop reading here and go experimenting yourself.

XP Wizard mock-up

The devil hides in details, so sooner or later you start understanding that a build-in software stencil is not that much good as some things are simply missing. Just it would help you a little on designing a web 2.0 site UI or prototyping a GUI with complex controls (like Ribbon). In order to complete this task you may need to skip all the nice looking Luna stuff and start working on wireframe prototyping level.

On this stage you may just use a Rectangle tool or use any third-party stencil set. However, the more you work, the more you feel a need for your own “constructor”, which covers your current tasks. Using an existing set as a starting point might be a good idea, but you’ll have to re-create missing elements anyway.

Visio with custom control set

Creating a custom control set has other advantages. For example, your own controls may have different sizes, shapes and better fit target application’s look and feel. Such flexibility is usually unavailable when build-in Software stencil set, but comes at a price…

Visio alignment hell
One of major problems with Visio as a GUI prototyping tool is its inability to align elements properly. So you’re either increasing overall mess with lots of guides (which are usually required for every single form) or end up playing with semi-useless Align shapes control in 200+ percent zoom mode or testing your luck with nearly as inaccurate keyboard align (forget of smart guides or alignment logic…)

That’s it, about 50% of all time you work in Visio you waste on fighting with layout. Thus, in order to create prototypes which with “fake screen” level of details (i.e. with all proper aligns, font sizes) it might be a good idea to use bitmap image editor or pagination software, but for intermediate designs Visio is still a worthy solution.


2 Responses to Prototyping with Visio

  1. Hi,

    You say that “One of major problems with Visio as a GUI prototyping tool is its inability to align elements properly”.

    Actually, I think that by using the keyboard shortcuts and using “duplicate shape” (CTRL) and move along a line (SHIFT) keys, doing sets of similar, aligned items takes just a few seconds.

  2. sacrat says:

    With all my respect, Giorgio, these are merely workarounds. No version of Visio I’ve tried has been a good and fast instrument for more-less accurate designs. Hot-keys and SHIFT are no comparison to smart guides and without them more-less complex form is a mess: you create groups, tweak, align, break groups, re-allign, re-arrange all because the application does not help you to be both accurate and fast.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: