Start Prototyping From Keynote Shared in 2015 Yahoo Design Prototyping Meetup

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