Animating the UIDesigning for Motion

@angie_terrell

(in Atlanta)

(in Atlanta)

Bestselling guides for software development.

Immersive bootcamps and corporate clients.

Custom apps for clients around the world.

Animating the UIDesigning for Motion

What is animation?

Change over time

Change over timeimage source: R A D I O

Change = Curves (aka easing, spring)

Time = Timing

How can it help my design?

"When interface features are perceived as natural, easy to use and intuitive, users will feel more focused and have more fun during browsing…”

“Positive perception and experience of an interface can translate into more positive attitudes toward the message itself.” Penn State study, 2015

What are its uses?

1.Orientation

2.Direct Manipulation

3.Affordance

4.Feedback

5.Continuity

1. Orientation

2. Direct Manipulation

3. Affordance

4. Feedback

?

5. Continuity

What do I need to know?

?

1. Curves

Linear

Ease In

Ease Out

Bounce

easings.net

2. Timing

3. Properties

Position

Scale

Rotation

Opacity

4. Events/Triggers

What tools can I use?

Keynote Flinto Lite Flinto for Mac InVision Principle Pixate Marvel Framer JS Proto IO After

EffectsCustom

AnimationsScreen 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 **

Simple to Build

Less Functionality

Complex to Build

More Functionality

How do I choose?

What next?

http://bit.ly/1UxzU4r

Animating the User Interface Workshop

10% any class: 10_SXSW16

May 17-18, Atlanta

$50 off: UI50

Thank you.