Guest Lecture for The Art of Institutes on Mobile Design. Specific target to what design students should learn to become sufficient as mobile designer and to excel in designing for mobile.

1. Mobile Design
The Art Institutes
Bess Ho
May 2011

2. Silence

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

4. 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

5. Dancing Piano Dancing Drum Dancing Steel Drum
Doctor Tricorder Sound Tricorder

6. STANFORD UNIVERSITY
School of Engineering (EE46)
Engineering For Good
Save The World
Have Fun Doing It

7. a se
e le
s tR
1
pp App Store’s Category List
A
Beauty Pageant

8. a se
e le
s tR
1
A pp

9. Category List
1 App Icon
2 App Name
3 Price

10. Custom App Icon
Professional Designer
Outsource at least $500
Average range $600-$1,200

11. App Design Project
Designer 20 hrs per week
Developer 60 hrs per week

12. App Design ROI
Lifelike Alarm Clock and Weather HD
< 2 weeks #9 paid app for iPad
Gross $4,781 in a single day
Barely 5 Million iPad in Jun 2010

13. iPhone Icon
Promotion
57 x 57 pixel
iPad Icon
512 x 512 pixel 72 x 72 pixel
iPhone App Store Submission

14. N G
P App Store Home Page
75 x 75
App Page
iTunesArtwork
175 x 175
iTunes Purchased Page
70 x 70
Apple apply rounded corner
Option to turn glossy off
512 x 512 pixel
iPhone App Store Submission

15. 162 ppi 132 ppi
Display Density (pixels per inch)

16. Camera+ will help bring that creativity out in you, all with a fun,
innovative, and beautiful design.

18. Thermo is a simple approach to Weather. This little pocket
thermometer shows the current temperature outside along with
the temperature from the day before.

19. Busy checking photo links from your old Twitter client? Scopy
extract photos from your timeline and present them quickly and
beautifully. Browse pictures from your friends, or search a topic.
Be prepared to be surprised!

20. Tea Round is Russian roulette
for those wanting to sort out who
fetches the tea at the office for
the day. The design elements
used in the app are gorgeous and
subtle detail like the steam, make
it a real winner.

21. Classics brings some of those
favorite classic books a couple
taps away on your phone. Page
flips make you feel like you are
dealing with a real book and the
nice cream color is easy on the
eyes. The sexy icon makes me
wonder why I don’t have these
books on my shelf at home lined
up like this.

22. Delivery Status Touch helps
keep track of those packages that
you’re expecting in the mail. The
app uses nice subtle gradients in
a table-like structure with a
variety of unique colors. The
icon resembles a 3D package
and makes you giddy knowing
your new item(s) will be
showing up soon.

23. Voices is a nice voice morphing
app that brings some silliness to
your iPhone. The icons in the
app have a lot of detail and
provide some cool characters to
the app. The red carpet and
wood are great looking and
make you feel as if you are on
stage as you tweak your voice to
your hearts content.

24. Where To? is a point of interest
app that allows you to easily find
restaurants, banks, etc. The app
uses a great black turn wheel
with a blue glow for highlighted
items. The app uses a leather
texture, which is a change from
the many types of wood textures
other apps use. The app icon is
easily recognizable too if you are
familiar with exit signs on the
roads.

25. Convert bot is another useful
convert utility from the tapbots
crew. The app icon matches the
interface well and it uses those
subtle gray gradients and dark
drop shadows that they are
known for. The unit icons are
easy to make sense of too.

26. Convert took other complex
converters by storm by under
doing the competition and
making conversions function
simple like a calculator. The unit
icons make it very easy to
recognize what unit you are
dealing with and the app icon
meshed with the app perfectly.

27. Reeder is an RSS feed reader, which
syncs with your Google Reader
account. The app icon looks great
with a hint of orange and the popular
RSS bars. I think what makes it great
is the simplicity of the app using a
gray color. With tiny little icons
representing the news source and it’s
ability to focus on the content, it
make the app stand out from other
bloated readers.

28. Groceries is a nice looking
grocery shopping list app. The
cork looking background and
paper provide realism. The
detailed app icon features quality
soup cans, which is sure to catch
some lookers who are in need of
an app to track their groceries.

29. The Jamie Oliver app has 55
recipes and is designed to help
you cook some delicious meals
in 20 minutes or so. They use a
darker wood and have great
paper textures throughout the
app. The fonts and colors go
very well together and makes the
app seem user friendly.

30. Hipstamatic brings back an
analog look to your digital
photographs. The camera, lenses,
and flashes in the icon and
interface have great detail. The
overall interface has a very
grungy look, which is very
different from other apps in the
store.

31. iHandy Level is probably one of
the sexiest leveling tools in the
App Store. With it’s great use of
realistic wood and brushed
metal, along with a detailed
bubble. There is no wonder why
I no longer need a leveling tool
from the garage anymore.

32. Pastebot is the easiest way to
manage your clipboard clippings
on your iPhone. It sports subtle
gray gradients and ambient
glows throughout the app. The
designer, Mark Jardine, always
makes his app icons look cute
and friendly and they match well
with the interface.

33. TimeTuner is a full-featured
radio alarm clock. It uses more
muted looking colors with a nice
looking scale for a sleep timer to
mix it up over other apps. The
app icon serves as both a clock
and depicts radio waves, which
is subtle but recognizable.

34. Cellar makes managing your
wine collection sexy and worth
the effort. The app uses great
drop shadows and has ambient
lighting almost everywhere. The
details on the wine bottles and
glasses is exceptional and hard
not to notice.

35. Ghostly Discovery is a mood-
based radio station, which helps
you discover songs based on
your mood. It has some great
looking dial knobs. The color
wheel looks great on the dark
gray background and the icon is
different enough to easily be
remembered.

36. Beats combines a BPM counter
with an advanced DJ metronome.
The icon looks sharp and identical
to the interface. The use of
diagonal lines and purple colors
makes this app stand out among
the other apps in the music
category. The dial pad / turn wheel
looks very realistic and makes you
feel like you have a nice stereo
system at your finger tips.

37. Tweetie is a popular Twitter
client on the Mac, and Tweetie 2
is the mobile app that continues
it’s legacy. Blue glows and
subtle details like the favorite
tweets star make the app feel
polished and functional. The app
icon is simple and effective at
displaying a sexy chat bubble.

38. Twitterific Pro is another game
changing Twitter client for the
iphone. Just from the app icon
alone, you can see the detail like
the feathers, which really makes
the app stand out in the store.
The great use of dark pixel work,
shadows, and glows makes the
interface jump out and a pleasure
to use.

39. Awesome Note goes above and
beyond the default notes
application on the iPhone.
Awesome Note has been
featured by Apple as one of the
best Apps of 2009. It’s not hard
to notice why when you see the
dark wood and detailed textures
throughout the app that grab
your attention of quality work.

40. With Groups, you can manage
your contacts easily with this
great looking tabbed interface. A
wide range of colors makes the
app interesting and eye catching.
The icon is 3D and easy to
distinguish in the store.

41. Facebook is probably one of
your favorite social networks
and it’s easy to see why.
Facebook pays attention to detail
and uses it’s notorious blue color
so people can recognize it. It has
some great detail in the icons
and resembles very closely to the
actual web site in terms of
functionality.

42. App Icon Design
1
Icon is your 1st message
Icon is your 1st impression
Keep it simple yet clear
Visual display of your app in
57x57 pixels

43. App Icon Design
2
Pixel perfect design
Use of gradients, highlights,
reflections, shadows
Use rich texture, layers, 3D

44. App Icon Design
3
Icon design reflect app design
Use unique design elements

45. App Icon Design
4
Shine your icon design on white
or gray background
“Kodak” moment

46. Utility

47. iHandy Level is probably one of
the sexiest leveling tools in the
App Store. With it’s great use of
realistic wood and brushed
metal, along with a detailed
bubble. There is no wonder why
I no longer need a leveling tool
from the garage anymore.

50. Convert bot is another useful
convert utility from the tapbots
crew. The app icon matches the
interface well and it uses those
subtle gray gradients and dark
drop shadows that they are
known for. The unit icons are
easy to make sense of too.

53. Productivity

54. Tea Round is Russian roulette
for those wanting to sort out who
fetches the tea at the office for
the day. The design elements
used in the app are gorgeous and
subtle detail like the steam, make
it a real winner.

57. With Groups, you can manage
your contacts easily with this
great looking tabbed interface. A
wide range of colors makes the
app interesting and eye catching.
The icon is 3D and easy to
distinguish in the store.

61. Notica is the ultimate way to
connect the things you see what
you want to remember about
them. With a highly intuitive
interface designed for photos &
videos, Notica is your perfect
visual memory companion.

64. Books

65. Classics brings some of those
favorite classic books a couple
taps away on your phone. Page
flips make you feel like you are
dealing with a real book and the
nice cream color is easy on the
eyes. The sexy icon makes me
wonder why I don’t have these
books on my shelf at home lined
up like this.

68. Navigation

69. Where To? is a point of interest
app that allows you to easily find
restaurants, banks, etc. The app
uses a great black turn wheel
with a blue glow for highlighted
items. The app uses a leather
texture, which is a change from
the many types of wood textures
other apps use. The app icon is
easily recognizable too if you are
familiar with exit signs on the
roads.

72. Life Style

73. Cellar makes managing your
wine collection sexy and worth
the effort. The app uses great
drop shadows and has ambient
lighting almost everywhere. The
details on the wine bottles and
glasses is exceptional and hard
not to notice.

77. Photography

78. Hipstamatic brings back an
analog look to your digital
photographs. The camera, lenses,
and flashes in the icon and
interface have great detail. The
overall interface has a very
grungy look, which is very
different from other apps in the
store.

83. Camera+ will help bring that
creativity out in you, all with a
fun, innovative, and beautiful
design.

86. Social
Network

90. Interaction Design Principles
1
1st Time Experience
Limited amount of functionality
for user to meet the objectives

91. Interaction Design Principles
2
Reduce no. of steps it takes a
user to complete a task
Key tasks should be efficient

92. Interaction Design Principles
3
It becomes easier for user to use
each time
Design less effort for frequently
use tasks

93. Interaction Design Principles
4
Design for no user mistakes in
user interface

94. Interaction Design Principles
5
Keep common task simple
Avoid unnecessary functionality
Keep visual design & layout clean

95. Interaction Design Principles
6
Design exactly what user expect
to do

96. Interaction Design Principles
7
Most important info should be
most visible while less important
info should be less visible

97. Interaction Design Principles
8
Give visual and/or audio cue for
user action

98. Interaction Design Principles
9
Like-items should display and act
consistently across the entire app
or between applications
Keep UI Standards

99. Interaction Design Principles
10
Keep users happy
Measure User’s Happiness

100. Design Guideline
Design for Simplicity
1
Reduce functionality
Keep navigation narrow & shallow
Avoid extra info
Reduce or remove preferences
Use progressive disclosure

101. Design Guideline
Design for Small Screen
2
Minimize user input
Minimize vertical scrolling
Avoid horizontal scrolling
Use hyperlinking effectively
Provide useful error messages
Prioritize information on each screen

102. Design Guideline
Provide Useful Feedback
3
Identify critical feedback
Quick response time

103. Design Guideline
Maintain Existing Design Standards
4
Use existing UI standards
Use Real World Metaphors

104. Design Guideline
Respect physical & mental effort
5
Use wizards to simplify complex
interactions
Design for efficiency

105. Resources

106. iOS Human Interface Guideline
Human Interface Principles
App Design Strategies
User Experience Guidelines
iOS UI Element Usage Guidelines
Custom Icon & Image Creation
Guidelines

107. Icon Template
http://pixelresort.com/blog/app-icon-template/

108. Icon Template
http://www.tapptics.com/iphone-ipad-ios-icon-
specifications-and-templates/

109. Paper Wireframe
Pen + Paper

110. Digital Wireframe
Balsamiq
http://www.balsamiq.com/

111. http://www.slideshare.net/bess.ho
Q&A