Purpose of this guide. This guide explains what motion design is for, how to write a useful storyboard, choose the right technique, protect accessibility and performance, and assess impact beyond view counts.
Animation has no inherent value. Its value lies in making change easier to perceive: causality, hierarchy, state, trajectory or identity.
The first professional step is therefore to state the function before opening the software. “Show that the file leaves the device and reaches a secure space” is an objective. “Add a smooth transition” is not.
1. Key figures: video use, file weight and obligations are all increasing
The 2025 Web Almanac is based on a corpus of 16.2 million sites and 244 terabytes of data. In this corpus, 6.40 % of desktop pages and 5.68 % of mobile pages There was a video element, compared with 5.87% and 5.13% respectively in 2024.
The video weight of the median page increased by 28% in one year, of 246 kB in 2024 to 315 kB in 2025. For video resources, the median was 247 kB on desktop and 384 KB on mobile At the 75th percentile, it rose to 1,383 kB and 1 871 kB. The production motion must therefore include a transfer budget, not just a creative budget.
On mobile home pages containing a video, the Almanac Web observed 512 KB at median and 6.1 MB at 90th percentile. A mobile context does not in itself guarantee a lightweight file.
Media accessibility remains low in the same report: HTML element <track>, which provides in particular subtitles and synchronised descriptions, appeared around 0.4 % on desktop and 0.2% mobile in 2025. The report states that progress since 2024 remains limited.
WCAG 2.2 sets out several concrete safeguards. An animated, flashing or scrolling content that automatically starts, hard more than five seconds and coexist with other contents must be able to pause, stop or hide, unless necessary. Flashes exceeding three per second are subject to strict thresholds due to the risk of seizures.
2. The five legitimate functions of motion
Each sequence should assume a primary function.
2.1. Orient
Displacement reveals where an element comes from and where it goes. A sheet that slides to an archive explains the relationship better than a disappearance followed by an appearance without continuity.
2.2. Prioritise
The temporal order decides what the eye sees first. A title, evidence and action must not enter simultaneously if they require successive readings.
2.3. Explain
A transformation, flow or invisible mechanism becomes observable. Motion is especially effective when space and time form part of the explanation.
2.4. Respond
A micro-interaction confirms that the system has received the action, shows its state and indicates the next possibility. This feedback belongs to use, not decor.
2.5. Express the brand
Acceleration, morphology, transition or repeated sound pattern becomes a distinctive asset. The signature must not prolong each task to exist.
When two functions conflict, use dominates. A spectacular brand animation has no automatic claim to an urgent payment.
3. The motion brief
The brief indicates public, context, screen, available sound, duration, message, expected action and metric. It also specifies the life of the content: two-week campaign, sustainable onboarding, daily component or trade-show film.
We write three sentences.
- Before the sequence, the public believes or understands...
- The audience must first observe...
- Then they can understand or act...
This formulation forces the link with real change. In an educational video, the measure can be a correct answer. For a product transition, it becomes perceived continuity, absence of error or task time. In a campaign, we distinguish attention, understanding, attribution and conversion.
The medium also shapes the writing. A video watched without sound requires visual narration and subtitles. A public screen must be understood remotely. An interface cannot immobilise users during a three-second signature at each opening.
4. The brand motion grammar
A brand already has colour, shape, typography and composition. The motion adds duration, trajectory, acceleration, rhythm, depth, transition, camera behaviour and relationship to sound.
4.1. Duration
Three or four families are often enough: instant feedback, short transition, complex transformation and narrative sequence. Values are benchmarked, then tested on real devices.
4.2. Accelerations
A soft curve is not suitable for everything. An input can decelerate, an output accelerates and a physical response bounces slightly. The choice translates mass, precision and temperament.
4.3. Trajectories
Straight line, arc, propagation, expansion or assemblage tell different relationships. They must remain consistent with the geometry of identity.
4.4. Continuity
A persistent element can change between two screens. This continuity reduces the break and reinforces a distinctive gesture.
4.5. Sound
The sound informs, confirms and memorises, but it is never supposed to be available. Important events have a visual alternative; important visual information, an audio or textual alternative when necessary.
The document includes examples, counter-examples and versions with reduced movement. A list of arbitrary duration values is not enough to guide a new situation.
5. Write the storyboard around evidence
The storyboard is not only a succession of images. Each shot has a purpose and supporting evidence.
| Time | Idea | What moves | Evidence | Voice or text | Action |
|---|---|---|---|---|---|
| 0–3 s | problem | dispersed signal | three inconsistent sources | "Your numbers diverge" | remain |
| 3–8 s | mechanism | converging flows | visible rules | "A definition, controls" | understand |
| 8–12 s | result | stable table | deviation resolved | "Decides on the same basis" | discover |
The evidence column prevents hollow promises. An animated shield does not demonstrate security. It must be based on an honest control, certification, architecture or result.
I'm getting here early. Simple images with timing, voice and sound detect a sequence too long before rendering. The text is read out loud. Breaths, subtitles and observation times are incorporated.
6. Select the technique that fits the problem
Typing motion. Fast and precise for prioritising a message; requires sufficient reading and subtitles when the voice is meaningful.
Vector 2D animation. Adapted to concepts, interfaces and systems; light if shapes remain controlled.
Data animation. Watch evolution and comparison; demand honest axes, units and temporality.
3D. Useful for volume, matter, absent product or spatial phenomenon; more expensive in preparation, rendering and adaptation.
Stop motion or shooting. Brings material and singularity; late corrections are less flexible.
Animation in the code. Ideal for interactions and dynamic content; it must live with the performance, condition and accessibility of the product.
Pre-release video. Stable and compatible; less adaptable to themes, languages and data.
The output format must not dictate the design. A GIF may seem convenient, but lack control, text track and efficiency over other solutions. The choice compares quality, weight, transparency, control, compatibility, indexing and maintenance.
7. Design for attention without stealing it
The movement automatically attracts the eye. This property becomes a rare resource.
Only one main area moves at a given moment in a dense interface. Decorative animations stop. Readable content remains motionless for a long time. Automatic carousels do not replace an editorial hierarchy.
The contrast of movement counts as much as its presence. If everything floats, pulses and appears, there is no indication of importance. An almost quiet interface can reserve a clear shift to change that really deserves attention.
For narration, the assembly builds an alternation. Complex plans have breaks. A five-line text should not disappear because the musical rhythm is commanding.
8. Accessibility: providing equivalent experience
Preference preference-reduced-motion indicates that the person wishes to limit non-essential movements. The reduced version is designed, tested and documented. It maintains relationship, state and result without significant displacement.
WCAG 2.3.3 is used to disable non-essential animation triggered by interaction at the AAA level. Criterion 2.2.2 requires control for certain automatic contents longer than five seconds. Flash requirements must be checked with appropriate tools, not by eye.
Videos provide synchronised subtitles. Audio description or a text alternative describes visual information that is not present on the audio track. The controls are usable on the keyboard, named and visible.
A static version does not involve removing content. If an animation shows six steps of a mechanism, the alternative can be an annotated illustration or a sequence of panels. Equivalency refers to information.
9. Performance: the budget belongs in the storyboard
The budget sets initial weight, delayed weight, CPU, memory, images per second and impact on Core Web Vitals. The measurements are made on median mobile, forced network and energy saving mode when the context requires it.
The video in the background is loaded only after the priority content, with optimised poster and adapted sources. It can be disabled on small screens or data reduction preferences. Essential text is never integrated only in pixels.
The code focuses on properties that avoid recalculations of layout, while monitoring the cost of layers and effects. The animation is suspended offscreen. Libraries are not added for an elementary transition.
A long sentence summarises the compromise: when a multi-megabyte hero video delays the main content, consumes a mobile visitor's data allowance, resumes without control, does not bring any information missing from the fixed image and does not produce measurable improvement in understanding or attribution, its rendering quality is no longer sufficient to defend it as a design decision.
10. Produce with checkpoints
Production advances by validations which become progressively expensive to modify.
1. Script and evidence. The substance is validated by the relevant business teams.
2. Storyboard. Composition, continuity and information are verified.
3. Animatic. Timing, voice, subtitles and rhythm are tested.
4. Style frames. Visual direction is approved without simulating the entire film.
5. Prototype of movement. Signature behaviours are compared.
6. Production. Asset, animation, sound and versions progress in a shared nomenclature.
7. QA. Content, spelling, rights, colour, audio, accessibility, weight and devices are checked.
8. Master files and adaptations. Ratios, languages, durations, subtitles and posters are generated from a controlled source.
Returns name the problem and the criterion. "Make more dynamic" does not help. "The mechanism is understood only after the voice; the image must show the link before the second 6" provides direction.
11. Measure by function
For an explanation, we measure recall, correct understanding, errors and ability to reformulate. For a product, task time, abandonment, accidental clicks, stability and perception of continuity. For a brand, recognition, attribution and competing confusion. For a media, completion, retention and action are interpreted alongside distribution context.
The completion rate naturally favours short formats. It does not prove understanding. Views depend on the autoplay and the platform. The activated sound, subtitles and real visibility provide context.
The tests compare a precise hypothesis. An animation can increase attention while reducing understanding. Metrics remain separate long enough to make this compromise visible.
12. Adapt motion to channels without losing grammar
A master sequence is not simply cropped. Vertical format requires another composition, square another density, wide screen another trajectory. The essential message remains in the safe area of each platform.
The adaptation plan defines aspect ratios, durations, bitrate, loop, poster, subtitles, sound level and call to action. It separates organic exports, advertising, product, event and public screen.
The first seconds are not overloaded to "beat the scroll". They must create an understandable problem or evidence. Identity appears early enough for attribution, without delaying profit after a lengthy introduction.
For each adaptation, the team checks that the text remains legible on the real device, that the cropping does not cut off the action, that the file respects the budget, that the sound is not indispensable, that the subtitles do not cover the interface of the platform and that the reduced version retains the information; this control seems tedious, but it costs less than a campaign whose master only works in the presentation format of the studio.
13. Localise timing, not only words
A translation changes length, rhythm and sometimes order of information. The voice off localised receives a new timing; artificially accelerating the diction degrades understanding.
Texts in the image remain editable. Subtitles follow segmentation, playback speed, punctuation and identification of speakers. Numbers, dates and units are adapted.
The gestures, colours, characters and metaphors are reviewed with people in the target market. An animation can be technically identical and culturally ambiguous.
When several languages are provided, the structure leaves space from the storyboard. Sound production separates voices, music and effects to facilitate versions. Masters and scripts remain linked by an ID.
14. Motion library and maintenance
Recurring behaviours become components: logo, transition, feedback, loading, graphics, titles and ends. Each entry contains source, duration, variants, reduced version, usage and code when necessary.
The library avoids copying rendered files. It retains source settings and supports future updates. Software dependencies and plugins are documented to keep a project working.
An annual review measures recognition and use. A behaviour that has become decorative is simplified. An effective but too discreet gesture can be reinforced at the right points of contact.
The production and communication teams share grammar, but not necessarily the same durations. A campaign signature can take a second; daily feedback must respond almost immediately.
15. Animation files, titles and acceptance criteria
The recipe reads each version without sound, then without image when the message requires an audio alternative. It checks titles, synchronisation, control, loop, poster, subtitles and movement preferences. The file is then tested in the actual player, with its buttons and overlays.
Before acceptance, a person who has not followed the production must be able to explain the message, correctly assign the brand, perform the action, stop the content, access the transcription and load the page on a constrained mobile connection; by combining understanding, accessibility, performance and attribution in the same recipe, the project avoids that a visually impeccable master fails at the precise moment when it reaches its audience.
The minutes finally link each export to its script, language, rights, budget and validity period, so that a regulatory correction, a new translation or a change of identity can find the exact source without re-encoding or reconstructing the entire sequence.
16. Case study: explain an AI service without particle rain
A company wants to present its documentary processing system. The first track animates documents, luminous networks and an abstract brain. It looks like many actors and does not explain any control.
The new storyboard follows a real file: receipt, extraction, confidence score, human verification, integration and audit log. Each transition corresponds to a stage of service. The signature comes from how uncertain areas resolve, not from a generic metaphor.
The test asks participants to name the steps and limits. The team also measures attribution without logo. The sequence becomes more sober, more precise and more distinctive to the brand.
17. Frequently asked questions
17.1. What is the ideal duration for an animation?
There is no universal duration. It depends on function, context and control. Content must have time to be understood without immobilising users.
17.2. Does the motion necessarily improve conversion?
No. It can clarify or distract. A conversion hypothesis must be tested with safeguards of understanding, performance and accessibility.
17.3. Should we always produce a version without sound?
The main message must remain accessible when the sound is not available. Subtitles, visual narrative and alternatives are provided from the script.
17.4. 2D or 3D animation?
Choose according to the information to show, identity, budget and variations. 3D is not a higher level; it responds to certain spatial and material problems.
17.5. How can a distinctive motion signature be created?
Repeat some consistent and attributable behaviours — trajectory, transformation, rhythm, relationship to sound — on useful touchpoints. Measure their recognition.
18. Logiks recommendations
Give a verifiable function to each movement. Document the evidence, test the animatic, design the reduced version and set the performance budget before the final rendering. Motion design becomes a brand asset when it helps understand or act, then repeats a distinctive way of doing so.
19. Main sources
- HTTP Archive, Web Almanac 2025 — Methodology : https://almanac.httparchive.org/en/2025/methodology
- HTTP Archive, Web Almanac 2025 — Page Weight : https://almanac.httparchive.org/en/2025/page-weight
- HTTP Archive, Web Almanac 2025 — SEO, Video : https://almanac.httparchive.org/en/2025/seo
- HTTP Archive, Web Almanac 2025 — Accessibility : https://almanac.httparchive.org/en/2025/accessibility
- W3C, Understanding Pause, Stop, Hide : https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
- W3C, Understanding Animation from Interactions : https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions
- Google, Web Vitals : https://web.dev/articles/vitals