1. 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 Title Done Back Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > ABCDEFGHIJKLMNOPQRSTUVWXYZ#ABCDEFGHIJKLMNOPQRSTUVWXYZ# 3

2. 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 Title Done Back Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > ABCDEFGHIJKLMNOPQRSTUVWXYZ#ABCDEFGHIJKLMNOPQRSTUVWXYZ#

3. 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 Status > Good Wi-Fi > Not Connected Sound > Location ON Auto-lock > Never Name Required Advanced Configuration > Password Required Use text descriptions to make the application better Settings Back

4. 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… 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.

5. item 1 Title + Basic Edit Pattern Edit Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > 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

6. Web Page Pattern 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

7. 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 >

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

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

10. 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

11. DayMonthWeek Back View Item Name View List + Edit Back Edit Item Edit Back Title 1 of 7 /\\/ Back New Object CancelSaveEdit Common Title bars Back View Item Name Any title bar can have an optional description line Basic Title

12. 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 > > > > > > > > > Basic List Secondary Action Alphabetical long lists Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > ABCDEFGHIJKLMNOPQRSTUVWXYZ#ABCDEFGHIJKLMNOPQRSTUVWXYZ# Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > ABCDEFGHIJKLMNOPQRSTUVWXYZ#ABCDEFGHIJKLMNOPQRSTUVWXYZ# Searchable

13. Grouped List 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… Multi-line List - Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith | - - - - - - - Delete 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 ≡

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

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

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

17. - description