Archive

Archive for December, 2008

GUI Mockups Made Easy

December 8th, 2008 1 comment

I have been using Visio a lot to design GUI mockups. Visio is a pretty powerful and flexible software except for a few drawbacks and most notably the mockups produced by Visio have the Windows XP looks-and-feel. This is fine if these are mockups for a Windows desktop application but pretty awkward for other types of applications. Lately, I came across a nice alternative called Balsamiq Mockups. Mockups produced by this tool are platform-neutral and thus can be used to sketch GUIs for virtually any kind of applications. Besides, the control-set provided out of the box include many controls that Visio doesn’t have like tag cloud, map, browser window etc. There are a couple of nice features like JIRA and Confluence integration, but the thing I find most notable about Balsamiq is its agility: one can be a lot more productive building most of their GUI mockups with Balsamiq than with Visio.

For example, if I want to sketch a grid populated with some existing data all I need to do is dragging the grid component out of the toolbar and fill in some CSV-formatted text. (Anyone experiencing drawing data-grids with Visio will know the process is not that straight-forward.) Or if I want to create a tag cloud, I just simply enter some words and Balsamiq will weight the words randomly and display them in a nice tag cloud picture. For more complex components like tree or menu, a wiki-like syntax is available to fill in the data and decorate the output (e.g. menu item separator, checked menu item etc.) This simple process of entering some plain text repeats for all kind of GUI components which need input data.

Although I am happy with what Balsamiq has to offer, I wish the software has features to allow users to draw arbitrary shapes and add custom images into the mockups. For now, users are limited to whatever GUI components and icon images provided out of the box. Regardless, I think these requirements not necessary for a majority of GUI mockups and for most of the rest I think I can resort to my modest photo-editing skills :-) .

Below is a sample mockup created with Balsamiq. See more here.

mockup

Categories: Uncategorized Tags: , ,