Your SlideShare is downloading. ×
0
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Wireframe Parts Iphone Interface Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframe Parts Iphone Interface Design

21,005

Published on

This is a collection of iPhone wireframe templates. This can be used to quickly construct various iPhone screens.

This is a collection of iPhone wireframe templates. This can be used to quickly construct various iPhone screens.

Published in: Technology, Economy & Finance
5 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
21,005
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1,709
Comments
5
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Basic iPhone Wireframe <ul><li>This is a sample wireframe that shows how to use various parts to create a basic design </li></ul><ul><li>Remember </li></ul><ul><ul><li>Keep it simple </li></ul></ul><ul><ul><li>Less is more </li></ul></ul><ul><ul><li>Use the list design patterns </li></ul></ul>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
  • 2. Basic List Search Pattern <ul><li>This shows a basic list search pattern </li></ul><ul><li>Use this when you have a very large list that may need to be searched. </li></ul><ul><li>I consider large to be over 100 items </li></ul><ul><li>Use the ABC along the right if the list is alphabetical </li></ul>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 Table Pattern <ul><li>Tables are grouped into logical sections </li></ul><ul><li>Each table cell is usually one of the following: </li></ul><ul><ul><li>Text field </li></ul></ul><ul><ul><li>Label with details arrow </li></ul></ul><ul><ul><li>Label with status and arrow </li></ul></ul><ul><ul><li>Label with toggle </li></ul></ul><ul><li>Use a short descriptive footer to provide additional help </li></ul>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
  • 4. Multi-line List Pattern <ul><li>Use the multi-line pattern to give users a peek at what may be in the details page. </li></ul><ul><li>This uses up more vertical space so don't use it if you expect a lot of scrolling. </li></ul><ul><li>Email is a good example where you usually read from the top and decide if you want details. </li></ul>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…
  • 5. Basic Edit Pattern Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith > Fred Smith > Greg Smith > Hal Smith > Jane Smith > <ul><li>The editing pattern allows you to add, edit and delete items from a list </li></ul><ul><li>Consider supporting the swipe delete action </li></ul>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
  • 6. Web Page Pattern < > + <ul><li>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 </li></ul><ul><li>The address bar may be hidden after the page loads </li></ul>Web Page Title http://www.raizlabs.com
  • 7. Landscape Example <ul><li>For certain applications landscape may make sense </li></ul><ul><li>In this view the keyboard takes almost 50% of the space when shown </li></ul>Al Smith > Ben Smith > Carl Smith > Dave Smith > Eric Smith >
  • 8. Alert Message <ul><li>Avoid when possible </li></ul><ul><li>Place actionable text in the buttons </li></ul><ul><li>Use helpful alerts </li></ul>Trouble connecting to the server. Ignore Try again
  • 9. Panel Message <ul><li>Use to confirm delete </li></ul><ul><li>Use to quickly present a couple choices </li></ul>Are you sure you want to delete? Delete Archive Cancel
  • 10. Progress <ul><li>There are three types of progress commonly used. </li></ul><ul><ul><li>Title bar or toolbar spinner such as in email. You can keep working. </li></ul></ul><ul><ul><li>Heads up display spinner. You have to wait and we don't know how long. </li></ul></ul><ul><ul><li>Panel progress. You have to wait but we can tell you how far along we are. </li></ul></ul>Syncronysing accounts…. Loading… Title
  • 11. 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
  • 12. 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 #
  • 13. 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
  • 14. 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
  • 15. Normal Number Pad Spinner Landscape Choice One Choice Two Choice Three Choice Four Choice Five
  • 16. Begin Mockups Here <ul><li>Use this space to describe the purpose of the page and any interaction notes </li></ul>
  • 17. - description
  • 18.  

×