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.

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

5. iOS Application Development
Prototyping?
Huh?!

6. iOS Application Development

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!