Guest lecture at Queensland University of Technology. For 3rd year IT degree: Mobile Application Development (INB348) and Advanced Multimedia Systems (INB386).

1. Prototype Apps in No Time
Lecture
Tony Wang
iOS Developer, Researcher, Mobile Designer
Copyright © 2014 Tony Wang.

2. Overview
•Why do we need prototyping?
• Process of prototyping
• Tools you would use for prototyping

3. Idea App !

4. In fact
"
Idea App !

5. Idea App !"
zZZ
Time Money People Food Sleep

6. Idea App

7. Idea Prototype App

8. Idea Prototype Prototype App

9. Idea Prototype Prototype Prototype App

10. Idea Prototype Prototype Prototype App
Fake

11. Idea Prototype Prototype Prototype App
Fake More Real

12. What is a Prototype?
A prototype is the first full-scale,
and usually functional !form of a new design.

14. Why do we need a Prototype?
1. Test your ideas
Save time & money building the right things
!
2. Improve your ideas
Provide better experience or functionalities.

15. Make
fake apps

16. Make Fake Apps
•What needs to be real?
• Touches, screen
!
•Fake everything else
• Data, photos, images, text, connectivity
!
•Test on the real devices

17. Make
fake apps
Show
to people

18. Show to People
• Show to the right audience
!
• Do you know how to ___________?
• Is it easy to __________?
• How can we make this better?
!
• Don’t argue or defend, just listen and observe.

19. Make
fake apps
Show
to people
Learn
from feedback

20. Learn from Their Feedback
•What worked well?
•What’s not working?
•What can we potentially do?

21. Make
fake apps
Show
to people
Learn
from feedback

22. Make
fake apps
Show
to people
Learn
from feedback

23. How can we Prototype?

24. Start off with Paper

25. Sketches
• Refine your focus
• No other faster way to do it
• Take other app as examples
• Helps you explore & understand the best direction
for your app
• The worst mistake you can make is to redraw again

26. You don’t have to be a good artist

27. How can we Prototype?
• Start off with paper
• Take advantage of existing tools

28. Take Advantage of Existing Tools
Keynote PowerPoints Skitch

42. How can we Prototype?
• Start off with paper
• Take advantage of existing tools
• Utilise the slide transition as your animation

43. Utilise the Slide Transition
• Slide transition
• Object animation
• Set Timing

45. Fake App Demo

50. Demo

51. Recap
Drew it Faked it Showed it

52. Comparison
Real Code vs Prototype
• UITableView
• Database
• Connection
• Drawing

53. Comparison
Real Code vs Prototype
• MKMapView
• MKAnnotationView
• CLLocationManager
• Screenshots

54. Why do we need a Prototype?
1. Test your ideas
Save time & money building the right things
!
2. Improve your ideas
Provide better experience or functionalities.

55. How we make a prototype?
Make
fake apps
Show
to people
Learn
from feedback

56. Other Tools
InVision (iOS, Android)
http://www.invisionapp.com
!
Fluid UI (Android, iOS, Windows)
https://www.fluidui.com
!
Marvel App (Android, iOS, Windows)
https://marvelapp.com

57. Don’t Engineer it, just hack it.