Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Start Prototype from Keynote
Lucien Lee
@Yahoo Design Prototyping Meetup
Meet Lucien
Cofounder - HackNTU
Interaction Designer - Xiami Music, Alibaba Group
Researcher - Mobile and HCI Lab
鹿 尋
Luci...
Designer Developer
!"
Prototyping to me
Explore PersuadeValidate
# $%Iterate your idea Test your idea Convince your idea
Communicate
Prototyping 是⼀個對話的過程
與⾃⼰、與⽤⼾以及你的團隊
Paper Prototype: a user study to test photo social network
Draw Some Toast : the arcade to draw your toast
Xcode Prototype
After Effect Prototype
Lots prototyping tools pop-up
Cost
原型是溝通與成本的平衡
不論是學習成本還是製作成本
How to Choose
Easy-to-Learn Integration Flow
Expressivity
Interaction
Complexity
Criteria
Collaboration Deliverability Community Accessibility
Criteria
Keynote
Keynote Prototyping Performance
Easy-to-Learn
Integration
Flow
Expressivity
Interaction
Complexity
Collaboration
D...
對於不太使用 Digital Prototyping 的人是很好的開始
[ First Step ]
[ In Early Stage ]
在非常早期的發想階段,是一個讓你快速修改、隨意嘗試的素描本

輕量到丟棄 Keynote 原型也不心疼
...
Pros and Cons
Mac
Gesture
ios
優點 缺點
Keynote Prototyping Tips
make.lucienlee.cc/prototyping-your-app-with-keynote
Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]
Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]
RightFont
Painting tools
Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview
[ ]
Disable Click Transition
Motion Blur
Keynote Prototyping
1. Setting
2. Sketching
3.Transition
4. Preview[ ]
Rotation Script
Save the world!
Upload to iCloud
Framer
Invision
Keynote
Other
Flinto
Prototyping Process Survey By Greylock Partners
We don’t have perfect solution
75% de...
Sliver
Adobe Comet
Q&A
Lucien Lee
Lucien Lee
lucienlee
Lucien Lee
http://make.lucienlee.cc
lucien@lucienlee.cc
http://selfecy.com
Start Prototyping From Keynote
Start Prototyping From Keynote
Start Prototyping From Keynote
Upcoming SlideShare
Loading in …5
×

Start Prototyping From Keynote

1,967 views

Published on

Start Prototyping From Keynote
Shared in 2015 Yahoo Design Prototyping Meetup

Published in: Design
  • Be the first to comment

Start Prototyping From Keynote

  1. 1. Start Prototype from Keynote Lucien Lee @Yahoo Design Prototyping Meetup
  2. 2. Meet Lucien Cofounder - HackNTU Interaction Designer - Xiami Music, Alibaba Group Researcher - Mobile and HCI Lab 鹿 尋 Lucien Lee
  3. 3. Designer Developer !"
  4. 4. Prototyping to me Explore PersuadeValidate # $%Iterate your idea Test your idea Convince your idea
  5. 5. Communicate Prototyping 是⼀個對話的過程 與⾃⼰、與⽤⼾以及你的團隊
  6. 6. Paper Prototype: a user study to test photo social network
  7. 7. Draw Some Toast : the arcade to draw your toast
  8. 8. Xcode Prototype
  9. 9. After Effect Prototype
  10. 10. Lots prototyping tools pop-up
  11. 11. Cost 原型是溝通與成本的平衡 不論是學習成本還是製作成本
  12. 12. How to Choose
  13. 13. Easy-to-Learn Integration Flow Expressivity Interaction Complexity Criteria
  14. 14. Collaboration Deliverability Community Accessibility Criteria
  15. 15. Keynote Keynote Prototyping Performance Easy-to-Learn Integration Flow Expressivity Interaction Complexity Collaboration Deliverability Community Accessibility
  16. 16. 對於不太使用 Digital Prototyping 的人是很好的開始 [ First Step ] [ In Early Stage ] 在非常早期的發想階段,是一個讓你快速修改、隨意嘗試的素描本 輕量到丟棄 Keynote 原型也不心疼 [ For your teammate ] 你的夥伴--尤其是 PM ,或許是不會用設計工具的人 Keynote 是讓你的夥伴跟你一起設計的第一步
  17. 17. Pros and Cons Mac Gesture ios 優點 缺點
  18. 18. Keynote Prototyping Tips make.lucienlee.cc/prototyping-your-app-with-keynote
  19. 19. Keynote Prototyping 1. Setting 2. Sketching 3.Transition 4. Preview
  20. 20. Keynote Prototyping 1. Setting 2. Sketching 3.Transition 4. Preview [ ]
  21. 21. Keynote Prototyping 1. Setting 2. Sketching 3.Transition 4. Preview [ ]
  22. 22. RightFont
  23. 23. Painting tools
  24. 24. Keynote Prototyping 1. Setting 2. Sketching 3.Transition 4. Preview [ ]
  25. 25. Disable Click Transition
  26. 26. Motion Blur
  27. 27. Keynote Prototyping 1. Setting 2. Sketching 3.Transition 4. Preview[ ]
  28. 28. Rotation Script
  29. 29. Save the world!
  30. 30. Upload to iCloud
  31. 31. 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
  32. 32. Sliver
  33. 33. Adobe Comet
  34. 34. Q&A
  35. 35. Lucien Lee Lucien Lee lucienlee Lucien Lee http://make.lucienlee.cc lucien@lucienlee.cc http://selfecy.com

×