iPhone SDK
UI Design & Development
Bess Ho
UI Developer
Silicon Valley iPhone Meetup
May 18, 2009
Palo Alto CA

Spock Bess
Half Vulcan Half Developer
Half Human Half Designer
Pointed Ears Pointed Eyes
“I am a Developer, Not a Designer”

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

Tonight
iPhone UI Design & Development
iphone newbie
no experience in
Objective-C, C, C++, Java
Cocoa Framework, Mac OS
Idea Concept / Product Design
How to prepare app icons and
images
Tips in saving time
Best Practices

Idea Concept:
Dancing Series
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

Marketing Research
Competition in Music Category
Not competing existing game or music apps
Create my niche & develop unique experience
Silicon Valley
Co-Founders
Guy Team
Early Entry One Girl Shop
Game Players Bootstrap
Newbie
Co-Founders
Guy Team 1st music app use
Early Entry
Musicians accelerometer

Product Strategy
Dancing Series
Music Band
Dancing Piano
Dancing Drum
Dancing Steel Drum
Dancing Tambourine

Founder Pain
When plan fails
adjust positioning & strategy on the fly
Not My Ideal or Original Plan
In Review Instead of crying
3 months
Or beating up Apple
iPhone Review Team
Convert my anger &
frustration to creating
new app
Shorten Development
2 months wait Cycle & Release Early
Not related to
technical issues Dancing Piano is not ideal
and not perfect

Lesson:
Effort Breakdown
Average: Change design, features,
architecture 3-6 times before submission
40% 30% 30%
Product Idea Architecture Debugging
Artwork Frameworks Auditing
Audio Coding Submission
Copywriting Optimization

Lesson:
Prepare Default Icons
Start with high resolution quality image
Create 512x512 160+ dpi artwork
Convert them into 3 sizes and formats
Save them to Apple preferred names
512x512 72 dpi app_icon.jpg
57x57 160+ dpi Icon.png
29x29 160+ dpi Icon-Setting.png

Lesson:
Prepare Default Icons
512x512 72 dpi app_icon.jpg
57x57 160+ dpi Icon.png
29x29 160+ dpi Icon-Setting.png

Lesson:
Orientation & UI Layout
Consider your UI & Architecture
Default in Landscape mode
Maximize Screen 320x480
Hide Top Bar & Bottom Bar
Save settings on Interface Builder
Hide UIStatusBar by default
info.plist
Reduce code overhead & maintenance

Lesson:
Prepare Default Background
Default.png is the default
image during app loading
Default.png
480x320 Portrait
320x480 Landscape
160+ dpi

Lesson:
Prepare Assets
Organize your assets well
It saves you hours of work
Instead of adding a file at a time
described in your developer book
example
Drag and Drop
Under Resources
Create folder for images
Create folder for sounds

Lesson:
Prepare Sound
Consider performance
.caf (Apple’s Core Audio Format)
Uncompressed
Play multiple sounds
simultaneously
Remove noises
Trim silence
Reduce file size

Lesson:
Prepare Sound
Consider Architecture
AVFoundation Framework
OS 2.2+
Flexibility
ViewController.m
AVAudio *player;
...
[player prepareToPlay];
[player play];

Lesson:
Consider Audio Framework
AVFoundation Framework
No limit on time length
Control volume
Repeat
Play Multiple Sound simultaneously
Show CurrentTime
Show volume

Dancing Series
Keyword Dancing

Community Help
Spread the words
Dancing Series
Keyword Dancing
Open For Consulting Contracts
Bess Ho
bess.ho at gmail.com