Best Practice iPhone SDK App Design

37,676
-1

Published on

This session is presented by Bess Ho at Silicon Valley Code Camp (SVCC) at Foothill College in 2009 Fall. This session covers the Apple review and submission procession and requirements. It reviews the image requirements, mockup and templates for iphone app.

Published in: Technology, Business
10 Comments
186 Likes
Statistics
Notes
No Downloads
Views
Total Views
37,676
On Slideshare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
0
Comments
10
Likes
186
Embeds 0
No embeds

No notes for slide

Best Practice iPhone SDK App Design

  1. 1. "Best Practice" iPhone SDK App Design Bess Ho UI & iPhone Developer Silicon Valley Code Camp (SVCC) Oct 3-4, 2009 Foothill College Los Altos CA Twitter: bayareaparty
  2. 2. UI Developer / Architect Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes “I am a Developer, Not a Designer”
  3. 3. Spock Bess Complex Mind Complex Background “It would be illogical to assume that all conditions remain stable.” - Spock “It would be illogical to assume that a good developer can’t design.” - Bess
  4. 4. Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder
  5. 5. Founder of Silicon Valley Web Builder (SVWB) Mentor Google Technology User Group (GTUG) Open Source Project “Chief Medical Officer” based on Google Health
  6. 6. 1st Book on Myspace Technical Editor 1st Book on Open Social Building OpenSocial Apps: A Field Guide to Working with the MySpace Platform Authors: Chris Cole, Chad Russell, Jessica Whyte Published Oct 23, 2009 Publisher: Addison-Wesley Professional. Part of the Developer's Library series.
  7. 7. One-Girl-Shop References Blog Featured by WordPress Based on “Objective-C” Tag http://webbuilders.wordpress.com/ Powerpoints http://www.slideshare.net/bess.ho Code Examples http://code.google.com/p/iphonebuilder/
  8. 8. What are we going Learn?
  9. 9. No. 1 One-Girl-Shop Shorten your design & development cycle Tips & Tricks
  10. 10. 2 No. Submission Requirements Apple Store Review Process Increase Your Chance of Approval Do & Do Not Lists
  11. 11. 3 No. Product Definition Design Better App Improve User Experience
  12. 12. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
  13. 13. Approval Process Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 95% apps are approved within 14 days of submission Apple has 40 Full Time trained reviewers studying 8,500 new apps a week 20% “not approved as original submitted” but sent back to developer for tweaks & changes http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
  14. 14. Controversial Apps Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 “established an App Store executive review board that determines procedures and sets policy for the review process, as well as reviews applications that are escalated to the board because they raise new or complex issues.” The board meets once a week. http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
  15. 15. App Submission Required Images 512x512 JPG (Promotional Image) 480x320 JPG (Landscape App Image) 320x480 JPG (Portrait App Image)
  16. 16. iPhone SDK App Required Images 57x57 PNG Icon.png (App Icon) 29x29 PNG Icon-Small.png (Setting & Search Icon) 480x320 PNG Default.png (Landscape Loading Image) 320x480 PNG Default.png (Portrait Loading Image)
  17. 17. Prepare Images The standard bit depth for icons and images is 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel. The PNG format is recommended, because it preserves color depth and supports an embedded alpha channel. No need to constrain your palette to web- safe colors
  18. 18. Prepare Icons Start with highest resolution quality image Create 512x512 160+ dpi artwork Convert them into 3 sizes Save them to Apple preferred names Apple expects consistency in images 512x512 72 dpi app_icon.jpg 57x57 160+ dpi Icon.png 29x29 160+ dpi Icon-Small.png
  19. 19. App Icon Design 57x57 160+ dpi Icon.png By default 1) Apply round-corners 2) Apply shine 3) Apply Drop shadow Best investment Pick a color to position your app on the rainbow wall Apple tends to select & feature app with good icon design in stores, conferences and Ads Avoid using images similar to Apple icons & images
  20. 20. Info.plist
  21. 21. App Icon Design 29x29 160+ dpi Icon-Small.png Used to be Icon-Setting.png Every application should supply a small icon that iPhone OS can display when the application name matches a term in a Spotlight search. Applications that supply settings should also supply this icon to identify them in the built-in Settings application.
  22. 22. App Icon Design 57x57 160+ dpi Icon.png Remove default shine Add the UIPrerenderedIcon key to your application’s Info.plist file
  23. 23. App Icon Design 57x57 160+ dpi Icon.png Recommend to add your app name to your icon if your app name is too long to show on iphone home screen By default Bundle display name use your Xcode Project name Add App name to Info.plist file
  24. 24. Prepare Backgrounds Improve User Experience Make your loading image similar to your App Background if your app requires a longer loading time Default.png (Loading Image) background.png (App Background Image)
  25. 25. Image Location Icon.png, Icon-Setting.png, Default.png are suggested to saved at the root of Xcode project Organize images & audio files in Groups under “Resources” folder Drag & Drop entire folders into Xcode Project
  26. 26. System-Provided Buttons & Icons Toolbars & Navigation Bars Icon UIBarButtonSystemItem
  27. 27. Toolbars & Navigation Bars Icon UIBarButtonSystemItemDone, UIBarButtonItemStylePlain, UIBarButtonSystemItemCancel, UIBarButtonItemStyleBordered, UIBarButtonSystemItemEdit, UIBarButtonItemStyleDone UIBarButtonSystemItemSave, UIBarButtonSystemItemAdd, UIBarButtonSystemItemFlexibleSpace, UIBarButtonSystemItemFixedSpace, UIBarButtonSystemItemCompose, UIBarButtonSystemItemReply, UIBarButtonSystemItemAction, UIBarButtonSystemItemOrganize, UIBarButtonSystemItemBookmarks, UIBarButtonSystemItemSearch, UIBarButtonSystemItemRefresh, UIBarButtonSystemItemStop, UIBarButtonSystemItemCamera, UIBarButtonSystemItemTrash, UIBarButtonSystemItemPlay, UIBarButtonSystemItemPause, UIBarButtonSystemItemRewind, UIBarButtonSystemItemFastForward, UIBarButtonSystemItemUndo, / iPhoneOS 3.0 / UIBarButtonSystemItemRedo, / iPhoneOS 3.0 /
  28. 28. System-Provided Buttons & Icons Tab Bar Tabs Icon Table Rows
  29. 29. System-Provided Buttons & Icons Use pure white with appropriate alpha Do not include a drop shadow Use anti-aliasing Toolbar Icons Navigation Bar Icons Tab Bar Icons 20 x 20 pixels 30 x 30 pixels
  30. 30. iPhone Human Interface Guidelines http://developer.apple.com/safari/library/ documentation/InternetWeb/Conceptual/ iPhoneWebAppHIG/Introduction/ Introduction.html
  31. 31. Prepare Audio Most Popular Audio Methods AudioServicesPlaySystemSound AVAudioPlayer
  32. 32. Do Not DO NOT Copy-Right Materials (Image, Audio, etc) DO NOT use License Materials unless you have written documents to prove your ownership DO NOT use any Brand or Trademark names DO NOT use any images too similar to iphone system icons DO NOT submit app with warnings & errors DO NOT treat Apple Review Team as QA
  33. 33. Debug & Audit Test your app in both iPhone Simulator & Device Test your app in both iTouch & iPhone 50% users are on iTouch No Warning Console No Error Xcode Device
  34. 34. 1st / 2nd App Sound Tricroder & Doctor Tricorder 1st iPhone SDK Trekkie from TV to Movies Star Trek Movie Release in May Loyal Star Trek Fans Worldwide Tricorders in App Store Suck Poor Interface Old Generation Tricorder Few Low-quality Sound Barely Any Animations Entertainment Only
  35. 35. Explanation In Review 3 months Instead of crying Or beating up Apple iPhone Review Team Convert my anger & frustration to creating new app 2 months wait Shorten Development Not related to Cycle & Release Early technical issues
  36. 36. Product Definition Solve a sticky problem Create your own niche Create new market
  37. 37. Product Definition Solve a sticky problem Apple won’t approve SDK app that is similar to web Create your own niche app Create new market Apple won’t approve your app if it is similar to existing app in App Store Apple won’t approve your app if it doesn’t have enough features
  38. 38. Design Rules Keep it Simple Design for Dummies No Guessing Picture worths thousand words Do One Thing Really Well Less Touch = Clicks Fewer Screens = Page Load Fast Loading Lower Latency
  39. 39. Design Rules Make it Fun Use interesting images Use movements Engage users
  40. 40. Product Definition Dancing Series - Use Accelerometer Interests Target Strengths Want anyone without music I love music training can play I play music for years It is more entertaining and engaging to design app I love dancing involved movement I love design Music is universal with no language barrier All age groups All genders
  41. 41. Product Strategy Dancing Series Music Band Dancing Piano Dancing Drum Dancing Steel Drum Dancing Tambourine
  42. 42. Competition: Leading Drum Apps in Top 100 Drum Kit DigitDrummer $1.99 / Free $0.99 / Free Volume Control No Volume Control (Flip View) Pay $1.99 Extra Recording Recording
  43. 43. Marketing Positioning: Competitive Differentiation 1st Drum App uses Dancing Drum Accelerometer $0.99 Volume Control - Same View Brighter Cheerful More Sound Touch Play Motion Play Casual Play - All Ages Accelerometer > Record
  44. 44. Drum Kit Drum Kit Lite Free Rank: 12 Drum $1.99 Rank: 55 DigitDrummer DigiDrummer Lite Free Rank: 14 DigiDrummer Micro $0.99 Rank: 485 DigiDrummer $0.99 Rank: 62
  45. 45. Dancing Drum Dancing Drum $0.99 Rank: 1496 Not Perfect Shorten Development Cycle Release Early 1st Release 1.0 Bad Timing OS2.2.1 - OS3.0 Buried at the bottom in Release Date due to inexperience
  46. 46. Drum Kit DigitDrummer Dancing Drum 6 Drums 5 Cymbals 4 Drums 4 Cymbals 5 Drums 6 Cymbals + 5 Extra DigiDrummer Lite Free Rank: 14 Dancing Drum $0.99 Rank: 1495 Drum Kit Lite Free Rank: 12 DigiDrummer Micro $0.99 Rank: 485 Drum $1.99 Rank: 55 DigiDrummer $0.99 Rank: 62 2.2 Versions 1.0 Versions 2.6 Versions 1.1 Versions 54266 ratings 0 ratings 3035 ratings 18207 ratings 1.7 Versions 3.3 Versions 1212 ratings 2904 ratings Data from Moblix 6/22/09
  47. 47. DEMO Rank within Top 100 Rank: 1495 DigitDrummer Dancing Drum Drum Kit
  48. 48. Once In Your Lifetime Don’t make any Apple won’t allow you to mistakes in change Release Date once submitting your app the date is past Don’t keep changing Apple won’t allow you to get Release Date into Newly Release category after re-submit for update Save the right Category Prepare for your Launch & Marketing Campaign
  49. 49. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  50. 50. Mockup Tools Paper Prototype 1 Paper + Pen 2 Metal Stencil $ 3 Online Prototype Sketching 4 Balsamiq stencils 5 Omnigraffle stencils 6 Visio template 7, 8, 9 Adobe Photoshop, Illustrator, Firework 10 Yahoo! Design Stencil Kit
  51. 51. Mockup Tools iPhone SDK IDEs 11 Dash Code (Drag & Drop) 12 Xcode’s Interface Builder (Drag & Drop) iPhone SDK Frameworks 13 Titanium (HTML / CSS / JS) 14 Phone Gap (HTML / CSS / JS) 15 Corona (Lua) 16 MonoTouch (C# .NET)
  52. 52. Mockup Tools iPhone Webkit Frameworks 17 iUI (HTML / CSS / JS) 18 CiUI (HTML / CSS / JS) 19 JQTouch (HTML / CSS / JS)
  53. 53. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  54. 54. Paper Prototype Pen + Paper http://www.designcommission.net/stencils/ iphone_stencil_paper.pdf
  55. 55. Paper Prototype Downloadable .PDF letter or A4 sized printable template http://www.designcommission.com/shop/iphone- stencil-kit/
  56. 56. Paper Prototype http://labs.boulevart.be/index.php/2008/06/05/ sketch-paper-for-the-mobile-designer/
  57. 57. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  58. 58. Online Prototype http://iphonemockup.lkmc.ch/
  59. 59. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  60. 60. Blue Print http://www.flickr.com/photos/flingmedia/2734477874/
  61. 61. Balsamiq http://www.balsamiq.com/
  62. 62. Omnigraffle Stencils http://www.graffletopia.com/search/iphone
  63. 63. Adobe Illustrator & Photoshop http:// http:// www.mercuryintermedia.com/ www.teehanlax.com/ blog/index.php/2009/03/iphone- blog/?p=1628 ui-vector-elements/
  64. 64. Adobe Firework CS3 & CS4 http://blog.metaspark.com/2009/02/fireworks-toolkit-for- creating-iphone-ui-mockups/
  65. 65. Yahoo! Design Stencil Kit OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) http://developer.yahoo.com/ypatterns/about/stencils/
  66. 66. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  67. 67. iPhone SDK Dash Code http://developer.apple.com/iphone/library/documentation/AppleApplications/ Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/ Introduction.html
  68. 68. Xcode’s Interface Builder
  69. 69. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  70. 70. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
  71. 71. iPhone SDK Frameworks HTML CSS JavaScript Titanium PhoneGap http://www.appcelerator.com/ http://phonegap.com/ products/titanium-mobile/
  72. 72. iPhone SDK Frameworks MonoTouch Corona C# .NET Lua http://monotouch.net/ http://www.anscamobile.com/
  73. 73. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  74. 74. iPhone WebKit Frameworks jQTouch http://www.jqtouch.com/ CiUI iUI http://code.google.com/ http:/ code.google.com/ / p/ciui-dev/ p/iui/wiki/Introduction
  75. 75. Mockup / Prototype Business Developers Paper Prototype Paper Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  76. 76. Rapid Prototyping Developers Paper Prototype (Fast) iPhone SDK IDEs (Drag & Drop)
  77. 77. Family Project Design App Prepare Assets Paper Online / Desktop Audio iPhone 3Gs Audacity aviary.com Swatch.app Images GIMP pixlr.com sumopaint.com picnik.com aviary.com
  78. 78. sumopaint.com Free Images http:/ /www.freephotosbank.com/ http://www.everystockphoto.com/ http://www.imageafter.com/
  79. 79. Testing Code on Device http://www.mobileorchard.com/iphone- development-provisioning/
  80. 80. $99 iPhone Developer Program Portal Vibration Location Manager Mail Application Map Application Safari Application Device Orientation Accelerometer Audio Performance Overall Performance
  81. 81. iPhone Developer 1. Add Device Program Portal 2. Xcode Organizer
  82. 82. iPhone Developer Program Portal 3. Create Developer Certificate 4. Add to Keychain
  83. 83. iPhone Developer Program Portal 5. Create Apple ID 6. Create Provisioning Profile
  84. 84. iPhone Developer Program Portal 7. Add Provisioning Profile to Xcode Organizer 8. Test Code
  85. 85. Case Study
  86. 86. A No.
  87. 87. B No.
  88. 88. C No.
  89. 89. Tell Me Which is Best & Why
  90. 90. myStarbucks Find a Starbucks Coffee Sep 16, 2009 Version 1.0 Aug 9, 2009 Version 2.0 Free $0.99 Go Grande - Find your nearest Starbucks Feb 6 2009 Version 1.0.0 $0.99
  91. 91. Q&A

×