An uncommon guide to designing user interfaces and interactive application prototypes using Apple Keynote and Keynotopia user interface libraries

1. How to
Prototype
Like a Pro
Original iPod Prototype

2. A picture
is worth a
thousand
words
A prototype
is worth a
thousand
pictures

3. What's a
prototype?

5. Early version
of an idea

6. Test able
Early version
of an idea

7. This is not
a prototype

8. This is not
a prototype

9. This is

11. Why Prototype?

12. To answer
questions
and generate new ones

13. Validate your
assumptions

14. compare
alternatives

15. Fail
early d
an y
ea pl
ch

16. To Visualize
your ideas

17. To Visualize
your ideas
and share them
with others

18. To Visualize
your ideas
and share them
with others
Team users
investors clients

19. So you till you
Fake it make it

20. What makes
a good
Prototype?

21. Quick
You can create multiple
versions fast
and iterate even faster!

22. Cheap
You wouldn't mind
throwing it away and
starting all over again

23. Favorites Check-in
Chat
Pictures
Minimal
Contains only
core features

24. Testable
You can put it in front of
people and have them try it out
(instead of just telling them about it)

25. Measurable
You can get the
numbers behind what's
working and what's not.

26. And hopefully fun to
create and use

27. How to create
a great
Prototype?

28. 1
Plan

29. Define stories,
and identify tasks

30. Create a user
flow diagram

31. Sketch rough
interface screens
Photo courtesy of StevenVanwel on Flickr

32. 2
Build
Photo courtesy of Mr. T in DC on Flickr

33. Main screen
Login screen
Design main screens

34. Create UI states
Update Status
Profile pop-up highlight update

35. Add user interaction

36. 3
Test

37. Test several
prototypes
To get objective feedback

38. Decide what
to measure
To get accurate feedback

39. Choose the
right users
To get relevant feedback

40. Ask them to
think aloud
To get constant feedback

41. Interview them
at the end
To get even more feedback

42. 4
Refine

43. Discuss results
with your team

44. Integrate findings

45. Test again
with users

46. 5
Share

47. Have your
team play
with the
prototype,
instead of
writing long
specification
documents

48. E nter Key note

49. Design
tool
without
feature
creep

50. clickable
Fast Slow
Low fidelity High fidelity
Proto types

51. Basic
shapes
The ones you need, without the
distraction of the ones you don't need

52. Alignment
and
Snapping

53. Copy Style
Visual K L
styles K L
Quickly share styles across shapes

54. Master
slides
- Less copy/paste
- Update multiple pages
with a single change

55. Hyperlinks
Add user interaction without writing code

56. Slide
Transitions

57. Export
Hyperlinks are preserved!

58. Test on
Device
Without doing any extra work

60. Works with
Adobe suite
Copy
Paste

61. And it costs
less than $25
The whole iWork
suite costs less
than most mock-up
and prototyping tools

62. Key not opia
Largest user interface
library for Keynote
Power point!
and

63. To design
interfaces and
test prototypes
in hours
instead of days

64. Paper
sketches Wireframes HTML /JS /
Flash
Mockups Comps
Fast Slow
low fidelity Finally! high fidelity

65. Hundreds of
UI building
blocks for...

66. iPad

67. iPhone

68. Web/Desktop

69. Android

70. BlackBerry

71. Windows Phone 7

72. and Facebook

73. Thousands of companies use it!

74. And everyone loves it!

75. I love Keynotopia prototyping templates.
Used them to rapidly develop a fitness app
as part of Phoenix Startup Weekend, and
ended up winning the peoples choice and
best presentation!
-Matt Clower, iOS developer
I work for a major corporation and my
prototype consisted of over 150 slides.
Keynotopia turned 60 days worth of work to
20. The executives loved the presentation and
are contemplating implementing the app.
-Shawn Smith, UX Designer
Because it saves time and money!

76. $9 save you 9 hours
Get it at Keynotopia