GUI Design Patterns

GUI Design Patterns

Caretta Software  //  Download GUI design libraries, templates, samples and patterns for the GUI Design Studio prototyping tool.

 
Feb 8 / 7:07am

Wordsmith Ribbon Application Sample

by Caretta Software

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/


(download)

Click here to download:
Wordsmith-v1-0.gdd (294 KB)

Click here to download:
Wordsmith-v1-0.zip (201 KB)

Filed under  //  Application   Ribbon   Ribbon Bar   Samples   Wordsmith  
 
Feb 8 / 6:41am

Ribbon Application Template v1.0

by Caretta Software

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.

(download)

Click here to download:
Ribbon App Template.gdt (109 KB)

Filed under  //  Application   Ribbon   Ribbon Bar   Templates  
 
Feb 8 / 5:08am

Ribbon Library v1.0

by Caretta Software

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

 

(download)

Click here to download:
Ribbon-Library-v1-0.zip (125 KB)

Filed under  //  Libraries   Ribbon   Ribbon Bar  
 
Aug 3 / 7:51am

iPhone Library v1.1

by Caretta Software

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.

 

(download)

Click here to download:
iPhone-Library-v1-1.zip (195 KB)

Filed under  //  Libraries   iPhone   iPod Touch  
 
Apr 12 / 7:54am

iPhone Alarms Application Prototype Sample

by Caretta Software
Contributed by Caretta Software

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.

 

(download)

Click here to download:
iPhoneAlarms.zip (25 KB)

Filed under  //  Samples   alarms   iPhone   iPod Touch  
 
Apr 12 / 7:18am

iPhone Library v1.0

by Caretta Software
Contributed by Caretta Software

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.

(download)

Click here to download:
iPhone-Library-v1-0.zip (153 KB)

 

Filed under  //  Libraries   iPhone   iPod Touch  
 
Mar 26 / 8:09am

Web Widgets Library v1.1

by Caretta Software

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

Click here to download:
Web-Widgets-Library-v1-1.zip (29 KB)

 

Filed under  //  Libraries   calendars   pagination   search   web  
 
Mar 25 / 10:53am

Wizard Templates

by Caretta Software

Contributed by Jonathan
at Caretta Software

This set of templates can be used to add a Wizard interface to your desktop application comprising a number of steps, some processing and completion.

(download)

Click here to download:
Full Wizard Sequence.gdt (35 KB)

Click here to download:
Wizard Start.gdt (21 KB)

Click here to download:
Wizard Step.gdt (15 KB)

Click here to download:
Wizard Working.gdt (16 KB)

Click here to download:
Wizard Complete.gdt (20 KB)

Filed under  //  Templates   desktop   wizard  
 
Mar 23 / 12:00pm

Internet Banking Design Sample

by Caretta Software

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

Click here to download:
Banking.zip (85 KB)

Click here to download:
Banking.gdt (114 KB)

Filed under  //  Samples   Templates   banking   web  
 
Mar 22 / 11:36am

How to Use This Site

by Caretta Software

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

Filed under  //  How to use this site