iphone design workshop
TRANSCRIPT
![Page 1: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/1.jpg)
THE FUNDAMENTALS OF
with RICK MESSER
IPHONE APP DESIGN
W O R K S H O P
![Page 2: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/2.jpg)
i:
HOWDY
![Page 3: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/3.jpg)
@RICKMESSER
![Page 4: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/4.jpg)
F U N S I Z E
A U S T I N T E X A S
![Page 5: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/5.jpg)
MOBILE DIGITAL PRODUCTS
![Page 6: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/6.jpg)
FUNSIZE
#HustlePodcast
![Page 7: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/7.jpg)
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
![Page 8: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/8.jpg)
ii:
WORKSHOP OVERVIEW
![Page 9: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/9.jpg)
TODAY
Part II Design
Part III Prototype
Part I Anatomy
![Page 10: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/10.jpg)
WHAT WE’LL DO
Design a Core-Flow Based on wireframes
![Page 11: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/11.jpg)
BUILD A PROTOTYPE
Using Invision App Test it on your device
![Page 12: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/12.jpg)
STARTER PSD, BASIC ANATOMY
Status BarNavigation Bar
Segmented Control
Table View
Content Area
Tab Bar
based on Apple’s HIG
![Page 13: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/13.jpg)
Laptop + Photoshop + iOS Device
REQUIREMENTS
![Page 15: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/15.jpg)
CLASS PULSE
Designed a mobile app before?
New to Photoshop?
What devices do we have here?
Older Photoshop than CC?
![Page 16: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/16.jpg)
PART I:
IPHONE APP ANATOMY
![Page 17: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/17.jpg)
Status Bar
40 px (20 pt)
Always on top
Plan for it in your design
Don’t remove it
Light or dark content
![Page 18: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/18.jpg)
Status Bar
Light Content
Dark Content
![Page 19: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/19.jpg)
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
![Page 20: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/20.jpg)
Navigation Bar
Don’t do something silly like this.
Or this…
Be chill on those raster backgrounds tho…
![Page 21: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/21.jpg)
Segmented Control
Even widths
2 - 5ish items
Sub view
![Page 22: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/22.jpg)
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)
![Page 23: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/23.jpg)
WHEN CHOOSING A TYPEFACE
Not too decorative
Good range of weights
Some popular UI fonts:
Avenir Brandon Proxima Nova
Open Sans Source Sans Lato
![Page 24: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/24.jpg)
Tab Bar
Always on bottom
Common app navigation
98 px (49 pt)
1px border (0.5 pt)
Better than a hamburger
![Page 25: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/25.jpg)
Hamburger icon
I think the world has seen enough of these.
Plus think about how hard it is to reach this with your thumb.
![Page 26: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/26.jpg)
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
![Page 27: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/27.jpg)
Pixels vs Points
1st Gen iPhone: 1 Point = 1 Pixel
Retina: 1 Point = 4 Pixels
@2x@1x
![Page 28: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/28.jpg)
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
![Page 29: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/29.jpg)
VISUAL DESIGN PART II
![Page 30: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/30.jpg)
PROTOTYPING & PRODUCTION PART III
![Page 31: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/31.jpg)
IN CONCLUSION
![Page 32: iPhone Design Workshop](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a7c3b11a28ab45128b4732/html5/thumbnails/32.jpg)
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