Slides for my introductory workshop to iPhone app design. These slides specifically for Creative South 2015. Coordinating video course available on mijngo: https://mijingo.com/products/screencasts/iphone-app-design-tutorial/ Rick is a designer at funsize.co in Austin Texas.

1. THE FUNDAMENTALS OF
with RICK MESSER
IPHONE APP DESIGN
W O R K S H O P

2. i:
HOWDY

3. @RICKMESSER

4. FUNSIZ E
A U S T I N T E X A S

5. MOBILE DIGITAL PRODUCTS

6. FUNSIZE
#HustlePodcast

7. I LEARNED MOBILE DESIGN BY COPYING
(Yeah, it was basically cheating)
Screen shot an app
Zoom waaaaaay in
Copy pixel by pixel
Learn how the pros do it

8. ii:
WORKSHOP OVERVIEW

9. TODAY
Part II
Design
Part III
Prototype
Part I
Anatomy

10. WHAT WE’LL DO
Design a Core-Flow
Based on wireframes

11. BUILD A PROTOTYPE
Using Invision App
Test it on your device

12. STARTER PSD, BASIC ANATOMY
Status Bar
Navigation Bar
Segmented Control
Table View
Content Area
Tab Bar
based on Apple’s HIG

13. Laptop + Photoshop + iOS Device
REQUIREMENTS

14. ALSO
INVISION
(invisionapp.com, free account)

15. CLASS PULSE
Designed a mobile app before?
New to Photoshop?
What devices do we have here?
Older Photoshop than CC?

16. PART I:
IPHONE APP ANATOMY

17. Status Bar
40 px (20 pt)
Always on top
Plan for it in your design
Don’t remove it
Light or dark content

18. Status Bar
Light Content
Dark Content

19. Navigation Bar
88 px (44 pt)
Always below status bar
Tells user where they are
Translucent by default
1px border (0.5 pt)
Back Title Action129 px (64.5 pt)
Can be any color or pattern

20. Navigation Bar
Don’t do something
silly like this.
Or this…
Be chill on those raster backgrounds tho…

21. Segmented Control
Even widths
2 - 5ish items
Sub view

22. Content Area
Table
Defer to content
Use full bleed
Default Typography
Default Type
Helvetica Neue,
34px (17pt)
Body text,
something like 14pt (28px)
Don’t go lower than 11pt (22px)
Tappable areas = 44x44pt
27px (13.5pt)

23. WHEN CHOOSING A TYPEFACE
Not too decorative
Good range of weights
Some popular UI fonts:
Avenir Brandon Proxima Nova
Open Sans Source Sans Lato

24. Tab Bar
Always on bottom
Common app navigation
98 px (49 pt)
1px border (0.5 pt)
Better than a hamburger

25. Hamburger icon
I think the world has seen
enough of these.
Plus think about how hard
it is to reach this with your
thumb.

26. Consider Thumb Reach
iPhone – 4s iPhone 5 – 5s iPhone 6 iPhone 6 Plus
http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens

27. Pixels vs Points
1st Gen iPhone:
1 Point = 1 Pixel
Retina:
1 Point = 4 Pixels
@2x@1x

28. iPhone Device Resolution History
Original–3Gs 320 x 480 pt
In Points
4 & 4s 320 x 480 pt
640 x 960 pixels
5, 5c, 5s 320 x 568 pt
640 x 1136 pixels
6 375 x 667 pt
750 x 1334 pixels
6+ 414 x 736 pt
1242 × 2208 pixels
@1x
@2x
@2x
@2x
@3x
Down-sampled to 1080 × 1920
device pixels

29. VISUAL DESIGN
PART II

30. PROTOTYPING & PRODUCTION
PART III

31. IN CONCLUSION

32. THINGS TO CONSIDER
Keep it light-weight & Iterate
Don’t get too caught up on dribbble
Sleep on it
Follow and listen to these smart people:
Marc Edwards
Iterate podcast, Bjango
Ivo Mynttinen
German iOS Designer, Developer
Anthony & Natalie Armendariz
Funsize

33. FUNSIZE.CO
RICK@FUNSIZE.CO
@RICKMESSER