Motion Design Guidelines for Marketing at Digit
Motion design is powerful tool for engaging and converting users, it can be used to clearly communicate and visualise messages and demonstrate product features. At Digit our mission is to make financial health effortless for everyone so all motion design we produce should in some way be working towards this goal while taking an approach that’s simple, approachable and intelligent. These guidelines define best practices to create a unified brand identity across all motion design content with a consistent level of polish to aid in establishing trust with our users.Pacing
Attention spans these days are only getting shorter so it’s increasingly important that pacing in marketing specific motion design be quick, fluid and continuous naturally drawing the eye and guiding the viewer from one element to the next. Objects should move fast enough to keep viewers engaged, but slow enough that they can understand what’s going on. Avoid excessive motion maintaining awareness of all the elements within your scene that could distract to ensure you’re not drawing the viewer away from the intended message.Examples:
Overdraft Tutorial
Easing
Easing is used to alter the velocity of a graphic as it translates through a scene. While it may seem subtle, it’s one of the keys to crafting powerful motion and has a major influence over how animation is perceived. In service to our rapid pacing we take an aggressive approach to easing applying extreme speed influences mirroring the way objects interact in the physical world to make the motion snappy while still feeling smooth.Ease Out (Accelerate)
Use Case: Graphics that are exiting a scene.Description: Gives the element a sense of rising power as it gradually accelerates allowing a few extra moments for comprehension before rapidly exiting the scene and making way for fresh content to fill the void.
Timing: use quicker duration than Ease In to rapidly remove consumed content from the scene and shift attention towards new content.
Influence: (Out - 85%, In - 0%)
Ease In (Decelerate)
Use Case: Graphics are entering a sceneDescription: The element snaps on the screen rapidly giving the feeling that it has traveled from a long distance before smoothly slowing to a halt allowing the eye to track them and begin comprehending as they settle into place.
Timing: Longer than Ease Out to allow enough time to shift attention towards new graphics as they enter the scene
Influence (Out - 0%, In - 85%)
Aggressive Ease (Translate)
Use Case: Graphics that are translating within a scene or when transitioning from one scene to the next. Description: The element slowly accelerates then rapidly translates before slowly decelerating into its resting place. This motion commands attention and draws the eye to a new portion of the screen
Timing: Elements translating across a scene should have a length appropriate to the distance they travel.
Influence (Out - 85%, In - 85%)
Directionality
Just as our easing principals mirror the rules of physical motion so too does our approach to the directionality in motion. All motion should intentionally guides your viewer's eyes from one element to another. When graphical elements translate, avoid unnatural intersections and tangents. Keep in mind where graphics are coming from and where they're going, to create a continuous flow from one element or one scene to the next.Motion Blur
Motion blur is the streak-like effect that occurs naturally both in the human eye and cameras when objects move rapidly through a scene. It should be used across all elements in a scene to add a natural feeling to the movement.Motion blur can also be used as a tool to hide a cut or transitions in an on screen element while they translate and can be a good way to keep the pacing moving quickly.