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
Designing Learning for
mobile devices
Nick [email protected]
Twitter.com/NickFloro
Linda [email protected]
Twitter.com/ldaniels_design
Understanding the Technology
desktop
desktop
phone
desktop
tabletphone
desktop
tablet
phone
desktoptabletphone
Think Mobile First
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?
App or Web Delivery
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
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
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
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
• form factor
Mobile Factors
• network latency
• form factor
Mobile Factors
• network latency
• input mechanism
• form factor
Mobile Factors
• network latency
• input mechanism
• memory
• form factor
Mobile Factors
• network latency
• input mechanism
• memory
• form factor
• computational power
Mobile Factors
• network latency
• input mechanism
• memory
• form factor
• computational power
• battery
Mobile Factors
• network latency
• input mechanism
• memory
• form factor
• computational power
• context
• battery
Mobile Factors
?Does everything need to be mobile?
Is that the most important thing?
AmazonA Quick Look
The mobile environmentsingle early failure = non-returning user
The mobile environmentcrucial first 30-60 seconds usage
The mobile environmentFewer options
Graphics Location Storage Speed
Solving Developer Challenges
?What does this mean to me?
Why should I care?
Examples
?What do I really need to know?
How do I begin?
How should we
Design?
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?
Form Follows FunctionThe 3 F’s of Design
• FunctionHow it works
• FormWhat something looks like
Images Trump Words
Danger: Electric Shock
Focus on the
Audience
1
is the key
Content
2
Transparent
Interface
3
Designing Apps
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
?Do I need to know ALL of this?
Who can I work with?
Prototyping test driving your idea
Flat Pages
Tab Bar
Tree Structure
One
Two
Three
Four
Five
Six
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Innovation
>
weathercube
?Is prototyping really necessary?
Can anyone do it?
Design for Flexibility
Testing
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
Test for Usability
• Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals
• Survey
Capture & Analyze
Using CoverFlow view and Preview of Graphics
?My project is different, are all these
steps relevant to me?
ResourcesTo help you grow.
kuler.adobe.com
abookapart.com
www.smashingmagazine.com
Nancy Durate Garr Reynolds
Screencasts 101 Mini-Session
www.jingproject.com
html5rocks.com
www.uxmag.com
www.twitter.com
evernote.com
reflectorapp.com
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/
?How can any ONE person keep up
with all this information?
Don’t Settle
Download the Presentation at:http://www.slideshare.net/nickfloro
www.launchcycle.com
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Linda [email protected]
Twitter.com/ldaniels_design