Using the Ribbon Bar elements already in GUI Design Studio, our new design library, application template and prototype sample make it easier for you to get started quickly.

1. Ribbon Library

The Ribbon Library contains:

• 15 common ribbon groups: Clipboard, Document Views, Editing, Font, Illustrations, Links, Pages, Page Setup, Paragraph, Sort, Styles, Symbols, Tables, Window and Zoom
• 3 pre-configured ribbons that use the groups: Home, Insert and View
• An application window, menu and quick access drop-down
• Various grids for colour selectors and generic item selections
• Other popups including a page size and symbol selector
   

Once you’ve added these to your design projects you can edit and expand them as necessary for your own application.

2. Ribbon Application Template

The Ribbon Application Template, for GUI Design Studio v4 Professional edition, provides you with an instant starting point for a ribbon bar application:

• 3 ribbon tabs with associated drop-downs in their own component design files, ready for editing: Home, Insert and View
• A main application window hooked up to the menu and ribbon tabs

3. “Wordsmith” Sample

The “Wordsmith” sample prototype application, also available from our Design Gallery, is a tribute to Microsoft Word.

Initially built from the Ribbon Application Template, it expands on the existing ribbon tabs and adds 3 new context sensitive tabs for “Picture Tools” and “Table Tools”.

A scrolling Document design demonstrates how to activate the context tabs when objects are selected within the document and also highlight those objects with a bounding box.

Note 1: GUI Design Studio v4 Express edition users can open and run this sample prototype, and explore the various tabs and drop-downs. However, it makes use of Professional edition features to activate context tabs and selection boxes, so these will be permanently visible.

Note 2: GUI Design Studio v3 users can also open this sample and get a similar experience to v4 Express users. However, the sample makes use of many Ribbon Library components and icons and the sample/library paths changed with v4. To view and edit the sample project in all its glory, you’ll need to install (unzip) the Ribbon Library to a new “Libraries” folder instead of the usual “Samples” folder:

   C:\Program Files\GUI Design Studio\Libraries\

Use them in your own ribbon design projects!

We’d love to hear your feedback so let us know what you think of these new Ribbon resources and how you get on with using them in your own projects.

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.

When we started designing this feature, we looked around for examples of different calendars in desktop and web applications. We found a wide range of different designs; some with one month, some with 3 or 4, some highlighting “today”, others highlighting a particular day or a range of days. Of course, each application had quite a different visual design to its calendars as well.

In the past, we’ve tried to simplify elements and minimize the number of settings and options they have but, with this new element, we felt we had to provide for the increasing demand on design flexibility.

The problem, as all of you designers of great user interfaces will know, is that with flexibility comes complexity. We didn’t want to give you a tool which is hard to learn or slow to use because it has so many options and special cases, but we did want to give you a tool which will let you create the calendar design you need, quickly and simply.

That was the aim.

We’ve ended up with eleven different areas or labels. There is the Main Control background to the element, the Title Box, an optional Week Numbers column, a Week Day Names and Weekend Names title row (weekends don’t have to be different from week days, but they can if you like).

Then there are the Week Days and Weekends that appear in the calendar body. You can choose to display the Trailing Days in a month (these are the days from the previous month that make up the first week of the current month, and the days of the next month which complete the final week).

Finally there are the specially highlighted days; Today Highlight, Selected Day and (because selected days can be in the trailing period) the Selected Trailing.

Each of these needs a colour for the background (Fill), the Border and the Text. That is 33 different colours!

Here’s what the ‘Colours’ property panel looks like:

And that’s before we even start talking about the options to specify what parts of the calendar should be included, cell sizes and spacing and various other controls.

Actually, we could have gone further. While trying to replicate some of the designs we came across, we found the need for even finer control over some of the colour and layout parameters.  But there comes a point when you need to say ‘enough is enough’ and compromise between total flexibility and usability.

Clever use of the different colours and the various borders and spacing between the elements allows you to create an incredibly wide variety of calendar designs.

You’ll find a small gallery of some of the possible designs below. The top one’s from Windows XP but the rest of the examples are loosely based on calendar designs from around the Web, including Google and a range of examples highlighted in Antonio Lupetti’s blog post on “Beautiful datepickers and calendars for web developers”.

So, what do you think? Did we provide enough styling options, or too many?

We think we’ve got the balance just about right, but we’re happy to hear your opinion too. We’d also love to showcase your own beautiful calendar. If you have a design you’d like to share, or something to say about the new element, why not post a comment?

Enjoy your GUI Design Studio Calendars!

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!

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

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.

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!