Nick FloroNick@sealworks.comTwitter.com/NickFloroDesigning a Mobile Appfrom Paper to DeliveryDesigning Mobile from Paper t...
DefineDesignDevelopDeliverProcessDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 2 of...
Content StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 3 of 117
desktoptabletphoneContent StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 4 o...
Content StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 5 of 117
Create a Road MapDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 6 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 7 of 117
desktoptabletphoneThink Mobile FirstDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 8...
desktoptabletphoneThink Mobile FirstDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 9...
desktoptabletphoneThink Mobile FirstProgressive EnhancementDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@s...
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 11 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 12 of 117
7 Questions to Define a ProjectWhat is the goal?Who is the audience?What is the timetable?What technology?What is the budg...
What isDesign?Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 14 of 117
How it works.www.apple.com/designed-by-apple/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 0...
How should weDesign?Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 16 of 117
Focus on theAudienceDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 17 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 18 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 19 of 117
Content is KeyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 20 of 117
simplify.write it downcut in halfcut it againbreakcut it by halfthen doneDesigning Mobile from Paper to Delivery mLearnDev...
Sketchingwhere ideas beginDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 22 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 23 of 117
Quick Prototyping TechniquesTools:• Fujitsu SCANSNAP– Scan direct to pdf– includes full Acrobat ProDesigning Mobile from P...
Just Sketch It!Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 25 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 26 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 27 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 28 of 117
Prototypingtest driving your ideaDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 29 o...
Tools:• Wireframes– Powerpoint / KeynoteQuick Prototyping TechniquesDesigning Mobile from Paper to Delivery mLearnDevCon 2...
keynotekungfu.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 31 of 117
Custom Template in KeynoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 32 of 117
Paper by FiftyThreeDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 33 of 117
Adobe AcrobatDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 34 of 117
POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 35 of 117
POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 36 of 117
POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 37 of 117
POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 38 of 117
POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 39 of 117
BriefsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 40 of 117
balsamiq.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 41 of 117
Sketchy & iMockUpsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 42 of 117
www.teehanlax.com/tools/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 43 of 117
User Interface | UIDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 44 of 117
User Interface | UIDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 45 of 117
User Experience | UXDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 46 of 117
App or Web DeliveryDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 47 of 117
Google Chrome 31% YesMozilla Firefox 20% YesInternet Explorer 7-8 11% NoInternet Explorer 9-10 10% YesApple Safari 15% Yes...
Web AppServerGame / SimulationToolHybridInfoToolResourcesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sea...
Web App Native App• Use web standards• Easy to deploy & update• Support all devices• Faster development cycle• Works every...
DEVICE ACCESSPERFORMANCE &INTEGRATIONMULTIMEDIAOFFLINE & STORAGECONNECTIVITY SEMANTICSCSS33D, GRAPHICS& EFFECTSDesigning M...
Responsive DesignDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 52 of 117
twitter.github.io/bootstrap/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 53 of 117
foundation.zurb.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 54 of 117
• bandwidth• input mechanism• context• form factorMobile FactorsDesigning Mobile from Paper to Delivery mLearnDevCon 2013n...
AmazonA Quick ExampleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 56 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 57 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 58 of 117
The mobile environmentsingle early failure = non-returning userDesigning Mobile from Paper to Delivery mLearnDevCon 2013ni...
The mobile environmentcrucial first 30-60 seconds usageDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealw...
The mobile environmentFewer optionsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 61...
Graphics Location Storage SpeedSolving Developer Challenges1997 2013Designing Mobile from Paper to Delivery mLearnDevCon 2...
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 63 of 117
mobileDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 64 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 65 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 66 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 67 of 117
ExampleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 68 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 69 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 70 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 71 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 72 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 73 of 117
DesigningAppsNeed to KnowDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 74 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 75 of 117
Android Xoom1280 x 720Selecting a SizePixels & Aspect RatioiPad 3rd gen +2048 x 1536iPad1024 x 768Designing Mobile from Pa...
Android Xoom1280 x 720Galaxy SIII1280 x 720Selecting a SizePixels & Aspect RatioDroid960 x 540Kindle Fire 71024 x 600Galax...
Android Xoom1280 x 720HTC Incredible800 x 480Selecting a SizePixels & Aspect RatioiPad1024 x 768iPhone 4960 x 640iPhone480...
Classifying AppsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 79 of 117
Flat PagesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 80 of 117
Apple WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 81 of 117
Yahoo WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 82 of 117
Yahoo WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 83 of 117
Tab BarDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 84 of 117
Apple ClockDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 85 of 117
Tree StructureOneTwoThreeFourFiveSixDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 8...
Tree Structure< BackScreen One >Screen Two >Screen Three >Screen Four >Screen Five >Screen Six >Designing Mobile from Pape...
First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 88 of 117
First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 89 of 117
First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 90 of 117
Innovation>Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 91 of 117
evernoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 92 of 117
evernoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 93 of 117
PulseDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 94 of 117
PulseDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 95 of 117
ZiteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 96 of 117
ZiteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 97 of 117
Design for FlexibilityDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 98 of 117
TestingDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 99 of 117
Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Windows 8− Tablet vs Phablet vs Phone− Portrait vs LandscapeTest on Wind...
Test forUsability• Have someone with fresheyes test drive your site tomake sure it accomplishesboth user goals and sitegoa...
Capture & AnalyzeDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 102 of 117
Using CoverFlow view and Preview of GraphicsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06...
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 104 of 117
ResourcesTo help you grow.Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 105 of 117
Do you brainstorm?Useful Tips• Keep meetings to a hour or less• Kick-off with goals for the meeting• Focus on creative ide...
www.smashingmagazine.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 107 of 117
Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 108 of 117
960.gsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 109 of 117
solidify.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 110 of 117
reflectorapp.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 111 of 117
abookapart.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 112 of 117
Sketchy & iMockUpsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 113 of 117
kuler.adobe.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 114 of 117
Adobe Kuler kuler.adobe.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 115 of 117
Don’t SettleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 116 of 117
Thank YouNick Floronick@sealworks.comtwitter.com/NickFloroDownload the Presentation at:http://www.slideshare.net/nickfloroD...
Upcoming SlideShare
Loading in …5
×

Designing a Mobile App from Paper to Delivery | mlearndevcon

1,766
-1

Published on

Most companies that journey into development rush in without thinking about the user experience. This session will break it all down and provide the foundation knowledge that is needed to build better mobile learning.

This session will cover the 10 key ingredients that will make your mobile app a learning success. You’ll learn design principles from user interface to user experience and how get the best in class. You look at several ways to prototype apps prior to programming, from paper to interactive. You will see the techniques and tools that you can use to test your app prior to programming. You will also look at the key types of apps and get dozens of ideas to get you started and to apply when you back to your office. This is a must-see session for anyone involved in building mobile learning. This session will get you started on the right road to mobile app creation.

In this session, you will learn:

- What makes a successful mobile app
- The key design ingredients
- The difference between UI and UX and why they are critical ingredients in your development
- How to go from paper to prototype to test your ideas and get management support
- Quickly designing options and testing content prior to programming
- Latest tools that can be used for developing

Audience:
Novice learning professionals with a basic understanding of mobile apps and devices.

Technology discussed in this session:
iOS, Android, Windows; wireframing and design tools, pad of paper, Keynote, PowerPoint, Sketchy, iMockUps, cloud-based apps, Balsamiq, Photoshop prototyping techniques reviews and feedback.

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,766
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
101
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing a Mobile App from Paper to Delivery | mlearndevcon

  1. 1. Nick FloroNick@sealworks.comTwitter.com/NickFloroDesigning a Mobile Appfrom Paper to DeliveryDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 1 of 117
  2. 2. DefineDesignDevelopDeliverProcessDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 2 of 117
  3. 3. Content StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 3 of 117
  4. 4. desktoptabletphoneContent StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 4 of 117
  5. 5. Content StrategyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 5 of 117
  6. 6. Create a Road MapDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 6 of 117
  7. 7. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 7 of 117
  8. 8. desktoptabletphoneThink Mobile FirstDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 8 of 117
  9. 9. desktoptabletphoneThink Mobile FirstDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 9 of 117
  10. 10. desktoptabletphoneThink Mobile FirstProgressive EnhancementDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 10 of 117
  11. 11. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 11 of 117
  12. 12. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 12 of 117
  13. 13. 7 Questions to Define a ProjectWhat is the goal?Who is the audience?What is the timetable?What technology?What is the budget?Does the content exist?How will they use it?Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 13 of 117
  14. 14. What isDesign?Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 14 of 117
  15. 15. How it works.www.apple.com/designed-by-apple/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 15 of 117
  16. 16. How should weDesign?Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 16 of 117
  17. 17. Focus on theAudienceDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 17 of 117
  18. 18. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 18 of 117
  19. 19. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 19 of 117
  20. 20. Content is KeyDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 20 of 117
  21. 21. simplify.write it downcut in halfcut it againbreakcut it by halfthen doneDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 21 of 117
  22. 22. Sketchingwhere ideas beginDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 22 of 117
  23. 23. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 23 of 117
  24. 24. Quick Prototyping TechniquesTools:• Fujitsu SCANSNAP– Scan direct to pdf– includes full Acrobat ProDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 24 of 117
  25. 25. Just Sketch It!Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 25 of 117
  26. 26. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 26 of 117
  27. 27. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 27 of 117
  28. 28. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 28 of 117
  29. 29. Prototypingtest driving your ideaDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 29 of 117
  30. 30. Tools:• Wireframes– Powerpoint / KeynoteQuick Prototyping TechniquesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 30 of 117
  31. 31. keynotekungfu.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 31 of 117
  32. 32. Custom Template in KeynoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 32 of 117
  33. 33. Paper by FiftyThreeDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 33 of 117
  34. 34. Adobe AcrobatDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 34 of 117
  35. 35. POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 35 of 117
  36. 36. POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 36 of 117
  37. 37. POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 37 of 117
  38. 38. POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 38 of 117
  39. 39. POP - Prototyping on PaperDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 39 of 117
  40. 40. BriefsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 40 of 117
  41. 41. balsamiq.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 41 of 117
  42. 42. Sketchy & iMockUpsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 42 of 117
  43. 43. www.teehanlax.com/tools/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 43 of 117
  44. 44. User Interface | UIDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 44 of 117
  45. 45. User Interface | UIDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 45 of 117
  46. 46. User Experience | UXDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 46 of 117
  47. 47. App or Web DeliveryDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 47 of 117
  48. 48. Google Chrome 31% YesMozilla Firefox 20% YesInternet Explorer 7-8 11% NoInternet Explorer 9-10 10% YesApple Safari 15% YesiPhone / iPad 4% YesGoogle Android 2% YesOther 4% NoMarket Share HTML5 SupportBrowser Stats 2013Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 48 of 117
  49. 49. Web AppServerGame / SimulationToolHybridInfoToolResourcesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 49 of 117
  50. 50. 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 / AmazonWhich is right for your project?Enterprise DeploymentDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 50 of 117
  51. 51. DEVICE ACCESSPERFORMANCE &INTEGRATIONMULTIMEDIAOFFLINE & STORAGECONNECTIVITY SEMANTICSCSS33D, GRAPHICS& EFFECTSDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 51 of 117
  52. 52. Responsive DesignDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 52 of 117
  53. 53. twitter.github.io/bootstrap/Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 53 of 117
  54. 54. foundation.zurb.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 54 of 117
  55. 55. • bandwidth• input mechanism• context• form factorMobile FactorsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 55 of 117
  56. 56. AmazonA Quick ExampleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 56 of 117
  57. 57. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 57 of 117
  58. 58. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 58 of 117
  59. 59. The mobile environmentsingle early failure = non-returning userDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 59 of 117
  60. 60. The mobile environmentcrucial first 30-60 seconds usageDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 60 of 117
  61. 61. The mobile environmentFewer optionsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 61 of 117
  62. 62. Graphics Location Storage SpeedSolving Developer Challenges1997 2013Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 62 of 117
  63. 63. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 63 of 117
  64. 64. mobileDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 64 of 117
  65. 65. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 65 of 117
  66. 66. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 66 of 117
  67. 67. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 67 of 117
  68. 68. ExampleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 68 of 117
  69. 69. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 69 of 117
  70. 70. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 70 of 117
  71. 71. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 71 of 117
  72. 72. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 72 of 117
  73. 73. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 73 of 117
  74. 74. DesigningAppsNeed to KnowDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 74 of 117
  75. 75. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 75 of 117
  76. 76. Android Xoom1280 x 720Selecting a SizePixels & Aspect RatioiPad 3rd gen +2048 x 1536iPad1024 x 768Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 76 of 117
  77. 77. Android Xoom1280 x 720Galaxy SIII1280 x 720Selecting a SizePixels & Aspect RatioDroid960 x 540Kindle Fire 71024 x 600Galaxy Note 21280 x 720Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 77 of 117
  78. 78. Android Xoom1280 x 720HTC Incredible800 x 480Selecting a SizePixels & Aspect RatioiPad1024 x 768iPhone 4960 x 640iPhone480 x 320Galaxy1280 x 720Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 78 of 117
  79. 79. Classifying AppsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 79 of 117
  80. 80. Flat PagesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 80 of 117
  81. 81. Apple WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 81 of 117
  82. 82. Yahoo WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 82 of 117
  83. 83. Yahoo WeatherDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 83 of 117
  84. 84. Tab BarDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 84 of 117
  85. 85. Apple ClockDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 85 of 117
  86. 86. Tree StructureOneTwoThreeFourFiveSixDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 86 of 117
  87. 87. Tree Structure< BackScreen One >Screen Two >Screen Three >Screen Four >Screen Five >Screen Six >Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 87 of 117
  88. 88. First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 88 of 117
  89. 89. First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 89 of 117
  90. 90. First AidDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 90 of 117
  91. 91. Innovation>Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 91 of 117
  92. 92. evernoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 92 of 117
  93. 93. evernoteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 93 of 117
  94. 94. PulseDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 94 of 117
  95. 95. PulseDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 95 of 117
  96. 96. ZiteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 96 of 117
  97. 97. ZiteDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 97 of 117
  98. 98. Design for FlexibilityDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 98 of 117
  99. 99. TestingDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 99 of 117
  100. 100. Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Windows 8− Tablet vs Phablet vs Phone− Portrait vs LandscapeTest on Windows 8, 7, Vista, XP- Internet Explorer 6, 7, 8, 9, 10- Firefox 15-21 +- Chrome 15 - 19 +Test on OS X− Safari 4, 5+− Firefox 15-21 +− Chrome 20 - 26 +Testing CodeDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 100 of 117
  101. 101. Test forUsability• Have someone with fresheyes test drive your site tomake sure it accomplishesboth user goals and sitegoals• SurveyFresh EyesDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 101 of 117
  102. 102. Capture & AnalyzeDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 102 of 117
  103. 103. Using CoverFlow view and Preview of GraphicsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 103 of 117
  104. 104. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 104 of 117
  105. 105. ResourcesTo help you grow.Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 105 of 117
  106. 106. Do you brainstorm?Useful Tips• Keep meetings to a hour or less• Kick-off with goals for the meeting• Focus on creative ideas• Keep it positive, no negativefeedback or naysayers• Follow-up session to moveconcepts forwardDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 106 of 117
  107. 107. www.smashingmagazine.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 107 of 117
  108. 108. Designing Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 108 of 117
  109. 109. 960.gsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 109 of 117
  110. 110. solidify.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 110 of 117
  111. 111. reflectorapp.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 111 of 117
  112. 112. abookapart.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 112 of 117
  113. 113. Sketchy & iMockUpsDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 113 of 117
  114. 114. kuler.adobe.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 114 of 117
  115. 115. Adobe Kuler kuler.adobe.comDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 115 of 117
  116. 116. Don’t SettleDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 116 of 117
  117. 117. Thank YouNick Floronick@sealworks.comtwitter.com/NickFloroDownload the Presentation at:http://www.slideshare.net/nickfloroDesigning Mobile from Paper to Delivery mLearnDevCon 2013nick@sealworks.com 06/20/13 117 of 117
  1. A particular slide catching your eye?

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

×