web banner design

Designing An Effective Web Banner

I’m sure you’ll agree that the objective for any online banner that you run is to get as many click-thrus as possible. Here’s a few key points your can consider when you’re next creating an online banner ad.

A Strong Call-To-Action Button

In almost every situation, when you want someone to do something, you always need to give clear, precise instructions. The same applies for a banner. Unless the person viewing the banner is REALLY interested in what you’re selling, he or she probably won’t be clicking on it if there isn’t a call to action button.

Impactful and actionable words like “Apply Now”, “Claim Offer Now” has proven to work better than words like “Learn More” or “Discover More”.

Button colours also play a part in the effectiveness. Dull colours like grey generally doesn’t work well as compared to brighter colours. Bright Orange and Light Blue are colours proven to be more effective. As a rule of thumb, the “call to action” button has to stand out from the rest of the banner.

Effective Web Banner Design
Web Banner With A Clear Call-To-Action Button

Keep Messages Short and Precise

Websites today are filled with content. Every inch on your screen is probably maxed out with different content, each trying to vie for the reader’s attention. If the reader is lucky enough to catch a glimpse of your banner ad, you’ll probably have less than 2 seconds grab him. Any longer and he’s probably shifted his attention to something else.

If you have a strong promotion make sure its stated upfront, in bold and ideally 5 words or less. If its an image that you’re using, make sure its appealing enough to get the reader’s attention. I’m someone who doesn’t believe in teasing the reader or building curiousity before selling your product. (well at least in the context of the online space) By the time you try anything fanciful online (which everyone else is also doing), you’ve probably lost that 2 seconds window of opportunity.

Effective Web Banner Design
Short & Clear Messaging

Animated Banners (such as Gif or HTML5)

If you’re running an animated banner generally try to ensure each frame is as attention grabbing (if not more impactful) as the frame that comes before it. If you feel you have too many key selling messages to be squeezed into a single frame, then consider an animated gif of flash banner.

Animated banners tend to perform better than static banners. However don’t create animated banners just because it looks fanciful. If you don’t have enough strong selling points, then it may backfire.

I like to design my banners as idiot proof as possible. So I usually keep the “call to action” button visible on all the frames, instead of having it traditionally appearing only at the end.

Include A Sense of Urgency In The Ad Copy

Telling people that the promotion is available for a limited time makes the promotion feel more exclusive. Hence enticing the user to click on the banner to find out more. I think this consumer behaviour is especially true for Singaporeans.

Effective Web Banner Design
Example Of Limited Time Promotion

Ensure Banners Stand Out

If you know where your banners are appearing, try to have the banner design stand out as much as possible from the website its placed on. A simple way to do this is to make use of the background colour of the banner, as well as the font colour of the ad copy. Although most of the time, you’d probably be buying into an Ad Network like Google, so banner placements are really random.

Are Your Banners Placed On Mobile Devices or Desktops

Designing banners for desktop viewers and mobile viewers can be completely different. Consider the size of your iPhone screen vs your laptop. A mobile banner is probably 320x50px, whereas a desktop leaderboard banner would be 728×90. That’s almost twice as big. Comparatively you’d probably be able to squeeze in an image and text into a desktop banner quite comfortably. However a mobile banner probably allows just 1 – 2 lines of short text if you want the ad copy to be easily readable.

Minimal File Size

Although most of us are on broadband or faster internet connection, its still important to have your banner as “light weight” as possible. “Light Weigh” here, meaning to have the file size of your banner as minimal as possible. Most websites state the requirements upfront, but a rule of thumb is to have your banner less than 30KB for GIFS and JPGs, and less than80KB for flash banners. You may think that 100KB probably loads within 0.1 seconds, thats true. However consider your banner on a web page with loads on content, images, and a couple of other ad banners including yours. That may easily come up to over 1MB for the total page.

Now, would you want your banner to finish loading at the end, or would you want to try as much as possible for your banner to appear as early as possible?

To sum it all up, make sure that the overall banner design grabs attention, and your ad copy precise. Remember, you only have less than 2 seconds to make an impact. Do you have other tips on good online banner design? We’d love to hear from you!

Leave a Comment

Your email address will not be published. Required fields are marked *