User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a design planned for a site I'm developing. Nothing on paper yet, it's all just a concept in my mind right now, so please bear with me!

The site is sort of like a blog / news site. There will be a listing of items on the home page and you click through to view the content pages.

I want the site to look like it has been sketched on white paper. All the aspects of the site should follow this, for example the navigation, buttons on any forms etc, which should be fairly straightforward to achieve with images and sketchy fonts. I'm not saying that there will be no colour, but it will have a fairly free-form look with no blocks of colour anywhere.

My concern is that the site needs to generate some money through advertisements and as soon as I stick an advert image or something in the content, the illusion of the site being sketched on paper is broken. I'm also worried that the user's eyes will be immediately drawn to the advert as it will be the only block of solid colour on the page.

I have thought of alternative option such as signing up for an affiliate scheme and 'sketching' some little ads and links myself, but this will be a fair amount of work and quite a few publishers on affiliate schemes wouldn't allow this.

Do you know of any good strategies (links to actual websites would be great too) for incorporating adverts in a really heavily stylised site?

share|improve this question
up vote 8 down vote accepted

Here's three tricks that spring to mind:

  1. Create a visual effect of a square torn out of the paper, and show the ad through the hole.
    • This combats banner blindness: the ad is integrated with the design principle, and yet clearly stands out.
    • The visual joke will soften the user's annoyance at seeing an ad.
    • The edges of the ad will be partially obscured, prompting some curiosity.
  2. You can also stick something on top of the paper, like a post-it, or a torn slip of paper.
  3. You can simply use google's text ads. They allow you to adapt the styling.

Here's an example of #1:

An example of the idea of showing an ad behind the "paper" of the website.

Plenty of torn paper stock images to use. I stole this one.

share|improve this answer
Thanks, a well thought out answer and I love the visual effect! – Fiona - Apr 9 '14 at 8:41

I would advice you to place the ads in a graphical place holder that matches the style of the web page. I don't think it's a sane option for you to redo all the ads to match the style (in the sense that you'll probably go insane :) )

What'll probably save you in this case is banner blindness. Things that really stand out on web pages tend to have the exact opposite effect of grasping the focus from users...

I have seen google ads where there are no graphical elements incorporated into the ads, just a link and text. This might be something for your site?

share|improve this answer
Yes, going insane is not on my immediate to-do list! I think you may be right about the banner blindness, I'll have to give it a try – Fiona - Apr 9 '14 at 8:42

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.