I'm part of a MediaWiki site called D&D Wiki. Among others, one of our longstanding issues in the public eye was our failure to label clearly enough that certain pages are categorised 'Homebrew', as opposed to 'Official'.

Consequently, we pushed through a solution wherein all pages that are not 'Official' are labelled with this lovely homebrew banner. Contrasting with the site's light, creamy-browns, brazenly displayed is this page-wide, striking black/dark purple/red banner, complete with black-bordered white text that is very largely and clearly displaying the words "Homebrew Page", with extra minor explanation.

Official pages and homebrew pages have different colour schemes, different fonts, different text sizes, different table layouts, different title schemes, and, notably, a different banner declaring it 'official content' that is noticeably different at the shortest glance.

However, I have heard multiple times from reddit, to our chat, to stackexchange itself that, and I quote: "the homebrew banner is inexplicably hard to notice despite being bright purple.". Somehow people are still getting these two categories of pages mixed up?

I profess my own inability to understand this situation. Did we overshoot human perception? Did we make it so noticeable, so.. obvious, that it could not be seen from within; Like humanity itself being unaware of the entirety of the universe around them?

How do we make people actually notice our banner? Or is there a better way to inform people of the homebrew nature of the content they're seeing? Are these blind people all weird freaks, or am I somehow off my nut?

enter image description here

EDIT: Thanks all for the interest and helpful responses! For those interested, our subsequent discussion on the matter can be found on the site, here (archived).

  • 31
    Not an answer, just suggestion - use slightly different color schema for homebrew pages.
    – Arvo
    Commented Aug 27, 2018 at 10:28
  • 140
    Just some food for thought; if the banner is so big and clear then why did you think it was necessary to circle it for us? It is the only banner on the page after all...
    – MonkeyZeus
    Commented Aug 27, 2018 at 12:24
  • 314
    On first glance, I thought it was an ad. Ads are frequently jarringly colored and I think we're trained to just look past them. Also, the 'warning' about being homebrew isn't prominently featured in the body. I'd suggest you look at the wiki for Star Trek and Star Wars, both of which feature alerts for canon and non-canon pages (memory alpha/beta in the first case, and regular/legends in the latter).
    – Brian R
    Commented Aug 27, 2018 at 14:27
  • 47
    @user2979044 On behalf of many people I've gamed with, thank you so much for making this effort. The fix that you really need is quite simple: PUT "HOMEBREW" IN THE PAGE TITLES, so that it's immediately obvious in search results.
    – Foo Bar
    Commented Aug 27, 2018 at 14:38
  • 84
    Thank you so much for asking this question. I was actually one of the users that never noticed the banner and when I finally did I thought "Man, they shouldn't have the banner look just like an ad for a videogame or something, they should change that."
    – Tophandour
    Commented Aug 27, 2018 at 17:35

16 Answers 16


This phenomenon is called banner blindness. Your labeling looks like a banner advertisement and is therefore subconsciously skipped. Users have been conditioned to ignore complete sections of content if their previous experience taught them that it always contains irrelevant stuff. The more attention the banner tries to pull, the more it's ignored. If you want people to notice a label like "homebrew" or "official", you need to place it somewhere that users are scanning for naturally.

In your case, consider putting it next to the page title. You may also want to work with alert icons, as these tend not to be ignored by users if they are used sparsely. Preferably a contrasting colour with the rest of your colour scheme.

  • 63
    Totally agree. In any case, I would recommend placing the alert or banner underneath the page title: that's where the content goes, and where the reader will jump to instinctively. Commented Aug 27, 2018 at 12:02
  • 43
    Spot on I think, even after reading the question my head still filters it out... Commented Aug 27, 2018 at 13:03
  • 14
    I'll just emphasise the "subconsciously" in this answer. Users aren't even choosing not to look at it. It has to all intents vanished. It's a general psychological process called "Inattentional Blindness" .
    – PhillipW
    Commented Aug 28, 2018 at 16:05
  • 8
    I guess I totally spoiled myself by effectively blocking all web ads for so many years. I never evolved this mechanism. Freaky deaky, but makes sense.
    – anon
    Commented Aug 29, 2018 at 19:38
  • 7
    It was flashing and everything!
    – forest
    Commented Sep 2, 2018 at 22:18

The banner is beautiful but the style does not match the rest of the page. You know what is everywhere on the Internet with unmatching graphic styles? Ads.

As others have said, the problem is that users are not considering it as part of the content. It appears to be an ad, so they skip it.

I think the crucial action to be taken is to integrate it deeply with the rest of the page. Make it part of the content and, most importantly, make the style fit so that it does not feel extraneous.

Also, there is an XKCD strip about looking like an ad.

  • 6
    – Kit Grose
    Commented Aug 27, 2018 at 23:34
  • 42
    What doesn't XKCD have a comic for? Commented Aug 28, 2018 at 7:35
  • 18
    @John Is there an XKCD about there being an XKCD for everything?
    – mbrig
    Commented Aug 29, 2018 at 21:27
  • 4
    FWIW I'm sure the strip is more about trust than blindness. Commented Aug 30, 2018 at 12:26
  • 1
    BTW, I really hate sites disguising ads as fake comments from users. That's about the only kind of ads I get to read. Commented Aug 31, 2018 at 6:43

It's the design. Visually it's not part of the site or page. It's a square of content that doesn't belong to the site visually which indicates it's an advertisement to users.

Design the banner to be part of the site visually.

The most simple way is to design it out of its surrounding design. This makes it part of the site visually. Below is an example.

Here you can see how obtrusive the purple banner is when it's removed:

enter image description here

Here is an example of the banner designed to be a part of the site:

enter image description here

  • 56
    The example you gave is exactly what I'd want to see on the site as a user.
    – Tophandour
    Commented Aug 27, 2018 at 17:37
  • 64
    It's better but I'd still miss it because my eyes start reading at "Main Page". I tend to ignore anything above because it's presumed to be part of the site stye. It's doesn't feel like part of this specific page. Commented Aug 27, 2018 at 23:30
  • 3
    Solving a problem by not trying to solve it is the fine art of web design.
    – Reactgular
    Commented Aug 28, 2018 at 15:30
  • 18
    This is really good, but I'd drop the word "PAGE" that isn't adding anything and have it just say "HOMEBREW" to focus on the detail that matters. Commented Aug 28, 2018 at 16:01
  • 3
    Honestly this banner shouldn't be on the homepage in the first place. The page has no content of its own, and its defining feature is that it links to both homebrew and official content.
    – MJ713
    Commented Aug 29, 2018 at 3:19

As previously said, the banner is inducing banner blindness not despite but because it is so enormous, prominent, clear and contrasting purple. Also, its placement just above the content makes it easy to ignore. The reader starts reading at the headline. Anything above it is easily ignored.

Possible solutions:

  • Put all the "Homebrew" content into an own Wiki namespace, just like you did with the SRD material. That way the headlines of all homebrew articles read "5e Homebrew:ArticleTitle" just like the official material reads "5e SRD:ArticleTitle".
  • Put the banner which tells the user what they are reading below the headline. Don't use an image. Use a template box which uses the normal MediaWiki markup syntax so it better blends into the site design. You can use the templates from Wikipedia like "This article needs work" or "the neutrality of this article is disputed" as examples. The Wikipedians figured out a pretty good balance between being visible enough and not being so visible they induce banner blindness.
  • Create two completely separate wikis, one for homebrew and one for official material. Give them different names and logos.
  • While the Wikipedia banners are not quite as ad-like as the example in the question, they're still sufficiently banner-like that most users will probably not read their contents -- especially if they're used to seeing similar banners on Wikipedia. At best, you'll probably manage to communicate that "somebody thinks there's some issue with this page." That said, I'll give you a +1 for the other suggestions, which I think are solid. Commented Aug 27, 2018 at 23:34
  • @user2979044 This "two wikis" suggestion raises an interesting question for me: what is the primary purpose of D&D Wiki? Your tagline ("Home of user-generated, homebrew pages!") suggests that the homebrew stuff is the main attraction rather than an out-of-control sideshow, in which case you should just rename the site "D&D Homebrew Wiki" and have dandwiki.com redirect to dandhomebrewwiki.com. (Also, shouldn't it be "www.danddwiki.com"?)
    – MJ713
    Commented Aug 29, 2018 at 3:13
  • 1
    We host both SRD and homebrew, that is our primary purpose~ I do appreciate the suggestions, but changing namespaces and splitting wikis is kinda technically implausible and unwanted for a variety of confusing reasons at the moment. Very much appreciate it, and you raise some good points, thank you!
    – anon
    Commented Aug 29, 2018 at 18:44

If you look at a Wikipedia article with a banner that's functionally not unlike yours (this article needs improving), you'll see there are a number of design differences. Namely:

  • The banner is part of the article, placed directly under the article's title
  • The banner is not as wide as the article, it's centered but slightly smaller than the article text.
  • It has neutral colors, matching the rest of the page, but there's a contrasting icon drawing attention to it.
  • The text in the banner is non-standard, with bold and italic parts and various blue links.

All of this makes the banner hard to miss and easy to parse. If you open the page you'll notice it immediately and it's easy to guess what it's trying to tell you.
Applying this to your banner, I'd create a padding area between the banner's edges and the article's edges. Right now it looks like a taskbar, window-menubar or ad-banner, something to ignore unless you're looking for it. I'd ditch the contrasting background color, opting for a single icon with text on a plain background to communicate its intent. If you feel like with these changes the banner doesn't draw enough attention you can try to change its position, play around with that, and perhaps change the text formatting. You can add a link to a page with a more complete explanation and perhaps make homebrew page and d&d wiki bold.

Alternatively, if you're brave enough, you could try altering the article's font. I think for something like a D&D wiki you could get away with a handwriting style font (one that's still legible) for user-made articles. It clearly distinguishes the user articles from the official ones and because of the formal/informal clash it might convey the intent that way. It would then become more like a user's 'notes' on a subject, instead of an article.

  • 2
    Another difference from the Wikipedia example: the D&D Wiki banner appears on the homepage. So the user registers it as "normal part of the website, safe to ignore" instead of "hey, this is different".
    – MJ713
    Commented Aug 29, 2018 at 2:38
  • 2
    By the way, research suggests that those warnings on Wikipedia pages do make a difference: mediawiki.org/wiki/Reading/Web/Projects/Mobile_Page_Issues/…
    – Nemo
    Commented Aug 29, 2018 at 12:00
  • 3
    It also helps that Wikipedia doesn't have ads, so users consciously know that the banners aren't ads.
    – Hydraxan14
    Commented Aug 29, 2018 at 19:06

enter image description here

Can I suggest trying the Github ribbons.

This is remarkably noticable and doesn't take away from the rest of the content.

Have a ribbon for 'official' and 'homebrew' with differing colours.


You say you have different colors, fonts etcetera, but overall the pages look very similar. A large page has so much visual noise that simply changing thw font won't be enough if it's still a similar layout (sidebar, 3 columns, same main logo). The only thing somewhat noticeable at a glance is the background and beige/white both fit in closely with the other beige and brown tints so th3 user doesn't really perceive the background swap.

And as others mentioned, people tend to ignore banners because they're usually advertisements.

I'd suggest changing the whole palette from beige to purple (not bright, more pastel like lavender) and maybe slightly change the wiki logo in the topleft to a different color and maybe add a "homebrew" tagline underneath. I'd keep the fonts and such the same on both sites to still keep some consistency between the two.

enter image description hereenter image description here

  • I appreciate that you included examples of both pages in your answer.
    – cmm
    Commented Aug 27, 2018 at 15:16
  • 2
    Perhaps if the font/colorscheme was purple instead of a purple banner it would be more clear. Honestly I had to do a doubletake between the two screen shots to see the difference. Commented Aug 27, 2018 at 15:43
  • 1
    mmmmm chicken nuggets * Homer drooling noise * Commented Aug 29, 2018 at 13:36

Official pages and homebrew pages have different colour schemes, different fonts, different text sizes, different table layouts, different title schemes, and, notably, a different banner declaring it 'official content' that is noticeably different at the shortest glance.


How do we make people actually notice our banner? Or is there a better way to inform people of the homebrew nature of the content they're seeing?

I followed one link from the question to a page with a homebrew banner and then tried to find an official page to contrast the styles. The first one I found was https://www.dandwiki.com/wiki/3e_SRD:Multiclass_Characters. Now, maybe I am a blind weird freak1, but I can't see the different banner on this page, and I can't see the different colour scheme. The text styling is different, but unless you channel all users of the site through a tutorial which explains how to read the differences, that's not much.

Consider making more drastic changes in the colour scheme, or (my preference) going beyond colour scheme to change the background. A faint repeating watermark on the background doesn't trigger the same instinct to ignore as a banner (in any position, of any size) and isn't skipped by scrolling.

1 I'll certainly cop to two of those.

  • Oddly there seem to be three designs: with homebrew banner, with non-homebrew banner, and with no banner at all. You have stumbled onto the third one. Here is an example of a non-homebrew banner: dandwiki.com/wiki/UA:Variant_Rules
    – MJ713
    Commented Aug 29, 2018 at 2:34
  • 3e SRD is a new official namespace that's a work-in-progress, so you just stumbled an unfortunate, temporary direction that will be rectified soon~
    – anon
    Commented Aug 29, 2018 at 20:19
  • 1
    I'll copy on Peter's suggestion - Try to create more significant change in the overall look. Let the official pages be brown-orange tinted and the homebrew purple tinted. All page background, text beckground and text matching each colour scheme.
    – Crowley
    Commented Sep 5, 2018 at 15:23

I would say that the problem is twofold. I believe, first and foremost, the problem is that the website is labeled as a Wiki and is miscommunicating its intentions to visitors. Because of this, people are more likely to assume that any information on this site is going to be references of existing information found in Wizards of the Coast D&D material. A wiki isn't really a place for fan-made content. You're unlikely to find fan content on a Wiki site revolving around Star Trek, for instance.

The other problem is that, as others have answered, your homebrew notification bar at the top of the screen is located in a position that primarily would be reserved for ads. The clashing colors from the rest of the site inadvertently causes people to avert their gaze because they don't care to look at what they interpret to be an ad.

  • 4
    Love your first point. For comparison, I might bring in scp-wiki.net. Like the D&D Wiki, it emphasizes original user-created content, and it is a wiki under the hood. But you'll note that it avoids using the word "wiki" in its logo. Then again, I have to wonder if inherent to the software; any site that uses the MediaWiki software is going to remind people of Wikipedia, for better or for worse...
    – MJ713
    Commented Aug 29, 2018 at 6:03
  • 1
    Your first point is an unfortunately common misconception probably caused by Wikipedia. Though this idea might still be part of the miscommunication as you say, a wiki is exactly a place for user-generated content (while an encyclopedia is not). Commented Sep 6, 2018 at 13:07

I believe people stopped scanning Banner a while ago. They are either cosmetic or they are for ads.

You would have better chance by having a little warning icon and the message at the beginning of the section, or something in a similar fashion.

This way the user will start reading the content and notice icon + text.

TL;DR : People subsconsciously bypass banners


I'll be honest, I've looked at the D&DWiki homebrew pages countless times in the past, and this is the first time I've actually noticed that banner. I mean, I know I've seen it before, but it always registered as a banner ad, and not as part of the page itself, so I always ignored it.

  • 7
    While this is definitely a relevant comment, it's not exactly answering the question itself! It may be better moved to the comment section on the actual question, or ideally expanded into a full answer. Commented Aug 28, 2018 at 14:31
  • @Ruadhan2300 It actually kind of does. "Why do people not notice ...?" / "... it always registered as a banner ad, ... so I always ignored it." It's short, yes, but it's also straight from the (a?) horse's mouth, rather than just being an accurate, strongly-educated guess like the other answers.
    – SamB
    Commented Apr 27, 2019 at 21:36

Other people have touched on this, but: the very fact that the banner is aesthetically pleasing suggests that it's there to be aesthetically pleasing. A basic concept of design is that if you want to be clear that something is there to do X, then you should make it so it can only do X. If I look at a wall and see a rectangular patch that is an ugly shade of green, I'm likely to ask "What's that for", and notice that it's a door. If there's a rectangular patch that has a pretty cosmic image painted on it, it's probably going to take me longer to register that it's a door, and not just a painting. If people see something with no apparent purpose, then they're going to wonder what it's there for. Once a purpose can be assigned to something, people tend to not sit around wondering whether there's some other purpose they're missing.

The dramatic image also takes attention away from the text, and makes it harder to read if people do notice it. It would be more effective for the entire page to have a distinctive border and/or a different font.


Some of the answers here are too complex (it's the "experts addressing expert issues" phenomenon: where a bunch of top experts "don't even bother pointing out" the obvious problems!)

I'll humbly explain the

Two ridiculously obvious problems:

  1. Type on an image is unreadable. This is one of the most basic points of graphic design. You have type on an image, so it is totally unreadable.

  2. The type on the right has "border" all around it. This is totally unreadable. Again this is a very basic issue in graphic design.

It's honestly that simple.


People are excellent at ignoring what doesn't lead to their goals (in this case probably "wanting to read about D&D").

Does this banner/notice/hint look like it will get me to Snarky Silver Dragon's stats? Nope → ignore.

This happens subconsciously without people realizing it (we had eye tracking tests showing they glanced over the thing and people being totally unaware of the element when asked about it), so if you want to slightly improve (let's set up a realistic goal) percentage of people noticing the message, here are some ideas:

  • slow people down - there can be overlay with an alert and a button they need to click ("Yes, I accept this page doesn't describe D&D canon.")
  • slow them down even more (add a checkbox "I accept that" that needs to be checked before it's possible to hide the overlay)
  • make it a part of the content so that it looks like a thing they are after (maybe put under the header) and make it look more similar to content ("Disclaimer: this page is a Homebrew and it doesn't describe a D&D canon.") - maybe same as paragraph text, but with some border and maybe an exclamation mark icon?
  • put the information that this is a Homebrew somewhere where they are already slowing down and thinking - my idea is to do this on links. For example, canon links would be plain, but links to homebrew pages would all have " (Homebrew)" and maybe some icon added? And they could have a different color? And a "?" tooltip that would explain what is homebrew on mouseover?

I see a few possible causes for the homebrew banner getting ignored by some of the users of your website:

  1. The purple part of the banner is outside of the reading flow of the website. In a columnar layout the second and third columns are naturally left to be read in the end. The purple part feels like a second column in the banner. The black part flows nicely to the site content. It feels part of the first text column, pushing the user to the content. When the user is going from the bottom of a column to the top of the next, he or she stops in the horizontal rule. The color differential of the banner and the warning text crossing over the gap between columns also act extra virtual horizontal rules. In short, the dark part of the banner lead directly to the content and the horizontal rules block the users to get back to the banner latter.

  2. Contrast calls the user's attention. The biggest contrast is in the left of the banner and lead the user to start the columnar reading flow.

  3. Too much text to get the meaning. People have to read the long explanation in the banner to understand what you mean. Maybe you do not need a banner, just a simple and smaller header text like "UNOFFICIAL CONTENT: this page was created by an user (...)". Small, direct, clear expressions in key positions have more chance to catch the user attention.

  4. The warning on the banner contradicts what "Homebrew" means. This helps our subconscious to filter it out. Homebrew beverages are usually a special hand crafted product made by the owner of the house. The owner is the webmaster. So, it conveys the feeling that is a special content section from the webmaster. Therefore official. Exactly the opposite of what the warning states.

  5. As others have stated, it looks like an ad banner and the color scheme does not match the website.

  • 5
    On point 4, your description suggests (and I may be misinterpreting here) that you might not be familiar with how the word "homebrew" is used in the tabletop gaming community. It is a widely used piece of jargon even outside this specific website, and means "not an official company release". Though I feel your description gets at the deeper problem: as far as I can tell, the "special hand crafted product" is the website's main attraction, and yet the design seems to treat homebrew as a deviation from the norm, warding us away from it.
    – MJ713
    Commented Aug 29, 2018 at 3:38

Beyond the technical and perceptive data analyzed in each of the answers, the page has a very serious drawback regarding color perception and it is precisely the color choice.

Each color has, in addition to its optical and psychological characteristics, a type of affectation to the perception that is quite difficult to avoid or counteract.

Regarding the colors of the web and taking them to the maximum purity from where they come, perceptually they are characterized by:

  • Yellow = better color recall, little or no shape recall
  • Purple = Better memory of shape, poor color memory


The intensity of yellow or any color within the same range never goes unnoticed and perceptually it has the ability to devour any other color and shape. While low tonal value colors like purple, brown, or blue tend to look like backgrounds.

Explained in another way, referring to the previous image, if we could see it in perspective, the result would be yellow placed ALWAYS on top:


There is no way to shine more than yellow, we can only contain its strength by using a neutralizing color like gray, but never shine more than it. Even using pure RGB colors, yellow always prevails:

RGB combination

In fact, in the color memory exercise, all of them tend to blend in, except for yellow:

Color memory

In the case of the web example, the proportion doesn't help either. The light color similar to yellow occupies 90% of the page in a desktop window with maximum magnification, favoring the already null presence of the banner.



Knowing this color combination complexity and that one element has to stand out above another, I would recommend experimenting with another contrast type, within the possible ones, for which it can be helpful to use basic shapes respecting the percentages


Some contrast examples (not final solutions)

Strengthen the current Color contrast:

color contrast

Or use another type of contrast or combination within the possible depending on the element to represent the banner.

Style contrast

Style contrast

Texture contrast


Shape contrast


The timeline contrast (animation or video) would be the best option and always outstanding, but this depends on the technical possibilities of the web construction.