charles du: introduction to mobile ux design
TRANSCRIPT
Resources: Online Courses
For coders For non-coders
Stanford’s iOS development class iTunesU
“From Idea to App Store” udemy.com
Link to discounted course
Apple’s iOS development videos developer.apple.com/itunes
“The Complete Product Management Course”
udemy.com Link to discounted course
Introduction to Mobile UX Design
Hi. I’m Charles
1. Process
2. Models
3. Resources
Agenda
1. App Definition Statement
2. Feature Backlog
3. Flow Diagram
4. Wires
5. Mocks
6. Mobile Web Prototype
7. Assets
Process
“An app definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience”
What is an app definition statement?
“An app that easily let the public get NASA content”
1. App Definition Statement NASA App
“An app that easily let two strangers discover what they have in common”
1. App Definition Statement Common Links
“An app that easily let two strangers
discover what they have in common”
Example: Common Links
2. Feature Backlog
Tools: Asana, Jira, Pivotal Tracker
3. Flow Diagram
Tools: Paper, Omnigraffle, Visio
Splash Screen
Not Logged In
Home Screen
Logged In
User Data Saved?
Data < 1 week old?
FB Token Received
Start Yes
Tap "Log in"
Unable to log in to Facebook. Please check your internet
connection.
No
Yes
FB Token Saved?
No
No
Splash Screen
Spinner
Yes
No
FB data received?
Save User Data
Yes
No
Is old data available
No
Yes
Read User Data
Read User Data
4. Wires
Tools: Paper, Omnigraffle, Balsamic, Axure
5. Mocks
Tools: Sketch, Photoshop, Indesign, Invision
COMMON LINKSCL_pageviews_createdlinkables.png
Header Arrow#f47203
HeadersCell height 88 px#f7f7f7Helvetica Neue Medium18pt, #000000
Profile ImageW 317 px, H 317 px
Helvetica Neue Light, 16pt, #000000
Helvetica Neue Bold, 22pt, #f47203
Helvetica Neue Light, 16pt, #f47203
Helvetica Neue Light, 16pt, #000000
Helvetica Neue Light, 22pt, #f47203
Helvetica Neue Light, 16pt, #f47203FootersCell height 84 px#f7f7f7
Cell height 170 px
Cell height 295 px
Grey Stroke 1px, #d3d3d3
White Padding (between grey stroke and profile image)3px, #ffffff
White Padding (between 2 profile images)7px, #ffffff
27 px
18 px
27 px
18 px
73 px
73 px
12 px
Resources: iOS Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/
Resources: Android Material Design Spec
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
6. Mobile Web Prototype
“Show me how you would complete this task”
“What do you think this word means?”
“If you tap on this, what do you expect to happen?”
“What was confusing?”
“how did using this app make you feel?”
User Test
7. AssetsCOMMON LINKSAnimation Assets
Friends Balls
18% opacity of #5c76b1
Music Artists Balls
18% opacity of #ee3568
Likes Balls
18% opacity of #2ac5f4
20px 28px 35px 52px
7. Assets - icons
1
D
E
F
2 3
7. Assets - icons9. APP STORE PREP
Role Models9. APP STORE PREP
FacebookSettings Ticketmaster
PathWazeVenmo
As Android, iPhone and other mobile platforms grow, we are moving away from the page-based Internet. The new Internet is app centric and often message-centric.
— Keith Teare, Archimedes Labs
Resources: Online Courses
For coders For non-coders
Stanford’s iOS development class iTunesU
“From Idea to App Store” udemy.com
Link to discounted course
Apple’s iOS development videos developer.apple.com/itunes
“The Complete Product Management Course”
udemy.com Link to discounted course
WWW.MDEVTALK.CZ
mdevtalk