Website Animation Design: The Commissioning Guide for UK Businesses

What this article covers: How UK and Irish businesses commission website animation design. It covers what to brief, what each asset type does, and how to protect page speed and accessibility.

Who this is for: Marketing managers, brand managers, SME owners and business decision makers planning animated content for a website. It suits teams working with an in-house developer or an external agency.

Key takeaway: Website animation design earns its budget when each piece of motion serves a defined user goal. That makes the brief more important than the animation style.

Expert insight: “The animation studio and the web team have to talk before anything is produced. Most website animation problems are handover problems, not creative ones.” , Michelle Connolly, Founder and Director, Educational Voice

Quick facts:

• Educational Voice has produced over 3,300 educational animations for LearningMole
• The studio works from Belfast and serves clients across Northern Ireland, Ireland and the UK
• Motion accessibility is governed by WCAG 2.2, which UK public sector websites must meet

Most businesses asking about website animation design are not asking how to build it. They are asking what to commission, what it costs, and who should produce it. That question rarely gets a straight answer online, because most guides are written for developers. This guide answers it from the buyer’s side, for marketing managers, brand owners and business decision makers across the UK and Ireland.

Educational Voice is a 2D animation studio based in Belfast, Northern Ireland, working with clients across Northern Ireland, Ireland and the UK. Much of our work ends up on a client website. Sometimes that is an explainer sequence on a homepage. Sometimes it is an animated infographic, or a training module hosted in a staff portal. The commissioning decisions behind those assets are what follows.

Two things decide whether website animation earns its budget. The first is whether the motion serves a real user goal. The second is whether it survives contact with your page speed and accessibility requirements. Get both right and the animation pays back for years. Get them wrong and you own an expensive file that slows your website down. This guide works through both in order.

What Website Animation Design Actually Covers

Website animation design covers two different jobs, and confusing them is the most common budgeting mistake we see. One job is interface motion. The other is narrative motion. They need different skills, different suppliers and different briefs.

Interface motion is the movement built into the site itself. Hover states, button feedback, page transitions, loading placeholders, scroll behaviour. This work belongs to whoever builds and maintains your website. It lives in the site code and changes every time the site changes. Educational Voice does not take that work on, and no animation studio should quote for it without seeing the build.

Narrative motion is different. It is a finished piece of animated content placed into a page. That might be an explainer sequence, an animated infographic, a product walkthrough or a training module. It is produced once and delivered as a file. It works the same way on your website as it does in a pitch deck or a social post.

The practical difference is ownership. Interface motion is a property of the build. Narrative motion is an asset you own and can move anywhere. Businesses that grasp that distinction stop asking their web developer for an explainer video, and stop asking an animation studio to fix their menu.

Asset type	What it does	Usually produced by	What you supply
Micro-interactions and hover states	Confirms a click or tap has registered	Web developer	Brand guidelines, tone
Loading and placeholder states	Reduces perceived waiting during page load	Web developer	Nothing beyond brand assets
Homepage explainer sequence	Explains what you sell in under 90 seconds	Animation studio	Proposition, script input, brand assets
Animated infographic or data sequence	Makes figures and processes readable	Animation studio	Verified data, sign-off contacts
Training or onboarding module	Delivers a repeatable internal lesson	Animation studio	Learning outcomes, subject expert
Animated logo or brand motion	Gives the brand a consistent signature	Animation studio	Logo files, brand guidelines

Ownership matters more than most buyers expect at brief stage. A file you hold can be re-cut for social, dropped into a sales deck, or carried across to a new website in two years. Motion written into a theme cannot. That is worth asking about before you sign anything, because it changes what the same budget buys you over five years.

One more decision sits underneath all of this: how many pages the asset has to serve. A sequence built for a single landing page can be tightly specific. One that has to work on the homepage, a product page and a pitch deck needs a looser script and a modular structure. Decide that before the storyboard, not after.

There is a middle category worth naming. Some assets are produced as animation but implemented as interface motion and responsive behaviour, which means both suppliers touch them. Animated icon sets and scroll-triggered sequences fall here. Those projects need a named technical contact on both sides from the first meeting, or they stall at handover.

Four Ways Website Animation Increases Conversions

Website animation design raises conversion when it removes an obstacle, not when it adds decoration. Four obstacles come up repeatedly in commercial briefs, and each has a different animation answer.

Guiding Attention to the Primary Action

Every page has one action that matters most, and most pages hide it. Motion is the cheapest way to give that action visual priority without redesigning the page. A single animated element near the primary call to action does more than three static banners competing for the same attention.

The discipline is restraint. If four things on a page move, nothing has priority. We generally recommend one moving element per screen, positioned where the decision happens. Animation built around a single conversion goal works because it stops competing with itself.

This is also the cheapest thing to test. Placing one animated element beside a quote form, then measuring enquiries over a fixed period, tells you more than any published benchmark. Educational Voice usually suggests starting there before commissioning a full sequence, because a small first project teaches both sides how the other works.

Explainer Sequences for Complex UK Services

A homepage explainer video is the highest value website animation most businesses will commission. It answers the question every visitor arrives with: what does this company actually do for me?

This matters most where the proposition is genuinely hard to state. Fintech products, insurance and pensions, regulated healthcare services, professional services with layered pricing. Our financial services animation work exists for a reason. A compliant paragraph of product copy and a clear 60-second explanation are two very different things. Animation lets you build the second without breaking the first.

Micro-Interactions and the Feedback Loop of Trust

Interface feedback is not a marketing asset, but its absence costs conversions. When a user submits a form and nothing visibly happens, they submit it again, or they leave. Small confirmations of state hold people through multi-step processes: checkouts, quote forms, account setup, application journeys.

This is why we ask about animated interface elements during animation consultation even though we are not building them. A polished explainer sitting on a page where the enquiry form gives no feedback is a wasted asset. The brief has to look at the whole journey.

Holding Attention Through Visual Storytelling

Long pages lose people. Motion that reveals information as the reader scrolls gives them a reason to keep going. It also lets you sequence an argument rather than dumping it. Process explanations, before and after comparisons and staged figures all work better as animation built around a single conversion goal than as static blocks.

One caution on claims. Plenty of published figures promise specific conversion uplifts from adding video to a landing page. Most trace back to vendor marketing rather than independent research, and we do not quote them. The businesses getting results define the goal before commissioning, then measure against it.

Performance and Accessibility: The Two Buyer Blockers

These two issues kill more website animation projects after delivery than any creative disagreement, and both are avoidable at brief stage. Page weight and motion accessibility need to be in the specification, not discovered during implementation.

Start with weight. Animation files compete directly with your Core Web Vitals, which Google uses as a ranking signal. An animated sequence placed above the fold can delay the largest contentful paint noticeably. The fix is not producing less animation. It is agreeing delivery formats and file size ceilings before production starts.

Deliverable	Best used for	Practical notes
MP4 and WebM video	Explainer sequences, full narrative pieces	Host externally or lazy load; supply captions
SVG	Icons, simple diagrams, line work	Scales to any screen; very light
Vector animation file	Looping interface motion, animated icons	Small file size; needs developer support
Animated GIF	Short loops only	Heavy for its quality; avoid where possible
Image sequence	Scroll-driven reveals	Highest weight; specify a fallback

Accessibility is the second blocker. In some contexts it is a legal question rather than a preference. Motion can trigger nausea and disorientation in people with vestibular disorders. Users who have set a reduced motion preference must get a static alternative. The W3C accessibility guidelines set the standard, and UK public sector bodies work to it under the government service manual.

What that means for a brief is specific. Ask for a static poster frame with every animated asset. Ask for captions and a text alternative on anything carrying spoken or written information. Avoid parallax and large-scale movement as the only way of conveying meaning. Any interactive web animation with autoplay needs a visible pause control.

Test before launch, not after. Load the page on a mid-range Android handset over mobile data rather than office wifi. Turn on the reduced motion setting in your operating system and reload. Play the sequence with the sound off. Those three checks take ten minutes and catch most of the problems that otherwise surface in week one.

There is a cost argument UK buyers increasingly raise. Lighter files transfer less data, which lowers hosting cost and the carbon footprint of the page. A vector sequence can replace a heavy video loop at a fraction of the transfer weight. Educational Voice specifies formats with that in mind. The alternative is a client paying twice: once for the animation, then again in page speed.

Briefing, Timelines and Budgets

A good website animation brief is mostly decisions, not descriptions. The studio can handle the creative. What only you can supply is the goal, the constraints and the sign-off route.

When to Hire an Animation Studio, and When the Web Agency Is Enough

Use your web agency for interface motion, hover states, transitions and loading behaviour. Commission an animation studio when you need original animated content: an explainer, a data sequence, a training module, a character or brand motion system. If the deliverable is a file you would still want if you rebuilt your website tomorrow, that is studio work.

Our guide on how to choose an animation company sets out the questions to ask either supplier.

Some projects need both, and that is where a named technical contact matters. Our animation consultation exists partly for this. Formats, dimensions, frame rates and hosting get agreed with the web team before production begins, so nothing gets rebuilt after delivery.

What Belongs in a Website Animation Design Brief

Ten things, in rough order of how often they get left out:

1. The single goal for the asset and how you will measure it
2. Where exactly it sits on the page, and above or below the fold
3. Maximum file size your build can carry
4. Whether it autoplays, loops, or waits for a click
5. Brand guidelines, including motion rules if you have them
6. Voiceover, captions, or text only
7. Accessibility requirements, including the reduced motion alternative
8. Who signs off, and how many review rounds you expect
9. Hosting arrangement and who implements the file
10. Whether you need cutdowns for social or internal use

That last point is worth pushing on. Most website animation gets commissioned once and used once. The same production could yield a homepage sequence, three social cutdowns and a slide for the sales deck. Ask for the variants during production rather than commissioning them again later.

Point eight deserves as much attention. Projects rarely run late because animation is slow. They run late because six people see the storyboard for the first time in week four. Agree who has final say, agree the number of review rounds, and get every stakeholder in front of the script stage. Educational Voice builds those checkpoints into the schedule at kick-off for exactly this reason.

Timelines, Budgets and What Drives Them

Timelines depend on scope, review rounds and how quickly sign-off happens on your side. We set them at briefing rather than quoting a fixed figure here. What we can tell you is what moves the number. Script approval and stakeholder review consume more calendar time than the animation itself, particularly in regulated sectors where compliance review is involved.

Budget follows four variables: duration, animation style, how much bespoke illustration is needed, and how many deliverable versions you want. A 60-second sequence using a defined visual system costs materially less than the same length with bespoke character work. Our guide to what animation actually costs sets out the ranges properly. Read it before you set an internal figure.

For internal content the calculation is different again. Training and onboarding animation is measured against the cost of delivering the same session in person, over and over. That case usually makes itself for anything a business explains more than a few times a year. You can see how the production process runs stage by stage if you want the stage-by-stage view before briefing.

Why UK and Irish Brands Commission Custom Motion

Custom website animation design is becoming a differentiator in UK B2B because template motion has become ubiquitous. Every competitor uses the same stock transitions and the same library effects. A bespoke visual system is the part of the page a visitor has not seen somewhere else already.

That argument holds strongest for businesses selling something genuinely difficult to explain. Belfast and Dublin both have growing clusters of fintech, health technology and professional services firms whose products need explaining before they can be sold. Website animation is one of the few formats that carries a technical explanation and a brand impression at once.

Cross-border trading adds a second reason. Companies operating in both Northern Ireland and the Republic often need the same message in two regulatory contexts, with different disclaimers or figures. Rebuilding a live-action shoot twice is expensive. Re-versioning an animated sequence means swapping a few scenes, which is a practical argument for animation that rarely appears in the standard guides.

Educational Voice works from Belfast across Northern Ireland, Ireland and the UK. That means we are used to projects that cross both markets and both regulatory contexts. The volume side of our experience comes from educational animation production. Over 3,300 animations produced for LearningMole is where the production discipline behind consistent output at scale was built.

None of that removes the need to check the fit yourself. Ask any studio how they handle website animation for a regulated client. Listen for whether compliance review appears in their process, or gets treated as an interruption. The answer tells you a lot about whether the schedule they quote will hold.

If you want to judge that rather than take our word for it, look at projects we have delivered and assess whether the explanations land. You can also read more about Educational Voice and how the studio came out of a classroom background rather than an advertising one.

FAQs

Ready to discuss your animation project?

Educational Voice creates professional 2D animations for businesses across the UK. Whether you need educational content, explainer videos, or corporate training animations, our Belfast-based team is ready to bring your vision to life.

Contact Educational Voice to discuss your project requirements.