The rumors are true. Banner ads are in decline.

However, that does not mean they are a dead medium for advertising.

Creative banner ads can still bring a lot to a website. Seeing online banner ads can help increase a user’s awareness of a product or service.

Awareness of your product is half your battle and a banner ad can still help you with that very well, even if you are not likely to see that many clicks.

A lot of website banner design is annoying, loud, and intrusive. Visitors to sites do not like them and, if they are intrusive enough, will leave the site before they get very far. They certainly will not think fondly of the product the banner is advertising. There is a good reason people don’t care for this kind of banner ad design.

However, this does not have to be the case. The best banner ads work very well to get the word out about your product or service. Here are some ways you can make a banner ad that promotes your product to viewers rather than drive them away from it.

Banner Ads: A Definition

Banner ads have been one of the primary forms of advertising for many sites and even the primary sources of revenue for a number of them. The owners of a site will allow for advertisers to use space on their site for a small fee, rather like billboard or other kinds of physical advertising space.

How well this form of advertising works depends on the web banner design. Poorly designed banners are detriments rather than aids, while a well-designed advertisements can be a big help.

invetory-ads Banner Ads: Creative Web Banner Design Ideas to Inspire You

A web banner is a different design project than a webpage. You have limited control over how much space it will take or where it will be placed. Create a banner correctly, however, and this will not be an issue.

Keep the Standard Size

banner Banner Ads: Creative Web Banner Design Ideas to Inspire You

Banner ads tend to keep in the same, essentially standardized dimensions. You will have to create banner as that fit within the specifications of the advertising site. Most of these sites use a suite of common banner sizes. E-mail newsletters also do this, so you will not have to go out of your way when creating a banner ad for one of those.

A good place to look for banner ads examples, as well as banner design inspiration, is AdWords. AdWords is among the biggest servers of banner ads on the internet. They stay up-to-date on the most popular sizes for banner ads.

Wider ads have a tendency to perform better than taller ones. The reasoning behind this is that their placement above the scroll makes for more likely reading, while their left-to-right format makes them easier to read, as well.

mockup-banner-juice-bar Banner Ads: Creative Web Banner Design Ideas to Inspire You

The most common sizes for banner ads are as follows:

  • 300 by 250 medium rectangle, usually floating on the right side or embedded in the text elements
  • 300 by 600 half page
  • 728 pixels by 90 pixels leaderboard, usually at the top or bottom of a page
  • 320 by 100 mobile banner

Reduce the Number of Distractions

banner_ads Banner Ads: Creative Web Banner Design Ideas to Inspire You

A creative banner does not have to be a busy banner. It is easy to think you need to include every amount of information possible on the banner ad because you want to do as much as possible with the smalls pace you have. However, this often works in the opposite manner, flooding the viewer with a crowded bustle of information and coming to mean nothing at all. It essentially just becomes visual noise.

Web visitors will take only moments to determine if something is worth their time or not. You only have an instant to catch someone’s attention and make your first (and possibly only) impression. Banner ads provide an extremely tight space and crowding it with small text is probably the only way to try and communicate all you think you need to say.

panama_dribbble Banner Ads: Creative Web Banner Design Ideas to Inspire You

This will not work; a wall of unreadable words does not make for a cool banner and is only eye-catching in an annoying sense. The same goes for adding in too many graphics or images.

The best banners make a lasting impression. Pair eye-catching backgrounds with brief taglines that explain the core ideas behind you product or service. Make your website banner idea bold and simple to get the most out of the limited space.

Only Use Photos When It is Appropriate

banner800x600 Banner Ads: Creative Web Banner Design Ideas to Inspire You

It’s another common thought that banner ads with photos of people will do a better job than ads that do not feature a photo. Sometimes ads like that do work, but they can also be worse.

In all aspects of your banner ad design, you need to make sure the content is topical. Haphazard photos that do not necessarily have anything to do with the purpose of the ad are not going to make it more appealing. An ad without a photo will not necessarily be overlooked by viewers.

Do some web surfing on your own and note the website banners ideas you see. Often, they use vibrant colors and simple artwork. This often works better than a photo, as they can be more eye-catching and stand out from the page itself better.

what_do_you_say_about_it_dr Banner Ads: Creative Web Banner Design Ideas to Inspire You

Well-chosen photos can be a benefit, however. A good photo can add a more human connection to your banner ad. It works best when the photo in question shows someone using your product and/or service. This is not always the best option for a banner ad, however, considering that space is limited.

An insurance company might have a hard time trying to make a picture of a person smiling on the phone while calling their insurance agent seem anything but generic. With some careful design work, you can use a photo to show the benefits of your product, such as convenience or saving money. This can eb a very effective advertising tactic. Strong, careful design is key.

Use Simple Tests

bannerads Banner Ads: Creative Web Banner Design Ideas to Inspire You

Do you’re A/B testing steadily and without haste. Only change one aspect of the banner at a time. You want to avoid noise and inconclusive results, so avoid having too many variables. Experiment and compare variations of one element at a time.

For instance, just change tag lines while keeping the rest of the banner ad the same, or try doing another test where only the background changes. This will allow you to get a better comparison of each respective element to create a winning combination. If you change too much at once, you will not know why some things work while others don’t.

yieldr-hire Banner Ads: Creative Web Banner Design Ideas to Inspire You

The only time to alter this approach is when you have a high number of impressions and a large amount of data. At that point, you can run multivariate tests to compare different variations on the design at the same time. This is much more complex, however, and will require more work.

Use Attention-Grabbing Images and Copy

banners-h_m Banner Ads: Creative Web Banner Design Ideas to Inspire You

People do not going looking for banner ads. Your ad is just an additional element on a page full of the content they came to the site for. You need to make sure the ad can catch someone’s eye as they’re looking at other content. Clear, attention-catching copy and images are key.

Ads should neither be super-modern and minimalistic, nor should they be a replacement for an entire website. Your website banner ideas need to be designed with just enough content to catch someone’s eye and rouse their interest. A list of benefits, such as a specific savings amount or a limited time deal, work well in this.

Features and images quickly become crowded or generic. You want to give a site visitor a reason and reward for clicking through. This does not require paragraphs of marketing copy or photo albums full of product images.

display-ad-shot Banner Ads: Creative Web Banner Design Ideas to Inspire You

Because every product and service is different, there is no instruction manual for the creation of an effective banner ad. Cool banner designs are not created via a step-by-step process.

As you develop your design, try to understand what you want someone to do when they see the banner ad. Build you design based around prompting them to do that. Be clear about and stay away from annoying them into action. You want an end product that is simple, clear, and makes people want to learn more.

Create a Strong Call to Action

bf2016 Banner Ads: Creative Web Banner Design Ideas to Inspire You

A Call to Action is your banner ad’s primary purpose. The Call to Action is the first element of a Conversion Funnel, which is the process from the initial ad impression to registering a sale (or succeeding at some other final goal).

When designing your banner ad, remember that the Call to Action is the reason you are creating the banner in the first place. This Call to Action can take on a lot of forms, from the regular button to click to a QR code that sends the user to a website when scanned.

3 Banner Ads: Creative Web Banner Design Ideas to Inspire You

The ad needs to provide the viewer some kind of direction. Without this direction, he or she will not do anything to interact with your banner ad. ‘Find out more’ or ‘buy it now’ are great examples, and a good starting point for some banner inspiration if you need it.

Your Call to Action should make sense in the overall design of the banner ad. It needs to be clear on what to do. Can you imagine how frustrating it is to want to do something a banner is asking you how to do and having no clue of how to do it? That is something a good banner ad will avoid.

Unity of Design

Unity is vital to the design of cool banners, as it is with all web design, large or small. An ad should visually match the website it is connected to. It can be jarring to click through to a website that has no resemblance to the original ad, and often makes the whole company seem unprofessional.

This will degrade the overall experience for a web visitor and make them less likely to buy or use the product or service you are advertising.

4 Banner Ads: Creative Web Banner Design Ideas to Inspire You

The colors, typography, and images used in the banner ad should be similar, or ideally identical, to those used on the product’s site. This will give used a chance to become partly accustomed to the site before they even visit it.

Doing this means that people will not wonder where they have ended up after clicking on ad. The dissonance can be confusing and lead them to think the link they used through the ad is broken; they will likely click away without looking for clarification.

Watch Your File Size

cg-spectrum-banner-ads Banner Ads: Creative Web Banner Design Ideas to Inspire You

This is a very simple and very important element of a banner ad. If site visitors cannot see your ad, they cannot interact with it. Hardly anyone is going to wait for a large ad to load in.

If someone has deliberately started a video, audio, or other interactive feature on the ad, there is a little bit more leeway with time before he or she runs out of patience. There is still a limit to that patience, however, and you should strive to keep the file size to a minimum.

17 Banner Ads: Creative Web Banner Design Ideas to Inspire You

Files that are too large lose out on multiple counts. Viewers will leave the page without seeing the ad, especially if they have slower web connections. They might crate frustrating connection problems for the entire page. With enough complaints about that, your ad may be pulled.

Watch the size of your ads’ files. Try to limit yourself to the max load sizes that the IAB sets out for standard ad units. This is a simple task, but that does not make it any less important.

Using Animation and Motion

cm2016 Banner Ads: Creative Web Banner Design Ideas to Inspire You

Motion and animation can bring a lot to a banner ad, if used well. Too much can quickly become annoying and become detrimental, however. You’re looking for a happy medium. Use subtle motion effects and smooth transitions to catch people’s attention. Remember to limit it to 15-30 seconds and do not loop it. The length will of course depend on the size of the ad unit.

Subtle animations can run automatically upon page load and will not degrade the user experience. Longer, more intensive sequences requiring some degree of viewer focus should be triggered by a button press. This minimizes the annoyance and any possible performance issues.

151229-mobilefirst-twitter Banner Ads: Creative Web Banner Design Ideas to Inspire You

Some technologies for animation, like Flash, rely on plugins. This was once a near-universal way of including animation (particularly with Flash), but they should now be avoided in favor of more modern and now common options. Remember this especially if the banner ad is a part of a mobile ad campaign.

As always, watch your file size. Animation and motion content can increase it significantly.

Use Clear Language

cover Banner Ads: Creative Web Banner Design Ideas to Inspire You

A banner ad only has a few seconds to sell itself to viewers. You should try to avoid being too clever with your ad copy. If someone has to think about the ad too long, the chances are small he or she will click it. You need to make it clear that there is a value to clicking the ad. Use clear and understandable language designed for your audience.

Convince People That Your Ad is Relevant

Banner ads are generally viewed with a lot of skepticism. Give them a good reason to care and click through instantly.

A useful strategy for this is to make your banner ad relevant. Make it look like it isn’t an ad! If you can, integrate your banner ads into your content strategy. If you are advertising for an event, for instance, offer ad widgets that help book hotels or buy other things relevant to the event.

Test Your Banner Ad

dribbble Banner Ads: Creative Web Banner Design Ideas to Inspire You

You will not really know how customers will react unless you test your ad. Create a number of banner ad test variations. See how they work. Continue creating variations until you have something that hits the right standards. The goal is to have metrics keep improving throughout the tests.

The Three Bs: Brand, Buzz, and Badger

dribbble1_2x Banner Ads: Creative Web Banner Design Ideas to Inspire You

These Three Bs are the hierarchy of the ad, and a great way to figure out what to do with your banner ad design.

The first B is Brand. Incorporate the brand’s logo into the banner ad, which is vital for the brand’s ongoing ad campaign. It needs to be one of the first things seen in a banner ad.

Next is Buzz. Include words that stand out and grab attention. ‘Free’ works well, or course, but so do ‘limited time offer’ or ‘free trial’.

Last is Badger. This is the verb, not the mammal that does not care. You should be pushing people to clicking the ad through your Call to Action. Buzz reinforces the badgering and gives the viwer a sense of urgency.

Try to Dodge Banner Blindness

dribbble2_2x Banner Ads: Creative Web Banner Design Ideas to Inspire You

Banner ads these days are often overlooked. They are simply so prevalent that they have come to blend into a site’s background. Why? A host of reasons: fear of spam, lack of relevance, fear of a virus, annoyance with popups, annoyance with other reactions, and general lack of engaging content.

One AdKeeper survey showed that 43% of respondents did not find banner ads engaging or at interesting. 31% of the respondents answered that they would only click ads if they were in the mood or the particular ad was interesting to them.

Banner ads are hard to use successfully. However, if done well, they are very successful, which shows why they are still used as a common form of advertising.

Choose Your Ad Buys Well

fashion-vol-4 Banner Ads: Creative Web Banner Design Ideas to Inspire You

You cannot control your banner ad’s placement, but you can still choose the location of the ad to great effect. 55% of respondents to that AdKeeper survey said that banner ads don’t mean anything to them, which decreases the probability of engagement.

Cookies and other behavior-based marketing have done a lot to make it easier to offer viewers relevant ads. This does not solve all the problems, however, and you can create banners that appeal to all the visitors to a page, regardless of browsing history or demographic.

You need to be consistent across all channels. Strive to build brand awareness, because many viewers need to see an ad more than once before they engage. Site visitors need to remember the brand.

bannerads-1 Banner Ads: Creative Web Banner Design Ideas to Inspire You

The look and feel of your banner ad designs need to be consistent, though a bit of variety is a good idea. Always include your logo! This will build your overall brand awareness and help makes sure users begin to get a sense of your product and brand.

Use imagery well. Whimsy and quaintness, while occasionally effective, should be avoided. Your imagery needs to apply to what you are selling with your banner ad. It should appeal to your target audience and their geography. Use stock photography wisely and it will go a long way.

Choose Good Fonts

feature Banner Ads: Creative Web Banner Design Ideas to Inspire You

With such a small space as a banner ad provides, you need to pick good fonts. You need to use distinctive fonts that are easy to read in tight space. Generally, two typefaces should almost be more than enough, considering the limits of banners.

Make the headline big. You want bold, unusual, and/or colorful letters that instantly stand out to a viewer.

For everything else, keep it simple. Sans Serif is a reliable choice. Use bolding or two sizes, one for the main text and another for buttons or any phrases you want to draw attention to, like your Call to Action. You should always keep it easy to read.

Save in the Correct Format and Use the Right Links

handsomebannerads Banner Ads: Creative Web Banner Design Ideas to Inspire You

After all the hard work of design, make sure the technical details are correct.

The usual file types for banners are PNG and JPG (for static banners), or GIF (for animated banners). SVG is also becoming more popular.

Make sure your links work correctly, as well. They need to direct to the right and useful landing page. Imagery should match. You do not want to confuse users or leave them feeling as if they have been duped.

Ending thoughts on creative banner ads

Banner ads require a lot more care and effort than you might imagine for such a small advertising format. However, if done well, they can make a serious difference and help out your product or service quite a bit.

If you liked this this article about banner ads that your AdBlocker extension will block, you should check out these articles as well: