Embed Size (px)
DESCRIPTION
Presented at ASTD PHL Regional Conference on 5/14/13. This presentation provides a introduction to designing and prototyping for mobile learning, techniques for sketching to functional prototyping. Includes several resources.
Citation preview
Prototyping ideas formobile devices
Nick [email protected]/NickFloro
Linda [email protected]/ldaniels_design
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 1 of 64
Whose your audience?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 2 of 64
What devices do you support?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 3 of 64
desktop tablet
phone
Designing Mobile First
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 4 of 64
Web App
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 5 of 64
What tools are you using?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 6 of 64
iOS AndroidWindowsBlackberry
Design. Code. Innovate.
Mozilla OS
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 7 of 64
Responsive DesignDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 8 of 64
Design
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 9 of 64
Flat Pages
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 10 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 11 of 64
Tab Bar
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 12 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 13 of 64
Tree Structure
One
Two
Three
Four
Five
Six
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 14 of 64
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 15 of 64
Innovation
>
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 16 of 64
Sketching
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 17 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 18 of 64
Just Sketch It!
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 19 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 20 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 21 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 22 of 64
1.Think for 30 seconds - Doodle sketch a concept for your mobile project.
ExerciseDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 23 of 64
? I am not sure what device to choose,how do I begin?
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 24 of 64
YES!(a mobile project)
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 25 of 64
Audience
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 26 of 64
AudienceTimeframes
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 27 of 64
AudienceTimeframes Prototype
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 28 of 64
AudienceTimeframes PrototypeDevelop
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 29 of 64
? How is planning for mobile differentthan planning for my other projects?
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 30 of 64
Sketching where real ideas begin
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 31 of 64
Encourage your team to be creative.
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 32 of 64
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 33 of 64
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
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 34 of 64
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 35 of 64
? Are sketches professional enoughto present ideas?
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 36 of 64
1. Two minutes - Sketch a Menu / Screen 1 and then Internal Screen
2. Show & Tell
Exercise
✓ Who’s the audience?✓ How will they use it?
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 37 of 64
Prototyping test driving your idea
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 38 of 64
Wireframes Tools:– Pencil / Paper– Powerpoint / Keynote– Balsamiq / Omnigraffle– Illustrator / InDesign– Many more!– Use what you are
comfortable with
Quick Prototyping Techniques
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 39 of 64
Paper by FiftyThree
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 40 of 64
Adobe Acrobat
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 41 of 64
POP - Prototyping on Paper
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 42 of 64
POP - Prototyping on Paper
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 43 of 64
POP - Prototyping on Paper
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 44 of 64
POP - Prototyping on Paper
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 45 of 64
POP - Prototyping on Paper
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 46 of 64
Briefs
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 47 of 64
Custom Template in Keynote
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 48 of 64
keynotekungfu.com
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 49 of 64
balsamiq.com
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 50 of 64
Sketchy & iMockUps
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 51 of 64
teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 52 of 64
? Is prototyping really necessary?Can anyone do it?
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 53 of 64
What’s next...
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 54 of 64
ResourcesTo help you grow.
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 55 of 64
960.gs
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 56 of 64
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 57 of 64
Capture & Analyze
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 58 of 64
abookapart.com
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 59 of 64
solidify.com
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 60 of 64
reflectorapp.com
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 61 of 64
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/
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 62 of 64
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 63 of 64
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning
[email protected] | [email protected] 05/14/13 64 of 64
