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 element placement
  • 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
  • Element grouping

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.

Some of the available design elements shown using the Windows Vista visual style
  • 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

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

Custom 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 (Professional edition only)

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

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.

Transparent images and icons
  • 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.

Annotating a design with popup tooltip 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.

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.

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 (Professional edition only)

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

A dynamic login panel with conditional content
  • 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.

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.

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.

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/7
    • 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.

Team sharing of projects
  • 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