Post on 28-Jan-2015
description
transcript
Copyright © 2012 Hello24 Ltd. http://hello24.com
iOS Application Development
Prototyping your iOS appPaul Ardeleanu
Geek in Chief at Hello24
Tuesday, 24 January 12
iOS Application Development
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
The plan
‣ HIG’s & ADS
‣ User journeys
‣ Interface design patterns
‣ Creating new interfaces
‣ Keynotopia
‣ Storyboarding
‣ Demo
3
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Development vs. Design
4
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Development vs. Design
4
PM
Design, UX
Code
Debug&Test
Deployment
Traditional
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 20125
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Development vs. Design
6
PM
Design, UX
Code
Debug&Test
Deployment
Traditional
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Development vs. Design
6
PM
Design, UX
Code
Debug&Test
Deployment
Traditional
PM
Prototyping, UX, design
Code
Debug&Test
Mobile
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012flickr.com/photos/seretuaccidente/
Let’s start from the beginning
7
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
There is no such thing as a bad idea!
flickr.com/photos/andyandorla/ 8
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 20129flickr.com/photos/bade_md/5617676375/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201210flickr.com/photos/romainguy/1032027276/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201211
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
What to expect?
12
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
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!
12
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
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
12
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
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
12
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
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
12
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201213
List of features
too manyfeatures?
Filter
Yes
ApplicationDefinitionStatement
Appfeatures
User journeys
Wirefames
Prototype
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201213
List of features
too manyfeatures?
Filter
Yes
ApplicationDefinitionStatement
Appfeatures
User journeys
Wirefames
Prototype
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Application Definition Statement
14
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Application Definition Statement
It is a concise, concrete declaration of an app’s main purpose and its intended audience.
15
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Application Definition Statement
It is a concise, concrete declaration of an app’s main purpose and its intended audience.
h24.co/iOS-HIGs
15
iOS Human Interface Guidelines
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Type of apps
16
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201217
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Serious tool
18
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Fun tool
19
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Fun entertainment
20
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Serious entertainment
21
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Utility
22
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Device constraints
‣ small size
‣ limited hardware
‣ one screen at a time
‣ one application at a time *
‣ touch input
23
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Interaction
‣ gestures (tap, double-tap, drag, flick, swipe, pinch open/close, touch&hold
‣ shake
‣ orientation
‣ audio switch (and volume buttons)
‣ home & power buttons
24
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
User journeys
25
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201226flickr.com/photos/delainahaslam/6582009999/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201227flickr.com/photos/25228175@N08/5044656545/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201228flickr.com/photos/unlistedsightings/1027938595/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201229
It is a concise, concrete declaration of an app’s main purpose and its
intended audience
flickr.com/photos/v50/6319721666/Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201230
step 1
check in
Check in info
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201230
step 1
check in
Check in info
step 2
male
Your gender
female
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201230
step 1
check in
Check in info
step 2
male
Your gender
female
step 3
Select your date of birth
1 2 3
29 30 31
...
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201230
step 1
check in
Check in info
step 2
male
Your gender
female
step 3
Select your date of birth
1 2 3
29 30 31
...
step 4
Select your month of birth
January February March April
May June July August
September October November December
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201230
step 1
check in
Check in info
step 2
male
Your gender
female
step 3
Select your date of birth
1 2 3
29 30 31
...
step 4
Select your month of birth
January February March April
May June July August
September October November December
step 5 - OK, take a seat
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201231
step 1
check in
Check in info
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201231
step 1
check in
Check in info
step 2
Select your month of birth
January February March April
May June July August
September October November December
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201231
step 1
check in
Check in info
step 3
Select your date of birth
2 14 30
step 2
Select your month of birth
January February March April
May June July August
September October November December
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201231
step 1
check in
Check in info
step 3
Select your date of birth
2 14 30
step 2
Select your month of birth
January February March April
May June July August
September October November December
step 4 - OK, take a seat
Case Study: check-in system
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Don’t... Just don’t!
32
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201233
List of features
too manyfeatures?
Filter
Yes
ApplicationDefinitionStatement
Appfeatures
User journeys
Wirefames
Prototype
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Interface design patterns
34
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Interface design patterns
‣ Table view
‣ Navigation controller
‣ Tab bar
‣ Popover & Modal views
‣ SplitViewController
35
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Table view controller
36
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
section header view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
section header view
section footer view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
section header view
section footer view
row 0 view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
section header view
section footer view
row 0 view
row 1 view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
UITableViewController
37
table header view
footer header view
section header view
section footer view
row 0 view
row 1 view
section header view
section footer view
row 0 view
row 1 view
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201238
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Navigation Controller
39
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Navigation Controller
40
mailbox1 mailbox2
message1.1 message1.2 message3.1
TableView
TableView
mailbox3
My Mail
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Navigation Controller
41
Root View Controller
Top View Controller
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Tab Bar Controller
42
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Modal view
43
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Popover view
44
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
SplitViewController
45
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Don’t... Just don’t!
46
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Creating new interfaces
47
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Inventing new interfaces
48
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Path
49
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Path
49
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Path
50
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Instapaper
51
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
52
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201253
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201254
List of features
too manyfeatures?
Filter
Yes
ApplicationDefinitionStatement
Appfeatures
User journeys
Wirefames
Prototype
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Prototyping with Keynotopia
55
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Keynotopia demo: Timers
56
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Storyboarding
57
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201258
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201259
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201260
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201261
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1 62
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
iBooks2
63
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 201264
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Creating an app
‣ create an application definition statement
‣ top down approach
‣ primary task (keep it simple)
‣ ease of use (make it obvious)
65
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Questions?
66
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Demo
67
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Features
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ pomodoro (25min + 5 min)
‣ gym training (5 mins, etc. )
‣ Crud for collections - move timers in list
68
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Timers app
69
A simple to use countdown collection for time conscious individuals.
Serious Tool
ADS
Type
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Keynote tips&tricks
70
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Keynote tips & tricks
71
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Resources
72
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Resources LiTG
http://skillsmatter.com/user-group/os-mobile-server/litghttp://www.linkedin.com/groups?gid=3323860
73
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Resources MagicTou.ch
http://magictou.ch74
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Resources
http://lanyrd.com/guides/ios-london/ http://nsconference.com
75
Tuesday, 24 January 12
Copyright © 2012 Hello24 Ltd. http://hello24.com
iOS Application Development
2nd & 3rd April, London2 DaysWorkshops and Main Conference
Day 1:Hands-on Full Day Workshops - iOS Development with Paul Ardeleanu - Android Fast Track Development with Marko Gargenta - Mobile Web Development (tbc)
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Day 2: Main Conference with 5 tracks - iOS - Android - Mobile Web - Platforms - Mobile Business
International Speakers - Technical Sessions - Great Networking
150 for 150 offer - £150 for 1st 150 places
77
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
One more thing...
78
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Free ticket raffle
Email to: mobile360live@sandsmedia.com
subject: ‘PAUL A RAFFLE’
Ticket draw on Thursday 26th January
79
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Thank you!
80
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Thank you!
stay hungry, stay foolish
80
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Thank you!
stay hungry, stay foolish
paul@hello24.com
80
Tuesday, 24 January 12
SkillsMatter January 2012 Slide Hello24 Ltd. (c) 2012
Thank you!
stay hungry, stay foolish
paul@hello24.com
80
twitter.com/pardel
Tuesday, 24 January 12