iOS Application DevelopmentHow to prototypeyour mobile appsPaul ArdeleanuLondon, April 23, 2013
Skills Matter, London, April 23, 2013 Slide .About mePaul Ardeleanu- work @ Hello24.com2- teach @ Skills Matter- I build a...
Skills Matter, London, April 23, 2013 Slide .3clarity24.eu
Skills Matter, London, April 23, 2013 Slide .Social@skillsmatter@pardelapp.net/pardel4#LiTG#iOS
iOS Application DevelopmentPrototyping?Huh?!
iOS Application Development
iOS Application DevelopmentIt starts with an idea
Skills Matter, London, April 23, 2013 Slide .What to expect?‣ “I have this idea...”‣ I want to build the next Angry Birds‣...
Skills Matter, London, April 23, 2013 Slide .Wireframing vs. Prototyping9interactivity
iOS Application DevelopmentDelivery methods
Skills Matter, London, April 23, 2013 Slide .3 ways to deliver mobile content‣ web app [dedicated]‣ native app‣ hybrid...1...
Skills Matter, London, April 23, 2013 Slide .12
Skills Matter, London, April 23, 2013 Slide .Strengths & weaknesses13costperformancenativewebhybrid
iOS Application DevelopmentType of apps
Skills Matter, London, April 23, 2013 Slide .Type of apps15seriousnesspurposeseriousfuntool entertainment
Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious tool16
Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun tool17
Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun entertainment18
Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious entertainment19
Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentUtility20http://h24.co/NearestBus
iOS Application DevelopmentExample App/IdeaTimers
Skills Matter, London, April 23, 2013 Slide .Features‣ simple countdown timer‣ with local notifications‣ group timers in se...
Skills Matter, London, April 23, 2013 Slide .23A simple to use countdown collection for timeconscious individuals.Serious ...
Skills Matter, London, April 23, 2013 Slide .Wireframing‣ identify main areas of the app‣ identify screens‣ identify relat...
Skills Matter, London, April 23, 2013 Slide .Timers app - Features‣ simple countdown timer countdown‣ CRUD for timer‣ loca...
Skills Matter, London, April 23, 2013 Slide .‣ simple countdown timer countdown‣ CRUD for timer‣ local notifications for wh...
Skills Matter, London, April 23, 2013 Slide .More sketching27startSplashscreenList ofsequencesAddsequenceSequenceedit05:12...
Skills Matter, London, April 23, 2013 Slide .Sketching‣ start from the most important task‣ identify main areas of the app...
Skills Matter, London, April 23, 2013 Slide .Tools‣ Stencils‣ Omnigraffle‣ Keynote‣ Photoshop‣ Skala Preview‣ Liveview‣ Refle...
Skills Matter, London, April 23, 2013 Slide .Stencils30uistencils.com
Skills Matter, London, April 23, 2013 Slide .31Other “hardware” solutionsflickr.com/photos/rosenfeldmedia/3978119393/
Skills Matter, London, April 23, 2013 Slide .Omnigraffle32
Skills Matter, London, April 23, 2013 Slide .Graffletopia.com33
Skills Matter, London, April 23, 2013 Slide .Timers app - Wireframes‣ Demo34
Skills Matter, London, April 23, 2013 Slide .Realistic wireframes35http://www.teehanlax.com/tools/
Skills Matter, London, April 23, 2013 Slide .Keynote36
Skills Matter, London, April 23, 2013 Slide .Keynotopia37http://keynotopia.com/iphone-prototyping/
Skills Matter, London, April 23, 2013 Slide .Included elements38
Skills Matter, London, April 23, 2013 Slide .Keynotopia example39
Skills Matter, London, April 23, 2013 Slide .Keynote tips&tricks40
Skills Matter, London, April 23, 2013 Slide .Keynote tips & tricks41
Skills Matter, London, April 23, 2013 Slide .Touch Gesture Reference Guide42http://www.lukew.com/ff/entry.asp?1071
Skills Matter, London, April 23, 2013 Slide .Demo43
Skills Matter, London, April 23, 2013 Slide .Keynotopia demo: Timers44
Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/
Skills Matter, London, April 23, 2013 Slide .46
Skills Matter, London, April 23, 2013 Slide .Liveview47FREE!!!
Skills Matter, London, April 23, 2013 Slide .Reflector48
Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based49
Skills Matter, London, April 23, 2013 Slide .Web based‣ (almost) No technical skills required‣ Easy to communicate with th...
Skills Matter, London, April 23, 2013 Slide .51
Skills Matter, London, April 23, 2013 Slide .52
Skills Matter, London, April 23, 2013 Slide .53
Skills Matter, London, April 23, 2013 Slide .54
Skills Matter, London, April 23, 2013 Slide .Visual based‣ Design rich‣ Visually correct‣ Slightly harder to communicate‣ ...
Skills Matter, London, April 23, 2013 Slide .Presentation based‣ Use your existing skills‣ The client can possibly create/...
Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based57
Skills Matter, London, April 23, 2013 Slide .Mac-specific58
Skills Matter, London, April 23, 2013 Slide .59iBooks Author
Skills Matter, London, April 23, 2013 Slide .Custom themes60
Skills Matter, London, April 23, 2013 Slide .XCode61
Skills Matter, London, April 23, 2013 Slide .62Storyboarding
Skills Matter, London, April 23, 2013 Slide .63
Skills Matter, London, April 23, 2013 Slide .64
Skills Matter, London, April 23, 2013 Slide .65
Skills Matter, London, April 23, 2013 Slide .http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1 66
Skills Matter, London, April 23, 2013 Slide .StoryboardingThe good:‣ use your existing skills‣ deploy on device‣ wysiwyg‣ ...
Skills Matter, London, April 23, 2013 Slide .Experimental68
Skills Matter, London, April 23, 2013 Slide .Pop69
Skills Matter, London, April 23, 2013 Slide .Whiteboard + Liveview + phone70
Skills Matter, London, April 23, 2013 Slide .Collaterals71
Skills Matter, London, April 23, 2013 Slide .Icons72
Skills Matter, London, April 23, 2013 Slide .Patterns73
Skills Matter, London, April 23, 2013 Slide .Photoshop add-ons74
Skills Matter, London, April 23, 2013 Slide .paul@h24.io75@pardelapp.net/pardelQuestion Time :)
Skills Matter, London, April 23, 2013 Slide .76Thank you!
Upcoming SlideShare
Loading in...5
×

How to prototype your mobile apps

806

Published on

Published in: Travel, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
806
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How to prototype your mobile apps

  1. 1. iOS Application DevelopmentHow to prototypeyour mobile appsPaul ArdeleanuLondon, April 23, 2013
  2. 2. Skills Matter, London, April 23, 2013 Slide .About mePaul Ardeleanu- work @ Hello24.com2- teach @ Skills Matter- I build apps
  3. 3. Skills Matter, London, April 23, 2013 Slide .3clarity24.eu
  4. 4. Skills Matter, London, April 23, 2013 Slide .Social@skillsmatter@pardelapp.net/pardel4#LiTG#iOS
  5. 5. iOS Application DevelopmentPrototyping?Huh?!
  6. 6. iOS Application Development
  7. 7. iOS Application DevelopmentIt starts with an idea
  8. 8. Skills Matter, London, April 23, 2013 Slide .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 downloadmy thoughts!‣ Client brief‣ List of requirements‣ Wireframes / Sketches8
  9. 9. Skills Matter, London, April 23, 2013 Slide .Wireframing vs. Prototyping9interactivity
  10. 10. iOS Application DevelopmentDelivery methods
  11. 11. Skills Matter, London, April 23, 2013 Slide .3 ways to deliver mobile content‣ web app [dedicated]‣ native app‣ hybrid...11^H^H^H‣ there is no 3rd way!
  12. 12. Skills Matter, London, April 23, 2013 Slide .12
  13. 13. Skills Matter, London, April 23, 2013 Slide .Strengths & weaknesses13costperformancenativewebhybrid
  14. 14. iOS Application DevelopmentType of apps
  15. 15. Skills Matter, London, April 23, 2013 Slide .Type of apps15seriousnesspurposeseriousfuntool entertainment
  16. 16. Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious tool16
  17. 17. Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun tool17
  18. 18. Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun entertainment18
  19. 19. Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious entertainment19
  20. 20. Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentUtility20http://h24.co/NearestBus
  21. 21. iOS Application DevelopmentExample App/IdeaTimers
  22. 22. Skills Matter, London, April 23, 2013 Slide .Features‣ simple countdown timer‣ with local notifications‣ group timers in sequences‣ pomodoro (25min + 5 min)‣ gym training (5 mins, etc. )22
  23. 23. Skills Matter, London, April 23, 2013 Slide .23A simple to use countdown collection for timeconscious individuals.Serious ToolADSType
  24. 24. Skills Matter, London, April 23, 2013 Slide .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 app24
  25. 25. Skills Matter, London, April 23, 2013 Slide .Timers app - Features‣ simple countdown timer countdown‣ CRUD for timer‣ local notifications for when the timer is up‣ collection of timers (i.e. sequences)‣ CRUD for collections25
  26. 26. Skills Matter, London, April 23, 2013 Slide .‣ simple countdown timer countdown‣ CRUD for timer‣ local notifications for when the timer isup‣ collection of timers‣ CRUD for collectionsSketching26
  27. 27. Skills Matter, London, April 23, 2013 Slide .More sketching27startSplashscreenList ofsequencesAddsequenceSequenceedit05:12startTimer
  28. 28. Skills Matter, London, April 23, 2013 Slide .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 time28
  29. 29. Skills Matter, London, April 23, 2013 Slide .Tools‣ Stencils‣ Omnigraffle‣ Keynote‣ Photoshop‣ Skala Preview‣ Liveview‣ Reflector29
  30. 30. Skills Matter, London, April 23, 2013 Slide .Stencils30uistencils.com
  31. 31. Skills Matter, London, April 23, 2013 Slide .31Other “hardware” solutionsflickr.com/photos/rosenfeldmedia/3978119393/
  32. 32. Skills Matter, London, April 23, 2013 Slide .Omnigraffle32
  33. 33. Skills Matter, London, April 23, 2013 Slide .Graffletopia.com33
  34. 34. Skills Matter, London, April 23, 2013 Slide .Timers app - Wireframes‣ Demo34
  35. 35. Skills Matter, London, April 23, 2013 Slide .Realistic wireframes35http://www.teehanlax.com/tools/
  36. 36. Skills Matter, London, April 23, 2013 Slide .Keynote36
  37. 37. Skills Matter, London, April 23, 2013 Slide .Keynotopia37http://keynotopia.com/iphone-prototyping/
  38. 38. Skills Matter, London, April 23, 2013 Slide .Included elements38
  39. 39. Skills Matter, London, April 23, 2013 Slide .Keynotopia example39
  40. 40. Skills Matter, London, April 23, 2013 Slide .Keynote tips&tricks40
  41. 41. Skills Matter, London, April 23, 2013 Slide .Keynote tips & tricks41
  42. 42. Skills Matter, London, April 23, 2013 Slide .Touch Gesture Reference Guide42http://www.lukew.com/ff/entry.asp?1071
  43. 43. Skills Matter, London, April 23, 2013 Slide .Demo43
  44. 44. Skills Matter, London, April 23, 2013 Slide .Keynotopia demo: Timers44
  45. 45. Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/
  46. 46. Skills Matter, London, April 23, 2013 Slide .46
  47. 47. Skills Matter, London, April 23, 2013 Slide .Liveview47FREE!!!
  48. 48. Skills Matter, London, April 23, 2013 Slide .Reflector48
  49. 49. Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based49
  50. 50. Skills Matter, London, April 23, 2013 Slide .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 experience50
  51. 51. Skills Matter, London, April 23, 2013 Slide .51
  52. 52. Skills Matter, London, April 23, 2013 Slide .52
  53. 53. Skills Matter, London, April 23, 2013 Slide .53
  54. 54. Skills Matter, London, April 23, 2013 Slide .54
  55. 55. Skills Matter, London, April 23, 2013 Slide .Visual based‣ Design rich‣ Visually correct‣ Slightly harder to communicate‣ Might lead to confusions55
  56. 56. Skills Matter, London, April 23, 2013 Slide .Presentation based‣ Use your existing skills‣ The client can possibly create/amend these‣ Offline access‣ Easy to communicate‣ Can run on the device56
  57. 57. Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based57
  58. 58. Skills Matter, London, April 23, 2013 Slide .Mac-specific58
  59. 59. Skills Matter, London, April 23, 2013 Slide .59iBooks Author
  60. 60. Skills Matter, London, April 23, 2013 Slide .Custom themes60
  61. 61. Skills Matter, London, April 23, 2013 Slide .XCode61
  62. 62. Skills Matter, London, April 23, 2013 Slide .62Storyboarding
  63. 63. Skills Matter, London, April 23, 2013 Slide .63
  64. 64. Skills Matter, London, April 23, 2013 Slide .64
  65. 65. Skills Matter, London, April 23, 2013 Slide .65
  66. 66. Skills Matter, London, April 23, 2013 Slide .http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1 66
  67. 67. Skills Matter, London, April 23, 2013 Slide .StoryboardingThe good:‣ use your existing skills‣ deploy on device‣ wysiwyg‣ can be built upon67The not so good:‣ must be a developer‣ ad-hoc distribution‣ client must have a device‣ dev collaboration painful
  68. 68. Skills Matter, London, April 23, 2013 Slide .Experimental68
  69. 69. Skills Matter, London, April 23, 2013 Slide .Pop69
  70. 70. Skills Matter, London, April 23, 2013 Slide .Whiteboard + Liveview + phone70
  71. 71. Skills Matter, London, April 23, 2013 Slide .Collaterals71
  72. 72. Skills Matter, London, April 23, 2013 Slide .Icons72
  73. 73. Skills Matter, London, April 23, 2013 Slide .Patterns73
  74. 74. Skills Matter, London, April 23, 2013 Slide .Photoshop add-ons74
  75. 75. Skills Matter, London, April 23, 2013 Slide .paul@h24.io75@pardelapp.net/pardelQuestion Time :)
  76. 76. Skills Matter, London, April 23, 2013 Slide .76Thank you!
  1. A particular slide catching your eye?

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

×