How to prototype your mobile apps
1 like1,873 views
The document discusses different methods for prototyping mobile apps, including wireframing tools like OmniGraffle and Keynote. It describes creating wireframes that identify the key screens and navigation of an app. The document provides an example app concept for a timers app and sketches sample wireframes for its features. It also discusses additional prototyping tools like Skala Preview, LiveView and Reflector that can be used to demonstrate prototypes on mobile devices.
![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!](https://image.slidesharecdn.com/20130423presentation-130424031643-phpapp01/85/How-to-prototype-your-mobile-apps-11-320.jpg)
How to prototype your mobile apps
- 1. iOS Application Development How to prototype your mobile apps Paul Ardeleanu London, April 23, 2013
- 2. Skills Matter, London, April 23, 2013 Slide . About me Paul Ardeleanu - work @ Hello24.com 2 - teach @ Skills Matter - I build apps
- 3. Skills Matter, London, April 23, 2013 Slide .3 clarity24.eu
- 4. Skills Matter, London, April 23, 2013 Slide . Social @skillsmatter @pardel app.net/pardel 4 #LiTG #iOS
- 7. iOS Application Development It starts with an idea
- 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 download my thoughts! ‣ Client brief ‣ List of requirements ‣ Wireframes / Sketches 8
- 9. Skills Matter, London, April 23, 2013 Slide . Wireframing vs. Prototyping 9 interactivity
- 10. iOS Application Development Delivery methods
- 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. Skills Matter, London, April 23, 2013 Slide .12
- 13. Skills Matter, London, April 23, 2013 Slide . Strengths & weaknesses 13 cost performance native web hybrid
- 14. iOS Application Development Type of apps
- 15. Skills Matter, London, April 23, 2013 Slide . Type of apps 15 seriousness purpose serious fun tool entertainment
- 16. Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Serious tool 16
- 17. Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Fun tool 17
- 18. Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Fun entertainment 18
- 19. Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Serious entertainment 19
- 20. Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Utility 20 http://h24.co/NearestBus
- 21. iOS Application Development Example App/Idea Timers
- 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. Skills Matter, London, April 23, 2013 Slide .23 A simple to use countdown collection for time conscious individuals. Serious Tool ADS Type
- 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 app 24
- 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 collections 25
- 26. Skills Matter, London, April 23, 2013 Slide . ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching 26
- 27. Skills Matter, London, April 23, 2013 Slide . More sketching 27 start Splash screen List of sequences Add sequence Sequence edit 05:12 start Timer
- 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 time 28
- 29. Skills Matter, London, April 23, 2013 Slide . Tools ‣ Stencils ‣ Omnigraffle ‣ Keynote ‣ Photoshop ‣ Skala Preview ‣ Liveview ‣ Reflector 29
- 30. Skills Matter, London, April 23, 2013 Slide . Stencils 30 uistencils.com
- 31. Skills Matter, London, April 23, 2013 Slide .31 Other “hardware” solutions flickr.com/photos/rosenfeldmedia/3978119393/
- 32. Skills Matter, London, April 23, 2013 Slide . Omnigraffle 32
- 33. Skills Matter, London, April 23, 2013 Slide . Graffletopia.com 33
- 34. Skills Matter, London, April 23, 2013 Slide . Timers app - Wireframes ‣ Demo 34
- 35. Skills Matter, London, April 23, 2013 Slide . Realistic wireframes 35 http://www.teehanlax.com/tools/
- 36. Skills Matter, London, April 23, 2013 Slide . Keynote 36
- 37. Skills Matter, London, April 23, 2013 Slide . Keynotopia 37 http://keynotopia.com/iphone-prototyping/
- 38. Skills Matter, London, April 23, 2013 Slide . Included elements 38
- 39. Skills Matter, London, April 23, 2013 Slide . Keynotopia example 39
- 40. Skills Matter, London, April 23, 2013 Slide . Keynote tips&tricks 40
- 41. Skills Matter, London, April 23, 2013 Slide . Keynote tips & tricks 41
- 42. Skills Matter, London, April 23, 2013 Slide . Touch Gesture Reference Guide 42 http://www.lukew.com/ff/entry.asp?1071
- 43. Skills Matter, London, April 23, 2013 Slide . Demo 43
- 44. Skills Matter, London, April 23, 2013 Slide . Keynotopia demo: Timers 44
- 45. Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/
- 46. Skills Matter, London, April 23, 2013 Slide .46
- 47. Skills Matter, London, April 23, 2013 Slide . Liveview 47 FREE!!!
- 48. Skills Matter, London, April 23, 2013 Slide . Reflector 48
- 49. Skills Matter, London, April 23, 2013 Slide . Types of prototypes ‣ Web based ‣ Visual based ‣ Presentation based 49
- 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 experience 50
- 51. Skills Matter, London, April 23, 2013 Slide .51
- 52. Skills Matter, London, April 23, 2013 Slide .52
- 53. Skills Matter, London, April 23, 2013 Slide .53
- 54. Skills Matter, London, April 23, 2013 Slide .54
- 55. Skills Matter, London, April 23, 2013 Slide . Visual based ‣ Design rich ‣ Visually correct ‣ Slightly harder to communicate ‣ Might lead to confusions 55
- 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 device 56
- 57. Skills Matter, London, April 23, 2013 Slide . Types of prototypes ‣ Web based ‣ Visual based ‣ Presentation based 57
- 58. Skills Matter, London, April 23, 2013 Slide . Mac-specific 58
- 59. Skills Matter, London, April 23, 2013 Slide .59 iBooks Author
- 60. Skills Matter, London, April 23, 2013 Slide . Custom themes 60
- 61. Skills Matter, London, April 23, 2013 Slide . XCode 61
- 62. Skills Matter, London, April 23, 2013 Slide .62 Storyboarding
- 63. Skills Matter, London, April 23, 2013 Slide .63
- 64. Skills Matter, London, April 23, 2013 Slide .64
- 65. Skills Matter, London, April 23, 2013 Slide .65
- 66. Skills Matter, London, April 23, 2013 Slide . http://www.raywenderlich.com/5138/ beginning-storyboards-in-ios-5-part-1 66
- 67. Skills Matter, London, April 23, 2013 Slide . Storyboarding The good: ‣ use your existing skills ‣ deploy on device ‣ wysiwyg ‣ can be built upon 67 The not so good: ‣ must be a developer ‣ ad-hoc distribution ‣ client must have a device ‣ dev collaboration painful
- 68. Skills Matter, London, April 23, 2013 Slide . Experimental 68
- 69. Skills Matter, London, April 23, 2013 Slide . Pop 69
- 70. Skills Matter, London, April 23, 2013 Slide . Whiteboard + Liveview + phone 70
- 71. Skills Matter, London, April 23, 2013 Slide . Collaterals 71
- 72. Skills Matter, London, April 23, 2013 Slide . Icons 72
- 73. Skills Matter, London, April 23, 2013 Slide . Patterns 73
- 74. Skills Matter, London, April 23, 2013 Slide . Photoshop add-ons 74
- 75. Skills Matter, London, April 23, 2013 Slide . paul@h24.io 75 @pardel app.net/pardel Question Time :)
- 76. Skills Matter, London, April 23, 2013 Slide .76 Thank you!