This document summarizes a presentation by Lucien Lee on using Keynote for prototyping. Some key points: - Keynote is introduced as an easy first step for prototyping, especially for those without experience in digital prototyping tools. It allows for quick modifications and experimentation early in the idea stage. - Keynote can be used to prototype with teammates who are not designers, such as PMs, as it is relatively simple to learn. - Tips are provided on setting up Keynote for prototyping, including sketching screens and transitions, as well as enabling gestures and motion blur. - While simple, Keynote allows expressing basic interactions

1. Start Prototype from Keynote
Lucien Lee
@Yahoo Design Prototyping Meetup

2. Meet Lucien
Cofounder - HackNTU
Interaction Designer - Xiami Music, Alibaba Group
Researcher - Mobile and HCI Lab
鹿 尋
Lucien Lee

3. Designer Developer
!"

4. Prototyping to me
Explore PersuadeValidate
# $%Iterate your idea Test your idea Convince your idea

5. Communicate
Prototyping 是⼀個對話的過程
與⾃⼰、與⽤⼾以及你的團隊

6. Paper Prototype: a user study to test photo social network

7. Draw Some Toast : the arcade to draw your toast

8. Xcode Prototype

9. After Effect Prototype

10. Lots prototyping tools pop-up

11. Cost
原型是溝通與成本的平衡
不論是學習成本還是製作成本

12. How to Choose

13. Easy-to-Learn Integration Flow
Expressivity
Interaction
Complexity
Criteria

14. Collaboration Deliverability Community Accessibility
Criteria

15. Keynote
Keynote Prototyping Performance
Easy-to-Learn
Integration
Flow
Expressivity
Interaction
Complexity
Collaboration
Deliverability
Community
Accessibility

16. 對於不太使用 Digital Prototyping 的人是很好的開始
[ First Step ]
[ In Early Stage ]
在非常早期的發想階段，是一個讓你快速修改、隨意嘗試的素描本
輕量到丟棄 Keynote 原型也不心疼
[ For your teammate ]
你的夥伴－－尤其是 PM ，或許是不會用設計工具的人
Keynote 是讓你的夥伴跟你一起設計的第一步

17. Pros and Cons
Mac
Gesture
ios
優點 缺點

18. Keynote Prototyping Tips
make.lucienlee.cc/prototyping-your-app-with-keynote

19. Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview

20. Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]

21. Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]

22. RightFont

24. Painting tools

25. Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]

26. Disable Click Transition

27. Motion Blur

28. Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview[ ]

31. Rotation Script

32. Save the world!

33. Upload to iCloud

34. Framer
Invision
Keynote
Other
Flinto
Prototyping Process Survey By Greylock Partners
We don’t have perfect solution
75% designer use more that one prototyping tool

35. Sliver

36. Adobe Comet

37. Q&A

38. Lucien Lee
Lucien Lee
lucienlee
Lucien Lee
http://make.lucienlee.cc
lucien@lucienlee.cc
http://selfecy.com