basic iphone wireframe l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Basic iPhone Wireframe PowerPoint Presentation
Download Presentation
Basic iPhone Wireframe

Loading in 2 Seconds...

play fullscreen
1 / 17
onan

Basic iPhone Wireframe - PowerPoint PPT Presentation

120 Views
Download Presentation
Basic iPhone Wireframe
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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