THE FUNDAMENTALS OF

with RICK MESSER

IPHONE APP DESIGN

W O R K S H O P

i:

HOWDY

@RICKMESSER

F U N S I Z E

A U S T I N T E X A S

MOBILE DIGITAL PRODUCTS

FUNSIZE

#HustlePodcast

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

ii:

WORKSHOP OVERVIEW

TODAY

Part II Design

Part III Prototype

Part I Anatomy

WHAT WE’LL DO

Design a Core-Flow Based on wireframes

BUILD A PROTOTYPE

Using Invision App Test it on your device

STARTER PSD, BASIC ANATOMY

Status BarNavigation Bar

Segmented Control

Table View

Content Area

Tab Bar

based on Apple’s HIG

Laptop + Photoshop + iOS Device

REQUIREMENTS

ALSO

INVISION (invisionapp.com, free account)

CLASS PULSE

Designed a mobile app before?

New to Photoshop?

What devices do we have here?

Older Photoshop than CC?

PART I:

IPHONE APP ANATOMY

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

Don’t do something silly like this.

Or this…

Be chill on those raster backgrounds tho…

Segmented Control

Even widths

2 - 5ish items

Sub view

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)

WHEN CHOOSING A TYPEFACE

Not too decorative

Good range of weights

Some popular UI fonts:

Avenir Brandon Proxima 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

Hamburger icon

I think the world has seen enough of these.

Plus think about how hard it is to reach this with your thumb.

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

Pixels vs Points

1st Gen iPhone: 1 Point = 1 Pixel

Retina: 1 Point = 4 Pixels

@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

VISUAL DESIGN PART II

PROTOTYPING & PRODUCTION PART III

IN CONCLUSION

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

FUNSIZE.CO#

"

!

RICK@FUNSIZE.CO

@RICKMESSER