Web Design World 2007: iPhone Design and Development Workshop
iPhone Design Workshop
-
Upload
rick-messer -
Category
Design
-
view
113 -
download
1
Transcript of iPhone Design Workshop
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
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