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.

1. Animating the UI
Designing for Motion

2. @angie_terrell

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

9. What is animation?

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?

20. 1.Orientation
2.Direct Manipulation
3.Affordance
4.Feedback
5.Continuity

21. 1. Orientation

26. 2. Direct Manipulation

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

59. 4. Events/Triggers

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.