We have surely come a long way since the web saw its first banner ad ever…
In case you’re not familiar with that masterpiece, here it is:
This small banner ad is what started the whole craze.
And to be perfectly honest with you, in my opinion, the design is quite timeless. I could easily see this still working today, if someone found a good use for it.
But I digress.
The topic of today is what makes a banner ad great, and more importantly, how to design a great banner ad.
Let’s take it from the top:
When a banner can be considered good?
There’s only one parameter that’s important when it comes to banners, or any other piece of marketing-bound design, for that matter.
And that is the click-through rate that the banner generates.
In other words, a banner ad doesn’t need to look good in order to be great, it just needs to perform.
Although this might sound a bit counter-intuitive at first, let’s break it down based on some real data.
The curse of banner blindness
I’m sure you’ve heard about that. Everyone who’s ever designed any banner knows about banner blindness.
In short, it’s when your creation remains virtually invisible to the viewer, purely because it looks like a banner.
Oh the irony … you’re designing something to be more visible than anything else on the page, yet the effect is completely opposite.
Anyways. The issue is actually quite serious. Banner blindness isn’t something that exists only in theory, or under some specific test conditions in a usability experiment.
No, it’s real.
In fact, 86 percent of consumers suffer from banner blindness, and it doesn’t look like the situation will improve anytime soon.
The internet users simply don’t like to look at anything – anything! – that appears even remotely like an ad.
And it’s not even that they “don’t like” looking at them. Another study indicates that what we’re talking about indeed is real blindness. The way that our brains fire up when a banner shows up on the screen literally causes us to not see that banner – it’s truly being weeded out by our subconsciousness.
Banner blindness solution?
The solution is actually quite obvious and simple at the same time:
Make your banner ad not look like any other banner ad.
In 2016, and going forward, we need to be either more subtle, or more outrageous. We’ll cover both paths here.
1st path to a great banner ad: Be outrageous
There’s a book by Bill Glazer titled “Outrageous Advertising That’s Outrageously Successful.” Here’s my copy that I got somewhere around the year 2012:
(Notice all the small bookmarks.)
That book was somewhat of a goldmine for me when it comes to educating myself on how to advertise things, and what makes an ad truly stick out. Glazer’s main message, summarized in one sentence, is this: if you want your ad to work, it needs to be outrageous.
You can understand “outrageous” however you wish. Outrageous presentation, outrageous offer, outrageous copy, etc. The idea is to make your banner ad so unpredictable and so unexpected that it can’t be ignored.
What does this mean to a designer? For once, go against the trends. When everybody uses a certain design style or method, use another one. And so on.
2nd path to a great banner ad: Be native
Native advertising is gaining a lot of popularity these days.
However, instead of being just a trend among marketers, it’s actually an approach that works and brings better results than other, more traditional forms of web ads.
It’s reported that 70 percent of consumers on the web prefer to learn about products through content rather than through traditional ads. They simply have no trust in ads. Moreover, according to Nielsen, banner ads are the least trusted form of advertising. They fall even behind traditional ads in newspapers or magazines.
That’s where native ads come into play.
In short, native ads are a form of advertising that’s embedded in the website’s content – it’s part of it – rather than being an unrelated element that’s trying to interrupt the viewer.
An eye-tracking experiment by Infolinks indicates that native ads are seen 47 percent quicker and by 450 percent more people than standard banner ads.
What does this mean to a designer? Instead of simply working on a banner, try building a more elaborate form of visual advertising. Like an infographic, for example. One of the effective strategies, used by brands these days, is to create infographics around some concept related to the brand’s product, and then present that product as part of the graphic. That way, the reader gets great content right there and then, and if they’re interested enough, they can click through to see the offer.
(Example by Casey Collier, via Behance.)
Three(-ish) elements of a good banner ad
Like we covered at the beginning, a banner ad doesn’t need to look good in order to be great … but it still needs three crucial elements:
- Value proposition. It is the message – what you have for the reader that they should be interested in.
- Brand identity. Some elements that help the viewer recognize your brand.
- Call to action. A quick message telling the viewer what you want them to do.
And last but not least, you can have just one message per banner.
A banner that attempts to achieve a number of different goals will achieve none.
Copy maketh banner
Good banners aren’t made with graphics. They’re made with copy.
Granted, a good graphic makes the message punch more, makes it more visible, adds to the emotion, to the experience. But to give the design elements a chance, you need copy first.
If you can get a copywriter’s help when working on the banner – please do so. It will make your work easier, and it will also improve the quality of the final result.
If not, consider these tips:
Use the curiosity gap to your advantage
The curiosity gap is a marketing concept that defines the space between what the viewer knows and what they want to know.
Copywriters explore this principle all the time by giving the reader something they can hang on, yet not telling the entire story.
What this man saw after picking up his son from school was amazing.
We know part of the story – a man picked up his soon from school, and something happened. But what?
You can use the same principle when writing a headline for your banner ad.
Be in tune with the medium (or not)
The banner ad that you’re working on will appear in a certain place on a certain website. It’s going to promote a certain offer, and it’s going to be targeted toward a certain audience.
All of those are variables you need to take into account when working on the banner.
- What other elements are displayed near the space intended for your banner?
- What’s the website about? Does it have a serious feel to it, or is it more fun?
- What’s the offer? Why would anyone want it?
- Who’s the audience? What sort of message is that group of people likely to respond to?
Once you have this, you can decide whether you’re going to blend in with your banner (native approach), or try to stand out like a pink cow (outrageous approach).
Be in tune with the landing page
The task of a banner ad doesn’t end on getting the click and redirecting the viewer to a landing page. The banner also needs to be in tune with that landing page.
Here’s what I mean. If the visitor feels tricked or confused about where they ended up after clicking the banner, they won’t take any action on that landing page. And no action after the click is basically the same as no click at all.
If possible, use the same graphics for the banner and the landing page. For example, if there’s a picture of a person on the landing page, try using it in the banner ad as well (if it makes sense).
(Example by Steve Haack, via Behance.)
Not to mention, the offer that you’re promoting through the banner needs to be the same offer that’s available on the landing page.
Use good typography
As you can probably predict, typography really makes a difference.
For instance, one interesting experiment by Errol Morris (for the New York Times) indicates that people trust Comic Sans much less than they trust fonts like Baskerville or Helvetica.
That experiment was quite clever, actually. Morris published a quiz titled “Are you a Pessimist or an Optimist.” After reading a short paragraph of text, the viewers were asked whether they agreed or disagreed with the text. That paragraph was showed in six different typefaces. Interestingly, depending on which typeface a given viewer saw, they were more or less likely to agree with the whole statement. Comic Sans came in last.
What this all means is that you need to select your typefaces carefully. And most importantly, “I like this one” – isn’t a good-enough reason to go with one typeface over the other.
Provide just enough information
A banner ad doesn’t give you an awful lot of real estate to work with, so it’s easy to overcrowd the thing with too much information, thus making it too confusing to ever work.
You need to be careful and provide just the minimum effective dose of information about the offer.
Don’t overwhelm the viewer. Give them just enough, create a curiosity gap, and get them to click.
Also, use whitespace generously to make the message more visible. Just because you have, say, 300×300 pixels to work with, it doesn’t mean that you have to use up all of them.
And last but not least, everything needs to be readable. So … contrast, contrast, contrast!
Contrast over style!
(Example by Co-Effect Creative, via Behance.)
Add some special effects
If there’s too much movement in your banner, it will quickly be subject to banner blindness. That’s just how our brains work. However, if the banner remains still for the most part, and then moves just slightly, everyone will notice.
Make the effects visible. Use them to regain the viewer’s attention once they’re on the page for a couple of seconds already, instead of trying to shout at them right when they’re loading the page. I advise this because there’s simply too much stuff going on during that initial loading phase on most web pages. It’s too easy for the viewer to overlook an animated banner then.
This makes it more effective to keep your banner stationary during that period, delaying the animation, so that it jumps at the viewer later on. This can be done through multiple vehicles, so to speak:
- If you have people, animals, dynamic objects (like cars) in the banner then make them move in a natural manner.
- For normally stationary objects, make them lean back and forth, in a “knock knock, look at me” kind of way.
For instance, take a look at this:
(Example by Byron Jimenez, via Behance.)
The situation here is almost perfect to make that chicken walk. But not right away. If the image is still, and then starts animating once the page has fully loaded, it will be much more noticeable. All of that is quite simple to achieve through Animate CC.
Grab attention through good color use
Too much color can easily induce banner blindness. A multitude of “things shouting at the viewer” has been a common trait of banners for years now. In other words, designing a banner that grabs the viewer’s attention and isn’t subject to banner blindness as much requires the use of a narrower color scheme.
For example, when working with image-based banners, you only need a couple of distinct colors apart from the image itself. Those colors can be used for backgrounds and accents (principles similar to material design).
(Example by Natacha Diaz, via Behance.)
Notice the two main colors: red(ish) and white + the animation of the plane.
Appeal to the general
So the final advice relates to a situation that’s very tough on anyone designing banners.
What if you have no clue regarding the website where the banner will eventually be displayed?
This happens a lot when working with various ad networks that source banners all across the web to sites of different sizes, audiences, and topics.
Certainly, this is not perfect, but you can still try making the most out of it.
In that case, making the banner ad look native goes out the window. What you’re left with is making it look outrageous (as mentioned earlier).
- Take a concept that’s ordinary, and make it unusual in your ad. Doesn’t even have to be related to the thing that’s being advertised. Just like the “walking chicken” example above.
- Tell a story through the banner. Don’t just say that there’s something being promoted and that’s that. Focus on why anyone would want to get it. Doing this with only words can be tough, but since you have images at your disposal, and even animation, it should be more attainable.
- Make it personal and about the viewer. Remember that there’s a real person on the other end. Why would they care? Why would your grandma care if she saw the ad?
- Use arrows … or arrows that move … or hand-drawn arrows that move.
(Example by Claudia Ribeiro, via Behance.)
Pick your style
Putting it all together, there’s a handful of popular styles for banner ads to choose from. Here are six ideas to get you started (of course, you can freely combine them together or pick and choose just some individual traits and elements):
- Traditional banners. Just an image, some copy, and a button with a call to action on it.
- Ghost banners. Rocking some minimal design; mainly featuring just the headline and a call to action presented as a ghost button.
- People banners. This type of banners is based on pictures of people, and particularly, faces looking either at the camera, or at the offer next to the picture. There are some good stats indicating that pictures of people get way more attention than anything else.
(Example by Seth Geiss, via Behance.)
- Doodle-like banners. For those, use hand-drawn arrows, even handwritten text. The goal is to make the banner look kind of unprofessional – like it hasn’t been designed by a marketing agency.
(Example by Ujjwal Varma P, via Behance.)
- Product banners. Show a picture of the product + its basic info (like the price, name). We can call this one “Amazon style” banner ad.
- Problem banners. Present a problem that the viewer can identify with. Don’t present the solution. Curiosity gap.
At the end of the day, the banner game is about the performance, and not so much about the look.
Even the ugliest banner in the world can still be a great banner if two things happen: (a) people click on it, and then (b) they take advantage of the offer on the landing page.
But what do you think? What’s your approach when it comes to banners?