Prototyping saves your bacon

1,128 views

Published on

As presented at DevWeek 2014 http://devweek.com/
Prototyping is often a misunderstood subject, especially when it comes to mobile apps. It is often mistaken for wire-framing or detailed project specifications. In this session, Ardeleanu will explore the tools and techniques available to create an agile environment where the client can participate in the process. He will take an app from the idea stage and progress it through the list of features, writing the Application Definition Statement (ADS), sketching, paper prototyping and eventually on to something that can run on the actual device. Clients love that! And it could save your bacon.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,128
On SlideShare
0
From Embeds
0
Number of Embeds
665
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototyping saves your bacon

  1. 1. iOS Application Development Prototyping saves your …
  2. 2. iOS Application Development Prototyping will save your
  3. 3. iOS Application Development http://www.jasonmecier.com/fkevinbacon.html
  4. 4. iOS Application Development Prototyping will save your mmmm… bacon
  5. 5. iOS Application Development
  6. 6. iOS Application Development
  7. 7. iOS Application Development
  8. 8. iOS Application Development We’re building an app…
  9. 9. iOS Application Development https://www.flickr.com/photos/13102974@N00/2736544035/
  10. 10. iOS Application Development https://www.flickr.com/photos/officenow/2631533044/
  11. 11. iOS Application Development Analysis
  12. 12. iOS Application Development
  13. 13. iOS Application Development Time for lunch…
  14. 14. iOS Application Development
  15. 15. iOS Application Development IT’S 2014 !!!
  16. 16. iOS Application Development </rant>
  17. 17. Prototyping? Huh?!
  18. 18. iOS Application Development Starts with an idea
  19. 19. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ Client brief ‣ List of requirements ‣ Wireframes / Sketches
  20. 20. New paradigms ‣ Constraints ‣ small size ‣ limited hardware ‣ one screen at a time ‣ one application at a time * ‣ touch input ‣ Interactions ‣ gestures ‣ shake ‣ orientation ‣ audio switch, volume buttons ‣ home & power buttons
  21. 21. Wireframing vs. Prototypinginteractivity
  22. 22. iOS Application Development Building great apps
  23. 23. List of features too many features? Filter Yes Application Definition Statement App features User journeys Wirefames Prototype
  24. 24. Application Definition Statement “A concise, concrete declaration of the app’s main purpose and its intended audience.” https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  25. 25. Solve real problems "An app must solve a user's problem clearly and elegantly." Eric Hope, User Experience Evangelist, Apple
  26. 26. iOS Application Development Delivery methods
  27. 27. 3 ways to deliver mobile content ‣ web app [dedicated] ‣ native app ‣ there is no 3rd way!
  28. 28. Strengths & weaknesses cost performance native web hybrid
  29. 29. iOS Application Development </rant>
  30. 30. iOS Application Development Types of apps
  31. 31. Types of apps seriousness purpose serious fun tool entertainment
  32. 32. Serious tool seriousness purpose serious fun tool entertainment
  33. 33. Fun tool seriousness purpose serious fun tool entertainment
  34. 34. Fun entertainment seriousness purpose serious fun tool entertainment
  35. 35. Serious entertainment seriousness purpose serious fun tool entertainment
  36. 36. Utility seriousness purpose serious fun tool entertainment http://h24.co/NearestBus
  37. 37. iOS Application Development An example
  38. 38. Features ‣ simple countdown timer ‣ with local notifications ‣ group timers in sequences ‣ pomodoro (25min + 5 min) ‣ gym training (5 mins, etc. )
  39. 39. ADS A simple to use countdown collection for time conscious individuals. Type Serious Tool
  40. 40. iOS Application Development Wireframing
  41. 41. Wireframing ‣ identify main areas of the app ‣ identify screens ‣ identify relations between screens ‣ start from the simplest things and build up ‣ start from the main task of the app
  42. 42. Demo app: Timers ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers (i.e. sequences) ‣ CRUD for collections
  43. 43. Paper by FiftyThree
  44. 44. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  45. 45. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  46. 46. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  47. 47. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  48. 48. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  49. 49. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  50. 50. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  51. 51. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  52. 52. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  53. 53. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  54. 54. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  55. 55. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  56. 56. Sketching
  57. 57. More sketching start Splash screen List of sequences Add sequence Sequence edit 05:12start Timer start Add timer
  58. 58. Sketching ‣ start from the most important task ‣ identify main areas of the app ‣ identify screens ‣ identify relations between screens ! ‣ Don’t worry! You won’t get it right the first time
  59. 59. Wireframing tools ‣ Stencils ‣ Omnigraffle ‣ Photoshop ‣ Skala Preview ‣ Liveview ‣ Reflector
  60. 60. Stencils uistencils.com
  61. 61. Stencils flickr.com/photos/rosenfeldmedia/3978119393/
  62. 62. Omnigraffle
  63. 63. Omnigraffle
  64. 64. graffletopia.com
  65. 65. Realistic wireframes http://www.teehanlax.com/tools/
  66. 66. Photoshop add-ons
  67. 67. Skala Preview http://bjango.com/mac/skalapreview/
  68. 68. Skala Preview
  69. 69. Liveview http://www.zambetti.com/projects/liveview/ FREE!!!
  70. 70. Reflector http://www.airsquirrels.com/reflector/
  71. 71. iOS Application Development Prototyping
  72. 72. Types of prototypes ‣ Web based ‣ Visual ‣ Presentation based
  73. 73. Web based ‣ (almost) No technical skills required ‣ easy to communicate with the client ‣ possible offline access ‣ can run on the device ‣ but can deviate from the native experience
  74. 74. Visual tools ‣ Design rich ‣ Visually correct ‣ Slightly harder to communicate ‣ Might lead to confusions
  75. 75. Briefs http://giveabrief.com/
  76. 76. Presentation based ‣ Use your existing skills ‣ The client can possibly create/amend these ‣ Offline access ‣ Easy to communicate ‣ Can run on the device
  77. 77. Keynote
  78. 78. Keynotopia
  79. 79. Included elements
  80. 80. Included elements
  81. 81. Gestures lukew.com/touch
  82. 82. Keynote settings
  83. 83. Keynote export
  84. 84. Demo
  85. 85. iOS Application Development Xcode
  86. 86. Storyboards
  87. 87. Storyboards
  88. 88. Storyboards The good: ‣ use your existing skills ‣ deploy on device ‣ wysiwyg ‣ can be built upon The not so good: ‣ must be a developer ‣ ad-hoc distribution ‣ client must have a device ‣ collaboration painful
  89. 89. iOS Application Development Experimental
  90. 90. Pop
  91. 91. Whiteboard + Liveview + phone
  92. 92. iOS Application Development Ruby
  93. 93. iOS Application Development Collaterals
  94. 94. Icons
  95. 95. Patterns
  96. 96. iOS Application Development Why prototyping?
  97. 97. iOS Application Development 1
  98. 98. iOS Application Development 2
  99. 99. Questions @pardel ! hello24.com paul@hello24.com
  100. 100. Thank you! @pardel ! hello24.com paul@hello24.com
  101. 101. Skills Matter, London, April 23, 2013 Slide . ` Thank you!

×