Published on 1 September 2017
Every business wants and needs more online traffic, and better ads can achieve that for your company, right? But if you don't understand the finer points of web banner design, there's no way you can be sure that the ads you'll create will systematically make the most of design best practices. To make things more interesting and add some pressure, banner ads are everywhere! They're used by just about everyone in some form because they're effective, affordable, and easily measurable.
So, what design tips and best practices should you follow as you design and create banner ads to garner maximum clicks? Here are our best tips and guidelines for designing banner ads that get more traffic.
Place your call-to-action at the bottom right
Banner design demands balanced elements, so make sure you arrange each piece of your banner ad for maximum impact. This means your call-to-action rests at the bottom right, where the eyes end up. The call to action is an absolute focal point in your banner ad. It will typically feature limited text on a button, with phrases that simply tell people exactly what you want them to do: 'Learn More', 'Click Here', 'Register Now'. Whatever it says, it should command your visitor to click on it, right away.
Use star quality whenever you can. We did a Fast and Furious campaign and the star of the film had 43% more clicks than other stars from the film. However before the campaign it was not deemed as a suitable creative, yet in the end it was the best performing.
Think about your product or service? What can you showcase for the best results?
Clarify your offer
Your offer or value proposition highlights the unique value that your product, service or and brand provides. It also brings attention to any special deals, great prices, and other attention grabbing info you can showcase, such as “50% off,” “Handmade,” “Locally-sourced,” “Limited time offer,” or Buy One, Get One Free!” The value proposition should be placed so that it’s the first thing that catches the viewer’s eye, and should take up the most space in your ad.
Get your specs right
Get your specifications right the first time. The most beautifully designed ad is useless if it’s poorly coded or too huge to be seen on most systems. If you’re spending time fixing technical details when you should be going live, you’re wasting time and money.
Use the latest GreenSock animation
Banner ads that are animated out-perform static banner ads significantly, and those that are well-designed don’t distract from your ad’s message. Flash is dead; everything is HTML5 now, especially since if it’s not optimised for mobile, it doesn’t sell. The GreenSock Animation Platform (GSAP) lets you create reliable, fast, high-performance HTML5 animations that work in all major browsers.
Banner animations should last 30 seconds as a maximum. Ideally, you should have a 9 second animation that you can loop 3 times. Remember: the last frame of the animation should be a crystal clear call-to-action.
Start and end frame focus
Speaking of ending on a crystal clear call-to-action, you should place your focus on your start and end frames. Psychologists have proven that the principles of primacy and recency mean we best remember what we see first, and most recently, and in the case of banner ads, that’s their start and end frames.
Always think carefully about your storyboard.
Inject a sense of urgency
Use bold, contrasting colours to bring a sense of visual urgency to your banner ads. These ads are not intended to be subtle, barely there suggestions about your brand; they are designed to catch attention and urge people to take action.
Be consistent with your goal
Don’t ever lose sight of your goal as you design your web banner ad. For example, if you’re trying to sell low-end, budget, or discount items, don’t conjure up a flashy, luxurious feel with the ad, or your target audience may feel like whatever you’ve got is out of their reach. Be sure your ad looks consistent with your end goal.
Keep it short
Keep text in your ad to a minimum. 50 characters plus spaces is ideal. Aim for visual simplicity and speed in consumption. Viewers will devote mere seconds to your banner ad, so make those count.
Choose fonts wisely
Your text should be instantly readable, and easy to make dynamic. Make the body copy and headline different sizes. Avoid all caps, tiny font, and squiggly cursive fonts that are hard to read.
Strive for brand harmony
Be consistent with your brand, but you don’t need to be bound to your brand colours—it’s okay to do new and interesting things in a banner ad so long as it doesn’t clash and conflict with your overall branding themes. Harmony, not absolute mimicry, works.
Get to the click
Remember, you’ve got seconds to work with when it comes to banner ads. Your creative should lead to a click-through as quickly as possible. This means you can build a gallery in your ad, but don’t add any refresh or back buttons. You want your user to click to your landing page rapidly, and you want that to be their natural (and only) destination.
Use the right sizes
Google Adsense says that the most successful sizes are:
300×250 Medium Rectangle
336×280 Large Rectangle
300×600 Half Page
320×100 Large Mobile Banner
Treat each size appropriately. The 728×90 size should ideally feature only text. Nonstandard sizes like 970×250 can benefit from more content, whereas the much smaller 320×50 mobile size should have only 2 frames and a button.
A clearly defined frame
A subject inside a clearly defined frame draws people’s eyes naturally. Banner ads with that kind of frame are more effective, so make sure you give your designer the exact specs. This way they can take your graphics right to the edge of the box, and then give it maximum visual appeal with a border to frame the ad for optimal effect.
Choose the right colours
Colour is the first thing your visitors notice. All colours have different associations, so choose them wisely. They shouldn’t conflict with your brand, and they should evoke the right emotions in your target audience.
Colours also take on new meanings from culture to culture, so make sure you know your target audience inside and out when choosing your colours. Here are some examples of the kinds of emotions colours usually evoke in Western viewers:
Red: angry, passionate, loving, excited, and sexual. This powerful hue appeals to most people, but not when it’s overwhelming. If you’re hoping to achieve a serious, somber, or mature tone, avoid red.
Orange: energetic, playful. A flashy standout, but less overwhelming than red, orange is filled with energy and direction.
Yellow: friendly, cheerful, and hungry. Yellow catches the eye has a young, vivacious vibe. It also suggests food and appetizing themes, like the inside of a warm, friendly kitchen.
Green: fresh, healthy, environmental, alive, growing, nurturing, and new. Green is also relaxing physically for the eyes.
Blue: safe, reliable, trustworthy, mature, clear, intellectual, serene, refreshing, formal, masculine, and cold. This is the most popular branding design colour in the world by far, appearing in almost half of all logos worldwide.
Purple: royal, luxurious, wise, extravagant, feminine, magical, and creative. Purple has a calming, soothing feeling for viewers.
Pink: feminine, loving, youthful, sweet, and babyish. Tone and brightness really control the meaning with pink.
Black: powerful, exclusive, modern, mysterious, formal, prestigious, and luxurious. Black text on white is still the most easily readable combination out there, and for a traditional, non-nonsense brand—or a hyper-modern startup, either one—black can be a powerhouse.
Grey: practical, neutral. As a background makes for more intense colour combinations.
White: clean, pure, sterile, modern, honest, simple, and innocent. Ideal for conjuring up feelings of youth and frugality.
Brown: wooden, natural, serious, earthy, leathery, tough, masculine, and humble. Perfect for balancing brighter colours, and suggesting natural strength. Perfect for background textures and colours.
Tying it all together
These 15 tips for amazing banner ads are some of the basics that can help you get started. As you probably already know, when it comes to designing web banner ads that really perform, there are quite a few elements to consider all at once.