Wireframe Parts Iphone Interface Design

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

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 #

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

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…

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

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

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 >

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

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

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

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

- description

http://www.raizlabs.com	4910
http://www.scoop.it	654
http://blog.dreamcss.com	402
http://www.slideshare.net	105
http://paper.li	19
http://www.linkedin.com	8
http://translate.googleusercontent.com	5
http://core.traackr.com	4
https://rd.atosworldline.com	4
http://historiadesing.blogspot.com	4
http://127.0.0.1	3
http://www.mobilepeerawards.com	3
http://beyondthatbox.tumblr.com	2
http://static.slideshare.net	2
http://us-w1.rockmelt.com	1
http://feeds.feedburner.com	1
http://74.125.115.132	1
http://66.102.9.132	1
http://edicolaeuropea.blogspot.com	1
http://209.85.229.132	1
http://www.google.com	1
http://webcache.googleusercontent.com	1
http://safe.tumblr.com	1
http://twitter.com	1

Wireframe Parts Iphone Interface Design

by Greg Raiz on Oct 24, 2008

Accessibility

Categories

Upload Details

Usage Rights

24 Embeds 6,135

Statistics

Wireframe Parts Iphone Interface Design Presentation Transcript