|Homepage - Support - Web banner design tips
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 - Click here. 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. Click here for two examples.
12. Is this tricking the surfer?
Take a look at this banner - Click here. 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.