View
355
Download
0
Category
Tags:
Preview:
DESCRIPTION
This session will break down the key ingredients that will make your mobile app a learning success. You’ll learn design principles, from user interface to user experience, and how to get the best in class. You learn several ways to prototype apps prior to programming, from paper to interactive testing, and learn the techniques and tools that you can use to test your concept prior to programming. You’ll also look at the key types of apps and receive dozens of ideas to get you started and to apply when you’re back at your office.
Citation preview
Nick FloroNick@sealworks.comTwitter.com/NickFloro
HTML
Launching a Mobile AppConcept to Launch
How do you define mobile?
What technology will you support?
a. smartphoneb. tabletc. laptopd.all of the above
Mobile devices everywhere
138.5million smartphones in US
58% of phone market
4.5 billionsmartphones by 2018
60% on LTE
70 billion apps in 2013
Smartphones 58 billion and 14 billion to tablets
estimated
Learning
deliver everywhere
apps & tools
customize
mediadocuments
appebook web
Define
Design
Develop
Deliver
Process
Big DataFocus on the Audience
Content Strategy
desktoptabletphone
Content StrategyWhich Device will you support?
Create a Road Map
desktoptabletphone
Think Mobile First
desktoptabletphone
Think Mobile First
desktoptabletphone
Think Mobile First
Progressive Enhancement
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 is Key
Content Strategy
simplify.
write it down
cut in halfcut it again
breakcut & refine
then done
SketchingPaper Prototyping
Visual Thinking
Mobile Apps
Adobe Ideas
Evernote Skitch
Paper by FiftyThree
Prototyping test driving your idea
Tools:
• Wireframes– Keynote / PowerPoint
Quick Prototyping Techniques
Quick Concept
keynotekungfu.com
Custom Template in Keynote
balsamiq.com
Sketchy & iMockUps
teehanlax.com/tools/
Adobe Acrobat
Adobe Acrobat Pro | Building Prototypes with PDF Links
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
POP - Prototyping on Paper
proto.io
User Interface | UI
User Interface | UI
User Experience | UX
Development: App or Web Delivery
Native App• Faster performance
• Unique platform features
• Requires programming
• iOS / Android / Amazon
• Increased Costs per OS
AppWeb App• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
Web
How will you distribute?
App Store Deployment Web
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Web
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Updates
Web
WebApp
HTML Javascript CSS API’s
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
Create and deliver everywhere.
Specifications
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640iPhone
480 x 320
iPhone 51136-by-640
Galaxy1280 x 720
Galaxy S41920 x1080
Android Xoom1280 x 720Galaxy SIII
1280 x 720
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
AmazonA Quick Look
Amazon Windowshop
Responsive Design
Mobile Factors
Form Factors
Bandwidth
Bandwidth
Input Mechanism
Context
Technology is a tool.
PhoneGap.com
Discover Look & Play
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
Innovation
>
evernote
evernote
Pulse
Zite
Zite
Design for Flexibility
Testing
Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Windows 8− Tablet vs Phablet vs Phone− Portrait vs Landscape
Test on Windows 8, 7, Vista, XP- Internet Explorer 6, 7, 8, 9, 10- Firefox 15-21 +- Chrome 15 - 19 +
Test on OS X− Safari 4, 5+− Firefox 15-21 +− Chrome 20 - 26 +
Testing Code
BrowserStack.com
Capture & Analyze
what’s next...
ResourcesTo help you grow.
w3schools.com
InvisionApp.com
tv.adobe.com/show/adobe-edge-reflow/
RESPONSIVE WEB DESIGNby ETHAN
MARCOTTE
airserver.com
www.uxmag.com
typekit.com
reflectorapp.com
airserver.com
abookapart.com
Thank You
Nick Floronick@sealworks.comtwitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Recommended