Your SlideShare is downloading. ×
Prototyping Mobile Learning 051413b
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Prototyping Mobile Learning 051413b

2,346
views

Published on

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. …

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.

Published in: Technology, Education

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,346
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
76
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Prototyping ideas formobile devicesNick FloroNick@sealworks.comTwitter.com/NickFloroLinda Danielslinda.dnls@gmail.comTwitter.com/ldaniels_designDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 1 of 64
  • 2. Whose your audience?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 2 of 64
  • 3. What devices do you support?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 3 of 64
  • 4. desktop tabletphoneDesigning Mobile FirstDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 4 of 64
  • 5. Web AppDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 5 of 64
  • 6. What tools are you using?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 6 of 64
  • 7. iOS AndroidWindowsBlackberryDesign. Code. Innovate.Mozilla OSDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 7 of 64
  • 8. Responsive DesignDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 8 of 64
  • 9. DesignDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 9 of 64
  • 10. Flat PagesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 10 of 64
  • 11. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 11 of 64
  • 12. Tab BarDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 12 of 64
  • 13. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 13 of 64
  • 14. Tree StructureOneTwoThreeFourFiveSixDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 14 of 64
  • 15. Tree Structure< BackScreen One >Screen Two >Screen Three >Screen Four >Screen Five >Screen Six >Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 15 of 64
  • 16. Innovation>Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 16 of 64
  • 17. SketchingDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 17 of 64
  • 18. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 18 of 64
  • 19. Just Sketch It!Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 19 of 64
  • 20. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 20 of 64
  • 21. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 21 of 64
  • 22. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 22 of 64
  • 23. 1.Think for 30 seconds - Doodle sketch aconcept for your mobile project.ExerciseDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 23 of 64
  • 24. ?I am not sure what device to choose,how do I begin?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 24 of 64
  • 25. YES!(a mobile project)Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 25 of 64
  • 26. AudienceDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 26 of 64
  • 27. AudienceTimeframesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 27 of 64
  • 28. AudienceTimeframesPrototypeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 28 of 64
  • 29. AudienceTimeframesPrototypeDevelopDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 29 of 64
  • 30. ?How is planning for mobile differentthan planning for my other projects?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 30 of 64
  • 31. Sketchingwhere real ideas beginDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 31 of 64
  • 32. Encourage your team to be creative.Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 32 of 64
  • 33. Selecting a SizePixels & Aspect RatioiPhone 4960 x 640iPhone480 x 320iPhone 51136 x 640Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 33 of 64
  • 34. Android Xoom1280 x 720Galaxy SIII1280 x 720Selecting a SizePixels & Aspect RatioDroid960 x 540Kindle Fire 71024 x 600Galaxy Note 21280 x 720Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 34 of 64
  • 35. Android Xoom1280 x 720HTC Incredible800 x 480Selecting a SizePixels & Aspect RatioiPad1024 x 768iPhone 4960 x 640iPhone480 x 320Droid854 x 480Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 35 of 64
  • 36. ?Are sketches professional enoughto present ideas?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 36 of 64
  • 37. 1. Two minutes - Sketch a Menu / Screen1 and then Internal Screen2. Show & TellExercise✓ Who’s the audience?✓ How will they use it?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 37 of 64
  • 38. Prototypingtest driving your ideaDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 38 of 64
  • 39. Wireframes Tools:– Pencil / Paper– Powerpoint / Keynote– Balsamiq / Omnigraffle– Illustrator / InDesign– Many more!– Use what you arecomfortable withQuick Prototyping TechniquesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 39 of 64
  • 40. Paper by FiftyThreeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 40 of 64
  • 41. Adobe AcrobatDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 41 of 64
  • 42. POP - Prototyping on PaperDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 42 of 64
  • 43. POP - Prototyping on PaperDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 43 of 64
  • 44. POP - Prototyping on PaperDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 44 of 64
  • 45. POP - Prototyping on PaperDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 45 of 64
  • 46. POP - Prototyping on PaperDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 46 of 64
  • 47. BriefsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 47 of 64
  • 48. Custom Template in KeynoteDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 48 of 64
  • 49. keynotekungfu.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 49 of 64
  • 50. balsamiq.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 50 of 64
  • 51. Sketchy & iMockUpsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 51 of 64
  • 52. teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 52 of 64
  • 53. ?Is prototyping really necessary?Can anyone do it?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 53 of 64
  • 54. What’s next...Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 54 of 64
  • 55. ResourcesTo help you grow.Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 55 of 64
  • 56. 960.gsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 56 of 64
  • 57. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 57 of 64
  • 58. Capture & AnalyzeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 58 of 64
  • 59. abookapart.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 59 of 64
  • 60. solidify.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 60 of 64
  • 61. reflectorapp.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 61 of 64
  • 62. Expand yourCareerOpportunitiesTake some time to explore these resources tofind out what is new in our creative industryfor 2013. Expand your technical skills in thisever-changing technology landscape to keepyour work and portfolio fresh! The list to theright offers insights and tutorials on varioussegments in our niche industry for print anddigital spaces.Open this interactive PDF in Acrobator Acrobat Reader, click on any resourcelink and enjoy!We’ve got some pretty fun stuff happening all overthe web. Join us on LinkedIn, Twitter and Facebookfor the latest in events, jobs, contests and more!TypographyTypophileFontshopThe Type StudioVeerDafontGraphics/Video/AudioiStockphotoVectorStockShutterstockRevostockStockfuelAdobe CS4 & 5Adobe TVLayers MagazinePhotoshop SupportMashablelynda.comFront-End DevelopmentA List ApartW3schoolsCSS Zen GardenHTML5 Siteslynda.comE-learningArticulateCaptivateLectorae-Learning Guildlynda.comContent ManagementWordPressJoomlaDrupalBlog Tipslynda.comVideoVimeoPCWorldVideoToolboxMashablelynda.comThis 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 #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 62 of 64
  • 63. Download the Presentation at:http://www.slideshare.net/nickfloroDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 63 of 64
  • 64. Thank YouNick Floronick@sealworks.comtwitter.com/NickFloroDownload the Presentation at:http://www.slideshare.net/nickfloroDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningNick@sealworks.com | Linda.dnls@gmail.com 05/14/13 64 of 64