• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wireframe Parts Iphone Interface Design
 

Wireframe Parts Iphone Interface Design

on

  • 26,932 views

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.

Statistics

Views

Total Views
26,932
Views on SlideShare
20,409
Embed Views
6,523

Actions

Likes
35
Downloads
1,632
Comments
5

25 Embeds 6,523

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Check out Apple's New iPod nano with Multi-Touch Product Review
    http://www.slideshare.net/Zanura/i-pod-nano-multi-touch-review
    Are you sure you want to
    Your message goes here
    Processing…
  • bertkoning - seems to be working now. Must have been a slideshare bug.
    Are you sure you want to
    Your message goes here
    Processing…
  • The download does not seem to work anymore. Can I download it somewhere else?
    Are you sure you want to
    Your message goes here
    Processing…
  • If anyone needs one on one help in wireframing their iPhone application feel free to contact me (presentation author) at www.raizlabs.com.

    - Greg
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation - very useful
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wireframe Parts Iphone Interface Design Wireframe Parts Iphone Interface Design Presentation Transcript

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