Animating the UI - Angie Terrell
8 likes5,207 views
The document discusses the importance of animation in user interface design, highlighting how it enhances user experience and engagement. It outlines various uses of animation such as orientation, direct manipulation, and feedback, along with essential knowledge about curves, timing, and properties. Additionally, it provides information on tools for creating animations and details about an upcoming workshop in Atlanta.
Animating the UI - Angie Terrell
- 1. Animating the UI Designing for Motion
- 3. (in Atlanta)
- 4. Bestselling guides for software development. Immersive bootcamps and corporate clients. Custom apps for clients around the world.
- 5. Animating the UI Designing for Motion
- 10. Change over time
- 11. Change over time image source: R A D I O
- 12. Change = Curves (aka easing, spring) Time = Timing
- 13. How can it help my design?
- 15. "When interface features are perceived as natural, easy to use and intuitive, users will feel more focused and have more fun during browsing…”
- 16. “Positive perception and experience of an interface can translate into more positive attitudes toward the message itself.” Penn State study, 2015
- 19. What are its uses?
- 21. 1. Orientation
- 30. 3. Affordance
- 33. 4. Feedback
- 34. ?
- 38. 5. Continuity
- 43. What do I need to know?
- 44. ?
- 45. 1. Curves
- 47. Linear
- 48. Ease In
- 49. Ease Out
- 50. Bounce
- 51. easings.net
- 52. 2. Timing
- 54. 3. Properties
- 55. Position
- 56. Scale
- 57. Rotation
- 58. Opacity
- 61. What tools can I use?
- 64. Keynote Flinto Lite Flinto for Mac InVision Principle Pixate Marvel Framer JS Proto IO After Effects Custom Animations Screen Linking Vertical Scrolling Horizontal Scrolling Layer Support Basic Gestures Advanced Gestures Conditional Logic Price FREE $20/mo $99 $0-99/mo $99 $5-15 mo $0-42/mo $99 $24-160/ mo **
- 65. Simple to Build Less Functionality Complex to Build More Functionality
- 66. How do I choose?
- 71. What next?
- 72. http://bit.ly/1UxzU4r Animating the User Interface Workshop 10% any class: 10_SXSW16 May 17-18, Atlanta $50 off: UI50
- 73. Thank you.