How to prototype your mobile apps
76
iOS Application Development How to prototype your mobile apps Paul Ardeleanu London, April 23, 2013
-
Upload
hello24com -
Category
Travel
-
view
111 -
download
2
description
Transcript of How to prototype your mobile apps
iOS Application Development
How to prototypeyour mobile apps
Paul Ardeleanu
London, April 23, 2013
Skills Matter, London, April 23, 2013 Slide .
About me
Paul Ardeleanu
- work @ Hello24.com
2
- teach @ Skills Matter
- I build apps
Skills Matter, London, April 23, 2013 Slide .3
clarity24.eu
Skills Matter, London, April 23, 2013 Slide .
Social
@skillsmatter
@pardel
app.net/pardel
4
#LiTG
#iOS
iOS Application Development
Prototyping?Huh?!
iOS Application Development
iOS Application Development
It 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
‣ 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
Skills Matter, London, April 23, 2013 Slide .
Wireframing vs. Prototyping
9
inte
ract
ivit
y
iOS Application Development
Delivery methods
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!
Skills Matter, London, April 23, 2013 Slide .12
Skills Matter, London, April 23, 2013 Slide .
Strengths & weaknesses
13
cost
performance
native
web
hybrid
iOS Application Development
Type of apps
Skills Matter, London, April 23, 2013 Slide .
Type of apps
15
seri
ou
snes
s
purposeserious
fun
tool entertainment
Skills Matter, London, April 23, 2013 Slide .
seri
ou
snes
s
purposeserious
fun
tool entertainment
Serious tool
16
Skills Matter, London, April 23, 2013 Slide .
seri
ou
snes
s
purposeserious
fun
tool entertainment
Fun tool
17
Skills Matter, London, April 23, 2013 Slide .
seri
ou
snes
s
purposeserious
fun
tool entertainment
Fun entertainment
18
Skills Matter, London, April 23, 2013 Slide .
seri
ou
snes
s
purposeserious
fun
tool entertainment
Serious entertainment
19
Skills Matter, London, April 23, 2013 Slide .
seri
ou
snes
s
purposeserious
fun
tool entertainment
Utility
20
http://h24.co/NearestBus
iOS Application Development
Example App/Idea Timers
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
Skills Matter, London, April 23, 2013 Slide .23
A simple to use countdown collection for time conscious individuals.
Serious Tool
ADS
Type
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
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
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
Skills Matter, London, April 23, 2013 Slide .
More sketching
27
start
Splashscreen
List ofsequences
Add sequence
Sequenceedit
05:12
start
Timer
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
Skills Matter, London, April 23, 2013 Slide .
Tools
‣ Stencils
‣ Omnigraffle
‣ Keynote
‣ Photoshop
‣ Skala Preview
‣ Liveview
‣ Reflector
29
Skills Matter, London, April 23, 2013 Slide .
Stencils
30
uistencils.com
Skills Matter, London, April 23, 2013 Slide .31
Other “hardware” solutions
flickr.com/photos/rosenfeldmedia/3978119393/
Skills Matter, London, April 23, 2013 Slide .
Omnigraffle
32
Skills Matter, London, April 23, 2013 Slide .
Graffletopia.com
33
Skills Matter, London, April 23, 2013 Slide .
Timers app - Wireframes
‣ Demo
34
Skills Matter, London, April 23, 2013 Slide .
Realistic wireframes
35
http://www.teehanlax.com/tools/
Skills Matter, London, April 23, 2013 Slide .
Keynote
36
Skills Matter, London, April 23, 2013 Slide .
Keynotopia
37
http://keynotopia.com/iphone-prototyping/
Skills Matter, London, April 23, 2013 Slide .
Included elements
38
Skills Matter, London, April 23, 2013 Slide .
Keynotopia example
39
Skills Matter, London, April 23, 2013 Slide .
Keynote tips&tricks
40
Skills Matter, London, April 23, 2013 Slide .
Keynote tips & tricks
41
Skills Matter, London, April 23, 2013 Slide .
Touch Gesture Reference Guide
42
http://www.lukew.com/ff/entry.asp?1071
Skills Matter, London, April 23, 2013 Slide .
Demo
43
Skills Matter, London, April 23, 2013 Slide .
Keynotopia demo: Timers
44
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 .
Liveview
47
FREE!!!
Skills Matter, London, April 23, 2013 Slide .
Reflector
48
Skills Matter, London, April 23, 2013 Slide .
Types of prototypes
‣Web based
‣ Visual based
‣ Presentation based
49
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
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
‣ Might lead to confusions
55
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
Skills Matter, London, April 23, 2013 Slide .
Types of prototypes
‣Web based
‣ Visual based
‣ Presentation based
57
Skills Matter, London, April 23, 2013 Slide .
Mac-specific
58
Skills Matter, London, April 23, 2013 Slide .59
iBooks Author
Skills Matter, London, April 23, 2013 Slide .
Custom themes
60
Skills Matter, London, April 23, 2013 Slide .
XCode
61
Skills Matter, London, April 23, 2013 Slide .62
Storyboarding
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 .
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
Skills Matter, London, April 23, 2013 Slide .
Experimental
68
Skills Matter, London, April 23, 2013 Slide .
Pop
69
Skills Matter, London, April 23, 2013 Slide .
Whiteboard + Liveview + phone
70
Skills Matter, London, April 23, 2013 Slide .
Collaterals
71
Skills Matter, London, April 23, 2013 Slide .
Icons
72
Skills Matter, London, April 23, 2013 Slide .
Patterns
73
Skills Matter, London, April 23, 2013 Slide .
Photoshop add-ons
74
Skills Matter, London, April 23, 2013 Slide .
75
@pardel
app.net/pardel
Question Time :)
Skills Matter, London, April 23, 2013 Slide .76
Thank you!
