Motion graphics use moving visual elements to explain, identify or organise information. Start with the message and storyboard, then decide which elements need movement and how the result will be delivered. An animated title, reusable editing template and interactive website effect are different outputs with different acceptance checks.
Adobe documents Motion Graphics templates as customisable packages that can include titles, logo animations and lower thirds. W3C’s accessibility guidance distinguishes non-essential interaction-triggered animation from other movement. Use those boundaries to brief the work without assuming a polished animation is automatically accessible or suitable for every destination. Adobe template workflow, W3C animation guidance.
What should the storyboard explain before animation starts?
Write the intended audience, message and useful action. Then break the sequence into meaningful states: what appears, what changes and what the viewer should understand after each change. A list of effects is not a storyboard.
Keep factual claims attached to their sources. If the sequence presents a service, product or result, use actual approved information rather than adding a numerical claim to make the movement feel purposeful. Do not invent client examples or imply that illustrative subjects are real staff or customers.
Identify what must remain understandable when sound is unavailable and when motion is reduced or absent. The information hierarchy should not depend entirely on a fast transition or an audio cue. These are requirements to evaluate, not claims that a particular finished sequence already satisfies them.
Which output does the project actually need?
| Output | Purpose | Evidence to request |
|---|---|---|
| Rendered sequence | A fixed video or animated deliverable | Playback on the actual destination and required variants |
| Editable project | Continued design or production work | Source, dependencies and usable editing instructions |
| Motion Graphics template | Controlled editorial reuse | Exposed properties and a tested edit in the intended application |
| Interactive web effect | Movement tied to a website action | Reduced-motion behaviour and functional fallback |
This is an original delivery comparison. It does not promise that one file can serve every route or that all software versions interpret it identically. Agree the actual destination and editor before producing the final package.
What does an Adobe motion template provide?
Adobe describes .mogrt files as packages that can be shared with editorial teams. The documented workflow can expose properties such as text, fonts, colour, size, speed or layout while retaining a consistent design.
That is useful when editors need to change a title or lower third without redesigning the sequence. It does not mean every property is editable in every template. Inspect the actual controls and test the intended change.
Keep the reusable template separate from the master project and rendered output. A handover should identify which files are supplied, required applications and any dependencies. A sample render demonstrates appearance; it does not establish that the recipient can edit the underlying sequence. Adobe Motion Graphics templates.
How should movement be justified?
Use motion to reveal a relationship, explain a change or guide attention where it serves the message. Do not add parallax, zooms or spinning elements simply because the tool makes them easy to apply.
W3C’s SC 2.3.3 addresses non-essential animation triggered by interaction and is identified as a Level AAA criterion. It explains that such animation can be disabled unless essential to the information or functionality. This is a specific requirement, not a statement that checking one effect establishes complete WCAG conformance.
The same guidance distinguishes automatically initiated movement under another criterion. Therefore a website’s reduced-motion response, an autoplay sequence and an interaction-triggered transition need their applicable checks rather than one vague animation-accessibility checkbox.
An original storyboard-to-export acceptance record
Use this record for the actual sequence:
Message: the information the viewer should understand.
States: storyboard frames and the meaning of each transition.
Source evidence: approved wording, data and asset provenance.
Movement purpose: why each significant motion is needed.
Static understanding: what remains clear without the animation.
Editing scope: properties the recipient can change and those intentionally fixed.
Dependencies: fonts, linked media, plugins or application versions required.
Delivery: destination-specific output, dimensions and other agreed technical requirements.
Accessibility checks: relevant motion controls, alternatives and actual observed behaviour.
Acceptance evidence: playback, edit test, unresolved defects and supplied file references.
The record is an original production artefact. It does not certify accessibility or imply that every template can expose every listed control. Fill it with results from the actual files.
How should reduced-motion behaviour be tested?
For interactive web work, enable the relevant reduced-motion preference and repeat the triggering action. Check whether unnecessary movement is removed while the information and function remain available. W3C identifies user-agent and operating-system reduced-motion preferences as a relevant approach.
Do not simply hide the entire content block to remove movement. The viewer still needs the information the animation was meant to communicate. Inspect the resulting state and keyboard or other relevant interaction as part of the actual implementation.
For a fixed sequence, agree the appropriate accessible alternatives and destination requirements separately. This article does not claim that a static file or one playback test resolves every audio, visual or interaction need. W3C scope and examples.
What should the final handover preserve?
Retain the agreed storyboard, final render, editable deliverables and dependency list. Label illustrative concept work accurately and keep rights information with the source assets. Do not distribute a third party’s marketing artwork as if it were an original brand asset.
Test a representative edit in the intended receiving environment. Replace the text with a realistic longer example and inspect wrapping, timing and layout. A template that looks correct only with its sample wording has not yet demonstrated the intended reuse.
Discuss the visual brief through Spout’s logo and brand design service or start an enquiry to establish the specific motion scope and deliverables.
Show a still frame at the decision point in the storyboard and ask what information disappears when motion is removed. If the answer is the main instruction, prepare a clearer static equivalent before animation begins. Then compare the final render with that frame and the agreed message. This is an editorial production check rather than a measured accessibility result, but it makes the reason for each movement reviewable and reduces dependence on decorative motion to carry essential meaning.
Specify the web delivery and reduced-motion behaviour in the web development brief separately from the editable motion file.
By Spout Team. Prepared with AI-assisted drafting using the linked primary documentation.