U!Pick Sharing

1. How I came to build a
PROTOTYPE?
For mobile develop

2. My name is
Rice Tseng
Interaction designer, UI Engineer & Visual designer
Almost 2 years ux design experience
2013 Yahoo! Hack Taiwan - Winning 1st place

3. You can
Find me on
website : http://ricetseng.com
dribbble : https://dribbble.com/ricetseng
behance : https://www.behance.net/ricetseng

4. Agenda
1. Design process
2. Key points when you make mobile
prototype
• provide right scenario
• prototype = conversation
• motion design
- animation properties
- time & speed
- authentic motion
- responsive interaction
- meaningful transitions
- delightful details
3. How I came to build a prototype?
4. Prototype tools ( pros, cons,
comparison )

5. 「If a picture paints a thousand words, a prototype
is worth a thousand pictures.」
– Richard Eisermann

6. Design process

7. Isolated design process
( UX Design, IA, VD )
Sketch - Lo-fi wireframes - Hi-fi mockups
scope research design
phase build test
http://blog.twg.ca/2013/05/experiencedesignersinagileteam/

8. Integrated design process
( UX Design, IA, VD, ID, QA )
Sketch - Style Guide - F2E
scope research working
prototype build test
http://blog.twg.ca/2013/05/experiencedesignersinagileteam/

9. working
prototype

10. idea
prototype build
measure
learn
build
measure
iterate

11. Key points when you make mobile prototype

12. 1
mobile prototype should give user
right scenario

14. 2
Prototype =
Conversation

15. Designer Gap Other
RD
PM
Designer
…

17. Hi, Rice
Could you provide
the backward
animation demo to
me?

19. 3
- motion design -
Demo Pinterest with Material Design

21. 3
- motion design -
Animation Properties

22. Position Scale Opacity

23. Position Rotation Scale Anchor Opacity

24. Position Rotation Scale Anchor Opacity

25. z-index

26. Animation by Jeff Broderick

27. color

28. Animation by Rice Tseng

29. 3
- motion design -
Time & Speed

30. Animation by Thomas Bogner

31. Position

32. ease animation
http://easings.net/zh-cn

33. timing & spacing

34. reading the linear transition

35. reading the easing curves

36. Common usage : app menu slide

37. ease-in

38. ease-out

39. start action end
initial properties How long should the animation take?
What’s the element timing?
speed?
Which element is the next animations?
…
final properties

40. 3
- motion design -
Authentic Motion

41. Mass and weight
- DO -

42. Mass and weight
- NG -

44. 3
- motion design -
Responsive Interaction

47. 3
- motion design -
Meaningful Transitions

48. Hierarchical Timing
- DO -
- NG -

51. 3
- motion design -
Delightful Details

53. How I came to build a prototype?

54. UI design animation interaction

55. UI design animation interaction
PS
sketch
keynote
…
AE
keynote
QC
…
framer.js
axure
pixate
invision
Form
…

56. Prototype tools

57. Time/speed：fast
learning curve : low
usability testing : NG
interactions/gesture : NG
animation : average
device testing : NG
pros : presentation
cons : just for animation
Keynote

58. Time/speed：depends on you
learning curve : average
usability testing : NG
interactions/gesture : NG
animation : high
device testing : NG
pros : presentation, demo concept
cons : not interactive
After Effect

61. Time/speed：depends on you
learning curve : average
usability testing : NG
interactions/gesture : OK
animation : high
device testing : NG
pros : interactive animation
cons : screen to screen prototype
QC + Origami

63. Time/speed：depends on you
learning curve : average
usability testing : OK
interactions/gesture : OK
animation : high
device testing : OK
pros : highly interactive
cons : single screen prototype
Framer.js

64. http://j.mp/1yTS1W2

66. Time/speed：high
learning curve : average
usability testing : OK
interactions/gesture : OK
animation : high
device testing : OK
pros : interactive
cons : single screen prototype
Pixate

67. Time/speed：high
learning curve : low
usability testing : OK
interactions: OK
animation : average
device testing : OK
pros : screen to screen prototype
cons : not so flexible
Flinto

68. https://www.flinto.com/p/a9bf0903

70. Thank you
by Rice Tseng