visualizing & prototyping mobile design
DESCRIPTION
Presented with Nick Floro from Sealworks at the ASTD PHL Regional Conference on 5/14/13. This presentation provides a introduction to designing for mobile, key factors and what you need to understand to develop a best in class app or web app. Includes several resources. Visualizing & Prototyping Mobile Design by Linda Daniels & Nick Floro is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. Based on a work at www.linkedin.com/in/lindadanielsdesign/. Permissions beyond the scope of this license may be available at www.linkedin.com/in/lindadanielsdesign/.TRANSCRIPT
![Page 1: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/1.jpg)
Designing Learning for
mobile devices
Nick [email protected]
Twitter.com/NickFloro
Linda [email protected]
Twitter.com/ldaniels_design
![Page 2: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/2.jpg)
![Page 3: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/3.jpg)
![Page 4: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/4.jpg)
Understanding the Technology
![Page 5: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/5.jpg)
![Page 6: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/6.jpg)
![Page 7: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/7.jpg)
![Page 8: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/8.jpg)
![Page 9: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/9.jpg)
![Page 10: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/10.jpg)
desktop
![Page 11: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/11.jpg)
desktop
phone
![Page 12: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/12.jpg)
desktop
tabletphone
![Page 13: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/13.jpg)
desktop
tablet
phone
![Page 14: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/14.jpg)
desktoptabletphone
Think Mobile First
![Page 15: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/15.jpg)
7 Questions to Define a Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
![Page 16: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/16.jpg)
App or Web Delivery
![Page 17: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/17.jpg)
Google Chrome 31% Yes
Mozilla Firefox 20% Yes
Internet Explorer 7-8 11% No
Internet Explorer 9-10 10% Yes
Apple Safari 15% Yes
iPhone / iPad 4% Yes
Google Android 2% Yes
Other 4% No
Market Share HTML5 Support
Browser Stats 2013
![Page 18: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/18.jpg)
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
![Page 19: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/19.jpg)
Web App Native App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
• Faster performance
• Unique platform features
• Requires programming
• Deploy via Store models
• iOS / Android / Amazon
Which is right for your project?
Enterprise Deployment
![Page 20: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/20.jpg)
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
![Page 21: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/21.jpg)
• form factor
Mobile Factors
![Page 22: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/22.jpg)
• network latency
• form factor
Mobile Factors
![Page 23: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/23.jpg)
• network latency
• input mechanism
• form factor
Mobile Factors
![Page 24: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/24.jpg)
• network latency
• input mechanism
• memory
• form factor
Mobile Factors
![Page 25: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/25.jpg)
• network latency
• input mechanism
• memory
• form factor
• computational power
Mobile Factors
![Page 26: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/26.jpg)
• network latency
• input mechanism
• memory
• form factor
• computational power
• battery
Mobile Factors
![Page 27: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/27.jpg)
• network latency
• input mechanism
• memory
• form factor
• computational power
• context
• battery
Mobile Factors
![Page 28: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/28.jpg)
?Does everything need to be mobile?
Is that the most important thing?
![Page 29: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/29.jpg)
AmazonA Quick Look
![Page 30: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/30.jpg)
![Page 31: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/31.jpg)
![Page 32: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/32.jpg)
The mobile environmentsingle early failure = non-returning user
![Page 33: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/33.jpg)
The mobile environmentcrucial first 30-60 seconds usage
![Page 34: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/34.jpg)
The mobile environmentFewer options
![Page 35: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/35.jpg)
Graphics Location Storage Speed
Solving Developer Challenges
![Page 36: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/36.jpg)
?What does this mean to me?
Why should I care?
![Page 37: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/37.jpg)
Examples
![Page 38: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/38.jpg)
![Page 39: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/39.jpg)
![Page 40: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/40.jpg)
![Page 41: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/41.jpg)
![Page 42: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/42.jpg)
![Page 43: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/43.jpg)
?What do I really need to know?
How do I begin?
![Page 44: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/44.jpg)
How should we
Design?
![Page 45: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/45.jpg)
Before You Design Anything
• Know your audiencePersonas... really know them
• Know what they wantContent... which precedes design
• Know what you wantObjective.... friendship, goodwill, cash...to start a revolution?
![Page 46: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/46.jpg)
Form Follows FunctionThe 3 F’s of Design
• FunctionHow it works
• FormWhat something looks like
![Page 47: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/47.jpg)
Images Trump Words
![Page 48: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/48.jpg)
Danger: Electric Shock
![Page 49: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/49.jpg)
![Page 50: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/50.jpg)
Focus on the
Audience
1
![Page 51: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/51.jpg)
![Page 52: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/52.jpg)
![Page 53: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/53.jpg)
is the key
Content
2
![Page 54: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/54.jpg)
Transparent
Interface
3
![Page 55: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/55.jpg)
Designing Apps
![Page 56: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/56.jpg)
![Page 57: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/57.jpg)
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Galaxy1280 x 720
![Page 58: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/58.jpg)
?Do I need to know ALL of this?
Who can I work with?
![Page 59: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/59.jpg)
Prototyping test driving your idea
![Page 60: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/60.jpg)
Flat Pages
![Page 61: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/61.jpg)
![Page 62: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/62.jpg)
![Page 63: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/63.jpg)
Tab Bar
![Page 64: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/64.jpg)
![Page 65: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/65.jpg)
Tree Structure
One
Two
Three
Four
Five
Six
![Page 66: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/66.jpg)
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
![Page 67: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/67.jpg)
Innovation
>
![Page 68: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/68.jpg)
weathercube
![Page 69: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/69.jpg)
?Is prototyping really necessary?
Can anyone do it?
![Page 70: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/70.jpg)
Design for Flexibility
![Page 71: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/71.jpg)
Testing
![Page 72: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/72.jpg)
Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9
• Firefox 4.0, 10-13 +
• Chrome 15 - 19 +
Test on OS X− Safari 4, 5+
− Firefox 4.0, 10-13 +
− Chrome 15 - 19 +
Test on Mobile− iOS 4.x - 6.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phone
− Portrait vs Landscape
Testing Code
![Page 73: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/73.jpg)
Test for Usability
• Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals
• Survey
![Page 74: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/74.jpg)
Capture & Analyze
![Page 75: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/75.jpg)
Using CoverFlow view and Preview of Graphics
![Page 76: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/76.jpg)
?My project is different, are all these
steps relevant to me?
![Page 77: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/77.jpg)
ResourcesTo help you grow.
![Page 78: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/78.jpg)
kuler.adobe.com
![Page 79: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/79.jpg)
abookapart.com
![Page 80: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/80.jpg)
www.smashingmagazine.com
![Page 81: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/81.jpg)
Nancy Durate Garr Reynolds
![Page 82: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/82.jpg)
Screencasts 101 Mini-Session
www.jingproject.com
![Page 83: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/83.jpg)
html5rocks.com
![Page 84: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/84.jpg)
www.uxmag.com
![Page 85: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/85.jpg)
www.twitter.com
![Page 87: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/87.jpg)
evernote.com
![Page 88: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/88.jpg)
reflectorapp.com
![Page 89: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/89.jpg)
Expand your Career Opportunities Take some time to explore these resources to find out what is new in our creative industry for 2013. Expand your technical skills in this ever-changing technology landscape to keep your work and portfolio fresh! The list to the right offers insights and tutorials on various segments in our niche industry for print and digital spaces. Open this interactive PDF in Acrobat or Acrobat Reader, click on any resource link and enjoy!
We’ve got some pretty fun stuff happening all over the web. Join us on LinkedIn, Twitter and Facebook for the latest in events, jobs, contests and more!
Typography Typophile Fontshop The Type Studio Veer Dafont
Graphics/Video/Audio iStockphoto VectorStock Shutterstock Revostock Stockfuel
Adobe CS4 & 5 Adobe TV Layers Magazine Photoshop Support Mashable lynda.com
Front-End Development A List Apart W3schools CSS Zen Garden HTML5 Sites lynda.com
E-learning Articulate Captivate Lectora e-Learning Guild lynda.com
Content Management WordPress Joomla Drupal Blog Tips lynda.com
Video Vimeo PCWorld VideoToolbox Mashable lynda.com
This work is licensed underhttp://creativecommons.org/licenses/by-nc-nd/3.0/
2013 Resources GuideIndustry insight for our creative, design, interactive, development, marketing, writing, and e-learning professionals.
Download this 2013 Resource Guide to keep your work on the cutting edge www.thebossgroup.com/Job-Seekers/
![Page 90: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/90.jpg)
?How can any ONE person keep up
with all this information?
![Page 91: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/91.jpg)
Don’t Settle
![Page 92: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/92.jpg)
Download the Presentation at:http://www.slideshare.net/nickfloro
![Page 93: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/93.jpg)
www.launchcycle.com
![Page 94: Visualizing & Prototyping Mobile Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54b732794a7959cd448b459a/html5/thumbnails/94.jpg)
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Linda [email protected]
Twitter.com/ldaniels_design