1. Web Design
  2. UX/UI
  3. UX Design

Best Practices for Designing Effective Banner Ads

Scroll to top
Read Time: 7 min

If you’ve ever been online — which, if you’re reading this, I assume you have — you’ve probably encountered a banner advertisement or two. These typically come in the form of a prominent image on the page, although the exact size, positioning and content can differ drastically.

There’s more to creating a banner ad than just opening up a new Photoshop canvas and throwing together some pictures though. In this article, we’re going to take a look at banner advertising and investigate just what creating a strong ad is all about.

What Are Banner Ads?

Banner ads are one of the principle forms of advertising on the web today and, for many sites, a fundamental source of revenue. The concept is simple: site owners offer up space in their design for an advertiser to fill with a banner ad in return for a fee. Much like any form of advertising, however, the success of a given campaign can be easily ruined by a bad design.

The VergeThe VergeThe Verge

Designing a banner ad to be used on someone else's site is a different process to producing your own entire site for the same purpose. Limited space and control over positioning present challenges to the design process, but with the right planning and consideration, they don't need to impact your ad that much.

Size, Standardisation and Specification

Since the majority of banner ads are produced to be displayed on someone else's site — specifically, a site the designer doens't have design control over — adhering to the industry consensus on a number of factors is a must. When running a campaign that stretches beyond a single location, this becomes even more important.

The Interactive Advertising Bureau, or IAB, maintain a specification of the standards most banner ads adhere to and this is a good starting point when planning your ad. The IAB Display Advertising Guidelines details a variety of common ad unit sizes, from large 970 x 250px Billboards to smaller 300 x 250px Sidekicks, including older, "delisted" units that are starting to be replaced.

If you already know where your ad's going to be shown and understand the sizing of that space, that's great but, if not, limiting yourself to the IAB-endorsed sizes ensures you the best chance of compatibility when you find a space.

IAB GuidelinesIAB GuidelinesIAB Guidelines

However, the IAB's guidelines go beyond just the size of the ad. The Bureau also publishes guidelines on specifications such as maximum video frame rate, the limit of the Z-Index of the unit and file size. These are just guidelines, but trying to stick to them is a good practice that ensures your ad is as technically efficient as it will be aesthetically. We'll look at a few of these concerns later in the article.

Clear, Attention-Grabbing Copy and Images

When a user comes into contact with your ad, the chances are they didn't come looking for it. Instead, they're here to see some other piece of content and your ad is just there. Since users aren't looking for what's in your ad, grabbing their attention with a combination of images and clear copy is key.

Ads need not have an Apple-esque minimalism with just one image and fewer words than you can count with the fingers on your left hand. Likewise, you're not designing the ad to replace a website or larger form of media. Instead, you need to trim your ad to just what's enough to pique the interest of a user. Listing benefits for them — such as savings of $x when they buy a product, or announcing a limited time for x activity — rather than features and using images to make it clear what the ad is about. Offer users a value to clicking through, but do so in a way that doesn't take paragraphs of superfluous marketing copy.

Bad Ad correctedBad Ad correctedBad Ad corrected

Every ad is different in this respect; there's no cookie-cutter instruction to offer here. Take the time to understand what you want the user to do when they see your ad and build the design into prompting them to do so in a clear, unobstructive manner. Keep it simple but make people want to read more.

Strong Call to Action

Possibly the most important element in your banner ad is the Call to Action and convincing users to interact with it. The Call to Action is the first stage in a Conversion Funnel — the process from the initial ad impression to registering a sale or otherwise achieving the ultimate goal — and interacting with it is generally the main purpose of the individual ad. Your Call to Action can come in a number of forms, including a traditional button or even a QR code that reveals a website or video when scanned.

CTA ExampleCTA ExampleCTA Example

Your ad needs to tell a user what to do, or they won't do anything. Your ad must instruct them to "find out more" or "buy it now" in order to have any chance of successfully navigating through the conversion process. Therefore, you need to design a Call to Action that is hierarchically significant to the visual design of your ad and very clearly lays out what to do.

Design Unity

Just as a website should have unity between the individual pages that it's made up of, an ad should be visually relevant to the site it takes you to. Clicking through to reveal a website with little to no visual relationship with the original ad seriously degrades the user's experience and will likely throw most users off the process.

Apple ad comparisonApple ad comparisonApple ad comparison

Your ad should use similar, ideally identical, colours, images and typography so the user's partially accustomed to your site before they've even visited. You wouldn't expect a Coca-Cola ad to be made up in Pepsi blue, so mimicking key designing decisions of the target in your ad is important to keeping users on track, not allowing them to drop off when they wonder where they've ended up.

File Size

This is really a no-brainer. If you want your users to interact with your ad, you need to let them be able to see it; few are going to sit around and wait for that massive ad to load in. If a user is explicitly initiating a feature like audio, video or motion in your ad, you'll have a little more patience to work with before degrading the user's experience. However, the file size of the initially loaded ad should be kept to a minimum.

If your file size is too big, you'll either lose out on potential impressions (especially of users with slower internet connections) or create performance problems for the page as a whole. None of these are good so keep an eye on file size, ideally limiting yourself to the maximum load sizes that the IAB sets out for each standard ad unit.

Motion and Animation

Utilising animation and motion within your ad can greatly increase your chances of user engagement, but too much can easily end up annoying users instead. Implementing subtle transitions and motion effects is generally a great way of grabbing attention and increasing interaction, though you should limit the length to a non-looped 15-30 seconds (depending on the size of the unit).

While subtle transition-style animations don't degrade the user experience too much when run automatically on page load, more intense animation that needs the user to actually focus should be limited to when explicity enabled by the user.

There are technical concerns with animation too, however. Plugin-reliant technologies like Flash, while once a prominent driver for animated ads, should be avoided when more universally complaint solutions are available instead. This applies especially if the same ad is being used as part of a mobile campaign.

Again, you also need to keep an eye on file size, as it can increase dramatically with the addition of animations and multiple slides or frames of content.

Responsive Design

Finally, taking responsive design into account is key to future-proofing your ad designs and maximising their impact across a variety of screen sizes and devices. As mobile traffic rises, designing responsive ads becomes increasingly vital to success.

When you're designing a campaign for a site, or sites, that have responsive designs implemented, you should offer ads in alternating sizes, but be sure to not let this changing form negate any of the other points we've already brought up.

Take a look at for some ideas about how ads can be implemented responsively.

Wrap Up

Designing ads is a tricky process because success lies in your ability to create an attention-grabbing design without annoying a user. Use just a little too much animation and you risk obstructing any engagement with your ad. However, keep your ads straight to the point with a strong Call to Action, which leads to a site which shares visual cues with the original ad, and you might be on to a winner.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.