The iPhone Contacts application prototype example is based on the built-in Contacts application on the Apple iPhone. It was built entirely from elements within the library, very quickly.

Here are some of the key areas this example demonstrates:

• The typical structure for an iPhone application prototype project in GUI Design Studio.
• Putting together a Quick Concept flow of the application.
• The basic elements needed to create the screens.
• How a typical screen design is put together.
• How to create a scrolling section on a screen.
• Flipping between portrait and landscape oriented designs.

The project files can be downloaded from the example gallery page.

I hope this example will help you get your iPhone application prototypes off to a flying start!

This is also a really useful way of sharing your designs. If you work in a team, or in an organisation that creates multiple products, you can share complete designs, templates of multi-page design patterns or individual components. Not only does this help save lots of time, it also promotes consistency and best practice in your designs.

What’s been missing is an easy way for you to get access to design libraries and to share your own.

So we’ve just launched www.guidesignpatterns.com where you can download libraries, templates, samples and patterns, and make your own contributions to the community. So, even if you work on your own, you’ll be able to benefit from the work of others and to share your work with them.

Our aim for this site is to build up an extensive resource of common design patterns and elements to help you create your prototypes as quickly as possible.

Contributing your own designs is as easy as sending an email. To help structure and search the database of samples there are some simple guidelines to follow in submitting your work. Things like how to set the right tags and what files to attach.

To help you download and make use of the designs on the site, we’ve prepared three posts to take you through the process for libraries, templates and samples.

There’s also a helpful link within GUI Design Studio to go straight to the set of available libraries from the “New Project” dialog:

And there’s another link within the template browser to take you to the templates on the site:

We’ve started the ball rolling by adding an updated Web Widgets Library and some other templates and samples. We’ll be adding lots more in the next few weeks, so you may want to follow the RSS feed, or bookmark the home page.

We look forward to seeing some of your useful patterns on the site too.

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. You can compare the two editions here.

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. We’re providing a whole set of flexible tools to make it easy to do this and more.

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; we’re calling these “translation variables”.

Whatever your application, we’re confident that 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.

Templates and Libraries Online

We’re in the process of setting up a new community site to publish and share Templates and Libraries containing reusable Components, Custom Elements and Design Patterns.

We’ve been waiting a long time to do this but with these new features in GUI Design Studio 4.0, it now makes more sense. The links are already in the software and the new site will go live soon. Stay tuned!

Download and Upgrade

You can download a 30-day trial of v4.0 here (either edition) and install it along side any existing version that you might be using.

Upgrading from an earlier version

GUI Design Studio version 4.0 is fully compatible with projects and files created in earlier versions but, of course, if you modify your projects to use the new interactive features of 4.0 Professional (such as Conditional Content Panels) then these will be ignored when re-opened in earlier versions.

If you want to experiment with the 4.0 features before committing to upgrading then it’s best to work from a copy of your project or create a backup first.

Purchasing

If you purchased version 3 on or after 1 December 2009 then we will be sending you a new v4 license key for each license you bought at that time, free of charge.

Otherwise, you can buy new licenses or low cost upgrades here. And look out for our special March promotional discount!

Tell us what you want!

As always, we welcome all your feedback and suggestions so that we can create the tools and features you want to use. We’re already working on prioritizing the current list for the next string of releases!

Please leave a comment to let us know how you get on and what you think of the latest release.

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

Calendar Elements

With so many requests from users, we’ve finally added Calendar elements to the mix. This was essentially the last missing native Windows control and a common feature in a vast number of desktop and Web applications.

So why has it taken so long to appear? Well, that’s a very good question. Right from the start, with the version 1.0 release 5 years ago, we realized that calendar controls were important. But rather than create complex elements for every conceivable situation, the idea then was to provide basic building blocks from which other elements could be assembled.

The very first design samples library contained various calendar controls with different display options. We thought that this would be enough for simple mock-up purposes. Well, clearly, we were wrong! Creating calendar controls from scratch using text boxes and other elements is both tedious and time consuming, especially if you don’t want a design that’s stuck in 2005!

So we’ve pulled out all the stops to bring you a very flexible Calendar element that should suit most purposes. There are 2 variants to get you started: one in the “Lists, Trees and Tables” category that represents your standard Windows month calendar, and one in the “Web” category with some very different styling options.

Now it has to be said that there are a lot of property options for the Calendar. With all of the other elements, we’ve tried to cut back on options and minimize them wherever possible. But there’s an increasing demand for more flexibility and more styling options so that’s what we’ve provided here.

Option overload is an important topic for usability so we’ll be revisiting this in a future post with a collection of Calendar element designs. In the meantime, see what fancy Calendars you can create for yourself.

Other Changes in this 3.6 Release

• The “Window” menu now contains some very handy new commands to “Close All” design windows and to “Close Others” so that you can focus on just the design you’re working on.
• Thumbnail Components now have the same ability as regular Components to be redirected to different design files through their property settings. This can be hugely useful, especially when working on Web applications, when you want to change the target of a link without having to delete the old target then drag and drop the new target and hook it up again.
• There’s a new Preference option to Disable Subversion (SVN) support. GUI Design Studio normally detects folders that are under Subversion control and automatically handles them appropriately. However, all Subversion clients on a particular machine must be based on the same version libraries (version 1.6 in this case), otherwise the working copies will be incompatible. This option is for users who are unable to upgrade their Subversion clients from version 1.5 or earlier.
• There’s another Preference option to disable a change we made in version 3.5 to enhance the File Open/Save dialogs by switching to Thumbnail view for images where appropriate. It’s possible that this feature caused compatibility problems (though we’ve been unable to reproduce or confirm these) so the option is there to turn it off.

Bug Fixes

• Using the right mouse button to cancel a drag and drop operation from the Project file tree, Elements or Icons panel no longer activates the popup context menu.
• Custom Tree Icons (added in version 3.5) are now correctly saved to distribution .gdd files.
• Custom Tree Icons are now maintained properly when the Tree is within a Component and has its properties overridden. Previously, in that situation, the icons would revert to the defaults if the icons were within the project (application and other external icons were okay).
• Some of the automatic connection types were not behaving as intended and reverted to “Modal Popup” instead of the correct type. This has now been fixed.
• There’s also a few other minor fixes related to command keyboard shortcuts and annotation popup text spacing.

Download and Upgrade

Download GUI Design Studio version 3.6 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.6 is fully compatible with projects and files created in earlier versions but certain features, such as the new Calendar elements, will not be recognized by earlier versions of the software so be careful if sharing projects with others who haven’t yet upgraded.

Leave a comment to let us know how you get on and what you think of the latest release. As always, we welcome your feedback and suggestions!

While functional prototypes always involve development tools (and associated skills), there are, essentially, four classes of tool for creating user interface prototypes:

1. Pen and Paper

It doesn’t get any more low tech than this, which is great because it means that absolutely anyone can take part in the design process. User interface designs can be hand drawn or pre-prepared stocks of user interface elements can be laid out on a page.

Paper sketches can be produced very quickly but making alterations to a design can be somewhat difficult leading to repeated effort if a design needs to be restarted from scratch. It’s often best to spend more time thinking before committing pen to paper.

In test and review situations, a human can act as the computer and present the effects of user actions on a design. It’s highly involved and may be time consuming to run user tests, but it can be very effective.

Of course, this isn’t necessarily restricted to paper. Many design sessions involve whiteboards instead of paper – anything that takes you away from the computer and into the undisputed realm of the ‘mock-up’. But any whiteboard design that needs to be ’saved’ will inevitably end up as a photo image and/or paper printout.

2. Drawing tools

Generic drawing tools can be used to mock-up user interfaces with the obvious advantages over pen and paper of being easier to edit, duplicate and distribute for review.

Many of the popular drawing tools (Microsoft Visio, The Omni Group’s OmniGraffle, etc.) have an increasing number of UI stencils available to them. However, many of these are based on graphic images that do not scale well.

Graphic editors (such as Adobe Photoshop) can also be used for creating interface mock-ups, from low fidelity wireframes to high fidelity pixel perfect renditions. This has been the preferred approach for many Web designers where the exact visual design of graphic elements is important. Expert knowledge of these tools is often required and producing designs quickly from scratch can be daunting.

However, with all of the generic drawing or graphics tools, what you end up with is a set of static screen designs but no easy way to communicate how the parts interact and the workflow between them. Although there are some documented techniques to get around these limitations, they take some skill and learning.

One approach is simply to take printouts of the screens and perform paper prototyping review sessions.

3. Development tools

Development tools have always been an option for the production of prototypes with Rapid Application Development (RAD) tools having earned some degree of popularity. The main benefit is being able to produce a fully working prototype that acts just like the real thing even if some of the actual functionality is being emulated with dummy data.

For evolutionary prototyping, this is the only way to go, but for throwaway prototyping, the additional time and skills involved and all of the disadvantages with regards to evolutionary prototypes, make this a fairly poor choice.

4. Specialised prototyping tools

Here’s where it gets more interesting. Combining the benefits of drawing tools and, in some cases, development tools, specialised prototyping tools (like GUI Design Studio) allow you to rapidly create software prototypes with features that allow the application interaction and workflow to be explored.

Because they are intended specifically for the design of user interfaces, they have dedicated functionality that is not necessarily found in the drawing tools but are as easy to use so they don’t require any specialised technical skills.

Many of these tools will allow designs to be easily annotated, shared for review and used to generate specification documentation.

Of course, I’m biased, but these are really the best type of tool to use for software prototyping.

Whatever approach you take, software prototyping can reap huge benefits in the production of your software projects and make them more likely to succeed.

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

Tree Icons
Until now, Tree elements have come with just a couple of basic sets of icons and the only way to change individual item icons was to place other icons on top.

That worked well until scrolling and item expansion/contraction functionality was added in version 3.3. After that, you needed to jump through a few hoops with components to get custom tree icons working properly.

Well, we’ve finally given Tree items their own icon property so you can now select them directly and everything works as it should. For convenience, the icon selector also keeps a record of the 10 most recent icons for fast, one-click selection.

Other Changes

• Slider elements now have a “Reverse Range” option that makes them slide from right to left instead of left to right (for Horizontal Sliders). This will become more important in version 4.0 when it’s released. Vertical Sliders now default to upwards unless reversed and this may have a minor impact on some existing designs.
• Based on customer requests, the context menu on the Project panel file tree has been expanded and re-arranged to make it even more useful.
• When you connect screens in GUI Design Studio, you’re really building a true application prototype. We want to emphasize this more so, as a rather subtle but pervasive change, all references to “Simulation” are being phased out and replaced with references to “Prototypes”. This will be most apparent with the disappearance of the “Simulator” menu which has been renamed to “Run”.
• We realized that a few of the newer keyboard shortcuts were conflicting with the main menu so we’ve changed them as follows:
  • Go to connection source: Alt+R -> Ctrl+R
  • Go to connection target: Alt+T -> Ctrl+T
  • Swap selected elements: Alt+S -> Ctrl+W

Bug Fixes

• The Notes panel now behaves correctly when the Design/Activity Bar is floating rather than docked to the side of the main window. Now you can make full use of the design screen by placing the panels out of the way on a second monitor. Thanks to all those that reported this bug.
• Redundant checking of the SVN repository has been removed to improve performance in certain circumstances when using team collaboration features.
• Changes to project and folder links are now saved correctly. In V3.4 this became intermittent depending on whether other changes were triggering the project save or not.
• Property editor buttons have been made taller, where necessary, to ensure that shortcut key indicators (underlines) are visible on all supported platforms.

Download and Upgrade

Download GUI Design Studio version 3.5 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.5 is fully compatible with projects and files created in earlier versions but certain features, such as Tree item icons, will not be recognized by earlier versions of the software so be careful if sharing projects with others.

Finally, do let us know how you get on. As always, we welcome your feedback and suggestions!

People often talk about “Throwaway Prototypes” versus “Evolutionary Prototypes” and it’s very important to understand the difference and exactly what type you are creating before you begin.

Throwaway Prototypes

A Throwaway Prototype, as the name suggests, forms no part of the final application. Its purpose is to prove (or disprove) a design and get approval for actual implementation.

It can be produced using any quick and dirty technique and the quality can even be quite poor, so long as it satisfies the requirements of identifying what’s right about a design, what’s wrong and what’s missing.

Because of the speed at which Throwaway Prototypes can be put together and changed (usually on-the-fly), they encourage feedback and continual revision until the design is about right.

Because the effort required to produce them is relatively small, there’s less ‘attachment’ to a design and therefore very little reluctance to change. However, you do need to be careful that you don’t end up in an endless cycle of analysis and revision without making any development progress at all!

Evolutionary Prototypes

In contrast, Evolutionary Prototypes are intended, right from the start, to eventually evolve into the final, delivered application (or system) through incremental developments and changes. In one sense, this seems like a great idea because each increment is getting you closer to a delivery and progress is clearly being made.

However, there are many risks involved in this approach. Because it involves implementation of the system itself, the coding has to be of production quality from the start. The idea of ‘cleaning it up later’ is a very bad one since this will never happen in practice, leading to potential problems and instability later on. But this conflicts with one of the key benefits of being able to create prototypes quickly. Also, because of the effort that’s gone into it, there can become too much attachment to the implementation which leads to a resistance to change.

Not only that, it’s very difficult to see the ‘bigger picture’ with an evolutionary prototype because you can only see, and therefore review, the parts that have been implemented and it’s very difficult to compare different versions or approaches to a given design.

There’s another potential problem with evolutionary prototypes. Sometimes you’ll already know what technology you’ll be using but sometimes you will be free to choose what’s best for the application. By creating an evolutionary prototype you will be committing to an implementation too early when a more suitable technology or component set might become apparent later on once the requirements of the application are better understood.

In the last part of this article we’ll discuss different methods and tools for generating prototypes.

Prototyping in the software industry is not so common but the benefits are just as compelling.

There are two main types of software prototype: functional prototypes and user interface prototypes.

Functional Prototypes

Functional prototypes are nearly always technical in nature and their purpose is to test whether an idea or design is actually feasible using a given technology. For example, whether a particular system might be able to handle 100,000 transactions a second or whether it’s really possible to perform a content match on thousands of data records in real time as a user types in a search query.

Functional prototypes will always involve getting down and dirty with the code and trying to build a working version of something that can be tested to validate the idea.

User Interface Prototypes

User interface prototypes, on the other hand, are more about the presentation of concepts and ideas, and are therefore less technical and more accessible. Interface prototypes represent the front-end of an application or system; the part a user will actually see and interact with. In fact, in most cases, this is all the user is really interested in.

User interface mock-ups and prototypes allow both users and developers to understand the application before it’s built; to test its usability and ensure that all of the requirements are covered. All too often, software is built that has the most amazing functional engine, under the hood, that runs at lightning speed, but users hate it because they can’t understand how to use it. The user interface has just been hacked together rather than carefully thought through.

There are many different techniques for creating user interface prototypes, covering the full spectrum from using nothing more than pen and paper to the use of full-blown development tools. In-between there are more specialised tools, like GUI Design Studio, that are more suited to the job.

In the next part of this article we’ll talk about the difference between a “Throwaway Prototype” and an “Evolutionary Prototype”.

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…

Here’s a quick summary of how to produce a scrolling region:

1. Create a large design.
2. Create your container design.
3. Drag and drop your large design onto your container design as a ‘component’.
4. Double-click the component to edit its properties, as follows:
   • Check the “Maintain size when component changes” option on the Style tab
   • Uncheck “Fixed Width” and “Fixed Height” on the Position tab
   • Set an arbitrary small size to make it easier to work with, say 300 for “Width” and “Height” (Position tab)
   • Hit “OK”
5. Resize the component to the actual desired size.

That’s it!