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.

Animating the UI - Angie Terrell

4,001 views

Published on

Animating the UI is a talk that I've given at SXSW, amUX, IXDA, amongst other meet ups.

This presentation is comprised of the uses of animation in UI design, how animation can achieve essential interaction design principles, and tools that designers can use for prototyping.

I will be leading a 6-hour workshop with demos and exercises using best tools on May 16-17, 2016. Find more information here: http://bit.ly/1TbF32v
NR_2016.3.1_SociaL for a $50 discount.

Published in: Design

Animating the UI - Angie Terrell

  1. 1. Animating the UI Designing for Motion
  2. 2. @angie_terrell
  3. 3. (in Atlanta)
  4. 4. Bestselling guides for software development. Immersive bootcamps and corporate clients. Custom apps for clients around the world.
  5. 5. Animating the UI Designing for Motion
  6. 6. What is animation?
  7. 7. Change over time
  8. 8. Change over time image source: R A D I O
  9. 9. Change = Curves (aka easing, spring) Time = Timing
  10. 10. How can it help my design?
  11. 11. "When interface features are perceived as natural, easy to use and intuitive, users will feel more focused and have more fun during browsing…”
  12. 12. “Positive perception and experience of an interface can translate into more positive attitudes toward the message itself.” Penn State study, 2015
  13. 13. What are its uses?
  14. 14. 1.Orientation 2.Direct Manipulation 3.Affordance 4.Feedback 5.Continuity
  15. 15. 1. Orientation
  16. 16. 2. Direct Manipulation
  17. 17. 3. Affordance
  18. 18. 4. Feedback
  19. 19. ?
  20. 20. 5. Continuity
  21. 21. What do I need to know?
  22. 22. ?
  23. 23. 1. Curves
  24. 24. Linear
  25. 25. Ease In
  26. 26. Ease Out
  27. 27. Bounce
  28. 28. easings.net
  29. 29. 2. Timing
  30. 30. 3. Properties
  31. 31. Position
  32. 32. Scale
  33. 33. Rotation
  34. 34. Opacity
  35. 35. 4. Events/Triggers
  36. 36. What tools can I use?
  37. 37. 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 **
  38. 38. Simple to Build Less Functionality Complex to Build More Functionality
  39. 39. How do I choose?
  40. 40. What next?
  41. 41. http://bit.ly/1UxzU4r Animating the User Interface Workshop 10% any class: 10_SXSW16 May 17-18, Atlanta $50 off: UI50
  42. 42. Thank you.

×