Motion

Motion infuses our brand with energy and dimension, elevating static elements into dynamic experiences that engage and delight.

Our thoughtful approach to movement creates a signature feel that enhances usability while reinforcing our personality through carefully crafted transitions, easing, and timing. 

Motion Principles

Clear

When we use motion, its purpose is to transform complex concepts into simple and understandable ones. Transitions and animations should guide, not distract.

Structured

While motion inherently adds delight, it should still feel refined and intentional. A viewer should never feel that motion is surprising or jarring.

Empowering

Motion should help a viewer feel that they are in control. When we create animation, a primary goal should be to show viewers that we are leaders in the subject matter.

Delightful

Motion adds emotion to the brand. Through the use of glows, reflections, shadows, light, and camera movements, we create a sense of delight.

Logo Animation

The logo is the core brand element, and should be animated consistently whenever used in motion. Use this animation when bringing the Docusign logo onscreen.

Intro Animation—The footage shrinks slightly as it passes through the nexus window.
Outro Animation—The footage expands slightly as it passes through the nexus window.

Camera & Framing

The use of a 3D camera is foundational to the look and feel of Docusign’s product UI treatment. It adds a dynamic component to the storytelling process.

Transitions

Window—The Shape of Agreements can be used as a general transition for impactful moments. It can also be used when transitioning from graphic elements to footage.

Scroll—Footage zooms out slightly and scrolls up or down depending on context, masked by an extended shape of agreements container.

Devices

Refrain from placing the interface into "device" lockups such as smartphones or tablets. Always leave the user interface to sit freely on the canvas. Rounded corners can be applied to remove sharpness.

Abstract Backgrounds

When working with abstract backgrounds, you should always work with a color palette that complements the existing brand palette.

When working with abstract backgrounds, you should always work with a color palette that complements the existing brand palette.

You should always look to use micro/macro graphical elements. The applied affect will  help provide contrast and aid in not distracting from the main focus of the content.

8

Video

Rotate your device to view this website.