Prototyping is often a misunderstood subject especially when it comes to mobile apps. It is often mistaken for wireframing or detailed project specifications.
In this talk, Paul Ardeleanu -- author of Skills Matter's Intro and Advanced iOS training courses -- discusses the tools available and shares his personal expediencies leading a team of iOS and Android developers.
Topics will range from wireframing, asserting your friend's idea, dealing with "troublesome" clients/projects, handling miscommunication between developers, project managers and designers. Based on an idea from attendees, Paul will attempt to create a rough prototype
3. The plan
‣ HIG’s & ADS
‣ User journeys
‣ Interface design patterns
‣ Creating new interfaces
‣ Keynotopia
‣ Storyboarding
‣ Demo
SkillsMatter January 2012 Slide 3 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
4. Development vs. Design
SkillsMatter January 2012 Slide 4 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
5. Development vs. Design
Traditional
Design, UX
PM
Code
Deployment
Debug&Test
SkillsMatter January 2012 Slide 4 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
7. Development vs. Design
Traditional
Design, UX
PM
Code
Deployment
Debug&Test
SkillsMatter January 2012 Slide 6 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
8. Development vs. Design
Traditional Mobile
Design, UX
Code
PM
Code
Deployment
Prototyping, UX, design
Debug&Test
Debug&Test PM
SkillsMatter January 2012 Slide 6 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
9. Let’s start from the beginning
flickr.com/photos/seretuaccidente/ SkillsMatter January 2012 Slide 7 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
10. There is no such thing as a bad idea!
flickr.com/photos/andyandorla/ SkillsMatter January 2012 Slide 8 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
14. What to expect?
SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
15. 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!
SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
16. 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
SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
17. 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
SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
18. 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
SkillsMatter January 2012 Slide 12 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
19. List of
features
Filter
too many
Yes
features?
App
features
Application
Definition
User journeys Statement
Wirefames
Prototype
SkillsMatter January 2012 Slide 13 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
20. List of
features
Filter
too many
Yes
features?
App
features
Application
Definition
User journeys Statement
Wirefames
Prototype
SkillsMatter January 2012 Slide 13 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
22. Application Definition Statement
It is a concise, concrete declaration of an app’s
main purpose and its intended audience.
SkillsMatter January 2012 Slide 15 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
23. Application Definition Statement
It is a concise, concrete declaration of an app’s
main purpose and its intended audience.
iOS Human Interface Guidelines
h24.co/iOS-HIGs
SkillsMatter January 2012 Slide 15 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
24. Type of apps
SkillsMatter January 2012 Slide 16 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
26. Serious tool
SkillsMatter January 2012 Slide 18 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
27. Fun tool
SkillsMatter January 2012 Slide 19 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
28. Fun entertainment
SkillsMatter January 2012 Slide 20 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
29. Serious entertainment
SkillsMatter January 2012 Slide 21 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
30. Utility
SkillsMatter January 2012 Slide 22 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
31. Device constraints
‣ small size
‣ limited hardware
‣ one screen at a time
‣ one application at a time *
‣ touch input
SkillsMatter January 2012 Slide 23 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
32. Interaction
‣ gestures (tap, double-tap, drag, flick, swipe,
pinch open/close, touch&hold
‣ shake
‣ orientation
‣ audio switch (and volume buttons)
‣ home & power buttons
SkillsMatter January 2012 Slide 24 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
33. User journeys
SkillsMatter January 2012 Slide 25 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
37. It is a concise, concrete declaration of an app’s
main purpose and its
intended audience
flickr.com/photos/v50/6319721666/ SkillsMatter January 2012 Slide 29 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
38. Case Study: check-in system
step 1
Check in info
check in
SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
39. Case Study: check-in system
step 1 step 2
Check in info Your gender
check in male female
SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
40. Case Study: check-in system
step 1 step 2
Check in info Your gender
check in male female
step 3
Select your date of birth
1 2 3
...
29 30 31
SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
41. Case Study: check-in system
step 1 step 2
Check in info Your gender
check in male female
step 3 step 4
Select your date of birth Select your month of birth
January February March April
1 2 3
... May June July August
September October November December
29 30 31
SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
42. Case Study: check-in system
step 1 step 2
Check in info Your gender
check in male female
step 3 step 4
Select your date of birth Select your month of birth
January February March April
1 2 3
... May June July August
September October November December
29 30 31
step 5 - OK, take a seat
SkillsMatter January 2012 Slide 30 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
43. Case Study: check-in system
step 1
Check in info
check in
SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
44. Case Study: check-in system
step 1 step 2
Select your month of birth
Check in info
January February March April
May June July August
check in September October November December
SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
45. Case Study: check-in system
step 1 step 2
Select your month of birth
Check in info
January February March April
May June July August
check in September October November December
step 3
Select your date of birth
2 14 30
SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
46. Case Study: check-in system
step 1 step 2
Select your month of birth
Check in info
January February March April
May June July August
check in September October November December
step 3
Select your date of birth
step 4 - OK, take a seat
2 14 30
SkillsMatter January 2012 Slide 31 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
47. Don’t... Just don’t!
SkillsMatter January 2012 Slide 32 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
48. List of
features
Filter
too many
Yes
features?
App
features
Application
Definition
User journeys Statement
Wirefames
Prototype
SkillsMatter January 2012 Slide 33 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
49. Interface design patterns
SkillsMatter January 2012 Slide 34 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
78. List of
features
Filter
too many
Yes
features?
App
features
Application
Definition
User journeys Statement
Wirefames
Prototype
SkillsMatter January 2012 Slide 54 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
89. Creating an app
‣ create an application definition statement
‣ top down approach
‣ primary task (keep it simple)
‣ ease of use (make it obvious)
SkillsMatter January 2012 Slide 65 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
90. Questions?
SkillsMatter January 2012 Slide 66 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
91. Demo
SkillsMatter January 2012 Slide 67 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
92. 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
SkillsMatter January 2012 Slide 68 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
93. Timers app
ADS
A simple to use countdown collection for time
conscious individuals.
Type
Serious Tool
SkillsMatter January 2012 Slide 69 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
94. Keynote tips&tricks
SkillsMatter January 2012 Slide 70 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
95. Keynote tips & tricks
SkillsMatter January 2012 Slide 71 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
96. Resources
SkillsMatter January 2012 Slide 72 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
97. Resources LiTG
http://skillsmatter.com/user-group/os-mobile-server/litg
http://www.linkedin.com/groups?gid=3323860
SkillsMatter January 2012 Slide 73 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
98. Resources MagicTou.ch
http://magictou.ch
SkillsMatter January 2012 Slide 74 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
101. 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
SkillsMatter January 2012 Slide 77 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
102. One more thing...
SkillsMatter January 2012 Slide 78 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
103. Free ticket raffle
Email
to: mobile360live@sandsmedia.com
subject: ‘PAUL A RAFFLE’
Ticket draw on Thursday 26th January
SkillsMatter January 2012 Slide 79 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
104. Thank you!
SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12
105. Thank you!
stay hungry, stay foolish
SkillsMatter January 2012 Slide 80 Hello24 Ltd. (c) 2012
Tuesday, 24 January 12