GUI prototyping in Mac OS X

October 1, 2007

While working on a mac (which is currently my primary platform) I do still have to deal with interface creation stuff. Unlike Windows, OS X doesn’t have Visio, so I had to look for a different tool.
This tool exists and is called OmniGraffle.
Even though the GUI mock-up creation process is still the same “drag form, drop it, drag a button, place it on the form“ there’re some key differences from Visio. First of all, OmniGraffle has a pitiful default GUI creation stencil. Unlike one from Visio package (which is also far from perfection) this one merely represents Aqua-like look and is not suitable for any serious work. In other words, you’ll have to create a stencil set yourself or just start adopting an existing one to your needs. Wireframe Shapes is a good starting point, although it misses some controls and existing ones may require tweaking. You’ll have to do your set sooner or later, anyway, so don’t take this as disadvantage 🙂
Layers is another interesting feature I always missed in Visio. Even though it’s not a daily tool and not required for simple mockup, one may save you lots of time on complex shapes or fine-tuning your designs when combining vector and bitmap images.
Grid, guides and smart-guides are features that leave Visio far behind. Yes, Visio has a decent grid and guides, but aligning objects with their help is an unpleasant experience. With the help of smart guides you no longer have to work in zoom mode to make sure your controls are evenly distributed on the form and it really saves you a lot of time! Another time saver is “eternal canvas“: when you place objects outside your canvas, OmniGraffle creates a new page for it, so you would unlikely face difficulties while working with large images or multipage drafts.
Shape tools are primitive. Creating new primitives with Visio is a more pleasant experience, IMHO as OmniGraffle tools are overcomplicated while not allowing you to create basic shapes fast. Table editor is freaky. It has a non-standard interface which may hardly be called elegant, although you may get used to it one day.
Overall, the app is very good for wireframing and non-interactive prototyping. If only a tool set gets “fixed“ or default stencil set would be enhanced, it may become an ideal UI designer’s tool. Right now it’s just good, but good enough to recommend it over Visio.osxfastguimockup.png


Prototyping with Visio

August 2, 2007

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.