by Caretta Software - Product Type: Application / Developer Application / End User Application
Create user interface designs and interactive prototypes in 3 easy steps without writing a single line of code. GUI Design Studio is a tool which allows you to create screen designs and application prototypes quickly and easily before putting time and effort into coding. Get early feedback and acceptance of designs to dramatically reduce rework, costs and project risks. Try alternative designs, iron out usability issues, find missing requirements and identify areas of difficulty, all before committing to implementation. Interactive prototypes are easily shared. Specification documentation generated in HTML, PDF and RTF formats. Supports Windows, Web and custom applications including Ribbon Bar designs.
Our regular prices are shown below. Please logon to see your discounted prices.
|Add to Cart||$ 489.02||1 User License, per user from 1 to 2 users||Download (18.3 MB)|
|Add to Cart||$ 326.34||1 User License, per user from 3 to 5 users (minimum quantity 3)||Download (18.3 MB)|
|Add to Cart||$ 293.02||1 User License, per user from 5 to 10 users (minimum quantity 5)||Download (18.3 MB)|
|Add to Cart||$ 244.02||1 User License, per user from 10 to 20 users (minimum quantity 10)||Download (18.3 MB)|
|Add to Cart||$ 195.02||1 User License, per user from 20 users (minimum quantity 20)||Download (18.3 MB)|
|Add to Cart||$ 146.02||1 User Upgrade License, per user from 1 to 2 users||Verify||Download (18.3 MB)|
|Add to Cart||$ 97.02||1 User Upgrade License, per user from 3 to 5 users (minimum quantity 3)||Verify||Download (18.3 MB)|
|Add to Cart||$ 87.22||1 User Upgrade License, per user from 5 to 10 users (minimum quantity 5)||Verify||Download (18.3 MB)|
|Add to Cart||$ 72.52||1 User Upgrade License, per user from 10 to 20 users (minimum quantity 10)||Verify||Download (18.3 MB)|
|Add to Cart||$ 57.82||1 User Upgrade License, per user from 20 users (minimum quantity 20)||Verify||Download (18.3 MB)|
|Add to Cart||$ 391.02||1 User Upgrade License from GUI Design Studio Express||Verify||Download (18.3 MB)|
Our prices include ComponentSource technical support and, for most downloadable products, an online backup and a FREE upgrade to the new version if it is released within 30 days of your purchase. All sales are made on our standard Terms and Conditions and subject to our Return Policy. Please contact us if you require any licensing option not listed, including volume licensing and previous versions.
Our regular prices are shown above. Please logon to see your discounted prices.
What's New in GUI Design Studio 4.6
New Chart Elements
You can now add a variety of common charts to your designs, each with many customization options:
Tree Grid Hybrid Element
As an experimental feature, you can now combine a Tree Element with a Table Element to create a highly effective Tree Grid hybrid element. It was always possible to create a static mock-up of such a design before, but now, when a Tree is placed on top of a Table element, the two are synchronized to ensure that vertical scrolling, selections and row visibility are kept in harmony.
Other changes in GUI Design Studio Professional 4.6
What's New in Gui Design Studio V4.5?
The Professional edition of version 4.5 contains enhanced data handling features while all editions benefit from some nice little changes to component scrolling regions. There’s also a number of other small changes and bug fixes.
Enhanced CSV Data Features [Pro only]
Building on from the CSV data features introduced in version 4.4, you can now make even better use of data within your application prototypes.
New Data Editor
Relying on the use of external CSV data file editors was never going to be optimal and was only intended as a short-term solution. If you’d like to continue using Microsoft Excel, or other application, as your CSV file editor, there’s a Preference option to allow you to do this. Otherwise, the default will be to open up the new, internal editor. While this is a simple editor, it has all you need to create and edit data files, including full undo and redo capabilities. There’s also a nice function to fill a column with unique ID values to allow record (row) identification and relationships between data tables.
Create, Read, Update and Delete (CRUD)
In version 4.4, you could navigate between records and display data but you couldn’t modify it. Vesrion 4.5 lets your prototypes Create, Read, Update and Delete records from data tables with these additional action elements: CreateRecord, UpdateRecord, DeleteRecord. Now, if you want to, you can test out your interface to properly experience the flow of creating new data or to see what should happen when you delete every record. But you don’t have to worry about messing up your CSV files that you spent all that time carefully filling with useful test data. GUI Design Studio will save all changes to temporary session files so all changes made while running the prototype are still there for the next test run, but you can restore the original CSV data at any time.
Filters and Queries
In any real application, you rarely work with the entire set of records from a single data table. Instead, you extract filtered sets of records and build new tables from relationships between other tables. The new Run Query action element lets you do this by combining records from multiple data tables, referencing data from lookup tables and specifying filter conditions.
Scrolling Without Scroll Bars
You can put large content into a scrolling region by placing it in a separate design file then including that as a resizable Component. A property option lets you lock it to the size you specify which put scroll bars on the Component so you could scroll the content. That’s fine until you start designing touch-based mobile applications where scroll bars are not wanted. Until now, you had no choice but to include scroll bars anyway and simply note the fact that the real app wouldn’t have them. But now you have the option to turn the scroll bars off completely, always display them, or use the previous automatic behaviour where scroll bars are only shown when needed.
So, if you turn off the scroll bars, how do you scroll?
The answer is to “Allow Drag Scrolling” so you can scroll by dragging with the mouse or by using a touch-screen monitor. You can also “Use Inertia” to support a flinging gesture that will use drag velocity to continue scrolling. Both of these options are available with or without scroll bars. Drag scrolling is also smart enough to know whether you’re trying to scroll an element within the content, such as a List Box or another scrolling region.
Other changes in version 4.5
Professional edition only:
Bugs fixed in version 4.5
What's new in GUI Design Studio 4.4
New CSV Data Features [Pro only]
Data tables are CSV text files containing rows and columns of data. They act like tables within a relational database. The first row contains the name for each field in the table and each subsequent row represents a data record. The new Data panel provides access to CSV files stored within your project:
Enhancing the Table Element
Up until now, the Table element has been rather static. You could scroll the content and, through properties, indicate selected rows but you couldn’t interact with it further. Adding interactive features has been a primary request from users.
Animation [Pro only]
This almost went under-the-radar as one of those relatively small features that could make a big difference, especially for all those people that asked for it. Caretta added native support for animated GIF files. These will also work as spliced, resizable images and when monochrome mode is engaged.
The second animation feature is the ability to transition integer variables between any two values over a specified time frame. And that includes the possibility of animating the active record of a data table or a conditional content selector, opening up many options for slideshows and other presentations.
What makes this even more useful is the ability to set onward actions and navigations once an animation has completed, including further, chained animations.
What’s new in GUI Design Studio 4.3
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.
GUI Design Studio is now available in two different editions.
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.
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.
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.
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
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.
Annotations and Documentation
Storyboarding and Prototyping
Components and Masters
Unleash your creativity
Reduce risk and costs