How to Design a Proper Banner – One That Actually Works

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:

• Colours In Cultures
• {Color Meaning, Symbolism and Psychology}
• Color Theory for Designers, Part 1: The Meaning of Color
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology
• 10 Super Useful Tools for Choosing the Right Color Palette

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:

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 aren’t a photoshop connoisseur and you don’t feel like designing one, you can always order a banner using a service like Smartketer.

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.