Embed Size (px)
Citation preview
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
i:
A Little Background
Small Team Designing Small Screens
F U N S I Z E
Austin is Magical
Specializing In Mobile Products
Early Conceptual Designs (August 2014)
Early Conceptual Designs (August 2014)
Final Designs
@hustlecast
ii:
Overview
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
What this talk is not about
Visual design
Design trends
Code/Development
Responsive web design
Expectations
Outline
Part I: Why Mobile?
Part II: Practical Stuff
Part III: Stuff I’ve Learned Not To Do
PART I
Why Mobile?
“Web People” Problems
1st Gen iPhone Feb 2008
How I Learned Mobile
By Copying
(Basically cheating)
PART II
Practical Stuff
Basic Anatomy
Status BarNavigation Bar
Segmented Control
Table View
Content Area
Tab Bar
Status Bar
40 px (20 pt)
Always on top
Plan for it in your design
Don’t remove it
Light or dark content
Status Bar
Light Content
Dark Content
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
Navigation Bar
But don’t do something silly like this.
Or this…
Segmented Control
Even widths
2 - 4ish items
Is a sub-view
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
Apple’s New System Typeface
San Francisco
Now for iOS 9, OS X El Capitan, watchOS 2, and tvOS.
When Choosing A Typeface
Not too decorative
Good range of weights
Some popular UI fonts:
Avenir Brandon TextProxima Nova
Open Sans Source Sans Lato
Tab Bar
Always on bottom
Common app navigation
98 px (49 pt)
1px border (0.5 pt)
Better than a hamburger
Pixels vs Points
1st Gen iPhone: 1 Point = 1 Pixel
1 pixel
Retina: 1 Point = 4 Pixels
1px 1px
1px 1px
@2x@1x
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
@3xDown-sampled to 1080 × 1920 device pixels
PART III
Stuff I ’ve Learned Not To Do
Avoid “Webbyness”
1
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
Photoshop Artboards Workflow
Don’t Throw Things At Devs
2
D E S I G N D E V
“Lobbers”
Why So Specific?
Style Bugs
You forgot something
The Devs ignored your style guide
There WILL Be Changes
Adobe CC Libraries
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
This Talk Is About Mobile Right?
Don’t Thumb Hate3
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
4
Lazy Comp Data
Comet Repeat Grid Feature
Prototype Your Designs
5
For Flows
Micro-Interactions
Shot by @Sunnynsm
Careful With Design Trends
6
When I Follow Design Trends
http://uxreactions.com/post/120546553244/when-i-follow-design-trends
Hamburger Dependence
Hamburger
7
Home
Activity
Notifications
Account
Sign-Out
Favorites
Friends
Explore
Search
Help
About this app
Hamburger Dependence
7
Hierarchical Navigation
iOS Human Interface Guidelines
It’s Hard to Say “No” to a Hamburger
“Think Outside The Bun”
–Taco Bell
Re-cap
“Webby" design patterns
Lobbing designs at devs
Not thinking about thumb users
Lazy comp data
Not prototyping
Design trends
Hamburger dependence
In Conclusion
@rickmesser
© 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 yourname to win the daily grand prize:
Dell UltraSharp 25” Monitor
