Basic iPhone Wireframe This is a sample wireframe that shows how to use various parts to create a basic design Remember Keep it simple Less is more Use the list design patterns item 1 item 1 item 1 item 1 item 1 Title Done Back Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > A B C D E F G H I J K L M N O P Q R S T U V W X Y Z # 3

This is a sample wireframe that shows how to use various parts to create a basic design

Remember

Keep it simple

Less is more

Use the list design patterns

Basic List Search Pattern This shows a basic list search pattern Use this when you have a very large list that may need to be searched. I consider large to be over 100 items Use the ABC along the right if the list is alphabetical item 1 item 1 item 1 item 1 item 1 Title Done Back Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > A B C D E F G H I J K L M N O P Q R S T U V W X Y Z #

This shows a basic list search pattern

Use this when you have a very large list that may need to be searched.

I consider large to be over 100 items

Use the ABC along the right if the list is alphabetical

Basic Table Pattern Tables are grouped into logical sections Each table cell is usually one of the following: Text field Label with details arrow Label with status and arrow Label with toggle Use a short descriptive footer to provide additional help Location Use text descriptions to make the application better Status > Good Wi-Fi > Not Connected Sound > ON Auto-lock > Never Name Required Advanced Configuration > Password Required Settings Back

Tables are grouped into logical sections

Each table cell is usually one of the following:

Text field

Label with details arrow

Label with status and arrow

Label with toggle

Use a short descriptive footer to provide additional help

Multi-line List Pattern Use the multi-line pattern to give users a peek at what may be in the details page. This uses up more vertical space so don't use it if you expect a lot of scrolling. Email is a good example where you usually read from the top and decide if you want details. item 1 item 1 item 1 item 1 item 1 Title Done Back Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > 10:23pm 10:10pm 9:13pm 7:25pm 5:19pm 5:123pm This is a short message that I'm writing to tell you that the thing you thought you did was… I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he… Did you get my message about the meeting next Wednesday I think we should go as it couldi… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…

Use the multi-line pattern to give users a peek at what may be in the details page.

This uses up more vertical space so don't use it if you expect a lot of scrolling.

Email is a good example where you usually read from the top and decide if you want details.

Basic Edit Pattern Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > The editing pattern allows you to add, edit and delete items from a list Consider supporting the swipe delete action item 1 item 1 item 1 item 1 item 1 Title + Edit item 1 item 1 item 1 item 1 item 1 Title + Done - Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith | - - - - - - - Delete

The editing pattern allows you to add, edit and delete items from a list

Consider supporting the swipe delete action

Web Page Pattern < > + If you open up a web-page or are doing mobile web-design you can use this to show how users may browse the web The address bar may be hidden after the page loads Web Page Title http://www.raizlabs.com

If you open up a web-page or are doing mobile web-design you can use this to show how users may browse the web

The address bar may be hidden after the page loads

Landscape Example For certain applications landscape may make sense In this view the keyboard takes almost 50% of the space when shown Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith >

For certain applications landscape may make sense

In this view the keyboard takes almost 50% of the space when shown

Alert Message Avoid when possible Place actionable text in the buttons Use helpful alerts Trouble connecting to the server. Ignore Try again

Avoid when possible

Place actionable text in the buttons

Use helpful alerts

Panel Message Use to confirm delete Use to quickly present a couple choices Are you sure you want to delete? Delete Archive Cancel

Use to confirm delete

Use to quickly present a couple choices

Progress There are three types of progress commonly used. Title bar or toolbar spinner such as in email. You can keep working. Heads up display spinner. You have to wait and we don't know how long. Panel progress. You have to wait but we can tell you how far along we are. Syncronysing accounts…. Loading… Title

There are three types of progress commonly used.

Title bar or toolbar spinner such as in email. You can keep working.

Heads up display spinner. You have to wait and we don't know how long.

Panel progress. You have to wait but we can tell you how far along we are.

New Object Common Title bars Day Month Week Back View Item Name View List + Edit Back Edit Item Edit Back Title 1 of 7 / / Back Cancel Save Edit Back View Item Name Any title bar can have an optional description line Basic Title

Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > Basic List Secondary Action Alphabetical long lists Searchable Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith > > > > > > > > > Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > A B C D E F G H I J K L M N O P Q R S T U V W X Y Z # Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > A B C D E F G H I J K L M N O P Q R S T U V W X Y Z #

Grouped List Multi-line List List in editing Mode List that is sortable Al Smith ≡ Ben Smith ≡ Carl Smith ≡ Dave Smith ≡ Eric Smith ≡ Fred Smith ≡ Greg Smith ≡ Hal Smith ≡ Jane Smith ≡ Apples > Peach > Grapes > Spinach > Lettuce > Potato > Zucchini > Fruits Vegetables Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > 10:23pm 10:10pm 9:13pm 7:25pm 5:19pm 5:123pm This is a short message that I'm writing to tell you that the thing you thought you did was… I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he… Did you get my message about the meeting next Wednesday I think we should go as it couldi… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti… - Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith | - - - - - - - Delete

Text Editable Details Editable Text message Add to favorites Actionable in-place Selected Table Cells Daily Weekly Monthly  Yearly Password Status > Good Wifi > Not Connected Sound > Wifi ON Name Required Password Required Location Services OFF Low High Low High Medium

Normal Number Pad Spinner Landscape Choice One Choice Two Choice Three Choice Four Choice Five

Begin Mockups Here Use this space to describe the purpose of the page and any interaction notes

Use this space to describe the purpose of the page and any interaction notes

- description