example design « Caretta Software Blog

Posts Tagged ‘example design’

Ribbon Bar App Prototype Library, Template and Sample Released

Friday, February 11th, 2011

Now you can get a massive head start when designing applications based on the ribbon bar user interface paradigm that originated with Microsoft Office 2007.

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.

Ribbon Library Widgets
(more…)

Tags: example design, GUI Design Studio, libraries, ribbon bar, software prototyping, templates
Posted in Example Designs, GUI Design Studio, User Interface Design | No Comments »

iPhone Contacts Application Prototype Example

Friday, August 13th, 2010

iPhone Contact Info Prototype Screen Design Now that we’ve posted an updated iPhone Library of GUI design widgets (v1.1), it was time to add a new example to the Gallery that makes use of it.

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!

Tags: example design, GUI Design Studio, iphone, software prototype
Posted in Example Designs, Prototyping, User Interface Design | 2 Comments »

Short Demo on How to Create Scrolling Regions in GUI Design Studio

Tuesday, May 12th, 2009

Following on from the GUI Design Studio v3.3 release, here’s a short video (05:52) that demonstrates how the scrolling region shown in the previous post was constructed:

For best viewing quality, click on the HD and Full Screen icons once play has started!

Here’s a quick summary of how to produce a scrolling region:

Create a large design.
Create your container design.
Drag and drop your large design onto your container design as a ‘component’.
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”
Resize the component to the actual desired size.

That’s it!

Tags: example design, GUI Design Studio, software prototyping, video
Posted in Example Designs, GUI Design Studio, Prototyping | No Comments »

Web Application Design Walkthrough Video

Tuesday, January 29th, 2008

The walkthrough video for the Internet Banking Web Application design is now available to view in the Gallery. This gives you a brief (2-minute) tour of the design and points out a few of the key features.

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.

Tags: example design, GUI Design Studio, web design
Posted in Example Designs, GUI Design Studio, Prototyping, User Interface Design | No Comments »

Web Application GUI Design Example In The Gallery

Thursday, December 6th, 2007

Internet Banking Web Application GUI Design Most of our design examples so far have focussed on Desktop applications but GUI Design Studio is also highly suited to Web Application design.

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:
(more…)