Your SlideShare is downloading. ×
0
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
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

iPad/iPhone - UI Design Resources

3,322

Published on

This presentation illustrates the design elements that can be used to build an application for both the iPad and iPhone platforms. Theses wireframes, stencils and resource kits represent the actual …

This presentation illustrates the design elements that can be used to build an application for both the iPad and iPhone platforms. Theses wireframes, stencils and resource kits represent the actual UI controls that are available to developers using the iPhone and iPad OS SDKs.

Published in: Technology, News & Politics
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,322
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
294
Comments
0
Likes
6
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. iPad and iPhone UI Design Resources Theses wireframes, stencils and resources represent the actual UI controls that are available to developers using the iPhone and iPad OS SDKs. ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 1 Tue Jun 08 2010 Confidential & Proprietary
  • 2. Overview Apple doesn't have any comprehensive pre-built GUI resources for app development, making it very hard to match the uniformed style of the iPhone or the iPad. You will need to create your own. To help streamline your iPhone app design and development, I have put together a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch. Within this document you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone. ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 2 Confidential & Proprietary
  • 3. Resources (1 of 3) Designer Resources iPhone PSD Vector Kit (Smashing Magazine) http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/ iPhone GUI PSD Design Template (Teehan+lax) http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ iPhone Design Stencils – Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/about/stencils/ Ultimate iPhone Stencil (OmniGraffle) http://graffletopia.com/stencils/413 iPhone 3G Stencil (OmniGraffle) http://www.graffletopia.com/stencils/495 iPad and iPhone Design (OmniGraffle) http://graffletopia.com/stencils/570 FreshBooks iPhone Application GUI http://developers.freshbooks.com/blog/view/freshbooks_iphone_application_gui/ iPhone GUI as Rich Symbols for Fireworks http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/ iPhone UI Vector Elements http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements iPad GUI PSD Design Template http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 3 Confidential & Proprietary
  • 4. Resources (2 of 3) iPad Vector GUI Elements http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/ MobileMe Full iPhone GUI http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445 iPad Vector GUI Elements http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/ MobileMe Full iPhone GUI http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445 Matte iPhone UI http://kediashubham.deviantart.com/art/Matte-iPhone-UI-v1-1-110768869 Matte iPhone UI http://vector.tutsplus.com/freebies/vectors/sexy-vector-cell-phone/ MobileMe Full GUI http://bg2009.deviantart.com/art/MobileMe-Full-GUI-Beta10-124389884 iPhone 3G-3GS PSD http://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622 Apple iPad: Fully editable PSD http://kevinandersson.deviantart.com/art/Apple-iPad-Fully-editable-PSD-152146899 Apple iPhone 4G .PSD http://zandog.deviantart.com/art/Apple-iPhone-4G-PSD-161681253 iPhone Toolbar Icons http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 4 Confidential & Proprietary
  • 5. Resources (Page 3 of 3) Glyphish http://glyphish.com/ iPhone Toolbar Icon Set http://www.app-bits.com/downloads/iphone-toolbar-icon-set.html Free iPhone Toolbar Icons http://www.pixelpressicons.com/?p=108 30 Free Vector Icons http://www.dezinerfolio.com/freebie/30-free-vector-icons iconSweets http://www.iconsweets.com/ Touchscreen Hand Gestures v2 (OmniGraffle) http://graffletopia.com/stencils/439 Gesturecons – Multi-Touch Icons http://gesturecons.com/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 5 Confidential & Proprietary
  • 6. Ultimate iPhone Stencil (OmniGraffle) Ultimate iPhone Stencil (OmniGraffle) http://graffletopia.com/stencils/413 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 6 Confidential & Proprietary
  • 7. iPad GUI PSD Design Template iPad GUI PSD Design Template http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 7 Confidential & Proprietary
  • 8. iPhone Toolbar Icons iPhone Toolbar Icons http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 8 Confidential & Proprietary
  • 9. Gesturecons – Multi-Touch Icons Gesturecons – Multi-Touch Icons http://gesturecons.com/ ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 9 Confidential & Proprietary
  • 10. iPhone 3G-3GS PSD iPhone 3G-3GS PSD http://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 10 Confidential & Proprietary
  • 11. iPad iPad Design Elements iPad Canvas Keyboard: Portrait Alerts Copy/Paste Images Status Bar Tab Bar Navigation Bar Toolbar Search Bar Button Bar Picker Popover: Top and Bottom Popover: Left and Right Popover: Table Popover: Button Popover: Action Sheet Table View Table View: Groips Slit View ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 11 Tue Jun 08 2010 Confidential & Proprietary
  • 12. UI: iPad UIWindow 1024 x 768 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 12 Confidential & Proprietary
  • 13. UI: iPad: Keyboard: Portrait Q W E R T Y U I O P A S D F G H J K L return ! ? Z X C V B N M , . .?123 .?123 1 2 3 4 5 6 7 8 9 0 - / : ; ( ) $ & @ Done #+= undo . , ? ! ! ” #+= ABC ABC ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 13 Confidential & Proprietary
  • 14. Common: Alerts Title Too-frequently requesting confirmation is likely to be more annoying than helpful. OK Title Alerts, in particular, should be used only rarely. Cancel OK ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 14 Tue Jun 08 2010 Confidential & Proprietary
  • 15. Common: Copy/Paste Select Select All Paste Select Select All Paste Copy Copy ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 15 Confidential & Proprietary
  • 16. Common: Image iPad iPhone Icon UIIMAGE Icon IMG ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 16 Confidential & Proprietary
  • 17. UI: IPad: Status Bar iPad 9:24 PM ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 17 Confidential & Proprietary
  • 18. UI: iPad: Tab Bar Tab 1 Tab 2 Tab 3 Tab 4 More ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 18 Confidential & Proprietary
  • 19. UI: iPad Navigation Bar Title Title Title Title Back Title Edit Title Edit Title Title ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 19 Confidential & Proprietary
  • 20. UI: iPad: Toolbar Label
  • 21. UI: iPad: Search Bar Search Search Search Search Search ! Search ! Search Cancel Search Cancel Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope 21 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 21 Confidential & Proprietary
  • 22. UI: iPad: Button Bar Done Edit Save Cancel Undo Redo Label Label + " # $ % ! & ' ( ) + " # $ % ! & ' ( * + ) , Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title TItle Scope Title Title Title Title ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 22 22 Confidential & Proprietary
  • 23. UI: iPad: Picker Top Label Label A Label B Label C Bottom Label ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 23 Confidential & Proprietary
  • 24. UI: IPad: Popover: Top and Bottom Title Title ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 24 Confidential & Proprietary
  • 25. UI: iPad: Popover: Left and Right Title Title ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 25 Confidential & Proprietary
  • 26. UI: iPad: Popover: Table Done Title Done Title Default Default Default Default Default Default ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 26 Confidential & Proprietary
  • 27. UI: iPad: Popover: Button Delete Action Choice ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 27 Confidential & Proprietary
  • 28. UI: iPad: Popover: Action Sheet Title Title Description Description Delete Action Choice Delete Action Choice ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 28 Confidential & Proprietary
  • 29. UI: IPad: Table View Group Name Default IMG Default Default Style1 Name Style2 Title Subtitle IMG Title Subtitle Title IMG Subtitle with multiple lines of text that wrap lines. ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 29 Confidential & Proprietary
  • 30. UI: iPad: Table View: Groups Group Title Style Default ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 30 Confidential & Proprietary
  • 31. UI: iPad: Split View Title Title Application Default Default Default Default IMG Default Name Style1 Name Style2 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 31 Confidential & Proprietary
  • 32. iPhone iPhone Design Elements Portrait Landscape Keyboard Bars Controls Pickers Table View Table View: Grouped Alerts ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 32 Tue Jun 08 2010 Confidential & Proprietary
  • 33. UI: iPhone: Portrait ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 33 Confidential & Proprietary
  • 34. UI: iPhone: Landscape ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 34 Confidential & Proprietary
  • 35. UI: iPhone: Window Views UIWindow UIView 320x480 320x460 UTableView Grouped ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 35 Confidential & Proprietary
  • 36. UI: iPhone: Keyboard Q W E R T Y U I O P 1 2 3 4 5 6 7 8 9 0 [ ] { } # % ^ * + = A S D F G H J K L - / : ; ( ) $ & @ ” _ | ~ < > " £ ¥ • Z X C V B N M #+= . , ? ! ! 123 . , ? ! ! .?123 space return ABC space return ABC space return 1 2 3 . ABC DEF Q W E R T Y U I O P 4 5 6 A S D F G H J K L GHI JKL MNO Z X C V B N M 7 8 9 PQRS TUV WXYZ .?123 space return 0 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 36 Confidential & Proprietary
  • 37. UI: iPhone: Bars iPhone 10:15 PM Title iPhone 10:15 PM Description iPhone 10:15 PM Title Page Title foo.com Search Tab 1 Tab 2 Tab 3 Tab 4 More Search 1 Search ! Tab 1 Tab 2 Tab 3 Tab 4 More Search Cancel Scope Scope Scope Scope ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 37 Confidential & Proprietary
  • 38. UI: iPhone: Controls Done Edit Save Cancel Undo Redo + " # $ % ! & ' ( ) * + , Label Label Done Edit Save Cancel Undo Redo + " # $ % ! & ' ( ) * + , Label Label Search Browse Location Title Rounded Button Title i i 1 2 3 Title ON OFF Tab One Tab Two Tab Three Title Title Download Delete ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 38 Confidential & Proprietary
  • 39. UI: iPhone: Pickers Long Option Label All Events 1970 Option 2 One Month 1999 Option 3 Two Months 2038 January 23 2008 February 24 2009 March 25 2010 April 26 2011 May 27 2012 ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 39 Confidential & Proprietary
  • 40. UI: iPhone: Table View Table Footer View Group Header Default IMG Default Name Style1 Name Style2 Title Subtitle IMG Title Subtitle IMG Title Subtitle with multiple lines of text that wrap lines. Group Footer Table Footer View ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 40 Confidential & Proprietary
  • 41. UI: iPhone: Table View Grouped Default Default Default Default IMG Default IMG Default Name Style1 Name Style1 Default Default Name Style2 Name Style2 Title Title Subtitle Subtitle Item A Item B IMG Title IMG Title Subtitle Subtitle Add... Title Title IMG Subtitle with multiple lines of text IMG Subtitle with multiple lines of text that wrap lines. that wrap lines. ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 41 Confidential & Proprietary
  • 42. UI: iPhone: Alerts Confirm Save Save Cancel ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 42 Confidential & Proprietary

×