Prototyping your iPhone/iPad app

2,868 views

Published on

Prototyping is often a misunderstood subject especially when it comes to mobile apps. It is often mistaken for wireframing or detailed project specifications.

In this talk, Paul Ardeleanu -- author of Skills Matter's Intro and Advanced iOS training courses -- discusses the tools available and shares his personal expediencies leading a team of iOS and Android developers.

Topics will range from wireframing, asserting your friend's idea, dealing with "troublesome" clients/projects, handling miscommunication between developers, project managers and designers. Based on an idea from attendees, Paul will attempt to create a rough prototype

Published in: Technology, News & Politics
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
2,868
On SlideShare
0
From Embeds
0
Number of Embeds
1,172
Actions
Shares
0
Downloads
58
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Prototyping your iPhone/iPad app

  1. 1. iOS Application Development Prototyping your iOS app Paul Ardeleanu Geek in Chief at Hello24 Copyright © 2012 Hello24 Ltd. http://hello24.comTuesday, 24 January 12
  2. 2. iOS Application DevelopmentTuesday, 24 January 12
  3. 3. The plan ‣ HIG’s & ADS ‣ User journeys ‣ Interface design patterns ‣ Creating new interfaces ‣ Keynotopia ‣ Storyboarding ‣ Demo SkillsMatter January 2012 Slide 3 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  4. 4. Development vs. Design SkillsMatter January 2012 Slide 4 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  5. 5. Development vs. Design Traditional Design, UX PM Code Deployment Debug&Test SkillsMatter January 2012 Slide 4 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  6. 6. SkillsMatter January 2012 Slide 5 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  7. 7. Development vs. Design Traditional Design, UX PM Code Deployment Debug&Test SkillsMatter January 2012 Slide 6 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  8. 8. Development vs. Design Traditional Mobile Design, UX Code PM Code Deployment Prototyping, UX, design Debug&Test Debug&Test PM SkillsMatter January 2012 Slide 6 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  9. 9. Let’s start from the beginningflickr.com/photos/seretuaccidente/ SkillsMatter January 2012 Slide 7 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  10. 10. There is no such thing as a bad idea!flickr.com/photos/andyandorla/ SkillsMatter January 2012 Slide 8 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  11. 11. flickr.com/photos/bade_md/5617676375/ SkillsMatter January 2012 Slide 9 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  12. 12. flickr.com/photos/romainguy/1032027276/ SkillsMatter January 2012 Slide 10 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  13. 13. SkillsMatter January 2012 Slide 11 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  14. 14. What to expect? SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  15. 15. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ I want my phone to connect to my brain and download my thoughts! SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  16. 16. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ I want my phone to connect to my brain and download my thoughts! ‣ Client brief SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  17. 17. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ I want my phone to connect to my brain and download my thoughts! ‣ Client brief ‣ List of requirements SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  18. 18. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ I want my phone to connect to my brain and download my thoughts! ‣ Client brief ‣ List of requirements ‣ Wireframes SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  19. 19. List of features Filter too many Yes features? App features Application Definition User journeys Statement Wirefames Prototype SkillsMatter January 2012 Slide 13 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  20. 20. List of features Filter too many Yes features? App features Application Definition User journeys Statement Wirefames Prototype SkillsMatter January 2012 Slide 13 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  21. 21. Application Definition Statement SkillsMatter January 2012 Slide 14 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  22. 22. Application Definition Statement It is a concise, concrete declaration of an app’s main purpose and its intended audience. SkillsMatter January 2012 Slide 15 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  23. 23. Application Definition Statement It is a concise, concrete declaration of an app’s main purpose and its intended audience. iOS Human Interface Guidelines h24.co/iOS-HIGs SkillsMatter January 2012 Slide 15 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  24. 24. Type of apps SkillsMatter January 2012 Slide 16 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  25. 25. SkillsMatter January 2012 Slide 17 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  26. 26. Serious tool SkillsMatter January 2012 Slide 18 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  27. 27. Fun tool SkillsMatter January 2012 Slide 19 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  28. 28. Fun entertainment SkillsMatter January 2012 Slide 20 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  29. 29. Serious entertainment SkillsMatter January 2012 Slide 21 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  30. 30. Utility SkillsMatter January 2012 Slide 22 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  31. 31. Device constraints ‣ small size ‣ limited hardware ‣ one screen at a time ‣ one application at a time * ‣ touch input SkillsMatter January 2012 Slide 23 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  32. 32. Interaction ‣ gestures (tap, double-tap, drag, flick, swipe, pinch open/close, touch&hold ‣ shake ‣ orientation ‣ audio switch (and volume buttons) ‣ home & power buttons SkillsMatter January 2012 Slide 24 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  33. 33. User journeys SkillsMatter January 2012 Slide 25 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  34. 34. flickr.com/photos/delainahaslam/6582009999/ SkillsMatter January 2012 Slide 26 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  35. 35. flickr.com/photos/25228175@N08/5044656545/ SkillsMatter January 2012 Slide 27 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  36. 36. flickr.com/photos/unlistedsightings/1027938595/ SkillsMatter January 2012 Slide 28 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  37. 37. It is a concise, concrete declaration of an app’s main purpose and its intended audienceflickr.com/photos/v50/6319721666/ SkillsMatter January 2012 Slide 29 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  38. 38. Case Study: check-in system step 1 Check in info check in SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  39. 39. Case Study: check-in system step 1 step 2 Check in info Your gender check in male female SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  40. 40. Case Study: check-in system step 1 step 2 Check in info Your gender check in male female step 3 Select your date of birth 1 2 3 ... 29 30 31 SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  41. 41. Case Study: check-in system step 1 step 2 Check in info Your gender check in male female step 3 step 4 Select your date of birth Select your month of birth January February March April 1 2 3 ... May June July August September October November December 29 30 31 SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  42. 42. Case Study: check-in system step 1 step 2 Check in info Your gender check in male female step 3 step 4 Select your date of birth Select your month of birth January February March April 1 2 3 ... May June July August September October November December 29 30 31 step 5 - OK, take a seat SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  43. 43. Case Study: check-in system step 1 Check in info check in SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  44. 44. Case Study: check-in system step 1 step 2 Select your month of birth Check in info January February March April May June July August check in September October November December SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  45. 45. Case Study: check-in system step 1 step 2 Select your month of birth Check in info January February March April May June July August check in September October November December step 3 Select your date of birth 2 14 30 SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  46. 46. Case Study: check-in system step 1 step 2 Select your month of birth Check in info January February March April May June July August check in September October November December step 3 Select your date of birth step 4 - OK, take a seat 2 14 30 SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  47. 47. Don’t... Just don’t! SkillsMatter January 2012 Slide 32 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  48. 48. List of features Filter too many Yes features? App features Application Definition User journeys Statement Wirefames Prototype SkillsMatter January 2012 Slide 33 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  49. 49. Interface design patterns SkillsMatter January 2012 Slide 34 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  50. 50. Interface design patterns ‣ Table view ‣ Navigation controller ‣ Tab bar ‣ Popover & Modal views ‣ SplitViewController SkillsMatter January 2012 Slide 35 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  51. 51. Table view controller SkillsMatter January 2012 Slide 36 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  52. 52. UITableViewController SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  53. 53. UITableViewController SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  54. 54. UITableViewController table header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  55. 55. UITableViewController table header view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  56. 56. UITableViewController table header view section header view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  57. 57. UITableViewController table header view section header view section footer view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  58. 58. UITableViewController table header view section header view row 0 view section footer view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  59. 59. UITableViewController table header view section header view row 0 view row 1 view section footer view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  60. 60. UITableViewController table header view section header view row 0 view row 1 view section footer view section header view row 0 view row 1 view section footer view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  61. 61. SkillsMatter January 2012 Slide 38 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  62. 62. Navigation Controller SkillsMatter January 2012 Slide 39 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  63. 63. Navigation Controller My Mail TableView mailbox1 mailbox2 mailbox3 message1.1 message1.2 message3.1 TableView SkillsMatter January 2012 Slide 40 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  64. 64. Navigation Controller Root View Controller Top View Controller SkillsMatter January 2012 Slide 41 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  65. 65. Tab Bar Controller SkillsMatter January 2012 Slide 42 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  66. 66. Modal view SkillsMatter January 2012 Slide 43 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  67. 67. Popover view SkillsMatter January 2012 Slide 44 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  68. 68. SplitViewController SkillsMatter January 2012 Slide 45 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  69. 69. Don’t... Just don’t! SkillsMatter January 2012 Slide 46 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  70. 70. Creating new interfaces SkillsMatter January 2012 Slide 47 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  71. 71. Inventing new interfaces SkillsMatter January 2012 Slide 48 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  72. 72. Path SkillsMatter January 2012 Slide 49 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  73. 73. Path SkillsMatter January 2012 Slide 49 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  74. 74. Path SkillsMatter January 2012 Slide 50 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  75. 75. Instapaper SkillsMatter January 2012 Slide 51 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  76. 76. Flipboard SkillsMatter January 2012 Slide 52 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  77. 77. SkillsMatter January 2012 Slide 53 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  78. 78. List of features Filter too many Yes features? App features Application Definition User journeys Statement Wirefames Prototype SkillsMatter January 2012 Slide 54 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  79. 79. Prototyping with Keynotopia SkillsMatter January 2012 Slide 55 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  80. 80. Keynotopia demo: Timers SkillsMatter January 2012 Slide 56 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  81. 81. Storyboarding SkillsMatter January 2012 Slide 57 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  82. 82. SkillsMatter January 2012 Slide 58 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  83. 83. SkillsMatter January 2012 Slide 59 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  84. 84. SkillsMatter January 2012 Slide 60 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  85. 85. SkillsMatter January 2012 Slide 61 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  86. 86. http://www.raywenderlich.com/5138/ beginning-storyboards-in-ios-5-part-1 SkillsMatter January 2012 Slide 62 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  87. 87. iBooks2 SkillsMatter January 2012 Slide 63 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  88. 88. SkillsMatter January 2012 Slide 64 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  89. 89. Creating an app ‣ create an application definition statement ‣ top down approach ‣ primary task (keep it simple) ‣ ease of use (make it obvious) SkillsMatter January 2012 Slide 65 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  90. 90. Questions? SkillsMatter January 2012 Slide 66 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  91. 91. Demo SkillsMatter January 2012 Slide 67 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  92. 92. Features ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ pomodoro (25min + 5 min) ‣ gym training (5 mins, etc. ) ‣ Crud for collections - move timers in list SkillsMatter January 2012 Slide 68 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  93. 93. Timers app ADS A simple to use countdown collection for time conscious individuals. Type Serious Tool SkillsMatter January 2012 Slide 69 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  94. 94. Keynote tips&tricks SkillsMatter January 2012 Slide 70 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  95. 95. Keynote tips & tricks SkillsMatter January 2012 Slide 71 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  96. 96. Resources SkillsMatter January 2012 Slide 72 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  97. 97. Resources LiTG http://skillsmatter.com/user-group/os-mobile-server/litg http://www.linkedin.com/groups?gid=3323860 SkillsMatter January 2012 Slide 73 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  98. 98. Resources MagicTou.ch http://magictou.ch SkillsMatter January 2012 Slide 74 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  99. 99. Resources http://lanyrd.com/guides/ios-london/ http://nsconference.com SkillsMatter January 2012 Slide 75 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  100. 100. iOS Application Development 2nd & 3rd April, London 2 Days Workshops and Main Conference Day 1: Hands-on Full Day Workshops - iOS Development with Paul Ardeleanu - Android Fast Track Development with Marko Gargenta - Mobile Web Development (tbc) Copyright © 2012 Hello24 Ltd. http://hello24.comTuesday, 24 January 12
  101. 101. Day 2: Main Conference with 5 tracks - iOS - Android - Mobile Web - Platforms - Mobile Business International Speakers - Technical Sessions - Great Networking 150 for 150 offer - £150 for 1st 150 places SkillsMatter January 2012 Slide 77 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  102. 102. One more thing... SkillsMatter January 2012 Slide 78 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  103. 103. Free ticket raffle Email to: mobile360live@sandsmedia.com subject: ‘PAUL A RAFFLE’ Ticket draw on Thursday 26th January SkillsMatter January 2012 Slide 79 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  104. 104. Thank you! SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  105. 105. Thank you! stay hungry, stay foolish SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  106. 106. Thank you! paul@hello24.com stay hungry, stay foolish SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  107. 107. Thank you! paul@hello24.com twitter.com/pardel stay hungry, stay foolish SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12

×