GUI Design and Software Prototyping

Patrick Kennedy has released the slides from his presentation at the “Enhancing Online User Experience” conference in Melbourne Australia.

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!

GUI Design Studio version 3.0 has now been released and is available for immediate download. If you’ve already tried a previous version or subscribed to our newsletter then check your email for download instructions, otherwise please request a trial.

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.

Your ability to create rapid user interface designs and application prototypes without coding is about to get better with the upcoming release of GUI Design Studio 3.0.

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.

The walkthrough video for the Internet Banking Web Application design is now available to view in the Gallery. This gives you a brief (2-minute) tour of the design and points out a few of the key features.

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.

Most of our design examples so far have focussed on Desktop applications but GUI Design Studio is also highly suited to Web Application design.

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).

We’re pleased to announce that GUI Design Studio version 2.4 has now been released and is available for immediate download. If you’ve already tried a previous version or subscribed to our newsletter then check your email for download instructions, otherwise please request a trial.

GUI Design Studio version 2.4 is now Vista compatible with changes that include:

• Documentation Generation
• Now you can add rich, formatted descriptions to all of your design elements.



• Generate specification documentation that describes your entire project or just a section of it. Formats include RTF and PDF:

  

  And hyperlinked HTML:

  
   

• Create update documentation that includes only the designs that have changed since the last documentation was generated, saving time and resources.
   
• Built-in spell checker available for UK and US English (with Spanish available on request).
   
• Documentation translation files available for many languages.
   
• Popup Annotations
• Element descriptions appear in a popup tool-tip window within the design editor and, optionally, during prototype simulation.


 

• This helps to convey your design intentions more quickly and easily for faster feedback and clarification of business rules.
   
• Improved File Performance
• Design documents now open and save faster with greatly improved performance across a local area network (LAN) drive.
   
• Loading heavily interlinked designs (such as Web Applications) used to be a bit slow. Not any more! All designs now load quickly and, in some cases, over 100 times faster than in previous versions, making you more productive.
   
• Other Enhancements
• Transparency is now supported in GIF and PNG image files for greater design flexibility and better support for custom elements.


 

• Changes made to a component design are now instantly visible in other designs (in most cases) without having to manually refresh.
   
• Plus lots of other tweaks and bug fixes.
   

As always, we’d love to hear your comments and suggestions so grab yourself a copy of the new version and let us know what you think!

Further to the version 2.3 release of our GUI Design Studio software prototyping tool a couple of weeks ago, we have now released a minor update.

This fixes a couple of Component Override bugs that evaded our testing. We’ve also taken the opportunity to include a couple of extra tweaks:

• Improved detection of Web applications when using components so that the correct Browser mode is started for simulation.
   
• A “Paste from Clipboard” facility for the Table element to allow the table to be more easily filled from existing spreadsheet data.
   

If you’re an existing customer or you’ve already tried a previous version then check your email today for download instructions otherwise please request a trial.

Version 2.3 is a free upgrade for all existing customers. If you’ve purchased licenses then your existing keys will continue to work in this latest version. Otherwise, your 30-day trial of 2.3 will continue as before.

As always, if you need any assistance with the software then we’re here to help. Email us directly or use our web forms at: http://www.carettasoftware.com/support.html

We’re pleased to announce that GUI Design Studio version 2.3 has now been released and is available for immediate download. If you’ve already tried a previous version then check your email today for download instructions otherwise please request a trial.

There’s a host of new features in this version, including:

• Enhancements for Web application design
   
• New Web elements: Web Tabs, Web Panels, Web Button, Text Link List, Image Placeholder, Greeked Text
   
• New navigation types: “Replace Top Window” for Web page navigation (and other uses) with “Back” and “Forward” support.
   
• New event triggers for dynamic effects: “Mouse Enter”, “Mouse Leave” and “Mouse Over”.
   
• A new “Browser” mode for the Simulator that features a simple browser bar and other features that better suit Web designs. This mode can be switched on and off.
   
  
• Thumbnail components for a compact visualisation of navigation links.
  
   
• Plus further enhancements to existing elements to make them more adaptable to Web application use.
   
   
• Other enhancements
   
• New component overrides that allow you to use a component design and customise it by changing the properties of any element within it. This greatly enhances the reuse of components.
   
• Increased performance when using graphics and icons on larger projects to eliminate related system resource issues and speed up load time of graphic intensive designs.
   
• Plus various tweaks and bug fixes to other elements and features including the Icon Express icon editor.
   

We love to hear your comments and suggestions so give the new version a whirl and let us know what you think!

Thanks to those that took part in this little bit of fun, both on the blog and by email.

The correct answer to the film is of course “Harvey“, made in 1950 and starring James Stewart. It’s a wonderful film that you really must see!

The odd one out in the cast list was Mary Chase who wrote the original stage play and also the screenplay for the film (with Oscar Brodney).

And the winner is… Kevin Murray with an amazingly quick answer. Ian Summers was a very close runner up being pipped at the post by just a few minutes. Well done to both of you!

We’d like to think that such fast and accurate answers came from your encyclopedic knowledge of great films and nothing at all to do with the use of Internet search engines or online film databases ;-). Congratulations however you got there!

Whether you managed to answer the competition or not, I hope you managed to take a look at the Outlook-alike design example from the last post. If you just look at the video you’ll get some idea of what GUI Design Studio can do with your user interface designs.

If you download the distribution file (and Viewer) then you can also try out the application simulation, have a look at how the project was put together and maybe get some tips for your own design projects.

Following last week’s launch of GUI Design Studio version 2.2, we’ve had quite a few questions about what it’s really capable of and maybe you’ve been wondering about that yourself.

We figured the best way to answer that was by way of an example prototype design. The trouble was, we didn’t have anything big enough or suitable enough in-house and we certainly can’t share any of our customers’ designs.

So we set ourselves a challenge. What could we put together quickly as a good example? Not a simple 5-screen demo, but a fully fledged application. It needed to have real-world appeal and be the type of application that’s familiar to as many of you as possible.

The answer was staring us in the face… Microsoft Outlook!

What would it take to create a design of that magnitude and how easy would it be to do? We wanted to find out so we gave a single designer just 3 days to create an example project from scratch using no other resources than a basic GUI Design Studio installation.

Rather than invent some hypothetical example along the same lines, we decided to create a Microsoft Outlook-alike design. That way, we could at least eliminate some of the creative thinking time :-). It’s not a complete clone of course. We’ve taken the essense of the design, changed quite a few things and left a bunch of stuff out.

Here’s one of the screen designs… does it look at all familiar?

You can see a short video walkthrough of the final result in the Gallery where you can download the project (and the free Viewer) for examination, and read the project notes.

3 days wasn’t quite enough time to complete the project but our designer managed to accomplish a great deal:

• 5 application modes (mail, calendar, contacts, tasks, goals)
   
• Multiple sub-modes within most modes
   
• Task bars
   
• Popup screens
   
• Structured report (table) views with expanding and contracting groups of rows
   
• Mode-dependent toolbars and menu overrides:

• Extra icons, quickly created on-the-fly where necessary using the integrated Icon Express editor.
   
• It also turned into a good example of project structure with independent sub-systems and component designs. These were worked on individually then assembled into the final prototype. The sub-sytems can be viewed and tested independently making the whole project much easier to manage.

Here’s what our designer had to say about the experience…

“I was surprised at how much of the application design I managed to create in such a short period of time.

You can’t see it from the final video but the design was built up in stages, starting from an outline and gradually filling in the details. Initially, all the modes looked the same with just different title text and no content. Then, one by one, I worked on each mode and added features.

I love the ability to work in this way, making incremental changes to the design to flesh it out and being able to jump from one area to another to make tweaks.

At each stage, we looked at the design to see what needed further detail and clarification. During the process, many questions popped up like ‘what’s missing?’, ‘what’s this bit for?’, ‘how would we do such-and-such?’ and ‘does the flow work well?’.

I don’t know how long it would take for a developer to create a prototype to this level but, most of the time, it took me just a few minutes to duplicate screens and make changes.

I’m itching to get back on the project and expand on the bits I didn’t have time to complete!”

Competition for Fun

Just for fun, we have a competition for you. Within the prototype there’s a classic film cast list. If you can name the film, post your answer as a comment on this blog or email it to us. If anyone gets it right, we’ll announce the winner next week.

For extra brownie points, one of the cast members is not actually an actor. Who is it and what is their connection to the film?

Have your questions answered

Here’s the short video walkthrough link again.

If you have any questions about the example (anything at all), then post a comment here or email Support. And remember to post your answer to the “spot the film” competition!