The short version
- Effective animated banner ads usually follow a short storyboard of three frames: a hook, the value, then the brand and call to action.
- The final frame of an animated banner should work on its own, because many ad networks limit how long or how many times animation may play.
- Common display ad sizes include 300×250, 728×90, 300×600, 160×600 and 320×50 pixels.
- Animated banners are usually delivered as HTML5 bundles or GIFs, and networks set tight file weight limits for both.
- Motion in a banner should draw the eye once and then let the words hold still long enough to be read.
On this page
Good animated banner ads use motion to catch the eye once, then get out of the way of the message. The dependable structure is three frames: a hook, the value, and an end frame with the brand and a clear call to action that stays on screen. Keep the whole sequence short, make that last frame work as a still ad on its own, and keep the file light, because ad networks limit both how long animation runs and how heavy the file can be.
The three frame storyboard
Banner ads are seen in passing, beside something the reader actually came for. Nobody waits for a banner to finish. Plan the sequence so each frame makes sense alone and the order tells a tiny story.
- 1
Frame 1: the hook
One short line or one striking image. Its only job is to make someone look. "Your desk, calmer." Two to three seconds.
- 2
Frame 2: the value
What you offer, in the reader's terms. "Cable trays that fit any desk." Two to three seconds.
- 3
Frame 3: the end frame
Logo, the offer in brief and a button shaped call to action. "Shop the range." This frame holds until the ad stops.
Frame one: a hook in four words over moving colour. Nothing else competes with it.
The end frame: brand, value and call to action together. If this is all someone sees, the ad still works.
The same storyboard works for social ads, which are usually short videos rather than banners. Facebook ad design and Instagram ad design cover those formats.
Timing and loops in animated banner ads
Many ad networks and publishers limit how long animation may run and how often it may loop, and the limits vary. Google Ads, for example, restricts uploaded animated ads to 30 seconds of animation. Check the current specification for every network you buy from, and design so the ad ends on its strongest frame whatever the limit.
Timing
Rule
Timing
Rule
Timing
Rule
Timing
Rule
Timing
Rule
Standard banner ad sizes
Display networks use a set of standard sizes. A campaign usually covers several of them, so design a system rather than one ad: a layout that rearranges for wide, tall and small slots while keeping the same words, colour and motion.
Medium rectangle
300 × 250
Half page
300 × 600
Wide skyscraper
160 × 600
Leaderboard
728 × 90
Mobile banner
320 × 50
What fits
What fits
What fits
What fits
What fits
GIF or HTML5 for animated banners
Most display networks accept animated ads as either GIF or HTML5, a small bundle of HTML, CSS, JavaScript and images. HTML5 gives smoother motion, sharp text at any density and full colour, and suits richer ads. GIF is simpler to produce and accepted almost everywhere, but its 256 colour limit makes gradients band. File weight limits for both are tight, measured in kilobytes rather than megabytes, so check each network's specification.
If you go with GIF, the techniques in animated GIFs keep weight down: fewer frames, a palette built from the animation and as little of the frame moving as possible. For the motion itself, consistent easing is what separates a polished banner from a jittery one.
Design rules that make banners work
Avoid
- Four or five frames of copy
- Small text over busy, fast motion
- The logo only in the first frame
- A different animation style for every element
- An end frame without a clear call to action
Do
- Three frames, a handful of words each
- Large type over slow, calm colour
- Brand on the end frame that holds
- One transition style throughout
- A button shaped call to action on the last frame
A distinctive background is the cheapest way to be recognised across a campaign. When the same colour field moves behind every frame and every size, people start to associate the motion with you before they read a word. Test variations of the hook rather than the whole ad; ad creative testing explains how to run that fairly.
Gradiently suits the social side of a campaign. Design the hook and end frame on a Mark that belongs to you, resize to 1080×1080, 1080×1350 and 1080×1920 in one step on Pro, and export each as MP4. The Mark is rendered for each format, so its calm area still sits behind the words at every size.
Questions people ask
How long should an animated banner ad be?
One play of around 6 to 10 seconds suits most banners. Many networks limit total animation time, Google Ads to 30 seconds for uploaded animated ads, so check each network's specification.
How many frames should an animated banner have?
Three is a reliable structure: a hook, the value and an end frame with the brand and call to action. More frames usually means more words than anyone will read.
What are the most common banner ad sizes?
300×250, 300×600, 160×600, 728×90 and 320×50 pixels are among the most widely used display sizes. Start with 300×250 and adapt the others from it.
Should animated banner ads be GIF or HTML5?
HTML5 gives smoother motion and sharper text and suits richer ads; GIF is simpler and accepted almost everywhere but bands gradients. Both must meet the network's file weight limit.
What should the last frame of a banner ad show?
The brand, the offer in brief and a clear call to action, laid out so the frame works as a complete still ad if animation stops there.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile