GUI Design Studio

What’s new in GUI Design Studio 4.3

• Fresher App - The application has been given a make-over with fresher icons, neater rendering and anti-aliasing of certain graphical elements.
• Workspace Background Options - A new preference option has been added to set a background to the design workspace from a number of presets that include a flat color or tiled image overlaid with optional horizontal lines, vertical lines and dots.
• Sketch Visual Style - Includesa new “Sketch” style option providing a hand drawn look and feel.
• Image Slicing to Maintain Corners - Bitmap images now support slicing to provide resizable background images for custom elements, such as buttons, and fancy CSS3-style borders. Up to 9 slices can be created using left, right, top and bottom slice margins.
• Line Segments - New Line Segment elements have been added with various options for shape, text label and arrow heads.
• New Shapes - New Shape elements have been added with various fill and border options, plus transparency and drop shadows
• Monochrome Display Options - Project options now allow you to design or present with elements and/or images displayed in monochrome to focus attention on content and layout and avoid distractions caused by color.
• Smoother rendering - The newgraphics engine means rendering should appear smoother. Standard font sizes have been adjusted to improve their display.
• Sound files - .wav file type now shows up in the Project File Tree and can be added to designs in the same was as adding images by using drag and drop or double-clicks.
• Icons - You can now disable and display icons as a dimmed monochrome version which helps improve the visual indication of their enabled state.
• Prototype tab - Added to most of the element property editors for the Pro edition it adds flexibility for conditional states and removes the need to use an additional parent container element (where a transparent Rectangle was often used).
• Resize Anchors - These are now turned off by default to avoid visual distraction.
• Button tooltips - Text Button elements with preset actions (Accept/Cancel/Close) now display that action as part of the tooltip in the Elements palette.

GUI Design Studio 4.0 Released With New Interaction and Templates
The new features are grouped around interactivity and element and design sharing. They enable you to build more realistic and interactive prototypes and to share or reuse individual elements or whole design templates with ease.

New editions
GUI Design Studio is now available in two different editions.

• GUI Design Studio Express provides the prototyping functionality that was in v3, but focussed on individuals without the need to share projects and generate specification documentation.
• GUI Design Studio Professional builds on v3, adding new interactivity and design sharing features, and is better suited to those working on larger projects, in teams, or on multiple designs.

All projects created in one edition will run in the other, or in the free viewer, except that the enhanced interactivity features in the Professional edition (see below) are not available in the Express edition.

Prototypes get more interactive (Pro edition only)
As your user interface design develops, everyone involved starts to focus on the details of interactivity. What process does the user need to go through to achieve certain tasks, how many button presses, how much navigation, is it clear and obvious, can they make simple mistakes?

All of these questions, and more, need to be considered in developing and refining a good UI and they cannot be addressed easily in a simple mock-up.

GUI Design Studio v4 introduces a range of new features to enhance the realism of your prototype, allowing you to model UI behaviour that depends upon decisions or input that the user has provided.

Simple Variables
Interaction controls depend upon simple variables. You choose a name for your variable in the new Prototype tab of the Properties dialog and that variable is then assigned a value when you run the Prototype and interact with the element.

Most elements can have an associated variable, even Trees and Ribbon Bars, and these variables can be shared among elements.

This variable can control other elements in various ways. For example, you could use it to insert a name that the user has entered into a piece of text, provide a default value, or you could drive a progress bar from other elements.

Variables are also tied into the Storyboard elements, as you can set up values from the new “Set Data” box. This allows you to reset variables in your UI to a particular set of values whilst running the Prototype. You might do this to simulate having different users, to reset the UI to its default value, or to jump to a particular state.

With project-level presets, it becomes even easier to repeatedly test or demonstrate different scenarios.

Handling Radio Buttons
Radio Buttons can be grouped so that they can act in unison.

Keyboard Control
Now that your users can start to interact with the design in a far richer and more realistic way, they are going to want to navigate around it using the keyboard just as they will in the finished user interface.

To do this you can click to gain focus on an element and use the Tab key to navigate around. The Spacebar changes the state of an element and the Enter key will “Close and Accept”, or the Escape key will “Close and Cancel”. Just like the real thing.

Control when to Show or Enable controls using conditions
Not only can you control the value and text in an element, you can also control when an element is enabled and when it is visible. That means that you can make additional controls appear or disappear depending upon which options the user has selected, or make sure that the next logical control is automatically enabled based on the user’s selection.

Conditional navigation in different scenarios
Variables are firmly embedded in Scenarios and Conditional Navigation too. The Condition Box properties now include a “Condition” entry allowing you to control the flow of the user interface with more flexibility and clarity.

For example, you could set up conditional navigation to bring up a warning if the user tries to create a password of less than a particular number of characters, or to ask for confirmation of a destructive action if the user has set an option.

Wherever you need to test a condition or use the value of a variable, you can use a general expression to combine or process the values of your variables. A wide range of Boolean, binary, comparison, arithmetic, trigonometric and text operators and functions are included.

Conditional Content Panels
Conditional Panels (on the Storyboard panel) build on top of these conditions. Using a Conditions box, (like those in navigation scenarios), you can control what content appears within a particular area. In the example below, it controls whether a Log In panel is displayed or a Welcome panel depending upon whether the user has already pressed the “Log In” button.

The User Name also shows up on the Welcome panel when running the prototype, though it doesn’t show in design mode (as above). This example can also be easily extended to validate the User Name and Password.

Advanced Features
Once you’ve mastered the basics of interaction control you’ll be ready to start using the advanced features to prototype the behaviour of your UI in detail.

Text substitutions, for example, allow you to perform complex substitutions where text content, or a variable name and value, can be set from other variables. You can even combine multiple variables to build new ones; Caretta Software are calling these “translation variables”.

Whatever your application, you’ll find that these new interaction features make it much easier and quicker to build a more complete UI prototype, and still without writing a single line of code.

Creating and sharing libraries of designs and elements

Custom Elements
Any folder (and its sub-folders) within the Project tree can be made into a Custom Element Folder. The folder icon then changes to indicate its new status.

You can create Custom Element designs within the folder and any existing GUI design that you want to be used as a Custom Element can be dragged into it.

A Custom Element design can be as complex as you like, from a single pre-styled element to an entire form full of controls. You can still edit this design just by double clicking on it, so it’s easy to update and maintain.

When you drag a Custom Element design onto another design, the whole content is copied across as if you’d added the elements individually. At this stage, changes to the original Custom Element will no longer affect the new design.

That means you can then modify it in your design to suit the particular circumstances, changing the style, size and layout, and adding in specific information relevant to its context.

Custom Element Libraries
Custom element folders can be created in any project but they really come into their own when creating library projects full of reusable designs that you can link into your working projects.  These can contain house-styled elements, time-saving common groups of elements or entire design patterns.

Compared to Components…
Custom Elements are different from Components (also known as Masters) which remain linked to the original design. If you change the original Component design, each instance of use in your project will also change.

Although you can use overrides to change certain properties of elements within a Component instance, you can’t change their size or layout. They act as a single unit.

Among other things, Components are good for headers and footers on web pages, reusable panels and common dialogs; areas that you need to be consistent between many designs. They’re also very good for breaking your design into more manageable chunks, often with self-contained behaviour.

In comparison, Custom Elements are good for common patterns in your design that will most likely need to be customised for each use.

What if you want to add a Component to a design as a Custom Element? Well, you could put it into a Custom Element Folder first (perhaps as a copy), but there is no need. You can just hold down the CTRL key as you drag and drop it into your design and it will be added as a Custom Element instead.

Templates (Pro edition only)
Templates are a great way to start a whole project from a consistent pattern. Maybe you always like to have your projects set up with a particular set of pages, or with some standard elements that you always include. You could start with a copy of your last project, but a Template is a neater way to achieve it.

Templates can be inserted into an existing project so they can be used for creating complex, reusable design patterns that are beyond the single design restriction of Custom Elements.

A Template includes all GUI files and their contents, so loading a single template could set up lots of files, ready for you to dive straight into the design work.

Like Custom Elements, Templates are copied when they are loaded, so changing the original Template file will not change the projects that are based upon it. They provide a basis for you to edit and extend.

You can create a Template from your whole project, only the designs in the currently selected folder, or just the current design file. That makes it easy to turn what you’re working on into a Template for reuse in another project.

You can name the Template, categorize it, and choose to attach a representative screenshot to make it easy to find later. The new facility to export images from a running prototype can help here but if you don’t provide a screenshot, one will be generated automatically.

When you create a Template, it becomes available for immediate use within all projects. No library project linking is required.

GUI Design Studio is a stand-alone user interface design and interactive prototyping tool. It uses simple drag and drop from an extensive range of controls and other elements to create high quality user interface designs and also low fidelity wireframes or mockups.

GUI Design Studio supports the design of Windows desktop applications (including Microsoft Office 2007 style Ribbon Bars), Web applications and embedded or custom applications. Windows styling can be switched at any time between NT (Classic), XP and Vista with over 20 color schemes to choose from.

Designs are organized into projects. Individual designs may represent entire screens, pages or individual panels and groups of elements that form components for use on other designs.

Connect screens and panels together using navigation links to quickly and easily create interactive prototypes and explore how the application design works as a whole, pinpoint usability issues and clarify requirements. By creating and comparing design variations, you can test them with users to see which one works best for them. For example, you can compare a Ribbon Bar design against a traditional menus and toolbars design.

A Viewer application is also freely available to allow all stakeholders to view your annotated, interactive prototype. For ease of sharing, a single distribution file can be created containing all design and graphics files required to run the prototype.

Documentation can also be created in HTML, PDF and RTF formats to provide a complete specification including all screen images, annotations, notes and action statements. This can also be shared with stakeholders and used as an alternative, static reference for developers to implement. Update documentation can also be created highlighting only the changes made to the project.

Projects

• Organize your work into projects
• Each project has its own folder structure
• Link to other library projects anywhere on your computer or network
• Link to other folders for convenient access to images and other files anywhere on your computer or network
• Create individual design files that are independent of any project if you want to
• Create design libraries for reuse and consistency between projects

Screen Designer

• Open multiple design documents at a time and use the tabbed interface to quickly switch between them
• Create graphical user interface (GUI) screens using standard Windows elements including frame windows, dialogs, menus, toolbars, tabs, push buttons, check boxes, radio buttons, scroll bars, sliders, spinners, combo boxes, trees, list boxes, edit boxes, static text and more
• Create applications designs using the Microsoft Office 2007 Ribbon Bar style of interface
• Create Web application designs and Rich Internet Applications (RIAs) with dynamic panels
• Create custom controls from existing elements or other custom controls
• Switch your visual style preference between Windows Classic, Windows XP and Windows Vista with color scheme and default font options and Outline styles for low-fidelity visual styling
• Add icons and images from common file formats
• Drag and drop from control palettes that show you exactly what you will get
• Property editors allow you to customize each element
• Automatic parenting of elements
• No restrictions on where you can place any element
• Edge snapping allows screen elements to just 'click' together
• Design grids provide simple means for creating consistent layouts
• Align groups of elements at the click of a button
• Evenly space groups of elements
• Resize elements to match others or span a group of other elements
• Zoom in to see fine detail or zoom out for an overview of large designs. Zoom in increments using toolbar buttons or the keyboard or smooth zoom using the mouse
• Quickly pan around large designs using the mouse with support for scroll and tilt wheels
• Cut, copy, paste and duplicate commands
• Unlimited undo/redo

Graphics Support

• Paste images from the clipboard directly into files within project folders
• Supports BMP, GIF, ICO, JPEG and PNG file formats
• Transparent GIF and PNG files supported
• Tiling and cropping options available

Icons

• Provides fast access to palettes of icons
• Common icons are shared between projects
• Projects may also have their own set of icons
• Scale icons to avoid having to create different sized versions in your prototype
• Uses standard ICO files that may later be used in development of an actual product
• Icon Express editor included, supporting 16-colour, 256-colour and true-color icons of any size up to the maximum 127 x 127
• Can also integrate with any other icon editor application if preferred

Annotations and Documentation

• Annotate designs with text boxes and marker overlays
• Add formatted notes to each design and individual elements
• Notes appear in popup tooltips while designing and also when running the prototype
• Generate specification documentation in HTML, PDF and RTF formats
• Create full documentation or only the changes since previous documentation

Storyboarding and Prototyping

• Draw connections between navigational elements such as buttons and windows to show flow of control
• Add overlays to images and other elements to create navigational hotspots
• Supports modal and modeless windows, showing, hiding or toggling windows, window replacement and tabbed interfaces
• Anchors allow you to position windows precisely
• Instantly test or demonstrate your design by running it as a prototype
• Add message boxes to describe functionality that might occur in the real application
• Create multiple scenarios such as a normal condition and various error conditions
• Choose which scenario to activate or let the prototype runtime choose for you
• Change the effective screen resolution to see how your design might fit with a different screen size
• Everything is done graphically with no scripting or coding

Components and Masters

• Create component designs using any number of elements
• Place component designs within other designs as background masters or foreground panels and elements so that changes in a component are reflected in every design that uses it
• Place components within components to any level of nesting
• Override element attributes in components (such as text or color) for individual instance usage
• Components can be self-contained sub-systems containing interactive storyboarding

Benefits:

Unleash your creativity

• Design what you want without the restrictions of any development environment
• Add user interface elements that don't even exist yet - if you can draw it, you can use it
• Quickly prototype multiple alternatives for evaluation
• Visual design without coding is accessible to everyone
• Easier to duplicate, change and distribute than paper and pencil designs

Reduce risk and costs

• Create project specifications that everyone can understand
• Get early feedback from users to ensure your software meets their needs
• Discuss implementation issues with developers before writing any code
• Catch design errors, find critical factors and explore special cases early in the project lifecycle
• Create refined requirements that lead to fewer changes during development
• Avoid costly rework later in the development cycle
• Build the right application first time
• Improve the usability of your software
• Gain higher user satisfaction

Improve productivity

• Use the fastest method for creating graphical user interface (GUI) prototypes
• Developers can focus on implementing well specified designs that won't be constantly changing
• Get a head start on writing the user manual in parallel with software development
• Reduce your time to market