iPhone Contacts - GUI Design Sample

Overview

This sample is based on the Apple iPhone Contacts application and shows how to put an iPhone application prototype together including scrolling regions, switching between portrait and landscape orientations, and use of the iPhone Library of design widgets.

Project Structure

This is a typical structure for an iPhone application prototype project.

The "_Widgets" folder is a place to put any Custom Elements (it's set as a Custom Elements Folder) that you need to repeat throughout your project but also edit in each case. The leading underscore ("_") keeps it sorted near the top of the tree where it's most handy.

If you want to create concept plans first then it's a good idea to place them in their own "Concepts" folder.

"Parts" are for Component designs that will be used within other screens.

The "Screens" folders contain our screen designs in Landscape and Portrait orientations.

Quick Concept

Using the "_Concepts" widgets from the iPhone Library, you can throw together a quick and very rough concept diagram to get a feel for the overall scope of the project and how many screens you want to create.

In this case, the screens to add a photo for the contact were not included in the final prototype!

iPhone Contacts Application - Quick Concept

Project Widgets - Custom Elements

iPhone Contacts Application - Blank Screen Custom Element

If you know that most of your screens need the same basic layout then a good place to start is to create a general screen layout Custom Element that you can drag and drop to kick off a new screen.

Note: You could also turn this into a Template if you're going to use a similar layout in lots of projects. In that case, you don't need the Custom Element in each project.

This one is built entirely from widgets within the iPhone Library.

Components (use as-is):

P-Device
P-StatusBar-Grey
Stripes-Light
Button-RotateToLandscape

Custom Elements (for editing):

P-TitleBar-Blue
TitleButton-GreyBlue

A Typical Screen Design

The process for creating each screen is simple:

Create a new blank design within the appropriate project folder.
Drag and drop the screen blank custom element.
Edit the screen content and add further elements (see next section for scrolling regions).
As new screens are created, add them as thumbnails (right-drag them) then hook them up using "Replace Top Window" navigations. Sometimes you might need other types of navigations such as "Modal Popup" for delete confirmation screens, etc.
If you create a Landscape version of the screen, hook that up to the rotate button and (optionally) add an Anchor to keep it centered. Otherwise, delete the button component from the design.

iPhone Contacts Application - Contact Info Screen

Creating A Scrolling Region

A common requirement of iPhone applications is scrolling long screens of information. Instead of trying to emulate a touch screen interface, we simply cheat here and use a scroll bar.

It works well, doesn't interfere with the screen display and actually makes it clear when testing and demonstrating the prototype that there's actually something more to see and scroll to (something that's not always obvious with an actual iPhone).

Scrolling regions are created using a 2-step process:

Create the content as a single, long design. We like to put these in the "Parts" folder.
Add the content part to the container design as a Component and adjust its properties to turn it into a scrolling region.

1. The scrolling content

iPhone Contacts Application - Info Screen Scrolling Content

The content design will typically use the full screen width (320 pixels for portrait, 480 for landscape) and be as high as it needs to be.

The best element to use as a background is the standard "Web Page Part" with Margins set to 9 pixels all around. This provides a nice border to snap content to and renders invisible so that whatever background you've used on the main screen (stripes anyone?) will show through.

If you're a neat-freak (like us) then you can set the "Web Page Part" background element to have a Fixed Width too. This will prevent you from accidentally changing the width.

If you're using a more complex background that needs to scroll with the content then you'll need to add that to the design here.

2. Adjusting the component

iPhone Contacts Application - Adding The Contact Info Component

When you drag and drop your content part as a Component onto your screen, it will appear full size.

All you need to do is make a few quick property changes to the Component and all will be well. First check the "Maintain size" Style option so that it doesn't try to adjust itself to match the actual content size:

Then remove the "Fixed Height" constraint and add 16 pixels onto the "Width" to allow for the scroll bar (320 + 16 = 336 for portrait or 480 + 16 = 496 for landscape):