How to Design a Proper Banner – One That Actually Works

By / Mar 4, 2011 / Tips
shares

Let’s address the big pink elephant in the room first. Banners are not dead. They’re not on life support either. They’re doing fine and they’re going to be around for a while.

They’re doing fine mostly because of their new home – Google AdWords. Google Display/Content Network to be precise. If you are (or your client is) advertising on the Content Network and not using banner ads then you’re missing out on a really big and tasty piece of the pie.

The competition on AdWords is, in a word, frantic. Nevertheless, there are still some places where the competition is not so fierce. One of those places is the realm of image ads (a.k.a. banners). The competition for image ads in 2009 was similar to the total competition in all of AdWords in 2001. And those who remember know it was a wild west back then.

Now the big reason why banners are worth a try. Simple – they work. From my experience there’s never been one case where I couldn’t outperform a text ad by a banner ad (when it comes to the Content Network). Better CTRs (click through rates), similar conversions. Always.

All of this means just one thing. Banners are a must as a part of an advertising campaign.

What is a good banner?

A good banner is not one that looks good. A good banner is one that works. It can be the ugliest thing in the world, but still, if it works it is perfect.

Now what I mean by “working”. Most ads on the internet have only one task – generating a click. If an ad has an over average CTR it is considered to be a good one.

You shouldn’t aim or care about whether or not people admire your craft and creativity when they see your banner ad. It doesn’t have to be beautiful. It doesn’t matter. Keep your eyes on the prize and remember that there’s only one important thing – measurable results, not temporary admiration.

Let’s start with some basic rules. And after that we’ll get into some more in-depth advice.

Basic rules of creating a good banner

1. “Know thy placement”

At least try to.

If you want to create a good banner you ought to know where the banner will be displayed. This isn’t always as easy as it sounds.

If you’re on automatic placement on AdWords then your banners will be displayed on a number of different sites around the internet. The problem is you don’t know which ones. You know nothing. Of course, you can look at the reports later on and find out, but it’s not really helpful at this point, is it?

So examine the soon-to-be placement of your banner whenever you have the possibility. Look around and take some notes.

For example. How many ads are there already? What sections of the site do they appear in? Are there many text ads? What is the style of other banners? Do they try to blend in or stand out? What does your placement look like? What is it surrounded by? The more intel you get the better. It’ll come useful when you start creating the banner.

2. Good copy sells

I know that it’s a banner not a text ad, but you still have to use good copy. This is not the place for a copywriting tutorial, so let me just give you a handful of tips.

Headline holds 80% of success.

If you get the headline wrong nothing else matters. Devote at least half of your copywriting time to working on the headline. Get some inspiration from headlines that are already successful. Use them as a template.

Answer one, two, or all of the questions a viewer might have.

“What? Why? How? What’s in it for me?”

Each of those questions is equally important. People want to know what you are offering, why you’re doing this, how to get it, and why they should care (what’s in it for them). Answer those and you’re going to be just fine.

Call to action.

Probably the most important thing. Don’t forget to provide some kind of call to action. Even something as simple as a “click here” button, or a “get your free gift here” button. If you want them to do something tell them what it is.

3. Convincing graphics

That is if you’re going for a graphical banner, which you don’t have to do (I will get into this later in this article).

By convincing I mean something that brings some specific information along with the graphic. Not just something that looks nice. The kind of information that’s useful to the target audience. Something they will notice, and then act upon.

Let me give you an example. If you’re creating a banner for an online lingerie store you will probably use some images of semi-naked women just to get attention (just a side note – semi-naked women work equally good in terms of attracting attention both for male and female eyes). That is fine. But it’s better to show the names of the products those women are wearing and the prices as well. That way the whole project is both pleasant on the eye and informative.

4. Readable font

You would be amazed how many banners use fonts that are totally unreadable. And I’m not just talking about the font itself. I’m taking about the style as well. Poor contrast, blurry letters, letters to small, too big, and so on.

Here’s a quick rule of thumb. Once you’re done with your banner show it to your grandma and ask her to read it out loud. If she struggles to do so, change the font. As simple as this. Grandma-proof your banner!

Learn more on mastering font combinations and get some free high-quality fonts for your design.

5. Appropriate colors

Different colors mean different things in different cultures. Know your target audience, so you don’t do anything stupid. The whole thing is a really wide topic and it has been covered very well already. Check out one of these sites to learn more:

There’s just one trick I want to share with you. There are two colors that usually work exceptionally well: orange and blue.

Orange is great for all kinds of buttons (if you don’t believe me just visit amazon). That’s because orange is the most noticeable color right after red. However, it doesn’t raise all the negative emotions red does (things like “stop”, “look out!”, and “danger”).

Blue is the color of safety. It creates a sense of trust and confidence. It works well for headlines and text in general.

I’m not saying that you have to use those two colors, but it’s good to be aware of their advantages.

6. A frame

Just a thin line around your banner can improve its attention grabbing potential. Why? We’re used to seeing frames in real life (e.g. paintings, pictures). Therefore a frame has a subconscious effect on our perception. We simply focus more attention on the thing that’s inside the frame. That’s all. Plus, adding a frame to a banner is, what, 15 seconds of work?

Now that we’re done with the basic rules let’s get to the real fun part.

Banner blindness – the disease of the internet, and how to cure it

I’m sure you’re familiar with this. Banner blindness is a problem that touches almost every internet user. There are just two groups that are not sick (yet). People who have been on the internet for less than a month and people who are below the age of seven.

The whole problem has just one simple symptom. Everyone who’s affected is blind to anything that looks like a possible banner. It doesn’t even have to be an actual banner. It just has to look similar enough.

And I really mean “blind”. Because it doesn’t happen on a conscious level. It’s not like we see the banner and then decide that we’re not interested. We literally don’t see the banner. Our subconscious erases it from our sight leaving a blank spot.

There’re two main ways of beating banner blindness when designing a banner

(Well, I’m sure there are more, but let’s just focus on these two approaches.)

1. Design a banner that looks like a banner, but is, in a word, a masterpiece

Design a banner that’s a purple cow (Seth Godin style). It has to stand out among all the other things that are displayed on the page. It has to be the most visible thing there. Something that is just impossible to be overlooked. Something like a purple cow in the middle of the room.

You can use several tricks to achieve this goal.

Use pictures of attractive people.

Remember the lingerie store example? Pretty faces and well-built bodies have always been attention grabbers. Capitalize on that whenever you can.

To make it even more effective use a picture of someone looking straight at the camera. Whenever someone tries to make eye contact with us we tend to notice, especially if the person is attractive. Even when the eye contact is fake – as it is with a picture.

Pretty, cute animals.

Preferably small, furry animals. That’s an old trick as well.

Cats are cute, small, and furry. Look how far they’ve gone in terms of YouTube popularity. There’s a good reason why you don’t see many big-rhinoceros videos.

Use pictures of cute animals if you can. And don’t forget about the trick with them looking at the camera. It works here as well.

“Free”, “New”, “Sale”, “-80%”, and so on.

Use these trigger-keywords to produce immediate impulse to take action. The reason why these work is not because it’s an innovative idea, it’s because it’s an old, a well tested idea.

People are used to seeing that kind of words in thousands of marketing messages they’re exposed to every day. Just get on the bandwagon and use them too.

Utilize the power of “free!” Free is one of the most powerful words in English. (Check out “Predictably Irrational” by Dan Ariely.) Whenever people see this word they start to act really irrationally, so it’s good to be the one that capitalizes on it. Whenever there’s something to give away for free don’t forget to say it.

Funny beats boring.

If you can be funny, be funny. But not the I-am-the-only-one-laughing kind of funny. Making someone smile goes a long way, both in life and in banner advertising.

Funny images, funny people, funny animals, funny situations.

There’s a really easy trick to get someone to smile, you just have to smile first. That’s a real life approach. When it comes to banner advertising you can simply use a picture of someone smiling.

Smiling, attractive person looking at the camera. That’s a home run!

Interaction gets attention.

There are some areas where an interactive banner works really well. This is a kind of banner that encourages people to take some kind of action with it.

Let me give you an example. If you’re creating a banner for a weight loss site you can provide a body fat calculator right from the banner. Just a couple of simple input fields and a “calculate my body fat” button. After someone clicks the button they are redirected to the landing page.

Make sure that the whole thing is completely clear and simple. The input fields have to look like a classic HTML form fields, and the submit button as well. People like to use things they’re familiar with. Everyone’s familiar with a standard HTML form.

Flash technology might be a good idea for this.

You can use this approach in many different markets. There’s always something…

2. Design a banner that doesn’t look like a banner.

This is what I like to do a lot. If something doesn’t look like a banner (at least at first glance) it’s not affected by banner blindness, as simple as this.

Now the how-to part. There are two possible ways.

The first one is to create a “text banner.” Something that looks like a text ad, only it’s a banner. Something that has very little graphical elements, and just a few sentences of copy. Similar to what you’re stuck with when creating a text ad for AdWords. It’s going to be ugly, I know. But guess what? It works.

Here’s an example:

text banner

The second one is to blend in with the style of the site where your banner will be displayed. If you’re allowed to, try to create the banner in a way that it looks like a part of the website. Like an extra menu, or like a standard element of the sidebar, or whatever else. Just blend in.

Again, if people won’t notice that it’s a banner there’s no banner blindness, and that’s all you want.

You can even experiment with some fake elements (which is something I personally try to avoid). Elements like fake checkboxes or play buttons (so the banner imitates a video).

Let me address one thing that’s probably on your mind right now. Even though it’s fake it is not necessary evil. First of all, you shouldn’t be creating a banner for something that’s a scam or just not a good deal all-around. Never participate in that kind of projects. You only want to be helping businesses that have some valuable products or services, and you want to create a banner that will bring the best results possible. If the client is (and you are) fine with fake elements you can use them. Even just for the sake of testing to find out how they compare to other, not so cunning formats.

Next step: create it already!

Just fire up Photoshop or Illustrator and create the banner. Remember about the basic rules. The ones that are always valid no matter what approach you’re going for.

If you were to remember just one thing from this lengthy article it would be this: Looks don’t matter, results do!

What do you think is the most effective element of a good banner? Fake elements? Attractive people? “Free?” Text banners? Blending in? Something totally different? See you in comments.

About the Author

Karol K. (@carlosinho) is a 20-something year old web 2.0 entrepreneur from Poland who shares his thoughts at newInternetOrder.com. Tune in to get his web design tips and other online business related stuff.

24 Comments

  1. Reeka
    March 4, 2011

    hahahha!!! ITS GOOD! Loved the style, subbscribed for other articles by Karol

    Reply
  2. Ninkanoseworthy
    March 4, 2011

    Whoa, “use smiling people looking at the camera”? Really? Studies show that is the #3 cause of banner blindness and it actually can turn people against your brand. The number one cause of banner blindness? Image ads that look like text ads (per your example).

    Sorry, this one’s a little off the mark…

    Reply
    • Karol K
      March 7, 2011

      The studies you’re talking about are good for reference, but what I like to do is to challenge things that seem well-researched. I’m sure that when you take 10000s of ads into account the overall result might be that cliche-like ads don’t do well. But from my experience the ads that are always giving me the best results are indeed the image-text ads. I have yet to find a campaign where I can’t outperform a standard banner ad by an image-text ad. However, your comment forces me to test this thing more thoroughly. Thanks for your input.

      Reply
  3. Martijn Lafeber
    March 4, 2011

    I haven’t seen a banner in years. * Hugs Adblock Plus *

    Reply
    • Karol K
      March 7, 2011

      Hahaha let me tell you, the only reason why I’m not using Adblock Plus is because I like to observe what other people are doing when it comes to advertising. But I admit, sometimes browsing the internet gets really difficult.

      Reply
  4. Stephanie
    March 4, 2011

    I found this article very helpful. Thanks for sharing!

    Reply
  5. Stephanie
    March 4, 2011

    Great article. Image ads are not something I’ve considered before but they could be a good addition to my adwords campaigns.

    Do you have any examples of excellent banner ads?

    Reply
    • Karol K
      March 7, 2011

      It depends on what you mean by excellent ;) Nevertheless, you comment motivates me to create a showcase post containing some cool banners, and it’s coming soon.

      Reply
  6. Jordan
    March 4, 2011

    100% agree with you about copy. This is what most people simply do not comprehend and think creating a banner is entirely the designer’s job. It’s a combination of marketing, copywriting, and design.

    Reply
    • Karol K
      March 7, 2011

      You nailed it.

      Reply
  7. Steve Hall
    March 5, 2011

    I think that one of the main reasons that these work so well is that most people’s main method of communication is visual. So a banner stands out more so than text. Unfortunately it is too true that banners on the net have been overdone to the point where people don’t see them or ignore them.
    That being said the tips you offer should help to create a banner that is attractive and effective and brings the desired ‘click’.

    Reply
  8. Steven
    March 5, 2011

    Sorry, but your “banner that doesn’t look like a banner” looks like the kind of stock ad that people have become blind to. Is this form of banner really increased ROI for you? and if so, what kind of websites? as an ad like that on the BBC website for example, would just look outright suspicious to it’s audience; spammy in fact.

    Reply
    • Karol K
      March 7, 2011

      I’ve experienced better ROIs mostly because the improvement of the CTRs. Conversion rates usually remained the same.

      And I agree, you do have to tailor your ad so it somehow fits the website it resides on. But when it comes to an ad looking spammy I don’t believe that it’s a big problem nowadays. Users seem to have a much bigger “ridiculousity acceptance” level. I mean, we know what ads look like so whenever we notice one (and IF we notice it it means it has beaten banner blindness) we tend to accept the way it’s presented. Although, the truth is that users might get mad when they feel they’ve been deceived, so you always have to remain within the “ridiculousity acceptance” level.

      Reply
  9. Andrew
    March 5, 2011

    “2. Design a banner that doesn’t look like a banner.” I would NEVER EVER EVER EVER click such a link.. NEVER!!! Even not if it’s a part of the internal structure. I might even leave the website if i find such adds. Sorry, but that’s a very bad example. They are usually found on badly constructed sites and associated with mall-ware and scams. I’ve seen the use of them all over American websites, and to this day. But in Europe they are a thing of the past. When i started designing in 2003-2004 they were already outdated.

    The rest is pretty neat and helpful. :) Good job

    Reply
    • Karol K
      March 7, 2011

      I wouldn’t click it either :) But removing yourself from the equation is always a good place to start some research. You see, even when you have a banner ad with 5% CTR, what it really means is that 95% of people are not clicking it, but it still is a great banner…

      Reply
  10. iluvhatemail
    March 5, 2011

    Banner ads do not work. I used to work in the interactive department at one of the largest ad agencies in the world. Major corporations will spend an amazing amount of money for a successful 1-2% click-thru rate. And based on further statistics an enormous amount of those click-thrus were accidental. They only buy it because all the ad agencies want to sell it, so they say whatever they can to convince the client its worth it. To the agency it’s costing them very little money in terms of employee hours since they direct most of the budget towards broadcast and print, but banner ads are extremely profitable in contrast. And the nice thing is one interactive designer/dev can make many <90k banners a day, including all the resizing and tracking code. Some weeks I would finish 10 independent campaigns. These ads are like luggage fees to airlines. Its just something they can throw onto of a proposal to appear capable to do everything for the client. IRL they are the biggest waste of a clients budget and if you are creative you can think of something for the same amount of money that could do better. How about directly targeting your demographic for once?

    Reply
    • Karol K
      March 7, 2011

      Directly targeting your demographic – sure, that’s a great practice. But you can also target them with tailored banner ads.

      What you’re saying sounds very interesting to me. Were this banner ads branding-style ads or direct response ones? And where did the copy for those ads come from?

      Reply
  11. Olwen Bruce
    March 7, 2011

    My goodness what a good article about designing a banner ad (not to be confused with designing a banner). However your sample must be a joke or teaser for us to criticize and throw out advice.

    The colors are completely wrong and the font is awful. I don’t want to be rude as you are very young and still learning. It seems to me you do not understand what you have written about! email me and I will design a banner ad for you that will create attention and effectuate an action.

    iluvhatemail is right, you need to follow the statistics but he is not right about being a waste of budget money – most of the banner ads are subliminal and have to be there to reinforce branding. Olwen

    Reply
    • Karol K
      March 9, 2011

      What can I say, good advice is hard to find. I’d be happy go get your opinion on why do you think that the colors and the font are wrong.

      Reply
  12. Kabita
    March 14, 2011

    I am SEO guide but i have much interest to do Web design , so it a right source to learn……….above banner design tips give me a light in my way

    Thanks a Lots

    Reply
  13. Cristy
    March 14, 2011

    Maybe it sounds a little “stupid” but I do click the ads that say “amazing”,”incredible”,etc…
    Who wants to click an ad that screams: “nothing out of the ordinary?” …

    Great post :D

    Reply
    • Karol K
      March 24, 2011

      That’s a sound point, Cristy :)

      Reply
  14. rob
    January 17, 2012

    Very good article, I was looking for how to create a nice banner for my website because I am novice when it comes about design and this article was very helpful. Using this banner: http://www.flashxml.net/banner-rotator.html and your tutorial, certainly will result a masterpiece. Thanks.

    Reply
  15. Jenny
    January 20, 2012

    “Banners are not dead”. Haha. That’s right. And we are here to prove it.

    Reply

Leave a Reply