Adobe Max Modern iPhone App Design with Rick Messer

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

Thank you

rickamesser@gmail.com

rickamesser@gmail.com

@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