:)

Motion Design Guidelines

2018

I worked with Wells Fargo to develop a set of motion design guidelines, as part of a larger brand refresh. The project began with competitive analysis, followed by determining reasoning for how to use motion in the most complementary ways to their brand; it should be thoughtful, succinct and seamless, functioning in the right window between playful and professional.

I did several explorations with sample elements to find what this window would look like, from simple things like toggles and icons to larger screen transitions. They were left with a library of sample elements and source files, along with documentation on easing curves & durations, that their design team could use in all their digital products.

 

As a large part of this was educating the client on successful motion design, I started with the principles that define it.

Goldilocks approach

This method of showing things that are too much motion, not enough, and just the right amount was effective in both exploring the space for this brand, and establishing the sweet spot for future work.

Handoff

Along with these artifacts, I shared the specs: the easing curve and timeline of various elements animating in sequence, to be emulated by a developer building these components.

Now What?