MOBILE AppLaunching a
Nick Floro
from Paper to Delivery
share
Experiment
experiment
Goals
ready
What is mobile?
3 Key Factors

1. Audience
2. Technology
3. User Stories Why?
Time
Budget
desktoptabletphone
Content Strategy
phone
tablet
App or Web Delivery
Native App
• Faster performance
• Unique platform features
• Requires programming
• iOS / Android / Amazon
• Increased Costs per OS
App
Web App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
Web
Hybrid App
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Updates
Web
Amazon
A Quick Example
Amazon Windowshop
What is Design?
How it works.
Homework: Watch www.apple.com/designed-by-apple/
It’s about
communication and
problem solving.
Homework: Watch www.apple.com/designed-by-apple/
Content Strategy
Content Strategy
simplify.
write it down
cut in half
cut it again
break
cut & refine
then done
Getting Inspired
UI/UX
Flat Pages
Apple Weather
Yahoo Weather
Yahoo Weather
Tab Bar
Apple Clock
Tree Structure
One
Two
Three
Four
Five
Six
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
First Aid
First Aid
First Aid
Innovation
>
evernote
evernote
Pulse
Pulse
Pulse
Flipboard
Sketchingwhere ideas begin
communicate
tell a story
Contents
Open Accordion
Closed Accordion
Closed Accordion
Closed Accordion
Hamburger Menu
Accordion Blind / MODAL
Play
Text
peek and pop
A Screen
New Project
Stakeholder
Activity
• Multiple Choice
• Drag & Drop
• Photos
Screen 1
Menu
Screen 2
Content Screen
(include a video & text)
Screen 3
Interactive Timeline or
Activity
(move to see time)
Prototyping on Paper
POP
Visual Thinking
Mobile Apps
Adobe Illustrator Draw
Evernote Skitch
Paper by FiftyThree
Wireframing
Low / High Fidelity
Tools:
• Wireframes
– Keynote / PowerPoint
Quick Prototyping Techniques
This is my question example where
you would tell a story and ask for a
response?
option 1
option 2
option 3
option 4
option 5
This is my question example where
you would tell a story and ask for a
response?
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
keynotekungfu.com
keynotopia.com
Custom Template in Keynote
Adobe Acrobat
User Interface | UI
User Interface | UI
User Experience | UX
User Experience | UX
Responsive Design
Responsive Design
getskeleton.com
getBootStrap.com
DEVICE ACCESS
PERFORMANCE &
INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS 

& EFFECTS
Parallax
Design for Flexibility
Mobile Factors
Form Factors
Bandwidth
Bandwidth
Input Mechanism
Context
Chrome
Developer Tools
BrowserStack.com
Tools
adobe.com
PhoneGap.com
build.phonegap.com
What can you apply from today?
ResourcesTo help you grow.
abookapart.com
w3schools.com
www.uxmag.com
uxpin.com
UserTesting.com
reflectorapp.com
airserver.com
typekit.com
color.adobe.com
Adobe Color CC color.adobe.com
Thank You
Nick Floro
sealworks interactive studios
nick@sealworks.com
www.sealworks.com
twitter.com/NickFloro
Download the Presentation at:
http://www.slideshare.net/nickfloro
Download Handout: goo.gl/UhRzEw
Download App Prototyping on Paper (POP)

Launching a Mobile App from Concept to Launch