How to Design Banner Ads That Get Clicks

If you want to know how to design banner ads that get clicks, the short version is: pick a standard size the placement actually supports, lead with one message and one visual, and make the call to action state exactly what happens next. Everything else — color, animation, copy length — exists to support those three decisions, not replace them.

Banner ads compete with everything else on a page: the article the reader is trying to finish, the video that's autoplaying, the notification that just popped up. A banner that isn't built to be understood in about a second won't get a click, no matter how polished it looks. This tutorial walks through the steps to design one that does, from choosing a size through to verifying it actually performs.

Before you start

You'll need a few things in place before you open a design tool. First, know your placement: is this a display network buy, a direct site placement, or a retargeting campaign? Each has different size and file-weight rules. Second, know your one objective — awareness click-through, a sign-up, a product page visit — because a banner trying to do two jobs usually does neither well. Third, have your brand assets (logo, approved colors, a legible font) ready so you're not improvising typography mid-design.

If you're designing for a programmatic network rather than a single site, check the accepted formats and weight limits first. Most networks cap static images around 150KB and HTML5 banners around 200KB, specifically so a banner doesn't slow down the page it's loading into.

Step-by-step: how to design banner ads that get clicks

1. Choose a standard IAB size for the placement Don't design a custom size and hope it fits. The Interactive Advertising Bureau maintains a set of standard display ad sizes that publishers and ad servers already support, which means better inventory availability and no scaling artifacts.

Google's own data on top-performing ad sizes consistently ranks 300×250, 336×280, 728×90, 300×600, and 320×50 as the formats with the most available inventory — start there rather than a size you invented.

2. Lead with one message and one visual Decide the single idea the banner needs to communicate — a product, an offer, a brand — and cut everything that doesn't support it. A banner with a headline, a sub-headline, three bullet points, and a product shot is trying to be a landing page in 250×300 pixels. Readers don't process banners the way they read a paragraph; research on banner blindness from Nielsen Norman Group shows people learn to visually filter out anything that looks ad-shaped and cluttered, so simplicity isn't a style preference — it's what gets past that filter.

3. Build a clear visual hierarchy Once you know the one message, decide the order the eye should encounter it: usually visual first, headline second, call to action third. Use size and weight to enforce that order — your CTA button should be the second-most prominent element after the headline, not competing with a logo or a background pattern. If someone can't tell what to look at first in half a second, the hierarchy isn't done.

4. Write a call to action that states the action "Learn more" is vague enough to ignore. "See pricing," "Get the guide," "Start free trial" tell the reader exactly what happens after the click, which lowers the perceived risk of clicking. Keep it to two or three words so it reads instantly at banner scale, and make sure the button looks clickable — a distinct fill color and enough padding, not just underlined text.

5. Use contrast deliberately, not decoratively Contrast is what makes the CTA and headline readable at a glance and legible against whatever page background the banner lands on. The WCAG contrast guideline requires a 4.5:1 ratio for normal text, and treating that as a floor rather than a suggestion also makes the banner easier to read for anyone on a low-brightness phone screen outdoors — a real portion of your traffic, not an edge case.

6. Build both a static and a lightweight animated version Motion draws the eye, which is why a short animated or HTML5 banner often outperforms a static one in crowded placements — but only if it's fast and brief. Keep animation under 15 seconds, loop it no more than three times, and avoid auto-playing sound. A minimal animated HTML5 banner is just a sized container and a CSS transition:

<div class="banner" style="width:300px;height:250px;overflow:hidden;">
  <img src="creative.jpg" alt="Product banner" class="banner__img">
  <div class="banner__cta">Get the guide</div>
</div>

.banner__cta {
  animation: fadeIn 0.6s ease-in 1s forwards;
  opacity: 0;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

That's enough to bring the CTA in a beat after the visual loads, without adding real weight to the file.

7. Export multiple sizes from one design system Once the core creative works, resize it for the two or three placements you're actually buying — don't design each size from scratch. Keep the same colors, font, and CTA wording across sizes so the campaign reads as one ad, and re-check hierarchy at the smallest size (usually 320×50) since that's where cramped layouts fail first.

How to tell it's working

Click-through rate is the first signal, but read it against a benchmark for your format and placement rather than in isolation — a 0.1% CTR can be normal for a leaderboard and poor for a native-style rectangle. Pair CTR with viewability: an ad that's technically served but never scrolled into view can't get clicked, so a click-through problem is sometimes actually a placement problem. If you're running through a programmatic network, most reporting dashboards — a network like Adsy included — break out CTR and viewability by size and placement, which is usually the fastest way to see which creative variant is actually carrying the campaign.

Give a new creative at least a few thousand impressions before judging it; banner performance is noisy at low volume, and a size or two swapped early can look worse purely from sample size, not design.

Troubleshooting

CTR is low despite a clean design. This is usually targeting or placement, not the creative. Check whether the audience matches the offer and whether the placement has reasonable viewability before redesigning.

The banner looks fine locally but broken on the live page. File weight or a hard-coded size is the usual cause. Re-check the export against the network's weight limit and confirm the container isn't forcing a different aspect ratio than you designed for.

Performance was good, then dropped. This is often ad fatigue — the same audience has seen the creative too many times. Rotate in a second creative variant and check frequency capping settings before assuming the design itself failed.

The CTA gets impressions but few clicks relative to the rest of the banner. The button may not read as clickable. Increase contrast on the button fill, add padding around the text, and make sure it isn't the same color as a non-interactive element elsewhere in the creative.

FAQ

What size banner ad gets the most clicks?

There's no single best-performing size across all contexts, but 300×250 and 320×50 consistently have the widest inventory availability and strong click-through performance according to Google's ad size data, which is part of why they're a safe default to design for first.

Should banner ads be animated or static?

Either can work. Short, brief animation (under 15 seconds, capped loops) tends to draw more attention in crowded placements, but a clean static banner with strong hierarchy often performs just as well and avoids the file-weight and load-time risk that comes with animation.

How much text should a banner ad have?

As little as the message allows — typically a short headline and a two-to-three-word CTA. Banners are read in under a second, so anything beyond that gets skipped rather than read.

Do banner ads still work given banner blindness?

Yes, but the research on banner blindness is exactly why generic, ad-shaped clutter underperforms — a banner with a clear single message and real visual hierarchy is what breaks through that learned filtering.

What file size should a banner ad be?

Most ad networks cap static creatives around 150KB and HTML5 creatives around 200KB. Staying under the limit isn't just about acceptance — a lighter file loads faster, which matters directly for viewability.

Conclusion

Designing a banner ad that gets clicks comes down to a small number of decisions made well: the right standard size for the placement, one message instead of several, a hierarchy that guides the eye in under a second, and a CTA that states the actual next step. Everything past that — animation, exact colors, copy tone — is refinement, not the foundation.

Key takeaways

• Design to a standard IAB size (300×250, 728×90, 320×50) for wider inventory availability and no scaling artifacts.
• One message and one visual per banner beats a crowded layout — banner blindness research backs this directly.
• Make the CTA state the action ("Get the guide") and give it clear visual contrast, following at least a 4.5:1 ratio.
• Keep animation brief and file weight low — both affect whether the banner even gets seen.
• Judge performance against CTR and viewability together, over enough impressions to be meaningful, not on early noise.