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.

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.

They’re simple but they can make a big difference to your productivity by cutting out a huge amount of repetitive work, keeping consistency with house styles and helping you to create designs faster.

Custom Elements

Any folder within the Project tree can be assigned to be a Custom Element Folder. The folder icon then changes to indicate its new status. This is also applied to all of its sub-folders.

Now, 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 Custom Element will no longer affect the new design. That means you can then modify the copy 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 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…

You might be wondering how they compare to the existing Components feature. 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 managebale 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.

Simple!

Templates

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 may also 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!