Quick Review of GUI Design Studio

Caretta Software finally released their GUI Design Studio software last week and I've been trying it out.

In a nutshell, it lets you draw application windows and dialogs then connect them together to create a workflow design and run it all in a simulator as if it was a working application. It doesn't use any scripting or coding. Instead, everything is done using graphical objects and connection arrows.

All the control widgets (they call them 'elements') are in different categories in a side palette from where you drag and drop them onto designs. This is similar to typical drawing programs like Visio but what's different here is that instead of being small icons, all the controls are represented by full sized versions. They've also provided multiple buttons and checkboxes in different states, etc. to save time having to edit generic versions.

One of the first things I noticed is that all of the controls are drawn in the classic rather than XP style which was a bit surprising. According to the FAQs on the web site they are going to provide the XP look in a "forthcoming release". Actually, it isn't much of a problem, especially if you work in Java where you'll probably have a different look and feel anyway.

The editor is fairly slick with everything behaving pretty much as you'd expect with selection, moving, resizing and alignment tools, etc.

Grid snapping is different though. Unlike most generic drawing and design programs that use a snapping grid over an entire design, GUI Design Studio uses a system of edge snapping where controls kind of click together. This avoids one of the problems (and frustrations I have) with regular grids where you want to compose screens that don't quite sit on the grid properly such as creating toolbars and putting them on a frame window.

One of my favorite features is the way you can move around a design and zoom using the mouse. Forget about clunky scroll bars and zoom level combos (though you can use them too if you want). Instead you just hold down the Alt key then drag with the left or right mouse buttons for really smooth and controlled panning and zooming. Cool! I expect to see this copied in other tools soon.

When you run your design in the simulator, it opens up in a full screen window and you can click on buttons, etc. to make windows and dialogs appear according to your design. None of the other controls work though, so you can't type text into an edit box or change the state of a check box (say). When I design GUIs, I'm most interested in layout and flow so that's ok. It would be nice to be able to enable or disable controls in a dialog when changing check box or radio button states, etc. but those sorts of complex interactions are easily dealt with using annotations.

Nearly every application I design seems to have some sort of tabbed interface, whether it's a tabbed dialog for options or the entire application window switching modes (like Outlook). This has always been a problem for me when drawing designs on paper or using a generic drawing tool. There's always a lot of duplication and fiddling if I want to change anything. But GUI Design Studio has a really neat solution for dealing with this. You simply create all the individual tabbed panels and connect them together to a 'placeholder' that indicates where they need to go. Then you just connect each one to its associated tab and you're done. Smart.

There's also a fully functional icon editor called Icon Express that comes with it. Rather than build it into the main application, it runs separately but integrates well. If you already use an icon editor then you can configure GUI Design Studio to use that instead.

All in all, I really like the tool. It seems to have been well thought out to meet the specific needs of software user interface design without the baggage or trappings of general purpose tools. The trial works for 30 days. Definitely one to check out.

Links:
http://www.carettasoftware.com/gds/index.html
http://www.carettasoftware.com/support_faq.html
http://www.carettasoftware.com/downloads.html