Web banner design tips
13 infallible banner design tips

1. Nothing beats a good eye-catching punch line
When thinking of the copy for a banner; you need to spend a lot of time in creating a catchy phrase, something that will arouse the interest of the viewers and entice them to click on the banner. The punch line should be a small phrase, just a few words and should be visually appealing (correct usage of colors and fonts).

2. Good copy
A successful banner has excellent copy. Be sure to spend ample time thinking about what would interest the surfer. Another rule of thumb for good copy is to keep it short and simple. The text should support the banner punch line and should be informative and practical, making the viewer curious or bringing out a smile. Preferably, the copy should end with the same catchy phrase as on your web site unless the banner punch line is the same.

3. Relevant content in banners - not XXX
Make sure that the pictures displayed in the banner are relevant to the products/services you are offering on your site. A woman in a skimpy bikini would surely attract the attention of male surfers and get a click but, if your site sells electronic goods, the visitor is sure to leave your site before making a purchase. You, thus, end up with high-click thrus and negligible sales.

4. Something that will never die!
T.V. advertisements have overused the word "NEW", or the phrase "New and improved"... but it still sells! Similarly on a web banner, nothing attracts a visitor more than the word "FREE"! It provides an incentive to viewers when they click on the banner. Please make sure that you deliver what you have promised in the banner - and point it out quickly on your site; else the visitor would simply click on the "Back" button of their browser, never to return again. It might also generate some negative publicity!

5. Including logo and web site URL in banners
If your ad campaign is a brand building exercise, it is advisable to include BOTH the logo and the web site address in the banner. For other types of banners, you might like to include the two, but make sure that they don't dilute the banner punch line or the copy. In such cases, it's best to keep the logo and the URL together either on the right or the left side of the banner. The logo should be made small and the URL can be displayed in a very small font size.

6. Clichés work!
Statistics show that the best call to action on a web banner is the trite phrase "Click here". Its very presence increases the click-thru rate by almost 20%. The phrase should be displayed long enough (2-3 seconds), preferably in the last frame of an animated banner and can itself be animated - made to blink or change color.

7. Web banner file size
The ideal file size of a web banner is 10kb or less - the lesser, the better. The reason is simple. Since banners are generally displayed at the top of web pages, they should load before or with the main page text and grab the viewers' attention immediately. However, decreasing the file size of banners leads to tradeoffs in animation and the number of colors used (in animated gif banners).
Take a look at 2 animated .gif banners we have created -
     
File size: 4.28kb - Frames: 42                                                File size: 7.65kb - Frames: 31

Both banners have a lot of animation, as depicted by the number of frames, but the file sizes small. This is because we have optimized the banners, specially the number of colors used.
Banner file size depends several factors: the length of the animation (in case of Flash), the amount of animation, physical size of the banner etc.

8. How long should an animated banner run?
Studies have shown that a typical web surfer spends less than 10 seconds looking at the top of a web page. Thus, a web banner has to display all its content in this time. The call to action, which would usually be in the last frame of an animated banner, should be displayed within this time frame, else the banner loses its efficacy.

9. To animated or not to animated?
Animated banners generate almost 30% higher click-thru rates than static banners. The main drawback is that animation results in larger file sizes. However, optimizing an animated .gif banner by decreasing both the number of colors used and vertical color change, one can bring the file size below the required value.
An important point regarding animated .gif banners is the use of photo-realistic images. The .gif images can contain only 256 colors and the image compression algorithm (LZW: Lempel-Zev-Welch) works best when the image has large areas of single color. Since photos are complex images, the LZW compression algorithm is not able to do full justice, resulting in large file sizes. Hence, it is advisable to either avoid the use of photos in animated gifs or keep the animation to a minimum, if photos are employed.
Using the Flash technology, we can embed photos as jpgs, which is the correct compressed file format for photographs and other complex images. Furthermore, we can correctly control the compression levels of jpgs. The text or even the photo can now be animated.
Take a look at the Flash banner we created for a client - [click here]
This banner contains 4 photos that have been animated and a large image of the American flag used as the background - a total of 5 photo-realistic images. The physical dimensions of this banner are also quite large, 160x600 pixels, but the file size is 18kb!

10. Using Flash
Flash has thrown open a complete new area in web banner ad design. Flash animations are much smoother than animated gifs and the file sizes are a lot smaller. Flash banners can also be made interactive, involving the visitor directly. Banners developed in Flash generate higher click-thru rates than animated gifs.
Does this mean that the days of animated gifs are over? The answer is Yes and No! Displaying Flash banners requires a plugin on the viewers' system. Not all surfers would have this plugin (though the percentage of such users is decreasing by the day). Whenever you submit a Flash banner for a banner ad campaign, you are asked for the animated gif version as well. Animated gifs are still standing tall!

11. Blue underlined text
Web surfers understand blue underlined text as links. If you know that the banner would be displayed on a web page with white background, you should created a banner with blue underlined text, preferably not anti-aliased, written in common fonts such as Times, New Roman, Verdana or Arial. The banner thus "merges" into the web page looks like a part of the content. Though this might be considered tricking the surfer, it would be forgiven if you deliver what you have promised in the banner.




12. Is this tricking the surfer?
Take a look at this banner

The banner has HTML form elements such as radio buttons, drop down menu and the submit button. However, all the elements are in the form of images and do not work. You might feel this is tricking the viewers - they click on the banner thinking the HTML form fields work. However, in my opinion, HTML form fields are a good way to inform the viewers what they would expect when they click on the banner! Remember, only those viewers who are interested in the services/products offered would click on a banner and thus, this is a nice way to tell them what they would see on the web site. However, it is important that the click-thru URL complements the banner information.

13. Several banners for a single ad campaign
Unless you have done thorough research on your audience preferences and behavior patterns, its highly unlikely that a single banner would be sufficient for your ad campaign. We believe that you should start with 6-10 banners. You should keep rotating the banners and as the ad campaign progresses and you'll come to know which banners are generating higher click-thru rates. It is imperative that you track the success of each banner in terms of CPMs, CTRs and CPCs.

1. File size - smaller better. It seems that every one on Internet is in rush. You should take care to be certain that your banner will be delivering and the visitor will have enough time to see it.

2. Imagination, creativity, eye catching message will definitely help your advertising promotion.

3. Color, layout and contrast. Think about who will watch your banner. Have in mind your demographics; Age, Sex, Cultures, Nationality, and Religions.

4. Research, do your homework, check with the search engines or directories what people are looking for. If you sell on your site CD or Video collect all information necessary, all key words related to your industry. Use those on your banner.

5. Proportion, alignment, simplicity try not to over do, less is often better. Let the eyes follow your message with natural rhythm.

6. Fonts. Be certain that your targeted clients can read the message. If you sell hearing aids for elderly people use larger fonts. Do not use more than three different fonts types in one banner again less is better.

7. Use standard size and web safe colors.

8. Use animation. Two or more frames will let you sell more option in your advertising message.

9. Emphasize a call to action or the famous Click here or Click here for more information. It works!

10. The old fashion words like: free, you, get, are still working so is sex, of course.

11. Watch for "too good to be true" when you form your advertising strategy or compose your copy.

12. Update or change your banners often.

Surprise! Badly Written Banner Ads Yield Bad Results
BY Barry Zeger | May 15, 2001

Banner bashing: It's hip; it's now; it's the rallying cry of pundits, ad-agency clients, and traditional copywriters who have always had their suspicions about the efficacy of Web advertising and now believe they have the facts to back up their bluster.

"Banners don't work!" yelp the bashers. "They're a waste of money, and they don't generate results! Internet advertising -- bad! Internet dissing -- fun!"

But despite all the we-told-you-so histrionics, one has to question whether the issue isn't banner ads as a flawed configuration but, rather, banner ads with flawed messaging.

Back when banners began dancing across Web pages in the mid-1990s, it was common for click-through rates to be in the double digits, regardless of the banner's message. As the novelty of banners lessened and their presence exploded, click-through rates tumbled. It should have been apparent that the creation of clickworthy banners required more ingenuity than simply tossing a wiggling logo and a "Click here!" button into a 486 x 60 frame.

Recently approved IAB (Interactive Advertising Bureau) formats for bigger, louder, and more eye-catching ads are a partial solution to the challenge of low user response. But once the novelty of their production gimmicks has worn off, these new formats won't invite sustainable clicks unless their inherent messages are skillfully composed. It's an e-advertising example of the "Waterworld" phenomenon: mega production + middling story = micro box office (or, in the case of banners, miniscule click-throughs).

So how can a Web copywriter improve the messaging of his banners to make them more consistently clickable? Here are some simple yet effective suggestions:

Lead with a question. Want to write better banners? Looking to ramp up your click-through rate? See how engaging this technique can be in getting users' attention?

Create a lyrical rhythm. Well-written banners follow a catchy word flow from frame to frame. The number of syllables chosen to convey the message is deliberate, like haiku. The pacing of the words is energetic, like a roadside Burma-Shave ad. And the idea builds to a payoff, like a well-told joke. (Frame 1 is the setup, frame 2 the fill-in, and frame 3 the punch line.)

Keep it single and simple. The more ideas you force your banner to communicate, the more muddled it will be. Choose one easily digestible point, and drive it home with as few words as possible.

Show, don't tell. If an image can get your idea across instead of words, use it. Your message will be communicated quickly, easily, and memorably.

Write visually. Banners offer infinite choices of entertaining visual techniques that can enhance and sell your message (e.g., words and images shrinking, dissolving, stretching, morphing, zooming in, crawling, etc.). Keep these tricks in mind as you compose your text, and include them as suggestions for your design partner.

Offer an offer. When it comes to calls to action, offers rule. Free downloads, free demos, free white papers, free info kits, free shipping -- pretty much anything free (or other incentives, such as percentage- or dollar-off savings) will get the user clicking faster and more consistently than an uninspiring and ambiguous "Click here!" button.

Justify the click. If your banner isn't offer-driven, continue its message by making the call to action specific to what the user would receive if the banner were clicked (e.g., "Click for more info!" or "Click to see it in action!" or "Click to get started!")

Brand with benefits. Creating a banner with vague messaging and cool vibes may seem like a novel way to build brand awareness, but it won't generate many clicks. Instead, enumerate the many benefits (e.g., saving money, improving productivity, losing weight, etc.) that the brand promises.

Nix the tricks. Banners using cute come-ons ("Catch the monkey and win $20!") to boost site traffic are fun to write, but they can only work once. You also run the risk of alienating scads of users who will never visit your client's site again.

Test as the user. Once your ideas have been completed, imagine the mindset of a user who's viewing a page where your banner will appear. Reread each of your ideas and ask yourself: Is this banner's message communicated credibly, simply, and irresistibly enough to compel a user to leave the site that she is in and click to my client's site?

Considering the newness of the Internet as a messaging vehicle, it's understandable that the craft of banner-ad writing is still a work in progress. But when they're wittily, artfully, and precisely composed, banners can be a powerful and extremely effective component in a company's advertising and brand-building arsenal -- regardless of how boisterously the bashers may bleat to the contrary.

General Tips


There is no magic banner style that works for everyone. It's up to you to find a banner that works for your site. Here are some basic tips to keep in mind while you experiment with different banner ideas. But don't implement all of them at once. Such overkill will create one very annoying banner.

Do's

Originality - Think of a banners as a work of art. Try something original or off-the-wall. People tend to notice banners that are unique.

Colors - Use bright and contrasting colors such as yellow-black, red-blue, or light-dark. Stay with the primary and web-safe colors.

Simple Text - Don't cloud your banner with cryptic text. Simple phrases are always more effective. A good banner usually has 6 words in each frame.

Curiosity & Humor - Try making people curious about the site behind the banner. Ask a question or tell a riddle in your banner.

Graphics - Most web pages contain more text than graphics, so graphics on your banner will make it stand out. Whenever you can, express your ideas with graphics.

Animation - Like it or not, animation is eye-catching. Moderate usage often attracts positive attention to your banner. Moderation is the key word here.

Interface Facade - Emulate a system panel with a light gray background and buttons. It catches attention. Currently this is very popular and successful.

"FREE" - The word "FREE" on your banner can increase click-thrus. But it is most effective when you have a software- or hardware-related site, and least effective if you are simply offering free travel or money (because it'll appear to be a scam).

"Click Here" - Works like "FREE" but with a broader appeal. You may also try "Click Now!" Don't overdo it though. Make it simple and elegant.

Don'ts


Scaled Image - Don't use a graphics program to automatically scale your banner to different sizes unless the program has specialized algorithms to do so. Otherwise, smooth edges could become jagged, causing your banner to look unprofessional.

Small Font - Don't use plain ten- or 12-point fonts. Make your text stand out with color, style, and size. Emphasize keywords with animation if possible.

Lack of Focus - Focus on just one topic for each banner, as opposed to many different ideas and messages, which would only clutter and confound the banner. Most banners should tell the viewer what the site offers and why they should visit.

Pressure - Urgent sales messages such as "Limited Time Only" or "Hurry" don't work well in banners because they echo too much of the used-car salesman tactics. People in general don't like to be pressured and the Internet is no exception.

Words Jungle - Make the text in your banners clear and concise. Remember, simplicity is golden.

Standard sizes

Rectangles and Pop-Ups
   
300 x 250 IMU - (Medium Rectangle)      
250 x 250 IMU - (Square Pop-Up)      
240 x 400 IMU - (Vertical Rectangle)      
336 x 280 IMU - (Large Rectangle)      
180 x 150 IMU - (Rectangle)      

Banners and Buttons
      
468 x 60 IMU - (Full Banner)      
234 x 60 IMU - (Half Banner)      
88 x 31 IMU - (Micro Bar)      
120 x 90 IMU - (Button 1)      
120 x 60 IMU - (Button 2)      
120 x 240 IMU - (Vertical Banner)      
125 x 125 IMU - (Square Button)      
728 x 90 IMU - (Leaderboard)      

Skyscrapers
      
160 x 600 IMU - (Wide Skyscraper)      
120 x 600 IMU - (Skyscraper)      
300 x 600 IMU - (Half Page Ad)