Reimagining motion visuals

Our motion design system reflects the innovative nature of our product and showcases a collection of animated references to paper being stacked, vibrant color highlights, hand-drawn signatures and authentic customer visuals.

Approach

Motion is used to tell visually impactful stories that resonate with added video, multiple frames, and accompanying messaging.  Visual references to paper sliding, hand-drawn signatures, and simple contracts have been incorporated to the templates to add context and better storytelling to the overall agreement process.

Core motion elements

Our motion design system is made up of several key elements utilizing quick transitions, bold color palettes, brand signature libraries, authentic photography and short headlines.  Large titles should be treated on separate frames rather than incorporating lengthy amounts of text and having users read too quickly.  Motion visuals should try to include only a couple brand elements at a time and not inlcude too many visuals on a single asset.

Type title treatments
Signature elements
Logo bumper treatment
Flexible asset ratio sizes

Concise and impactful

Our overall motion approach should be functional and concise without being overly decorative and complex.  Each story should have a clear message and be simple in typopgraphy choices, graphics, and transitions.  

text animation

Easing and timing

Maintaining easing and timing consistency is an important part of the motion system. Consistent easing adds a level of sophistication to the brand. Motion with incorrect easing can feel jarring and hard to understand.

expo
0.90, 0.00, 0.10, 1.00
expo-out
0.14, 1, 0.34, 1

Do

Use easing functions that employ quick movements.

Don’t

Simulate bouncing or overly playful movements.

TIMING
Consistent timing across all touchpoints will ensure a unified system and allow for each branded video piece to be easily digested and feel seamless.

Motion examples

There are beautiful messages and values to convey through motion and each asset should carry engaging impact communicating as an continuation of the DocuSign brand.

Large placements
Overview of movement and transitions
Contextual motion placements
Social motion elements