Designing     Mobile Learning                         Apps & Games Nick@sealworks.com Twitter.com/NickFloro
The Web Platform is Accelerating
Solving Developer ChallengesGraphics   Location   Storage   Speed
480 million Newspapers
1.4 billion Internet users
1.5 billion TV’s
1.7 billion Credit Cards
2.25 billion Tooth Brushes
4 billion Mobile Phones
Develop once  Push everywhere
7 Questions to Define the Project Who is the audience and                         What is the budget? how will they use it?...
Understanding theTechnology
Pixels & Aspect RatioSelecting a Size               Android Xoom                               1280 x 720                 ...
•   form factor•   network latency•   input mechanism•   memory•   computational power•   battery•   context
The mobile environment       single early failure = non-returning user
The mobile environment         crucial first 30-60 seconds usage
The mobile environment   Fewer options
Sample Simulation with HTML 5
Web   App
Web App
JAVASCRIPT   JQuery     HTML 5 CSS3        AJAX
Development        Tools
Publish for iPhone
Publish for iPhone
Publish for iPhone
Publish for Android
Publish for iPhone        Publish for Android
labs.adobe.com/technologies/wallaby/
Text MessagingSMS Integration                  Would you like to sell, hold                  or buy?                  1. S...
www.runrev.com
www.gamesalad.com
anscamobile.com
Understand Design
It’s aboutcommunication andproblem solving.
Design is how it works.
People don’t knowwhat they want. Weneed to tell them.
Text
1. Create Text       2. Make a selection       3. Invert select       4. Save alpha channelText       5. Deselect       6....
How do we start?
Sketches
Wireframes
www.balsamiq.com
Sketchy & iMockUps
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
www.uistencils.com
Wireframes
keynotopia.com
keynotekungfu.com
Quick Prototyping Techniques                    Tools:                    •   Fujitsu SCANSNAP                        – Sc...
Wireframes             Using Acrobat Pro for Prototypes
GamersBorn ≥ 1980
Gamers Born ≥ 1980‣ 8-10 1+ hour/day‣ teens 13+ hours week
Gamers Born ≥ 1980‣ 43% females‣ 5 hours a week
Designing    experiences
us.wii.com
How should we Design?
Focus on theAudience
Content     is the key
Transparent              3   Interface
Keep it Simple
Design: Keep it Simple
Resources
Games        1. Play        2. Watch others play        3. Experiment
Resources            • Designing Interactions              • Bill Moggridge
Resources            • Designing the Obvious:              A Common Sense Approach to              Web Application Design ...
Capture & Analyze
Using CoverFlow view and Preview of Graphics
Design Scrapbook: iPhoto | LittleSnapper
CSS3 for Web DesignersDan Cederholm | A Book Apart
www.istockphoto.com
www.uxmag.com
Introducing HTML5Bruce Lawson(Voices That Matter)
html5rocks.com
http://www.caniuse.com/
www.css3.info
www.TED.com
Nancy Durate   Garr Reynolds
www.posterous.com
easily drag & drop anything into email
Posterous will automatically wrap and prep for web
Most urls YouTube, SlideShare will get a player
www.launchcycle.com
Explore                            Pictures          Blog                                                       Video     ...
Thank You            Nick Floro            sealworks interactive studios            nick@sealworks.com            www.seal...
“Glad Michael and I could worktogether to score 70 points.”
HTML 4
HTML 5
Improve Web Apps
Re-Address backwardcompatibility
Canvas & SVG
When Canvas or SVG?SVG -> High level    Canvas -> Low level• Import/Export      • No mouse interaction• Easy UIs          ...
Quake II - Browser Only
Quake II - Browser Only                   WebGL 3D graphics HTML 5 Canvas                      HTML 5 Audio   HTML 5 Web S...
Video
Video CompressionHTML 5 Options Flash           H264     Ogg Theora                 MPEG 4     WebM
www.longtailvideo.com
geolocation
app cache& database
web workers
Test for Usability   Test on Windows 7, Vista       • Internet Explorer 6, 7, 8, 9       • Firefox 3, 3.5, 3.6       • Ope...
Forms            CSS 3Effects/Transitions
Design for Flexibility
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Mobile Design & Prototyping
Upcoming SlideShare
Loading in...5
×

Mobile Design & Prototyping

51,895

Published on

Presented at #Mleardingdevcon October 2011. Learn how to get started in design and planning for mobile devices, what do you need to know and how to plan for producing a project.

Published in: Technology, Design
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
51,895
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
168
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Mobile Design & Prototyping

  1. 1. Designing Mobile Learning Apps & Games Nick@sealworks.com Twitter.com/NickFloro
  2. 2. The Web Platform is Accelerating
  3. 3. Solving Developer ChallengesGraphics Location Storage Speed
  4. 4. 480 million Newspapers
  5. 5. 1.4 billion Internet users
  6. 6. 1.5 billion TV’s
  7. 7. 1.7 billion Credit Cards
  8. 8. 2.25 billion Tooth Brushes
  9. 9. 4 billion Mobile Phones
  10. 10. Develop once Push everywhere
  11. 11. 7 Questions to Define the Project Who is the audience and What is the budget? how will they use it? What are the learning objectives? Does the content exist?What is the timetable? What is the goal?Current technology orsolution in place?
  12. 12. Understanding theTechnology
  13. 13. Pixels & Aspect RatioSelecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x 640 Droid 854 x 480 iPhone 480 x 320
  14. 14. • form factor• network latency• input mechanism• memory• computational power• battery• context
  15. 15. The mobile environment single early failure = non-returning user
  16. 16. The mobile environment crucial first 30-60 seconds usage
  17. 17. The mobile environment Fewer options
  18. 18. Sample Simulation with HTML 5
  19. 19. Web App
  20. 20. Web App
  21. 21. JAVASCRIPT JQuery HTML 5 CSS3 AJAX
  22. 22. Development Tools
  23. 23. Publish for iPhone
  24. 24. Publish for iPhone
  25. 25. Publish for iPhone
  26. 26. Publish for Android
  27. 27. Publish for iPhone Publish for Android
  28. 28. labs.adobe.com/technologies/wallaby/
  29. 29. Text MessagingSMS Integration Would you like to sell, hold or buy? 1. Sell 2. Buy 3. Hold
  30. 30. www.runrev.com
  31. 31. www.gamesalad.com
  32. 32. anscamobile.com
  33. 33. Understand Design
  34. 34. It’s aboutcommunication andproblem solving.
  35. 35. Design is how it works.
  36. 36. People don’t knowwhat they want. Weneed to tell them.
  37. 37. Text
  38. 38. 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channelText 5. Deselect 6. Load Alpha Channel 7. Load Color 8. Offset 9. Apply Blur 10.Reposition 11.Save 12.If the copy changed, sta over
  39. 39. How do we start?
  40. 40. Sketches
  41. 41. Wireframes
  42. 42. www.balsamiq.com
  43. 43. Sketchy & iMockUps
  44. 44. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
  45. 45. www.uistencils.com
  46. 46. Wireframes
  47. 47. keynotopia.com
  48. 48. keynotekungfu.com
  49. 49. Quick Prototyping Techniques Tools: • Fujitsu SCANSNAP – Scan direct to pdf – includes full Acrobat Pro
  50. 50. Wireframes Using Acrobat Pro for Prototypes
  51. 51. GamersBorn ≥ 1980
  52. 52. Gamers Born ≥ 1980‣ 8-10 1+ hour/day‣ teens 13+ hours week
  53. 53. Gamers Born ≥ 1980‣ 43% females‣ 5 hours a week
  54. 54. Designing experiences
  55. 55. us.wii.com
  56. 56. How should we Design?
  57. 57. Focus on theAudience
  58. 58. Content is the key
  59. 59. Transparent 3 Interface
  60. 60. Keep it Simple
  61. 61. Design: Keep it Simple
  62. 62. Resources
  63. 63. Games 1. Play 2. Watch others play 3. Experiment
  64. 64. Resources • Designing Interactions • Bill Moggridge
  65. 65. Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.
  66. 66. Capture & Analyze
  67. 67. Using CoverFlow view and Preview of Graphics
  68. 68. Design Scrapbook: iPhoto | LittleSnapper
  69. 69. CSS3 for Web DesignersDan Cederholm | A Book Apart
  70. 70. www.istockphoto.com
  71. 71. www.uxmag.com
  72. 72. Introducing HTML5Bruce Lawson(Voices That Matter)
  73. 73. html5rocks.com
  74. 74. http://www.caniuse.com/
  75. 75. www.css3.info
  76. 76. www.TED.com
  77. 77. Nancy Durate Garr Reynolds
  78. 78. www.posterous.com
  79. 79. easily drag & drop anything into email
  80. 80. Posterous will automatically wrap and prep for web
  81. 81. Most urls YouTube, SlideShare will get a player
  82. 82. www.launchcycle.com
  83. 83. Explore Pictures Blog Video Audio Micro-blogging 3D Models ePortfolios Course Management System Multiplayer Environment
  84. 84. Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro
  85. 85. “Glad Michael and I could worktogether to score 70 points.”
  86. 86. HTML 4
  87. 87. HTML 5
  88. 88. Improve Web Apps
  89. 89. Re-Address backwardcompatibility
  90. 90. Canvas & SVG
  91. 91. When Canvas or SVG?SVG -> High level Canvas -> Low level• Import/Export • No mouse interaction• Easy UIs • High Animation• Interactive • JS Centric• Medium Animation • More Bookkeeping• Tree of objects • Pixels
  92. 92. Quake II - Browser Only
  93. 93. Quake II - Browser Only WebGL 3D graphics HTML 5 Canvas HTML 5 Audio HTML 5 Web Sockets HTML 5 Local Storage
  94. 94. Video
  95. 95. Video CompressionHTML 5 Options Flash H264 Ogg Theora MPEG 4 WebM
  96. 96. www.longtailvideo.com
  97. 97. geolocation
  98. 98. app cache& database
  99. 99. web workers
  100. 100. Test for Usability Test on Windows 7, Vista • Internet Explorer 6, 7, 8, 9 • Firefox 3, 3.5, 3.6 • Opera 10 Test on OS X − Safari 4 − Firefox 3.5, 3.6 − Opera 10 Test Mobile − iPhone − Android − Blackberry, Windows 7 Phon
  101. 101. Forms CSS 3Effects/Transitions
  102. 102. Design for Flexibility
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×