Basic iPhone Wireframe

1. Title 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 item 1 item 1 item 1 item 1 item 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 Done

2. Title 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 # item 1 item 1 item 1 item 1 item 1 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 Done

3. Settings Password Required > > Auto-lock Wi-Fi Never Not Connected > > Advanced Configuration Sound Back > Status Good Name ON Required 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

4. 10:23pm 10:10pm 9:13pm 7:25pm 5:19pm 5:123pm Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > 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… Title Back item 1 item 1 item 1 item 1 item 1 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. Done

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

6. Web Page Title http://www.raizlabs.com 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 < > +

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

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

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

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

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

12. 10:23pm 10:10pm 9:13pm 7:25pm 5:19pm 5:123pm Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > 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… Apples > Peach > Grapes > Spinach > Lettuce > Potato > Zucchini > Fruits Vegetables Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith | - - - - - - - - Grouped List Multi-line List 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 ≡

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

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

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

16. - description