Ways to be expressive in design: Type, Copy, Colour, Layout, Motion…

Motion says things…

Defining your brand in motion

Defining your brand in motion • How much do you rely on motion for your messaging? What qualities of motion will match your messaging? • • Where will motion be used?

How do you describe yourself?

Expressing personality with motion

How we style animation: • Through our easing choices (ease-in, ease-out, ease-in-out, bounce, springs…) • Duration values, offsets • The properties we animate

Aiming for: Calm, Soft, Reassuring Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes

transition: filter 200ms $ease-in-quad, opacity 150ms 50ms $ease-in-quad; blur opacity

(Some of) The Penner Easing Equations !”#!$%&’%! !”#!()&’%! !”#!$%()&’%! !”#!$%+)”, !”#!()+)”, !”#!$%.)/’0 !”#!().)/’0 !”#!$%().)/’0 !”#!$%+)”- !”#!()+)”- !”#!()+)’% !”#!$%()+)’% !”#!’%1234 !”#!()1234 !”#!$%+)’% See them in action on easings.net !”#!$%()+)”, !”#!$%()+)”-* !”#!$%()*1234

Aiming for: Calm, Soft, Reassuring !”#!$%&’%! !”#!()&’%! !”#!$%()&’%!

Aiming for: Calm, Soft, Reassuring !”#!$%&’”( !”#!)’&’”( !”#!$%)’&’”(

Aiming for: Confident, Stable, Strong Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots

Aiming for: Confident, Stable, Strong

Aiming for: Confident, Stable, Strong

Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, “snappy” easing curves.

Aiming for: Lively, Energetic, Friendly

Aiming for: Lively, Energetic, Friendly

Aiming for: Playful, Fun, Lighthearted Use: Bounces, shape morphs, squash and stretch

Designing Interface Animation designinginterfaceanimation.com

Thank you! Newsletter: uianimationnewsletter.com Let’s chat on twitter: @vlh