Modern iPhone App Design Basic practices and modern techniques An introduction to iPhone app design. Gain a foundation of basics to break into this medium and start designing apps. This session will cover some fundamental iOS principles and describe modern design techniques. Get equipped with a good starting point and avoid some rookie mistakes. Some Pointers from a Mobile Product Design Agency iOS Anatomy: Familiarize with terminology, patterns & controls Examples of modern design techniques Tips from our process at Funsize Working with engineers Modern tools & practices for prototyping

1. MODERN
with RICK MESSER
IPHONE APP DESIGN
A D O B E M A X 2 0 1 5
S E S S I O N

2. i:
A Little Background

3. Small Team
Designing Small Screens
F U N S I Z E

4. Austin is Magical

9. Specializing In Mobile Products

12. Early Conceptual Designs (August 2014)

13. Early Conceptual Designs (August 2014)

14. Final Designs

15. @hustlecast

17. ii:
Overview

18. What this talk is about
Anatomy and nomenclature of iPhone apps
Nuances involved in designing for mobile
Personal experience transitioning from web to mobile
Designing native apps in the real world

19. What this talk is not about
Visual design
Design trends
Code/Development
Responsive web design

20. Expectations

21. Outline
Part I: Why Mobile?
Part II: Practical Stuff
Part III: Stuff I’ve Learned Not To Do

22. PART I
Why Mobile?

23. “Web People” Problems

25. 1st Gen iPhone Feb 2008

26. How I Learned Mobile
By Copying
(Basically cheating)

28. PART II
Practical Stuff

29. Basic Anatomy
Status Bar
Navigation Bar
Segmented Control
Table View
Content Area
Tab Bar

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

31. Status Bar
Light Content
Dark Content

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

33. Navigation Bar
But don’t do something
silly like this.
Or this…

34. Segmented Control
Even widths
2 - 4ish items
Is a sub-view

35. Content Area
Table
Defer to content
Use full bleed
Default Typography 17pt
Body text,
something like 14pt (28px)
Don’t go lower than 11pt (22px)
Tappable areas = 44x44pt
27px (13.5pt)
Default typeface as of iOS9
is San Francisco

36. Apple’s New System Typeface
San Francisco
Now for iOS 9, OS X El Capitan, watchOS 2, and tvOS.

38. When Choosing A Typeface
Not too decorative
Good range of weights
Some popular UI fonts:
Avenir Brandon TextProxima Nova
Open Sans Source Sans Lato

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

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

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

42. PART III
Stuff I’ve Learned Not To Do

43. Avoid “Webbyness”
1

44. Tiny text, gigantic line-height
Keyboard should be up
“Next” log in and disabled
It’s a tap not a click
Set status bar content appropriately
This probably shouldn’t be made

47. Photoshop Artboards Workflow

50. Don’t Throw Things At Devs
2

51. D E S I G N D E V
“Lobbers”

52. Why So Specific?

57. Style Bugs
You forgot something
The Devs ignored your style guide

58. There WILL Be Changes

59. Adobe CC Libraries

61. Everyone Wins With Pairing
Devs don’t have to make design decisions
Implementation get closer to your design
Both parties are involved in making decisions

62. This Talk Is About Mobile Right?

63. Don’t Thumb Hate
3

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

66. 4
Lazy Comp Data

69. Comet Repeat Grid Feature

71. Prototype Your Designs
5

72. For Flows

73. Micro-Interactions

74. Shot by @Sunnynsm

76. Careful With Design Trends
6

77. When I Follow Design Trends
http://uxreactions.com/post/120546553244/when-i-follow-design-trends

79. Hamburger Dependence
Hamburger
7

80. Home
Activity
Notifications
Account
Sign-Out
Favorites
Friends
Explore
Search
Help
Hamburger Dependence
7

81. Hierarchical Navigation
iOS Human Interface Guidelines

86. It’s Hard to Say “No” to a Hamburger

87. “Think Outside The Bun”
–Taco Bell

88. Re-cap
“Webby" design patterns
Lobbing designs at devs
Not thinking about thumb users
Lazy comp data
Not prototyping
Design trends
Hamburger dependence

89. In Conclusion

90. Thank you
rickamesser@gmail.com

91. rickamesser@gmail.com

92. @rickmesser

93. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Take the SESSION SURVEY on the MAX mobile app
…for your chance to WIN one of
these e-books from Adobe
Press
Every survey you submit enters your
name to win the daily grand prize:
Dell UltraSharp 25” Monitor