GUI Design Patterns

GUI Design Patterns

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

 
Aug 3 / 7:51am

iPhone Library v1.1

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.

 

   
Click here to download:
iPhone_Library_v1.1_tag_Librar.zip (242 KB)

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

Filed under  //  iPhone   iPod Touch   Libraries  

Comments (0)

 
Apr 12 / 7:54am

iPhone Alarms Application Prototype Sample

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.

 

             
Click here to download:
iPhone_Alarms_Application_Prot.zip (186 KB)

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

Filed under  //  alarms   iPhone   iPod Touch   Samples  

Comments (0)

 
Apr 12 / 7:18am

iPhone Library v1.0

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.

       
Click here to download:
iPhone_Library_v1.0_tag_Librar.zip (264 KB)

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

 

Filed under  //  iPhone   iPod Touch   Libraries  

Comments (0)

 
Mar 26 / 8:09am

Web Widgets Library v1.1

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!

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

 

Filed under  //  calendars   Libraries   pagination   search   web  

Comments (0)

 
Mar 25 / 10:53am

Wizard Templates

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.

       
Click here to download:
Wizard_Templates_tag_Templates.zip (42 KB)

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  //  desktop   Templates   wizard  

Comments (0)

 
Mar 23 / 12:00pm

Internet Banking Design Sample

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.

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

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

Filed under  //  banking   Samples   Templates   web  

Comments (0)

 
Mar 22 / 11:36am

How to Use This Site

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  

Comments (0)

 
Mar 22 / 11:17am

How to Get Involved and Contribute

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:

Read the rest of this post »

Filed under  //  How to use this site  

Comments (0)

 
Mar 22 / 10:01am

How to Use GUI Design Samples

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.

Read the rest of this post »

Filed under  //  How to use this site  

Comments (0)

 
Mar 22 / 9:51am

How to Use GUI Design Templates

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.

Read the rest of this post »

Filed under  //  How to use this site  

Comments (0)