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.

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. 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. 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. Dancing Piano Dancing Drum Dancing Steel Drum
Doctor Tricorder Sound Tricorder

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. 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. 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. What are we going
Learn?

9. No. 1
One-Girl-Shop
Shorten your design & development cycle
Tips & Tricks

10. 2
No.
Submission Requirements
Apple Store Review Process
Increase Your Chance of Approval
Do & Do Not Lists

11. 3
No.
Product Definition
Design Better App
Improve User Experience

12. No.4
Backup
Anything impossible would be possible
Backup your Artwork & Xcode projects

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. 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. App Submission
Required Images
512x512 JPG (Promotional Image)
480x320 JPG (Landscape App Image)
320x480 JPG (Portrait App Image)

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. 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. 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. 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. Info.plist

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. App Icon Design
57x57 160+ dpi Icon.png
Remove default shine
Add the UIPrerenderedIcon key to your
application’s Info.plist file

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. 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. 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. System-Provided
Buttons & Icons
Toolbars & Navigation Bars Icon
UIBarButtonSystemItem

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. System-Provided
Buttons & Icons
Tab Bar Tabs Icon Table Rows

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. iPhone Human Interface
Guidelines
http://developer.apple.com/safari/library/
documentation/InternetWeb/Conceptual/
iPhoneWebAppHIG/Introduction/
Introduction.html

31. Prepare Audio
Most Popular Audio Methods
AudioServicesPlaySystemSound
AVAudioPlayer

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. 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. 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. 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. Product Definition
Solve a sticky problem
Create your own niche
Create new market

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. 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. Design Rules
Make it Fun
Use interesting images
Use movements
Engage users

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. Product Strategy
Dancing Series
Music Band
Dancing Piano
Dancing Drum
Dancing Steel Drum
Dancing Tambourine

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. 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. 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. 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. 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. DEMO
Rank within Top 100 Rank: 1495
DigitDrummer Dancing Drum
Drum Kit

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. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

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. 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. Mockup Tools
iPhone Webkit Frameworks
17 iUI (HTML / CSS / JS)
18 CiUI (HTML / CSS / JS)
19 JQTouch (HTML / CSS / JS)

53. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

54. Paper Prototype
Pen + Paper
http://www.designcommission.net/stencils/
iphone_stencil_paper.pdf

55. Paper Prototype
Downloadable .PDF letter or
A4 sized printable template
http://www.designcommission.com/shop/iphone-
stencil-kit/

56. Paper Prototype
http://labs.boulevart.be/index.php/2008/06/05/
sketch-paper-for-the-mobile-designer/

57. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

58. Online Prototype
http://iphonemockup.lkmc.ch/

59. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

60. Blue Print
http://www.flickr.com/photos/flingmedia/2734477874/

61. Balsamiq
http://www.balsamiq.com/

62. Omnigraffle Stencils
http://www.graffletopia.com/search/iphone

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. Adobe Firework
CS3 & CS4
http://blog.metaspark.com/2009/02/fireworks-toolkit-for-
creating-iphone-ui-mockups/

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. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

67. iPhone SDK Dash Code
http://developer.apple.com/iphone/library/documentation/AppleApplications/
Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/
Introduction.html

68. Xcode’s Interface Builder

69. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

70. No.4
Backup
Anything impossible would be possible
Backup your Artwork & Xcode projects

71. iPhone SDK Frameworks
HTML CSS JavaScript
Titanium PhoneGap
http://www.appcelerator.com/ http://phonegap.com/
products/titanium-mobile/

72. iPhone SDK Frameworks
MonoTouch Corona
C# .NET Lua
http://monotouch.net/ http://www.anscamobile.com/

73. 6 Major Types of
Mockup / Prototype
Paper Prototype
Online Prototype
Sketching
iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

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. Mockup / Prototype
Business Developers
Paper Prototype Paper Prototype
Sketching iPhone SDK IDEs
iPhone SDK Frameworks
iPhone Webkit Frameworks

76. Rapid Prototyping
Developers
Paper Prototype (Fast)
iPhone SDK IDEs (Drag & Drop)

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. sumopaint.com
Free Images
http:/ /www.freephotosbank.com/
http://www.everystockphoto.com/
http://www.imageafter.com/

79. Testing Code on Device
http://www.mobileorchard.com/iphone-
development-provisioning/

80. $99 iPhone Developer
Program Portal
Vibration
Location Manager
Mail Application
Map Application
Safari Application
Device Orientation
Accelerometer
Audio Performance
Overall Performance

81. iPhone Developer
1. Add Device
Program Portal
2. Xcode Organizer

82. iPhone Developer
Program Portal
3. Create Developer Certificate
4. Add to Keychain

83. iPhone Developer
Program Portal
5. Create Apple ID
6. Create
Provisioning Profile

84. iPhone Developer
Program Portal
7. Add Provisioning Profile to Xcode Organizer
8. Test Code

85. Case
Study

86. A
No.

87. B
No.

88. C
No.

89. Tell Me Which is Best & Why

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. Q&A