Tips on designing a banner ad’ to promote your website, blog or product

Posted on

A banner ad is an effective and speedy way to promote your website, blog or product. Of course though, this comes at a cost in terms of your pennies and some stiff competition. 90% of the time you'll be competing along side other advertisers, so the design of your banner is crucial. Just because you've paid out the ears to get on someone's hot hitting website doesn't mean the traffic is going to come flooding your way. So I'm going to share with you my top tips on how to make your banners work their magic.

Choosing the size of your banner ad

Banners come in an array of different sizes, ranging from small 20x20 pixel ads to around 600 pixel rectangles, and the trend is the bigger the add, the bigger hit on your wallet. The most popular size amongst the design community is definitely the 125x125 ad. It doesn't cost too much in comparison to some of it's bigger brothers and the click through rate along with estimated impressions is on par.

Always remember though, despite the popularity of some sizes you need an advert where you can clearly display all the information you want to get across. Having a crapmed unreadable advert is no good and won't get you anywhere.

Take these two adverts from MacAppstorm for example. The advert on top has clearly a lot of space to play with, the text is layed out nicely and is straight to the point, and the iPhone immediately tells you it's for an App. The advert underneath however has very cramped text that I don't really want to squint to read but it does have a logo on there. They've got the logo on there and the iPhone, though the iPhone is reduced in size you can still tell what the ad is roughly about. So perhaps the top advert could of reduced the iPhone graphic slightly and got their brand on there.


Think about your surroundings

Before diving in and designing your ad always check out the nearby ads and the background colour of the website it's going on. As ad's (especially 25x25's) are placed mere pixels apart you're going to want to make your ad stand out. Take these three ad's from NETTUTS, they're all grouped together and are all red. They all look like they're related, which is not what you want.


I know it's not always easy to know what ad your going to end up next (most of the time the order is randomly selected on each page load) to but you can at least get a good idea of what colours are going on around your ad.

Here we've got two contrasting ad's (from NETUTS again) which can be clearly distinguished. Was this done on purpose? You could never say for sure but MailChimp's branding is predominantly orange (notice the ad next to it is bright orange too) but this time the ad is blue, this could of been purposley done to stand out from the crowd. **Remind me to never say 'stand out from the crowd' ever again**


To animate, or not to animate that is the question

I'm in two minds about this at the moment, but I'm leaning more towards not animating. While animation can convey alot more information and helps grab the readers attention, it can infact do quite the opposite (For me anyway). Personally I don't like full blown Flash adverts but I can just about put up with a rotating GIF. I think If you're clever with your content and design a static ad will do just fine.

Decide on whether to have a 'call to action'

A 'call to action' (CTA) is you prompting the reader to find out more about your product. How this is received of course, is all down to the reader again. Personally I feel more inclined to click an advert if it's saying: 'Look at this service we're offering, click here to find out more'. The 'click here to find out more' is the prompt, it's offering you an action to take and your readers should feel more inclined to click through.

See these two adverts below, I've highlighted their CTA. The adverts that don't have a CTA are kind of just sitting there where as the other two and telling you to get that clicking finger ready.


Place you ad on a relevant website

Most websites have a theme or genre and by placing an irrelevant ad on there isn't going to do you any favours. If you're trying to show off a new web app', don't go putting it on a website that has no relation to your product. Even if you're going to get a lot more impression on said site, a site with more relevant content and visitors will generate you more click throughs or worthwhile ones at least.

Staying on brand

Now I know I've talked about adjusting your colours (at a long stretch) but keeping on brand is much more important. This top advert has no logo and not much indication of what's being advertised, so when you click through you might not even think you've arrived at the right place. Where as the 'Wallet' advert clearly shows the logo and a full application icon which follows though perfectly when you go through to their site. If you keep this consistent branding throughoutt your ad's or anything else across the web, you will start to be recognised and become more trusted.


I hope these tips help you out and if you've got any thoughts or tips of your own, please leave them in the comments.

Photo courtesy of timlings.


  • Destiny Islands wrote on

    Creating banner advertisements can be very difficult, but if you take the time to design a great-looking banner in Photoshop it really does pay off in the end.

  • Daniel Golden wrote on

    This is a great article, and it was really helpful for me. I’m have to have 3 ads created in 3 days and this is a new field for me, so thanks!

  • Martin Lucas wrote on

    Hello, thanks for the tips – I’m about to start designing an advert for one of my sites and this post has been really helpful.

  • Pingback: Digi auto links

  • Shmanth wrote on

    A very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.

Comments are closed.