A presentation at Clarity 2019 in 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
When your type and color say one thing, but your use of animation says another, things can get confusing. Defining how your brand should express itself in motion gives you the “why” of your UI animation efforts, and establishes a concrete way to ensure your UI animations share a common thread both with each other, and with the rest of your design efforts.
In this session, Val will show you how to harness the design details of UI animation to reinforce your intended design messaging. By using every tool at our disposal, we can create more expressive products that feel cohesive across all of today’s diverse contexts.
Here’s what was said about this presentation on social media.
for free. You
can too.