Maximizing Fanfiction Web Design: Part 2 (Color Theory)

Color Theory

Colors are like that stereotypical Eastern Black Widow mistress in spy novels; They're the most gorgeous, and alluring things on a page, an enigmatic thing to understand and very, very dangerous.

Colors are perhaps the most loaded aspect in web design; not only must you choose colors that are readable (most important in this arena), set a mood or theme, and work functionally. It working would seem naturally intuitive, but you might be surprised.

I must be frank up front, I feel as though no matter what I cover in the color section, it's going to be a disservice. Colors are that important and tricky; the factor about a website that I stress and have stressed over more than anything in my career. The quality of this section was meant to be poorer anyway. Color is just too powerful to discuss in-depth. Instead, It's best to list things to avoid.

General

This is going to work better as a laundry list, so that's what I'm going to do.

• A website should contain no more than two to three hues, in every facet of the website that is not full-color images. Logos should stick to the same 2-3 hue rubric and should be the deciding factor in what colors your website uses. Included in hues however, are all the percentage value of that hue; for example, black is one hue, but percentages of that hue would include 0% (white) or anything in between (grey). if using blue, you can also use a light blue in addition to the other hue(s). Be careful not to confuse different hues as percentage values of the same hue.
  
  Think about what lots and lots of colors reminds you of; clowns, confetti, parties, etc. What is the common link between all of these? Non-seriousness and chaos. Too many colors can give a very unprofessional attitude towards your site in a user's mind. Come on, we've all stumbled across a GeoCities page in twelve colors and run for our lives. Also, when too many colors/hues are used, they are more than distracting, it lends your page to having absolutely no order or significance. When everything is it's own color, much like when everything is bold, there's no clear and concise importance placed on one thing and it all loses it's value.
  
  Sites that use a minimal color scheme: Altered Visions, Revolution X, Marvel Dark Design
  Sites that use far too many colors: M2K, Alternate Marvel, JLU2001, Frontier Publishing
  



• Contrast is the number one goal in web design, to an extent. Your background and all non-important items, like tables and design elements should all be similar and tend to fade out of user focus. The content on the other hand, is where our contrast should happen. Anything that should stick out, you should make an effort to do it. This includes your text, links and navigation. Again, do this without sacrificing your 2-3 hue limit.



• Complimentary colors do not compliment on the web. If you don't know a lick about art, complimentary colors can be thought of in the most base form as being colors that exist by being mixed by unlike colors. For example; blue and orange are complimentary. Blue obviously being a primary color and orange being the mix of red and yellow NOT blue. Get it? Good, me neither.
  
  At any rate, the most important thing to realize is that while contrast is important, too much contrast can clash, which is what complimentary colors do on the web.
  



• Primary colors are not your friend.
Red, Orange, Yellow, Green, Blue, Indigo, Violet (ROY G BIV) should never be used in their 100% state together. They are too stark, too contrast and too 'confetti color' being used together. If you want to mute or subdue two of them together, you can do that, but be careful. Also, do not use your primary colors on a black background, it's more strenuous on the eye than on white (should still be avoided there).

Primary colors are often used in fanfiction sites and for the life of me, I don't understand why. Because it is so often done, I am going to make an example of a few of them. They tend to come off as a Crayola box and that neither sends a confident message to a reader, or makes it a pleasure to view (too much clash, too much color).

Sites that misuse primary colors (and in volumes): M2K, Alternate Marvel, JLU2001, Marvel Omega
</li>


• There is no need to change the colors of pieces of the site when the user clicks on a separate imprint or title. If you do your job as a designer to clearly designate what site they are on, what imprint and what title, it is easier on them to know where they are. This goes back to the concept of the mental map. If the user sees that the main page is done in black and blue, as is one of the imprints, then they click on the next one and it's in red? That's confusing; even if slightly.
  
  There is a web design book called "Don't Make me Think..." by Steve Krug (a MUST own, even for hobbyists), and believe it or not, it's true with a web user. If you cause a user to think, even if for a second you can irk them enough to never return or move on. Guess what, you just lost a reader? And if that happens over and over you could cut down your entire (possible) readership immensely. Keep your whole site blue, use the same images for your "New Issues" tables, yes it's boring but it's uniformity and is best.
  



• If you don't like the mute background/dark text configuration and would much rather do a dark background/light text that's okay, you can do that. Just don't do black with white text. As if I haven't said it enough, too stark, too much contrast, too much strain on the eye. You can try a navy or a maroon (if you feel adventurous).

Theme/Mood/Associations

Perhaps the most powerful yet subversive and subliminal facet of color theory is mood. What do you think of when you see Green and Red together? Christmas. Red, White, Blue? America. Purple and Green? The Joker. It's associations like those that we must be careful to avoid. Moods like anarchy, death, and anger are things that should avoided, too. All of these can intentionally or unintentionally be achieved by color alone.

• Avoid holiday associations: Green/Red (Christmas), Orange/Black (Halloween) etc. Not only do the holidays themselves have deep connotations, but (and this will sound silly), what if someone your reader loved died on Christmas?



• Don't be a stupid goth-teen: Harking back to GeoCities, I'm sure we've all stumbled across the black background/red or white text/red or white links. While it's this humble author's opinion that those colors are trite together, for the goth kid it fits. What does black often associate with? Death, disease, bad. Red? Blood, death, stop, rage. Together? Anarchy, rebellion. For a punk rock site, or the goth kid those colors are perfect, they set the exact tone tone that those audiences expect. The last thing you want to do in a fiction site is fill your reader with rage or anger. Also, that color combination is rather morose and can negatively affect subliminally how a reader would fell about the stories on the site. Believe it.



• Red means stop:
As mentioned above, red is often associated with stop. You MUST be careful with red. it is one of the most harassing colors, and is often associatied with stop signs and lights. The user can subconsciously translate this into, "I don't want to be here", or "I shouldn't go any further." It's a tough trick to balance, especially when red/white are used together; almost never working right.</li>


• I'm Blue for you: I've listed what colors are generally the worst for a fiction site... so what's the best? What's a sneaky way to increase the positive subliminal interpretation of a site using color? Blue. Blue is the number one color associated with professionalism and respect. As my color theory instructor put it, 'think about it, how many Presidents have you seen wear a navy suit with a red tie?'
  
  The reason for that is because blue empowers. For the web, blue and white and grey are the most commanding colors that can be used. Stick with those and you'll be in good hands.


Well, that's all I really feel like covering with color. Sorry it's rather skimpy, but color is just too massive to do anything more than a few examples. If you are interested in Color Theory, grab books or take a class.

As far as theme goes, if you're unsure of what your colors may represent, you can always ask me, or you can just ask yourself where do you see these colors, and is this what I want to achieve?

next section: logos/navigation