Designing Banner Ads 101
At some point in their career almost every designer will have to design a set of banner ads. Inspired by someone who told me that they had done their first ever banner ad I thought it would be good to examine this design sub-genre since I have designed thousands of banner ads and art directed thousands more over the years.
In this post I won’t be going into the issues such as what types of pages the ads appear on or click-thru rates as designers can’t change these. I will be exclusively looking at the craft of designing banners to make them look more appealing (and hopefully more clickable).
Banner ads should signpost the page they are connecting to
THE BANNER AD LANDSCAPE
The three most common online banner ads are the MPU (Messaging Plus Units), the leaderboard and the skyscraper, what I refer to as the holy trinity of banner ads. They appear all over the web as the shapes fit across the width of webpage (leaderboards) or within an individual column (MPUs and skyscrapers). Leaderboards are placed with either an MPU or a skyscraper but all three never appear together.
Banner ads will usually be part of an existing campaign so their ingredients may be provided by the client i.e. logo(s), images, copy direction. The key is combining those ingredients in a way that is interesting to the website’s user in the 2 seconds or so that they spend scanning the ad (even less if they are scanning the ad peripherally). It’s crucial to grab their attention with a compelling image/message and make it obvious what you would like them to do next. If you squint your eyes and there’s no obvious focal point in the ad then it’s unlikely to work.
I feel strongly that banners should clearly signpost what the web user is clicking to. This way the user arrives at a page that looks like the ad that sent them there. If it didn’t they would naturally be disappointed or put off if it looked nothing like what they were expecting.
As a result I usually look at the destination page first when designing banner ads and work backwards from there. Next it’s a case of working out the right hierarchy of the ad’s various ingredients (e.g. logo first but small, headline next but dominant etc.). After that add a suitable call-to-action (CTA) that ties into the copy and spells out the desired action/response. Once the hierarchies of the messaging are sorted they can be applied to the three banner ads sizes individually.
Elements compete with each other in most MPUs due to the square shape
The MPU (Messaging Plus Unit) is usually placed in the narrower right hand column of the page and as a result it is roughly square in format and smaller in size so as to appear above the fold. The squarish format presents a compositional problem as the human eye likes images that are slightly more horizontal (landscape format) or deeper (portrait format).
I feel the mix of logo, image, headline and CTA in MPUs often doesn’t leave much room for one of the four to form a focus of the ad. This is easily seen in the HP and X-Factor MPUs above where all the elements are fighting each other for the web user’s attention. In both cases the background is merely used as a tablet on which to place elements.
By contrast the CSI MPU above has used the background image to bring the elements together by having them emerge from the shadows. The circled gun, the yellow evidence card and the hands on the feet also emerge from the shadows to set a tone and provide other visual information for the eye if the copy isn’t read.
Headlines are the key focal element in leaderboards
The long horizontal shape of the leaderboard can lead to designs that use it’s elements as a series of equal chunks as in the HP example above. However I have found that leaderboards have more impact if the headline is much larger than in the other two banner ad units. This is clearly demonstrated in the X-Factor ad above where even if you scan the ad quickly the key takeaway is “Have you got it?”
Since leaderboards are usually placed at the very top of the page a focus on headlines lends itself to the pre-existing psychology of how we process webpages–a residual memory from reading newspapers and magazines.
As display resolutions increase in size so too are webpage widths making the previous 728x90s increasingly redundant (originally designed for a 1024 × 768 resolution). As a result of this CBS Interactive is moving to replace all 728x90s on it’s network of sites with 970x66s (called a super leader). These new ads are less intrusive for a site’s user and fits more snuggly with the various pages which are all now 970px wide. The added length and shallower depth of a superleader lends itself even more to a headline driven iteration of a campaign.
The fold cuts skyscrapers in half until the user scrolls down
The long and slender skyscraper has small headlines and big images
While MPUs and leaderboards are usually placed on a page above the fold, the skyscraper is cut in half by the page’s fold (usually about 600 px down – see diagram above). As a result key information such as the logo, headline and CTA should be in the top half. The narrowness of the skyscraper also means their headlines tend to be small.
In my experience I have found that skyscrapers tend to be placed on pages which are heavy on information and light on images. This is ideal for skyscrapers since they have a lot more room for imagary than MPUs and leaderboards.
In the three 160×600 examples above the skyscrapers has been designed with increasing consideration for the fold from left to right. In the HP skyscraper all the elements above have been given equal prominence and as a result there is no focus for the eye. The X-Factor ad has the presenters bigger than in other iterations of the campaign but the small headline has become overwhelmed by all the other elements–the key information is all below the fold and makes the ad bottom heavy. In the CSI skyscraper the larger image brings the elements together while the second logo has caused a little overcrowding at the top.
Compare this 728×90 version of the ad with the 300×250 below (see the animated ad here)
Animation helps divide up the elements over time
It goes without saying that adding animation to a banner ad will draw the eye to it. A Flash version of a banner also helps break up these elements over time. In the Ally 728×90 above showing the full pencil is less compelling than the 300×250 version where the eye is waiting to see what happens next.
Lately I’m seeing a lot more replay buttons on animated ads–no doubt because the ad is already started playing as the page starts loading. Static versions of ads have become more relevant again as they get loaded as a default Jpeg in environments where Flash doesn’t play such as tablets and smartphones.
Animation alone is not enough to make an ad good. There still has to be something compelling in the ad otherwise it veers towards being like all those cheap attention grabbing credit score, diet and remortgage ads. I had originally turned the two Ally ads above into animated GIFs for this post but my eye automatically screened them out as I (and probably most people on the web) am so used to ignoring animated ads stacked on top of each other.
BANNER AD DESIGN TIPS
Since I’ve done so many banner ads here are some tips that I’ve picked up over the years. Apologies if they seem obvious, I’m stating them because I see them constantly not applied:
• Avoid all upper case copy as this makes it hard for the user to read
• Headlines and body copy should have different sizes to make it easier for the reader to scan
• Headlines and/or body copy should be on no more than three lines
• preserve hierarchies of messaging and all text should be consistently aligned (left, right, center)
• Consider using interesting typography as imagery in order to save space by having one less element
• Should be short and to the point like “Go Now” or “Check It Out”
• Should be above the fold for 160×600 and 300×600 units (roughly the middle of the unit)
• Should be upper case letters at the start of each word to make it easier to scan
• Should be in contrasting colors without looking gaudy
• Should be positioned towards the end of the copy and/or lower right hand side
• Should be consistent in size throughout a set of banner ads
• Apparently get more clicks than text only links in banner ads (even though the latter look more elegant)
• Add a 1px gray border on ads with a white background – it may be placed on a white page
• For first round approval I sometimes turn the individual Photoshop frames into an animated GIF
• Before final submission I stand back and squint at the ad to check if it can be easily scanned
• As with all design, save time by sketching out the ad’s frames always
A page skin brings the banner ads together by wrapping or framing the page
Since web users are so used to seeing banner ads (and ads in general) there are a lot of changes ahead. Although the holy trinity of MPU, leaderboard and skyscraper dominate the banner ad landscape I have seen other sizes are becoming more common such as 640×480 Interstitials (as video becomes more predominant) and the 300×600 ‘Half Page’ ads which have a deeper MPU to dominate the right hand column. For a full list of newer units likely to populate the internet in the future check out IAB’s page on the subject by clicking here.
For a more comprehensive and harmonious branding experience page skins (or ‘wallpapers’) are being used a lot more across the internet (especially on IMDB) as they wrap the banner ads together. We do about 900 skins a year at CBS Interactive (download this pdf to read more). As skins too become more numerous there is also a rise in custom made rich media takeovers which are being especially asked for in RFPs (to read more about this see my post here). However for both skins and rich media takeovers there is still the ever present need for the ad experience to work in conjunction with the standard banner ads on the page and the user’s experience of them.
The history of Banner ads: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standards:
The Fold: http://en.wikipedia.org/wiki/Above_the_fold
Look up banners ads for specific brands: http://www.moat.com
Screen display resolution: http://en.wikipedia.org/wiki/Display_resolution
DIY ad creation: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Banner ads from Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Some cheap (and overcrowded) web banner design sites: