A presentation at Clarity 2019 in August 2019 in San Francisco, CA, USA by Val Head
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
