Prototyping your iPhone/iPad app

  • 2,491 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Video of the talk is available here: http://h24.co/zzIZtH
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,491
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
52
Comments
1
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. 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. iOS Application DevelopmentTuesday, 24 January 12
  • 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. Development vs. Design SkillsMatter January 2012 Slide 4 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. SkillsMatter January 2012 Slide 5 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. Let’s start from the beginningflickr.com/photos/seretuaccidente/ SkillsMatter January 2012 Slide 7 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. flickr.com/photos/bade_md/5617676375/ SkillsMatter January 2012 Slide 9 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 12. flickr.com/photos/romainguy/1032027276/ SkillsMatter January 2012 Slide 10 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 13. SkillsMatter January 2012 Slide 11 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 14. What to expect? SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. 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. 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. 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. 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. Application Definition Statement SkillsMatter January 2012 Slide 14 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. Type of apps SkillsMatter January 2012 Slide 16 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 25. SkillsMatter January 2012 Slide 17 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 26. Serious tool SkillsMatter January 2012 Slide 18 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 27. Fun tool SkillsMatter January 2012 Slide 19 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 28. Fun entertainment SkillsMatter January 2012 Slide 20 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 29. Serious entertainment SkillsMatter January 2012 Slide 21 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 30. Utility SkillsMatter January 2012 Slide 22 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. User journeys SkillsMatter January 2012 Slide 25 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 34. flickr.com/photos/delainahaslam/6582009999/ SkillsMatter January 2012 Slide 26 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 35. flickr.com/photos/25228175@N08/5044656545/ SkillsMatter January 2012 Slide 27 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 36. flickr.com/photos/unlistedsightings/1027938595/ SkillsMatter January 2012 Slide 28 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Don’t... Just don’t! SkillsMatter January 2012 Slide 32 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Interface design patterns SkillsMatter January 2012 Slide 34 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Table view controller SkillsMatter January 2012 Slide 36 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 52. UITableViewController SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 53. UITableViewController SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 54. UITableViewController table header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 55. UITableViewController table header view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 56. UITableViewController table header view section header view footer header view SkillsMatter January 2012 Slide 37 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. 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. 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. SkillsMatter January 2012 Slide 38 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 62. Navigation Controller SkillsMatter January 2012 Slide 39 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Navigation Controller Root View Controller Top View Controller SkillsMatter January 2012 Slide 41 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 65. Tab Bar Controller SkillsMatter January 2012 Slide 42 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 66. Modal view SkillsMatter January 2012 Slide 43 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 67. Popover view SkillsMatter January 2012 Slide 44 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 68. SplitViewController SkillsMatter January 2012 Slide 45 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 69. Don’t... Just don’t! SkillsMatter January 2012 Slide 46 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 70. Creating new interfaces SkillsMatter January 2012 Slide 47 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 71. Inventing new interfaces SkillsMatter January 2012 Slide 48 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 72. Path SkillsMatter January 2012 Slide 49 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 73. Path SkillsMatter January 2012 Slide 49 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 74. Path SkillsMatter January 2012 Slide 50 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 75. Instapaper SkillsMatter January 2012 Slide 51 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 76. Flipboard SkillsMatter January 2012 Slide 52 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 77. SkillsMatter January 2012 Slide 53 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Prototyping with Keynotopia SkillsMatter January 2012 Slide 55 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 80. Keynotopia demo: Timers SkillsMatter January 2012 Slide 56 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 81. Storyboarding SkillsMatter January 2012 Slide 57 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 82. SkillsMatter January 2012 Slide 58 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 83. SkillsMatter January 2012 Slide 59 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 84. SkillsMatter January 2012 Slide 60 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 85. SkillsMatter January 2012 Slide 61 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. iBooks2 SkillsMatter January 2012 Slide 63 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 88. SkillsMatter January 2012 Slide 64 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Questions? SkillsMatter January 2012 Slide 66 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 91. Demo SkillsMatter January 2012 Slide 67 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. Keynote tips&tricks SkillsMatter January 2012 Slide 70 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 95. Keynote tips & tricks SkillsMatter January 2012 Slide 71 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 96. Resources SkillsMatter January 2012 Slide 72 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Resources MagicTou.ch http://magictou.ch SkillsMatter January 2012 Slide 74 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 99. Resources http://lanyrd.com/guides/ios-london/ http://nsconference.com SkillsMatter January 2012 Slide 75 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. 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. One more thing... SkillsMatter January 2012 Slide 78 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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. Thank you! SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 105. Thank you! stay hungry, stay foolish SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 106. Thank you! paul@hello24.com stay hungry, stay foolish SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012Tuesday, 24 January 12
  • 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