For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

(1) Project Organisation

Now you can re-organise your projects with ease. In previous versions, we restricted the ability to move and rename design files to ensure that references remained intact and to help with project sharing.

In version 3.4, you can rename files and move them around using drag and drop. GUI Design Studio will track the changes and keep those references working.

New projects will automatically get this functionality but you’ll need to enable this feature for existing projects using the “Project | Enable Move and Rename…” menu command. This is a precaution to ensure that team members synchronise project files first.

(2) Enhanced Team Collaboration

Version 3.4 also brings new collaboration features to allow multiple designers to work on the same project simultaneously using a shared Subversion (SVN) repository. Move and rename are fully supported and changes by different team members to the same file can be merged automatically (in most cases).

For full details on how this works see the Team Collaboration with GUI Design Studio and Subversion section on our main Website.

(3) Image and Component Replacement

Have you ever wanted to change an icon or bitmap image, or replace a design component? Well now there’s a new “File” tab that allows the associated file to be changed. If the replacement component is compatible, such as a duplicated variation, then all navigations from within the component will be maintained.

When files are deleted, we’ve made it easier to work out what’s missing by displaying the filename in the placeholder box and we also now include the placeholders in simulation, printing and image generation where they were previously ignored.

(4) Other Changes

In order to make the simulation of Browser mode more realistic, Back and Forward now restore the view position (scroll bar states) instead of always jumping to the top of the page.
 
To help you edit elements more quickly the F2 key can now be used as a shortcut key to edit text for the selected element. You can still just start typing if you simply want to replace the whole of the text.
 
We’ve also fixed a number of bugs such as making GUI Design Studio use less CPU time on certain machines when idle and transferring project options to distribution files for use in the Viewer.

Download

Download GUI Design Studio version 3.4 now, and let us know how you get on with it.

Happy designing! Feel free to leave a comment…

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

(1) Active Scroll Bars

For all those cases where it’s important for you to demonstrate the entire contents of your edit boxes, lists, tables and trees, you can now work those scroll bars when you run your prototype in the simulator!

By selecting elements first, you can also scroll them within the design editor if you want to and set default scroll positions.

(2) Expand / Contract Tree Nodes

Judging by the number of customer designs we’ve seen where tree node expansion and contraction has been simulated using overlay panels, this is clearly another important feature that sits nicely alongside scrolling.

As before, you can set up the default expansion and contraction of each node within the property editor where you create the nodes. You can now also change these within the design editor itself by selecting the tree element then clicking the expand/contract buttons.

(3) Connect From Tree and List Items

Thanks to all of the requests for this feature, you can now make navigation connections directly from tree nodes and list items instead of having to use navigation overlays.

This is especially important now that trees and lists can be scrolled. Links remain with the correct item after rearranging the content.

For trees, you can expand a node (in the editor), create a link from a child node and then collapse the node again.

All links to hidden items are shown from the nearest location that makes sense. Try it out and I’m sure it will make sense.

(4) Scrolling Regions

With version 3.3, you can now take a large design section and place it within a smaller, scrolling region. Anything from a simple bitmap image to an intricately designed, custom list, or even complex document content can now be represented with ease.

The trick is to place the large section within a component design, resize the component (you might need to change its resize options first) and then check its “Maintain Size” option.

(5) Other minor changes

We’ve fixed a couple of bugs related to infinitely nested, self-referencing component designs that occur in rare circumstances, and added a useful Alt+F4 shortcut key to toggle between normal selection mode and component item selection mode. F4 (or Shift+F4) still toggles between either selection mode and make connection mode.

Download GUI Design Studio version 3.3 now, and let us know how you get on with it.

Happy designing!

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

(1) Project Options

The most visible change is the introduction of new Project Options (from the “Project” menu). These allow you to:

1. Enter descriptive notes for the project as a whole.
2. Specify Visual Style options for viewing/editing and simulation that override the Preference settings and force the Viewer to use them. This is important for controlling the way your designs are presented in the Viewer.
3. Change Simulator background colours, text and text placement.

This last set of Project Options will be welcomed by all those customers who’ve been requesting this for some time. Here’s a few examples:

There are a number of reasons why you might want to change the background colours and text but it’s particularly useful if you want to grab a screenshot of the running simulation. A solid white background with no text, for example, will make it much easier to use the images in other documents, on Web pages or for printing.

(2) Bug Fixes

There are a couple of bug fixes in this release. One removes the limit that was placed on the amount of data that could be pasted into a Table element from the clipboard and the other fixes some serious issues with Simulator scroll bar operations. It also improves the calculations of scroll bars, especially when simulating different screen resolutions.

(3) The Secret New Feature

This actually represents the bulk of changes in the version 3.2 release but we want to keep it under wraps for the moment. It’s a significant feature that we are continually asked about but it’s still just a seedling.

Before we reveal what this feature is and make it generally available, we want to test it with specific customers that asked for it and work with them to develop it to a more useful level. From what I’ve seen it do so far, that hopefully won’t take too long.

Watch this space for further news!

It happens to me all the time!

The usual way to do this involves creating (or finding) a bit of space somewhere, moving one bunch of elements and controls into the space, shuffling all the other elements around and then closing up the space again. It can be a bit of a hassle sometimes.

Even a simple task of exchanging the positions of two elements can be fiddly when you need to get them properly aligned in their new places and they’re in each other’s way.

So we created the “Swap Element Positions” feature in GUI Design Studio v3.1 to address this common need and save a ton of time and fiddling about.

It’s easiest to demonstrate with this contrived dialog example but the technique is equally suitable for panels and icons in toolbars, on Web pages and anywhere else you need to quickly re-arrange things.

To swap the Middle and Bottom control groups, the 2 Group Boxes are selected (in any order) and after applying the “Swap Element Positions” command (Alt+S), this is what happens:

All of the control elements within the groups have also been moved. Crucially, though, the positions of the Group Boxes themselves have been adjusted to take account of the difference in heights of the groups. Job done in two steps and about 3 seconds!

But what happens to the Middle group when we want to swap the Top and Bottom groups?

As you can see, the groups have all been correctly re-arranged to take account of all the height differences and what lies between the elements being swapped. The same rules apply for horizontal re-arrangement and combinations of the two.

In some cases, you might need to use the feature a few times to ‘bubble-sort’ your elements for the ordering you need but even this will be much faster than manual re-arrangement.

It won’t solve every case but it’s a very handy tool to have at your side and, if things do go wrong, there’s always the Undo command that will leave you no worse off than having to do it manually anyway.

Let us know how you get on with the “Swap Element Positions” feature and if you find cases that don’t work for you, send them to support and we’ll see if we can improve the feature.

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

If you’ve been using a trial version that has expired, this new version should reset your trial period. If it doesn’t then please let us know and we’ll sort something out for you.

So here’s what’s changed in version 3.1:

(1) Navigation Type Selector
After much demand, we’ve finally put a Navigation Type selector onto the toolbar.

When you connect elements together to define application workflow, GUI Design Studio normally sets the navigation type based on the elements being connected. It gets this right about 80% of the time (or maybe 20% depending on who you ask).

But when you’ve made lots of connections and none of them are of the type you wanted, it can be a little tedious to change them all, though the Format Painter feature introduced in version 3.0 helps a lot here.

So now, you’ll be able to set the type of connection you want to make using the selector. Where connections have to be of a certain type, the selector will be ignored. You can also set it to ‘Automatic’ to let GUI Design Studio decide what type of navigation to create. This basically reverts to the previous behaviour without the selector.

The next two new features should help to navigate around a large design.

(2) Fit Elements to View
The “Fit Elements to View” command does exactly that. The view is changed so that the selected elements are all displayed. If possible, it keeps the current zoom factor. Otherwise, it will zoom out to make sure they’re all made visible.

With no elements selected, the whole design is made to fit within the view.

If you have a numeric keypad on your keyboard, you can use the ‘/’ key as a shortcut. This makes a handy combination with the existing ‘*’ key to set 100% zoom, ‘-’ to zoom out and ‘+’ to zoom in.

Of course, you can still use the Alt key with the left and right mouse buttons to pan and zoom the display. And, if you have one, the middle button will pan directly and the scroll-wheel can be set to zoom (according to preferences).

(3) Follow Connections
If you’ve ever found yourself zooming in and out or panning (scrolling) a large design to see where a connection takes you, or where it’s come from, then you’ll like this new feature.

Just select a connection and use the “Go To Connection Target” (Alt+T) or “Go To Connection Source” (Alt+R) commands to scroll them into view.

(4) Swap Element Positions
The last of the new features in the “Swap Element Positions” command. This started life as a very simple idea to just swap the positions of two selected elements.

However, once we’d implemented that, we realised that it really ought to do a bit more. Although it has other uses, the main reason for its existence is as an ‘element re-arranger’. So that is what it now does. After a fair few iterations, we think we’ve got it about right and it works like magic!

Because this ’small’ feature could be of great importance, there’ll probably be another post soon to look at it in more detail.

(5) Split Toolbar
On the very minor size, we’ve made the toolbar split in two if the application window gets too narrow to fit the whole thing on one line.

While this may not be too exciting for you when you always run GUI Design Studio full screen (as you should), it’s extremely useful for us as we start to create size-restricted video tutorials (yes, we’re finally getting them done!).

From a design perspective, note that the toolbar doesn’t just wrap in the middle. Instead, it splits into two, more appropriately arranged bars. Also, there’s no faffing with having to re-position the bars yourself, as you might with other styles of split toolbars, especially when returning to full screen mode. It automatically pops back onto one line again whenever it can!

(6) Check Box States
Another (seemingly tiny) change is that Check Boxes now have a 3-State option rather than just assuming that all Check Boxes are 3-state (for design flexibilty). The default is unchecked unless the Check Box has already been set to an intermediate check state.

This change might only save you the effort of a click or two when changing Check Box properties, but it will become much more significant when interaction features are fully enabled. Watch this space!

Bug Fixes:
We’ve fixed a couple of small bugs related to the application title bar when closing projects and keeping the Project panel open after creating a new project (ooh, that was an irritating one).

Of more importance, though, a few customers had discovered that dragging a component design onto itself could freeze the application, especially if the design was blank.

While this is not normally something you would want to do, it is quite easy to do by accident, especially if what you really wanted to drag was an image of the same name in the same folder.

If you’ve ever pointed a video camera at a television or screen that’s showing the live feed from the camera, you’ll understand the problem here! Although we had some protection against this, we’d managed to miss a test case. Oops. This has now been fixed but sorry if you got caught by this bug.

That’s about all of the changes for this 3.1 release. Download it now, give it a whirl and be sure to let us know what you think by leaving a comment on this blog or by contacting support.

Happy designing!

His Documenting Interactive Websites blog post contains the slides (also below) along with some great notes that he took after the session. Note that the link below is for the slideshare copy (without notes).

There are some nice sitemap, wireframe and storyboarding slides in the presentation to enjoy:

Patrick discusses the inadequacies of traditional documentation for the design of interactive Web 2.0 sites and makes the case for prototyping as an appropriate way to describe them. This is clearly a view that I share.

As tools like GUI Design Studio become more widely known and fully mature, I think that prototyping will become a common part of Website design as the ease and simplicity of using the tools will remove all barriers and the advantages become apparent.

Take a look at Patrick’s presentation and see what you think!

With GUI Design Studio version 3.0, you can design and prototype a broad range of applications.

Rich Desktop Applications
In addition to the 40+ common controls included in GUI Design Studio, you can use a variety of other generic elements and add graphic images and icons too.

And with extensive support for tabbed interfaces, modal popups, dialogs and a whole host of other features, you can design almost any application.

Ribbon Bar Applications
Love it or hate it, you can’t ignore the Ribbon Bar interface that Microsoft introduced in Office 2007.

Now you can try out a Ribbon Bar design for your application without having to commit to any particular implementation or toolset.

Then you can evaluate it against a more traditional menus and toolbars design to see what works best for your users. All without coding of course!

Web Applications
There’s a complementary set of elements specifically designed for Web applications that you can use with some of the common controls.

Using components, GUI Design Studio makes it easy to deal with the complex Web sites containing common sections such as navigation menus on multiple pages. It even allows each instance to be customised while retaining a common master.

Rich Internet Applications (RIAs)
Modern Web applications are approaching the power of desktop applications.

GUI Design Studio provides for this with its support for components, dynamic panels, rollovers and tabbed interfaces.

Multiple Visual Styles Supported
Whether you’re designing for Windows Vista, XP, NT or the Web, you can change the look of your design with a couple of preference settings. Design in one style and present in another.

And if you need more of a lo-fi wireframe presentation that says “hey, this is just a quick prototype” then you can use Outline styling options or unusual colour schemes. Ever seen XP in orange?

Easy Access To Icons
No application is complete without icons. We’ve included over 150 common icons to get you started but when you need to create your own, you’ve got instant access to Icon Express, our simple to use icon editor.

And if you need a more powerful icon editor, you can configure GUI Design Studio to use your favourite editor instead.

Customer Upgrades
If you’ve already purchased GUI Design Studio licenses then version 3.0 will continue to work with your existing keys and your existing projects will be 100% compatible. Simply download and install version 3.0 over your current version and enjoy the latest features.

Evaluating GUI Design Studio 3.0
If you’ve previously tried version 2.4 or below, then version 3.0 should provide you with a new 30-day free trial period. If, for any reason, it reports that your license has expired then contact our support team and we’ll happily provide you with a new trial license key.

You can now gain early access to 3.0 through our Beta Program but first, here’s a few details about the new version:

• With version 3.0, GUI Design Studio has now fully embraced Windows Vista. It was already Vista compatible but all of the elements have now been re-styled to provide the Vista look and feel in addition to the existing XP, NT (Classic) and Outline styles.

  

  These are not separate elements, of course. You can change the style at any time to see what your designs will look like on different Windows platforms or to show an “unfinished mockup” look for review purposes.

• We’ve had so many requests from customers for Ribbon Bar elements that we’ve added full support for this type of interface. Now you can create designs that follow the Microsoft Office 2007 style or just experiment to see what works best for your application by comparing a Ribbon Bar design with a more traditional menus and toolbars design.

  Here’s a sneak peak at a Ribbon Bar design created in Beta 2 (available soon):

  

• For Web Application designs we’ve added a new feature to make rollover effects easy. Although rollovers were possible before, it was tricky to get them right and maintain the correct navigation behaviour. Now they’re simple to do and very flexible. This will be available soon in Beta 2.

• If you’ve struggled to get tabbed interfaces to simulate properly in earlier versions of GUI Design Studio or just found them tricky then you’ll like the changes in version 3.0. We’ve listened to all of the feedback from customers and now made them really simple to create.

• These are just a few of the 20+ enhancements and fixes in the new version.

Upgrades

If you’re a customer wondering about upgrading from your current version or if you need to purchase GUI Design Studio before the new release becomes available then don’t worry because version 3.0 will be a free upgrade for all customers.

About the beta program…

We’re currently putting the finishing touches onto version 3.0 and although the feature list has been nailed down now, there’s still time to influence the final release.

If you’d like to get an early peak at version 3.0 and provide us with feedback to ensure we’ve covered everything we need to, then you’ll want to get on the beta program now.

With thousands of users, we won’t be able to accept everyone so places will be limited. Act now to secure your place and click this link to join the Beta Program!

We look forward to hearing from you.

You can download the entire project (only 86 KB) to see how the whole design was put together. The project files can be opened in GUI Design Studio or the free Viewer that can be downloaded from the Gallery.

From the many requests for a Web Application sample, and the dozens of different kinds of application requested, we’ve put together an Internet Banking example.

We chose Banking because it would be familiar to most people and we also had easy access to a few real examples to crib ideas from (not that we’re lazy – we just didn’t want to spend too much time re-inventing a good design).

This new sample demonstrates:

• how to link Web pages
   
• using masters for common sections like headers, footers and navigation menus
   
• overriding properties on masters for specific page differences such as highlighting the current page
   
• dynamic page content (on-page changes)
   
• mouse overs, including a popup window
   
• generated documentation
   

You can see this new design example in the Gallery where you can also download the project design files and view the generated PDF and HTML documentation.

The project files and distribution file (.gdd) will all open in version 2.4 of both the full GUI Design Studio application and also the free Viewer that you can download from any of the Gallery pages.

Be sure to give us your feedback and let us know what other design samples you’d like us to create (leave a comment here, send us an email or use the Web forms).