Post on 11-Nov-2014
description
transcript
iOS Application Development
Prototyping saves your …
iOS Application Development
Prototyping will save your
iOS Application Developmenthttp://www.jasonmecier.com/fkevinbacon.html
iOS Application Development
Prototyping will save your
mmmm… bacon
iOS Application Development
iOS Application Development
OR
iOS Application Development
iOS Application Development
We’re building an app…
iOS Application Development
https://www.flickr.com/photos/13102974@N00/2736544035/
iOS Application Development
https://www.flickr.com/photos/officenow/2631533044/
iOS Application Development
Analysis
iOS Application Development
iOS Application Development
Time for lunch…
iOS Application Development
iOS Application Development
IT’S 2014 !!!
iOS Application Development
</rant>
Prototyping? Huh?!
iOS Application Development
Starts with an idea
What to expect?
‣ “I have this idea...”
‣ I want to build the next Angry Birds
‣ I want to build an app that does ...
‣ Client brief
‣ List of requirements
‣ Wireframes / Sketches
New paradigms
‣ Constraints‣ small size
‣ limited hardware
‣ one screen at a time
‣ one application at a time *
‣ touch input
‣ Interactions‣ gestures
‣ shake
‣ orientation
‣ audio switch, volume buttons
‣ home & power buttons
Wireframing vs. Prototypingint
erac
tivity
iOS Application Development
Building great apps
List of features
too manyfeatures?
Filter
Yes
ApplicationDefinitionStatement
Appfeatures
User journeys
Wirefames
Prototype
Application Definition Statement
“A concise, concrete declaration of the app’s main purpose and its intended audience.”
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Solve real problems
"An app must solve a user's problem clearly and elegantly."
Eric Hope, User Experience Evangelist, Apple
iOS Application Development
Delivery methods
3 ways to deliver mobile content
‣ web app [dedicated]
‣ native app
‣ there is no 3rd way!
Strengths & weaknesses
cost
performance
native
web
hybrid
iOS Application Development
</rant>
iOS Application Development
Types of apps
Types of apps
seri
ou
snes
s
purposeserious
fun
tool entertainment
Serious toolse
rio
usn
ess
purposeserious
fun
tool entertainment
Fun toolse
rio
usn
ess
purposeserious
fun
tool entertainment
Fun entertainmentse
rio
usn
ess
purposeserious
fun
tool entertainment
Serious entertainmentse
rio
usn
ess
purposeserious
fun
tool entertainment
Utilityse
rio
usn
ess
purposeserious
fun
tool entertainment
http://h24.co/NearestBus
iOS Application Development
An example
Features
‣ simple countdown timer ‣ with local notifications
‣ group timers in sequences ‣ pomodoro (25min + 5 min)
‣ gym training (5 mins, etc. )
ADSA simple to use countdown collection for time conscious individuals.
TypeSerious Tool
iOS Application Development
Wireframing
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
Demo app: Timers
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers (i.e. sequences)
‣ CRUD for collections
Paper by FiftyThree
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
Sketching
More sketchingstart
Splash screen
List of sequences
Add sequence
Sequenceedit
05:12start Timer
start
Add timer
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
Wireframing tools
‣ Stencils
‣ Omnigraffle
‣ Photoshop
‣ Skala Preview
‣ Liveview
‣ Reflector
Stencils
uistencils.com
Omnigraffle
Omnigraffle
graffletopia.com
Realistic wireframes
http://www.teehanlax.com/tools/
Photoshop add-ons
Skala Preview http://bjango.com/mac/skalapreview/
Skala Preview
Liveview http://www.zambetti.com/projects/liveview/
FREE!!!
Reflector http://www.airsquirrels.com/reflector/
iOS Application Development
Prototyping
Types of prototypes
‣ Web based
‣ Visual
‣ Presentation based
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
Visual tools
‣ Design rich
‣ Visually correct
‣ Slightly harder to communicate
‣ Might lead to confusions
Briefs
http://giveabrief.com/
Presentation based
‣ Use your existing skills
‣ The client can possibly create/amend these
‣ Offline access
‣ Easy to communicate
‣ Can run on the device
Keynote
Keynotopia
Included elements
Included elements
Keynote settings
Keynote export
Demo
iOS Application Development
Xcode
Storyboards
Storyboards
Storyboards
The good:‣ use your existing skills
‣ deploy on device
‣ wysiwyg
‣ can be built upon
The not so good:‣ must be a developer
‣ ad-hoc distribution
‣ client must have a device
‣ collaboration painful
iOS Application Development
Experimental
Pop
Whiteboard + Liveview + phone
iOS Application Development
Ruby
iOS Application Development
Collaterals
Icons
Patterns
iOS Application Development
Why prototyping?
iOS Application Development
1
iOS Application Development
2
Questions
@pardel!
hello24.compaul@hello24.com
Thank you!
@pardel!
hello24.compaul@hello24.com
Skills Matter, London, April 23, 2013 Slide .
`
Thank you!