Banner Ads: Excellent Examples for Inspiration

Jun 20 2010 by Andy Johnson | 28 Comments

Banner Ads: Excellent Examples for Inspiration

Advertising is everywhere, especially on the Web. Most websites I visit have some sort of web banner advertisements on them. For some websites, such as big design blogs, advertising is the main source of income.

With that in mind, it’s clear that website owners need to think very carefully about how their ads are displayed and where they are placed in relation to other elements on their site.

I have put together a showcase of different ways that a few websites show their ads, which might be helpful when it’s time to place banner ads on your site. Some are bang in your face while others are more subtle, blending in with the web design.

CSS Remix

The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

CSS Remix

Design Bombs

Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Design Bombs

Noupe

Noupe displays their ads next to their site content and at the very top of their site. They also have a small line of text below each image ad. This structure is the same as Smashing Magazine, who aquired the site recently.

Noupe

TheFWA

The FWA web gallery displays a huge variety of ads on their site’s top right-hand corner consisting of three web banners at a time.

The FWA

Webdesigner Depot

A beautiful site should have beautiful ads, and that’s what Webdesigner Depot has. They display their ads in a clean and simple format on their right-hand sidebar.

WebDesignerDepot

InstantShift

This clean website design has a bunch of excellent banner ads that run seamlessly down the right-hand column. It looks great!

Instant Shift

Behance Network

The new beta Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content. It works very well with the new site design.

Behance Network

PSD Graphics

PSD Graphics has a huge banner ad in between their layout’s header and sub-menu. It works well with the site design because it’s the right size, and I also think it grabs people’s attention.

PSD Graphics

Best Web Gallery

Nick La has used his dark website design to an advantage because all of the ads on the this CSS gallery are very bright and colourful, making them truly stand out.

Best Web Gallery

BrushKing

BrushKing has a nice, rich, brown and red colour scheme. The web banner in their header works so well because it fits with their site design.

BrushKing

Web Designer Wall

Web Designer Wall has an in-content ad at the top of all their articles.

WebDesignerWall

Creattica

Seven 125px banner ads are displayed in between Creattica’s design inspiration listings.

Creattica

Tutorial9

Tutorial9′s colourful ad banners fit perfectly into the right-hand sidebar, and the ilustrative header helps the ads stand out.

Tutorial9

Fuel Your Creativity

The colourful ads fit right in on the right-hand side of this design blog.

Fuel Your Creativity

PSDFan

PSDFan has a large web banner that sits right above their blog posts, under the navigation.

PSD Fan

WpRecipes.com

WpRecipes.com has a nice subtle sidebar in which they display 125px web banners. The background that curves around the site makes everything look more colourful.

WP Recipes

CSS Drive

CSS Drive has many elements packed into their site. They even have enough room to include ads that blend into the site design very well.

CSS Drive

Veerle’s blog

Veerle’s design blog displays ads via The Deck advertising network on her left-hand sidebar. Everything on the site has a lot of padding and space, which makes the viewer not miss the ad when scrolling.

Veerle's Blog

kirupa.com

The huge Flash community, kirupa.com, displays small little adverts on the right-hand side of their site.

Kirupa

Vectortuts+

The popular site tuts+ network by Envato displays a large banner ad on the top of the site’s content, and also has ten smaller web banners on the right-hand sidebar. The banner has a nice rotated “advertise here” button next to it, which I like.

Vector Tuts

Function

Function displays their ad banners in a narrow but tall column in the center of their page.

Function

Brusheezy

Brusheezy has a really clean web design, featuring their web banners on the sidebar.

Brusheezy

Related Content

About the Author

Andy Johnson is a freelance web designer and developer living in the UK. Andy freelances through his own design studio Authentic, and also co-founded a lightning fast UK hosting company called Pixeno. You can follow him on Twitter: @Andy92.

28 Comments

some guy

June 20th, 2010

Do people actually blog for the love of it, or is it just for the money these days?

ITDAY

June 20th, 2010

OK thank you.

Jacob Gube

June 20th, 2010

@some guy: Seems like a loaded question.

Cliff

June 20th, 2010

@some guy why not making money off something you love doing? :)

I really like CSS Remix – well integrated but still separated as to not “trick” people

Kevin

June 20th, 2010

Ironic how Smashing Magazine is not included here, seeing as they were recently preaching to not use ad blockers. Maybe if their ads weren’t as intrusive/disorganized/unattractive, people wouldn’t have to :)

Nikos

June 20th, 2010

The theory is that the more the ads are blended in with your design the more successful they are.

My 2 cents on this… I think we all should be trying to promote stuff valuable to our readers, stuff that we have used ourselves and have helped us if possible.

This is probably the best way to achieve high click through rates.

Jacob Gube

June 20th, 2010

@Nikos: I can probably tell you stories about each of our sponsors. For example, I personally use Freshbooks for invoicing and time tracking. Site5 was the first host of Six Revisions, and still hosts a lot of my client’s sites. For the stuff you get, the price is unbeatable – definitely the shared hosting/low budget host I recommend to everyone that asks me. Formstack, well, it’s just awesome, and I’ve talked to colleagues who discovered this awesome web app through the web banner on the side bar. I also use MailChimp, and have worked with them on Design Instruct giveaways (they’re really awesome, just-like-us folks).

I can go on, but what I’m really trying to say is that I wholeheartedly agree with you. Ads here are tightly controlled by me and by our advertising agent, and I think that should be the case on all sites that consider web banner advertising. I’ve discovered a lot of cool, new things (like my one of my recent favorite sites, Techni.com) because of banner ads.

With that said, we’re also in a great niche – advertisers are often also web designers and developers like us, so the products and creatives are produced by people like us who also know what we like.

gday

June 20th, 2010

I think this article should have another headline.
Or just add “Web design blogs” banner ads etc.

I create banners way to often and these kind of banners are not my reality.
Flash? Ads that compete with unrelated ads on unrelated pages?

I wish I would be able to design ads that blend into relevant sites but sorry, this is not a reality in the corporate market….

Riki

June 20th, 2010

This was a nice article in that I got to see a few sites that I wasn’t aware of, but most of the comments regarding the ads seemed fluff and unnecessary. Might’ve been better to just group some of those sites together and use one description per group instead of per site.

Anyhow, reading the above comment, I also wanted to say that out of all the design sites I browse through, which includes Smashing Magazine, PSD Tuts, etc., this one is my favorite by far because of Jacob’s input and involvement. Always helpful, provides great insights, and just f’n genuine with his interest to share knowledge with everyone, it’s priceless. Keep up the good work.

Jacob Gube

June 20th, 2010

@Riki: Your point noted on the descriptions of the banner ads and organizing/categorizing the items.

And thanks so much for your kind words Riki, and to be a favorite amongst those other sites is very encouraging. I try my best to be as helpful and as genuine as possible, just because that’s what I started this whole site for (to have a place to share information and talk about our passion) and I’m glad that’s something that people see.

But now I kind of feel guilty/bad because I know I haven’t been as involved in the comments in the recent weeks (however, that’s only because I’ve been busy trying to make Six Revisions better for you guys/gals with high-quality content acquisitions and the site redesign I’ve been talking about for over a year).

LoungeKat

June 20th, 2010

@some guy When you blog for money you can use the money to make the blog even better. So it’s blogging for money to continue the love of blogging. ;)

Jade

June 20th, 2010

Sorry if this is a little negative but the title is kind of misleading. I interpreted it to be a post on creating banner ads, not on displaying them. I got really excited because I could really use some good examples and pointers!

On the topic of the article though, I think the first three and a few others look really messy and in some cases crowded. I can see the point of the first one though; people will look at the ads thinking they’re content and be more likely to click – which makes the webmaster earn more money. Smart and sneaky, but probably irritating for end users.

Look at Digg. Their ads match their site BUT they are also fairly easy to spot because they lack comments and the “popular” time. So they arent so annoying and users can skip over them if they arent interested. They’re probably pretty effective though because Digg is made for users to scan the titles of articles and judge whether they want to read it (or that’s how I do it)…so if they use an eye catching title then people may read it.

Using Digg again, they’ve made the ads match their site so someone skimming the page wont notice it. They’ve made their ads neat and they arent interfering with content. There’s a few sites up there which I feel ARE interfering with content….and I feel like most of them are really BAD examples of what to do with ads.

Brusheezy feels really busy and overwhelming.

Function feels kinda squashed. Their left column is awesome but their two right ones are really busy. They need to minimise that a little.

VectorTuts is actually not too bad. I think it’s because of the width though. I’m afraid to resize my browser.

CSS Drive is horrifying. I can’t tell what’s content or ads without focusing on each individual thing (upon which you realise nothing is ads, bar a small banner up top). Not only that but it’s fixed width. Aligned left. That’s really irritating for widescreen users.

I dunno. I just feel like this article is all wrong and a let down.

Jaime-Ann

June 21st, 2010

I get excited whenever I see a new post listed on my six revisions folder in my google reader. This post caught my eye because it is a subject that always causes come controversy. I wanted to just make a few comments on a few of the comments I read here in regards to making money with blogs.

How much is too much? Where is the best placement for affiliate links? Should I be advertising on my page?
All are questions that many of us toy with but it really comes down to what your goals are at the end of the day? Many people want to make money online – it is only natural, right? I think it comes down to who and what you are writing for.

Jacob, I really appreciate that you took the time to explain why you post the ads that you post on your page. That right there creates a deeper level of trust that I have in you recommending the product/service and makes me that much more likely to click through on them.

Arvuti24

June 21st, 2010

What to do, if the design of the project is made so, that standard ads format cannot be used? Should I create unique ads for each client? or rebuild the project design?

Jordan Walker

June 21st, 2010

Advertising is a great way to generate a little extra on the side to help offset expenses. Great article!

Andy Johnson

June 21st, 2010

@Jaime-Ann

Really great comment you have there. How much is too much? I love the way six revision displays there ads. It was creative ads that inspired me and jacob to write this post.

Glad you get excited when you see new SixRevisions posts in your Google Reader Inbox.

We have some awesome content on the way so stay tuned!

Ray Melissa

June 21st, 2010

It is great to see all of the different ideas out there. Thanks for sharing, I think context dictates what is best for each individual site.

Jae Xavier

June 21st, 2010

To compliment this article: text ads – unobtrusive but catchy advertisements without using google ad words.

Jacob Gube

June 22nd, 2010

@Jade: You don’t have to be apologetic if you’re offering constructive, useful criticism. I agree, I like Digg’s creative ads. It’s ingenious how they allow their viewers to control what ads are on the site with voting options. They also naturally encourage advertisers to create good content so that they don’t get priced out; win/win for the Web. I also like Reddit’s self-serve ad system.

@Jaime-Ann: Thanks for your very kind words!

How much is too much?

Hard to say, I haven’t come across any study on this. As a general rule of thumb that I follow: If a lot of your long-time, loyal readers are complaining, if the ads are too distracting and affects the readability of your content, or if it affects your page loading times, you probably have too much.

Where is the best placement for affiliate links?

I don’t particularly like affiliate programs, unless it’s for something you really believe in. In terms of placement, anything high up and left of a layout is always going to be the most visible (at least, according to usability expert, Jakob Nielsen – source).

Should I be advertising on my page?

That’s something you will have to answer yourself. You’ll know when it’s time to advertise. If you’re hesitating on advertising right now, then you should probably hold off. If not, go for it!

Aisha

June 23rd, 2010

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

zz

June 25th, 2010

Excellent … Inspiration ??

They are a few nice designs mentioned in your articles but those banner blocks make them look butt ugly. I know you agree with me, but i guess it’s not politically correct to say it.

As far as i know, there is only one way to have ads and get away with it: Find sponsors with well designed logos and put them in monochrome. Most tennis tournaments do that and i can actually watch it without that my eyes start to bleed.

jeanine naviaux

August 8th, 2010

Your site is where I come to first for inspiration and to learn. Keep up the good work!

B

September 1st, 2010

I stumbled upon this article in search of sites that used ads effectively in a not-so-ugly way. There are a few decent examples. However, they all feature the same ad sizes – not traditional 300×250 or the 728×90 leaderboard sizes. They’re all just a bunch of web 2.0 junkie sites that are all part of the same ad network(s) with their custom sizes and what not. Please try and vary your content a bit more and account for the rest of the web that’s also out there, not just the typical shiny/glossy/beveled web 2.0 clones out there, thanks.

Alex gomy

September 15th, 2010

Rubbish collection. They are all the same. Just banner ads on wp sites. I was expecting a badass collection of cool looking banner ads.

William

January 6th, 2011

Hi, I create advertising banners.

I arrived here when tryind to find new inspiration. I haven’t checked all the links listed above yet, but I will in a minute. I hope to find banners at least as great looking as mine ;-)

For anyone interested, my own banners can be seen at the top of my blog (see link attached to my name above).

What I would really like reading about too, is how much to charge for a leaderboard (most common dimension) taking into account that sometimes one is sent a storyboard with photos and sometimes is sent nothing more than just a very light brief.

William

January 6th, 2011

It was an interesting article, but like a few people pointed it out, the title is misleading… and this is not what I was after.

iwebgallery

January 13th, 2011

Excellent!

As far as i know, there is only one way to have ads and get away with it: Find sponsors with well designed logos and put them in monochrome. Most tennis tournaments do that and i can actually watch it without that my eyes start to bleed.

jenalyn

August 28th, 2012

i have a question how to make a banner ads? a

Leave a Comment

Subscribe to the comments on this article.