Contributed by Caretta Software

Requires: Ribbon Library v1.0+

In tribute to Microsoft Word, the application that essentially started the Ribbon UI movement, along with a few of the other Microsoft Office tools, we've created a similar application prototype named "Wordsmith".

This prototype was initially created from the Ribbon App Template then edited and expanded to add further ribbon bar panels and a scrolling document area.

It also demonstrates how to use context tabs that only appear when certain elements in the document have been selected. A mechanism for showing selected objects is also included.

Install the Ribbon Library before using this project.

Credits:

Some of the icons in this library were kindly provided by FatCow Web Hosting:
http://www.fatcow.com/free-icons

Original high resolution images kindly provided by Min Thu and hongkiat.com:
http://www.hongkiat.com/blog/high-quality-fruits-stock-photos/

See the full gallery on Posterous

Wordsmith-v1-0.gdd Download this file

Wordsmith-v1-0.zip Download this file

Permalink | Leave a comment  »

Contributed by Caretta Software

Template:          Ribbon App Template
Version:             1.0
Uses:                 Ribbon Library v1.0
Compatibility:   GUI Design Studio Professional v4.0+

Install to:            Templates \ Ribbon \ Applications \

This template will get you started quickly on an application design based on the Ribbon Bar UI paradigm. It includes the following connected designs:

• Application frame window with ribbon bar and status bar
• Application menu with predefined commands
• Home ribbon
• Insert ribbon
• View ribbon

This template was put together very rapidly using the elements in the Ribbon Library.

See the full gallery on Posterous

Ribbon App Template.gdt Download this file

Permalink | Leave a comment  »

Contributed by Caretta Software

Library:            Ribbon Library 
Version:           1.0
Compatibility:   All GUI Design Studio editions and versions

A collection of re-usable components and custom elements for Windows and Rich Web application designs that incorporate Ribbon Bars.

Some of the icons in this library were kindly provided by FatCow Web Hosting:
http://www.fatcow.com/free-icons

See the full gallery on Posterous

Ribbon-Library-v1-0.zip Download this file

Permalink | Leave a comment  »

Contributed by Caretta Software

Library:     iPhone Library
Version:    1.1

This is an updated version of the library containing an extensive collection
of custom element widgets and components for prototyping Apple iPhone and
iPod Touch applications.

New in v1.1:

• Custom element grouping (for v4.1) 
• Rotate buttons added to devices for prototyping purposes 
• Landscape keyboards and selectors 
• Additional Form elements and buttons 

The Rotate buttons on the Device components appear as icons near the Home
button and are intended to be used as a trigger to emulate rotating the
device from Portrait to Landscape and back. This lets you design interfaces
for both orientations and see how they inter-play. There's a simple rotation
test design included to show how this might be used.

See the full gallery on Posterous

iPhone-Library-v1-1.zip Download this file

Permalink | Leave a comment  »

Requires:             iPhone Library

This is a very simple iPhone “Alarms” application prototype, based on the Alarm mode of the built-in Clock application. It demonstrates use of the iPhone Library.

There’s a few things worth noting with this sample:

1. It includes a Quick Concept screen flow, using the Tiny screens, that was put together in about 10 minutes (see screenshot).

2. During design, it was useful to copy and paste parts into new custom element widgets (in the “_Widgets” sub-folder) to speed up duplicating areas.

3. As of GUI Design Studio version 4.0, there’s no way to turn off the scroll bars of scrollable components (otherwise there’d be no way to scroll them). So we had to cheat a bit for the scrolling “Change Sound” screen where a “Windows” scroll bar appears in the prototype (see screenshot). The trick here is to nudge all of the scrolling region content further over to the left than they would normally be to make room for the wide scroll bar. The scrolling component ‘part’ design should be 306 pixels wide rather than 320.

See the full gallery on Posterous

iPhoneAlarms.zip Download this file

Permalink | Leave a comment  »

Library:                 iPhone Library
Version:               1.0

This library contains an extensive collection of custom element widgets and components for prototyping Apple iPhone and iPod Touch applications.

The components are intended to be used as-is. In contrast, the custom element widgets are, of course, intended to be edited once they’ve been added to your own designs, to change text, colours, icons, etc.

We’ve also included an experimental set of “Concept” widgets. These are simply mini (half-size) and tiny (one third size) versions of a few common screen layouts. The idea is to use these up-front on a storyboard design to figure out what screens are needed and how they flow, before getting into detailed design for each screen.

Version 1.0 skimps on landscape copies of many elements but there should be enough to get started. We’d also like to add many more colour variants of buttons and title bars for future versions of this library.

See the full gallery on Posterous

iPhone-Library-v1-0.zip Download this file

Permalink | Leave a comment  »

Contributed by Caretta Software

Library:                 Web Widgets Library
Version:               1.1

This is an update to the Web Widgets Library supplied as part of the GUI Design Studio 4.0 install. It contains some new Pagination widgets and a Gallery design file to reference the contents.

We’ll continue to update this library as we go along!

Web-Widgets-Library-v1-1.zip Download this file

Permalink | Leave a comment  »

See the full gallery on Posterous

Full Wizard Sequence.gdt Download this file

Wizard Start.gdt Download this file

Wizard Step.gdt Download this file

Wizard Working.gdt Download this file

Wizard Complete.gdt Download this file

Permalink | Leave a comment  »

Contributed by Jonathan
at Caretta Software

Compatibility: All versions (except template: 4.0 Pro only)

This is the Internet Banking example from our main web site. I’ve posted it here partly as a test for this site but also because we’ve had a number of requests for it to be provided as a template for new projects.

Banking.zip Download this file

Banking.gdt Download this file

Permalink | Leave a comment  »

This is an open and public site containing GUI design libraries, templates, samples and patterns for use with the GUI Design Studio prototyping tool.

You can find more information in the following posts:

                How to use GUI design libraries

                How to use GUI design templates

                How to use GUI design samples

                How to get involved and contribute

Permalink | Leave a comment  »

This is a community site. If you're a GUI Design Studio user then please feel free to contribute your own designs, patterns, libraries and templates for others to use.

We chose Posterous to make this as easy as possible.

Simply email your contribution to post@guidesignpatterns.posterous.com and include the relevant files as attachments:

Subject

The subject should contain a short summary of what you are contributing. This will become the title of the post.

You should also include one or more tags to categorize the post and make it easy to find your contribution once on this site. Use the following form as shown in the example above:

((tag: tag one, tag two, etc))

For consistency, please use the following tags then add any other tags you want to use to classify the content:

                Libraries               for a reusable library
                Templates           for a reusable project or pattern template
                Samples               for sample designs or projects

Attachments

For Libraries and Projects, use the “File | Pack Project for Sharing...” command in GUI Design Studio then attach the resulting ZIP file.

For Templates, attach the template .gdt file that you’ll find within your shared documents folder: GUI Design Studio\Templates\

For individual design files, simply attach the .gui file but please make sure that they are self-contained and don’t reference any other design or image files.

You should also attach one or more screenshot images to represent the contribution. Posterous will automatically insert these into the body of your post and create a gallery if you provide more than one image. As an alternative, you can also insert images inline within the body of your message if your email client will allow it.

Body

The body of your message should contain a description of what your posting. You can make this as brief or as long as you want.

It’s a good idea to include your name at the top if you want t o be credited (e.g. “Contributed by ...”).

If there are any compatibility issues such as using features that are only contained in certain versions, then it’s useful to include those too.

What happens after I send my email?

Once you've sent your contribution it will appear on the site as a new post as soon as it's passed moderation. It's not that we want to censor any genuine contributions but we obviously need to be careful with such an open system.

What if I need to correct or change a post?

A good case in point is when you want to post a new version of a library or template.

Well, we'll cross that bridge when we come to it but probably the best approach will be to send us (support at caretta software dot com) an email with the corrections or post a new version with a comment in the body so that we can either edit and/or replace the old content during moderation or add a link from the old post to the new one (to preserve permanent links to the old post).

If you have any good ideas on how to deal with this situation then do let us know.

Permalink | Leave a comment  »

Design samples on this site can be in the form of individual .gui design files or entire zipped projects. While many of the samples might require GUI Design Studio 4.0 or above, check the version compatibility in the description.

Individual design files

These will typically represent simple design patterns or custom elements. Simply download them into your project then edit and use them as required.

Complete projects

These are intended to show off a design or technique and not as a basis for your own projects. Download and unzip the files then open the project to see how it was put together.

If you really want to create a new project based on a sample then follow the steps in the "Creating a reusable template" Help topic to turn the sample into a template, then create your new project from the template!

Permalink | Leave a comment  »

The templates on this site can be used with GUI Design Studio Professional version 4.0 and above.

Templates either provide a basis for entire projects or represent design patterns that can be repeatedly inserted into existing projects then modified as necessary. The type of template should be clear from the description.

Step 1: Download

Download the template .gdt file to your computer. You can either download it to a temporary location then use GUI Design Studio to import it to the correct location (part of Step 2) or try to download it directly into the correct location.

To skip the Import step, first locate your shared GUI Design Studio template documents folder:

On Windows XP:
   C:\Documents and Settings\All Users\Documents\GUI Design Studio\Templates\

On Windows 7 / Vista:
   C:\Users\Public\Documents\GUI Design Studio\Templates\

Then find or create a suitable category sub-folder. Now you can simply download the template .gdt file to that folder.

Step 2a: Create a new project from the template

From the “New Project” dialog, click the “Based on” drop-down and choose “Select template...” from the list:

If you downloaded the template file to a temporary location, now is the time to import it. Browse to a suitable category or create a new one then click the “Import...” button and find the file you downloaded. Once it has been imported, you can delete the temporary download file.

Now you can simply select the template and hit “OK”.

Step 2b: Insert template into project

On the Project panel, right-click the folder you where you want to insert the template then select “Insert from Template...”:

If you downloaded the template file to a temporary location, now is the time to import it. Browse to a suitable category or create a new one then click the “Import...” button and find the file you downloaded. Once it has been imported, you can delete the temporary download file.

Now you can simply select the template and hit “OK”.

That’s it!

Permalink | Leave a comment  »

Design libraries on this site can be downloaded and linked into your working projects so that you have instant access to any of the design assets within them.

Although libraries can be used with earlier versions, these instructions are for GUI Design Studio 4.0 (all editions).

Step 1: Download

 Download the library ZIP file to your shared GUI Design Studio library documents folder:

On Windows XP:
   C:\Documents and Settings\All Users\Documents\GUI Design Studio\Libraries\

On Windows 7 / Vista:
   C:\Users\Public\Documents\GUI Design Studio\Libraries\

Step 2: Extract 

Use your favourite unzip tool to extract the contents of the ZIP to the same location. If the library has been packed properly, this should create a sub-folder for the library. You can now delete the ZIP file if you want.

Step 3a: Linking into an existing project

 Use the "Project | Add Project Link..." menu command (or the button on the Project panel) the browse for the .gdp file of the library you just extracted.

Step 3b: Linking when creating a new project

If you extracted to the shared Libraries folder in Step 2, then the library should be listed at the bottom of the "New Project" dialog. Simply check the box and it will be added to your project.

Step 4: Use the library contents 

Whether the library contains icons, images, component designs or custom elements, simply drag and drop them from the design panels just as you would for any assets within your own project.

Permalink | Leave a comment  »