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.
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
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!
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
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
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
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