GUI Design Studio Features

Create User Interface Designs Quickly and Easily

Whether your screens are representing application windows, Web pages, sub-panels or custom controls, the fully featured screen designer will let you create them quickly and easily.

	Drag and drop positioning of design elements Edge and specialised snapping that allows elements to just 'click' together Smooth pan and zoom using the mouse (with extra support for scroll and tilt wheels) Unlimited undo/redo Cut, Copy, Paste and Duplicate commands Automatic parenting of elements Alignment and spacing tools

Access Over 120 Built-In Design Elements

Create screens using standard Windows controls, Web elements and other generic elements. Variations are provided in many cases to speed up construction. Combine elements to create custom controls and further variants.

	Frame Windows and Dialogs Toolbars, Menu Bars and Popup Menus Text Boxes, Edit Boxes and Combos Buttons, Radio Buttons and Checkboxes Scroll Bars, Sliders and Spinners Lists, Trees and Tables Tabs, Tab Bars and Panels Progress Bars and Rulers Ribbon Bar Tab Panels, Menus, Buttons and other elements Web Pages, Panels, Buttons and Text Lists and more...

Custom Elements (New in 4.0)

Create your own set of commonly used elements, and groups of elements

	Turn any design file into a custom element for reuse. Specify folders containing custom element designs. Drag and drop to add a custom element to a design and edit as required. Obtain or create your own project libraries of custom elements and link them into your working projects. Package custom element libraries for sharing with others.

Project and Design Templates (New in 4.0, Professional edition only)

Turbo boost your productivity by starting from a design template instead of a blank canvas.

	Create new projects based on a template. Insert design pattern templates into an existing project with all the files that are needed. Inserting always creates unique files so it's safe to use for repeating patterns within the same folder. The browser displays thumbnails to help you choose and lets you find templates by category or select from your most recently used templates. Create templates from entire projects, folders within projects or individual design files. Import templates and share your own templates with others.

A dynamic login panel with conditional content.

Create new projects based on a template.
Insert design pattern templates into an existing project with all the files that are needed.
Inserting always creates unique files so it's safe to use for repeating patterns within the same folder.
The browser displays thumbnails to help you choose and lets you find templates by category or select from your most recently used templates.
Create templates from entire projects, folders within projects or individual design files.
Import templates and share your own templates with others.

Include Icons and Images in a Variety of Formats

Add background and foreground graphics to your designs and adjust their layout as easily as with any other element.

	Drag and drop images from the Project file tree Popular image formats supported including BMP, GIF, JPEG and PNG Transparent GIF and PNG files supported Crop, stretch and tile images Fast access to categorised palettes of icons Common icons are shared between projects Projects may also have their own icons Uses standard ICO files that may later be used in production Scale icons to test them at different sizes and avoid having to create multiple versions while prototyping Over 150 basic icons included to get you started Create your own icons using the integrated Icon Express icon editor Integrate with a different icon editor if preferred

Drag and drop images from the Project file tree
Popular image formats supported including BMP, GIF, JPEG and PNG
Transparent GIF and PNG files supported
Crop, stretch and tile images
Fast access to categorised palettes of icons
Common icons are shared between projects
Projects may also have their own icons
Uses standard ICO files that may later be used in production
Scale icons to test them at different sizes and avoid having to create multiple versions while prototyping
Over 150 basic icons included to get you started
Create your own icons using the integrated Icon Express icon editor
Integrate with a different icon editor if preferred

Annotate Your Design with Overlays and Side Notes

When you need to add further explanations to your designs, you can add annotation elements right on the page or keep them out of the way in side notes.

	Add floating text boxes, curly brackets and markers directly to designs Add formatted notes to describe an entire design Add formatted notes to describe each individual element Element notes appear in a popup tool tip during design and when running the prototype Show or hide annotations on a design with a single keypress

Create Reusable, Modular Design Components and Masters

Break your projects down into smaller component designs that can be reused on any number of other designs.

	Create background and foreground masters Share component design parts such as panels and custom controls across multiple designs Components may be used within other components to any level of nesting Changes to the original component are instantly reflected wherever they’re used Override component element properties on specific design instances Reuse common designs across multiple projects by placing them in libraries

A component design being added to another design

Create background and foreground masters
Share component design parts such as panels and custom controls across multiple designs
Components may be used within other components to any level of nesting
Changes to the original component are instantly reflected wherever they’re used
Override component element properties on specific design instances
Reuse common designs across multiple projects by placing them in libraries

Storyboard Your Designs to Create a Dynamic Prototype

Creating individual screen designs is useful but GUI Design Studio also lets you connect them together in different ways and bring them to life as an interactive prototype.

	Graphically describe application workflow Instantly run and test your design as an interactive prototype Create navigations to show or hide windows, panels and modal dialogs, etc. Use anchors to position them precisely where you want Tabbed interfaces supported with ease Navigate from hotspots within bitmap images Produce right-click context menus Scenarios let you change navigations based on chosen conditions Use message boxes to describe processing or complex behaviour Change the effective screen resolution to see how your design might fit a different screen size No scripting or coding is involved

Connecting screens together to show workflow and running them as a prototype

Graphically describe application workflow
Instantly run and test your design as an interactive prototype
Create navigations to show or hide windows, panels and modal dialogs, etc.
Use anchors to position them precisely where you want
Tabbed interfaces supported with ease
Navigate from hotspots within bitmap images
Produce right-click context menus
Scenarios let you change navigations based on chosen conditions
Use message boxes to describe processing or complex behaviour
Change the effective screen resolution to see how your design might fit a different screen size
No scripting or coding is involved

Enhanced Interactivity (New in 4.0, Professional edition only)

Take advantage of interactivity features that bring your prototype to life and make your design ideas more realistic.

	Element interaction allows for item selection, check box state changes, data entry and other behaviours, with keyboard control. Assign data variables to elements to use their values elsewhere in the prototype. Text on many elements can contain dynamic content by embedding data variables. Control navigation automatically through the use of business logic expressions containing variables and various functions. Conditional panels display different content depending on any number of expressions and data values. Change the visibility and enabled state of elements according to rules based on data values.

Element interaction allows for item selection, check box state changes, data entry and other behaviours, with keyboard control.
Assign data variables to elements to use their values elsewhere in the prototype.
Text on many elements can contain dynamic content by embedding data variables.
Control navigation automatically through the use of business logic expressions containing variables and various functions.
Conditional panels display different content depending on any number of expressions and data values.
Change the visibility and enabled state of elements according to rules based on data values.

Generate Specification Documentation

Demonstrating a navigable prototype is the most powerful way to get a feel for an application and elicit feedback but sometimes you also need to produce more traditional static documentation to share with colleages and users.

	Automatic generation of full specification documentation Includes all designs, screens within designs and all notes and annotations Create full documentation or include only the latest changes to save paper, ink and review time Choice of formats include: HTML PDF RTF (for direct editing) Full template styling available for HTML to match your specifications HTML also provides fully cross-referenced hyperlinking of component (master) design usage

Automatically generate PDF, RTF and HTML documentation

Automatic generation of full specification documentation
Includes all designs, screens within designs and all notes and annotations
Create full documentation or include only the latest changes to save paper, ink and review time
Choice of formats include:
- HTML
- PDF
- RTF (for direct editing)
Full template styling available for HTML to match your specifications
HTML also provides fully cross-referenced hyperlinking of component (master) design usage

Export Designs for External Review

In addition to creating specification documentation, designs may be exported for review in a number of other ways.

	Create a single distribution file containing all of the referenced files no matter where they are stored Include the whole project, a single folder section or just an individual design Distribution files are very small and can be sent to anyone with the free Viewer application Optionally allow the Viewer to launch straight into running the prototype so that the distribution 'acts' like a real application Distributions allow different visual styles to be applied within the Viewer Export individual designs to a number of different image file formats Copy an entire design as an image for pasting into another application such as a Wordprocessor

Open distribution file in Viewer then run as a prototype

Create a single distribution file containing all of the referenced files no matter where they are stored
Include the whole project, a single folder section or just an individual design
Distribution files are very small and can be sent to anyone with the free Viewer application
Optionally allow the Viewer to launch straight into running the prototype so that the distribution 'acts' like a real application
Distributions allow different visual styles to be applied within the Viewer
Export individual designs to a number of different image file formats
Copy an entire design as an image for pasting into another application such as a Wordprocessor

View Your Design in Multiple Visual Styles

Present your designs in a style that's appropriate for your audience. Sometimes you need high fidelity for acceptance and sometimes you need low fidelity to encourage feedback and change. GUI Design Studio allows you to change your presentation without having to change your designs.

	Choose your visual style from a Preference setting Design using your preferred working style and run the prototype for presentation in a different style if desired Visual style options for: Windows Vista Windows XP Windows NT/2000 (Windows Classic) Outline / Sketch Styling Over 20 basic colour schemes available to all Windows styles (4 for Outline), plus custom colour schemes can be created

Dialog design shown in 4 different visual styles

Choose your visual style from a Preference setting
Design using your preferred working style and run the prototype for presentation in a different style if desired
Visual style options for:
- Windows Vista
- Windows XP
- Windows NT/2000 (Windows Classic)
- Outline / Sketch Styling
Over 20 basic colour schemes available to all Windows styles (4 for Outline), plus custom colour schemes can be created

Collaborate in Teams on Your Design Projects

GUI Design Studio allows teams of designers to share design files and work on the same project at the same time.

	Special support provided for Subversion (SVN) control of projects Repository servers may be on the local Intranet (LAN) or on the Internet Re-organise projects by deleting, renaming and moving files with references maintained and changes transfered to other team members Have the freedom to modify design files without locking them and merge changes made by other team members (automatically in most cases) Team Collaboration details available here

Special support provided for Subversion (SVN) control of projects
Repository servers may be on the local Intranet (LAN) or on the Internet
Re-organise projects by deleting, renaming and moving files with references maintained and changes transfered to other team members
Have the freedom to modify design files without locking them and merge changes made by other team members (automatically in most cases)
Team Collaboration details available here