How I came to build a prototype for mobile develop
25 likes1,553 views
Rice Tseng is an interaction designer with over 2 years of experience who has won design competitions. The document outlines Rice's process for creating mobile prototypes, including key points like providing the right scenario, using prototypes for conversation, and implementing meaningful motion design through properties like animation, timing, and transitions. Rice explains how they use tools like Keynote, After Effects, Framer.js, and Flinto to create interactive prototypes that can be tested on devices.
More Related Content
Similar to How I came to build a prototype for mobile develop (20)
Recently uploaded (20)
![DaVinci Resolve Studio 20.0.0.23 Crack + Activation Key [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/avtpastoralvisits20252026-250407114051-0c8f0fbf-250407123835-a3322f2f-thumbnail.jpg?width=560&fit=bounds)
![Download Adobe After Effects Crack Latest Version [Updated]](https://cdn.slidesharecdn.com/ss_thumbnails/avtpastoralvisits20252026-250407114051-0c8f0fbf-250407122758-f44f6bbd-thumbnail.jpg?width=560&fit=bounds)
How I came to build a prototype for mobile develop
- 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
- 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/
- 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
- 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
- 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? Whats 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
- 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
- 70. Thank you by Rice Tseng