Webcomickry: Website Design (Part 3: Color)

Ok, I promise I've got reviews of Zap and Shortpacked coming to the head of the line. I swear it. But I've been meaning to finish up my series on webcomic website design for quite some time now, and I feel like I've got to get it done so it's not hanging over my head and I can move on to other things. So here goes.

So far in this series we've discussed the pros and cons of different site structures (news first, comic first, blog style) and we've talked about all the various features available for archiving. Now I'd like to talk about something a little less technical, but no less important: color.

What colors should you use in your website? This is perhaps the single most important decision you must make when designing your site. Color is frequently the dividing line between someone say "Wow, that's a really cool looking site" and someone saying "Well, that website is not very attractive." Having an unattractive website can truly be death to a comic. It doesn't matter how great your comic is, if you website is just pathetic, you're going to lose a lot of people.

Now, I don't claim to be an expert artist. Far from it, in fact. However, I do know something about aesthetic design for the web, and I think I know enough about the different schools of thought to competently present them and comment on them.

Let's begin with the golden rule of color choice:

1. The colors used in a website must not distract the viewer from the content.

I cannot stress this enough. I don't care how interesting you think it makes your site look, if the colors are distracting, people are going to get turned off. People come to your website looking for your comic, not for some wacked out set of colors. Now, I can think of two webcomics I've read which clearly violate this rule: Panda Xpress and Candi. Both of them have a very loud background colors, at bright pink and red, respectively. And it's pretty obvious in both cases that the creators are trying to make their site memorable. I mean, you see enough blue and green and black on the internet to really make you feel like warm colors have been straight up outlawed, and there's a certain part of you that says: "if I really do something different, I can be noticed." But you forget that all you will be noticed for is your outrageous choice of color. Panda Xpress has absolutely fabulous art, some of the greatest I've ever seen. But I imagine that the majority of people that visit the site remember it only as "that comic with the hideous pink background." And while Candi is somewhat more forgiveable because the red kind of fits with Candi's personality, it's still a lot to deal with for a first time reader.

Now, does this mean these creators should give up on their bold color choices and put in something bland and sterile? By no means! But the colors should be handled in such a way that they do not distract from the content. Pink and red make great accent colors. But as the primary color for 95% of your page? NO.

Now, this isn't to say that having some gaudy background is the only way to make your site's color scheme distract from the content. Take a look at VGCats. Now, some of the busy-ness there comes from the fact that he's got a lot of different ads and links and whatnot running on the site. But notice that even in the site design itself he uses no less than FIVE shades of blue, plus white. And take a look at HOUSD, which has a very distracting red and white scheme. The acid test for distracting colors is to look at your computer monitor and kind of let your eyes unfocus. If they drift somewhere other than the comic or a newspost, you've got trouble.

Ok, now let's look at the silver rule, which applies more directly to webcomics. This is not as universal or as important as the golden rule, but still necessary for quality site design:

2. The colors used in a webcomic website must complement the colors used in the comic.

Now, this is the area which is open to debate. There are two schools of thought, but before I delve into them it must be made clear that this rule has entirely different implications depending on if you draw a color comic or a black and white comic. So each of the two schools of thought has differing opinions for color vs. black and white, and I'll be discussing both.

The first school of thought is that the website colors should be chosen so that they draw attention to the comic. This principle is demonstrated very eloquently by the new Penny Arcade site. Click on the link to their comic page and let your eye casually fall on the screen. Where does it land? Depending on the loudness of the ad at the top, your eye should land either on the ad or on the comic. The dark, subdued grays and blues used in the page are designed to let your eye draw naturally to the areas of high color, and since Penny Arcade is a very colorful strip, your eye will probably land on the strip quite easily. And that easy landing is what makes the site aesthetically pleasing: it's "pleasing to the eye". The eye has less work to do to find what it's looking for because it lands there naturally. When you see a website that uses very dark colored backgrounds and box colors, they are subscribing to this school of thought. Some popular webcomics which use this technique are of course Penny Arcade, Questionable Content, Ctrl+Alt+Del, Megatokyo, and Applegeeks.

Now, this philosophy can spell trouble for a black and white comic because the vast expanse of whiteness can be a rather glaring contrast with the rest of the page. A good example of the trouble this can cause can be seen at Nowhere University (I'm linking into the archive right now because there's some rather sketchy guest art up on the main page right now and I don't want you to get the wrong idea about the artwork of the strip itself). Nowhere University has servicable artwork. But it looks like an eyesore in contrast with those dark blue-gray backgrounds. It you want to have the "eye-catcher" with a black and white comic without it being TOO eye catching, you need to blend in osme lighter shades that are still considered to be in the cool range, and maybe soften the borders of your comic. I love the way Fred Gallagher does it at Megatokyo with the dark gray transitioning to a lighter gray, and then the shadow gradient to the comic. It really prevents his comic from being overly dominant without losing the eye draw that his choice of background color has allowed.

Now, the other school of thought for choice of website colors is to pick colors so that the comic blends in with the rest of the site. This is a completely separate, and yet completely viable line of thought. By using this design principle, the rest of the site does not distract from the comic because everything flows together. This technique is much more commonly seen with black and white comics, where the comic strip itself is surrounded by either a white background or a white box which extends into other content. There are a lot of great examples of this, such as PvP, Starslip Crisis, Gossamer Commons, and The Big Three-Oh. Obviously the key with a black and white strip blending into a white background is to have some nice accent colors to keep the site interesting, and this is where some nice warm colors can come into play. Nothing too loud, but some tans, light blues, oranges, and lighter reds can work nicely.

This principle can be used with color strips as well. The best example is of course Count Your Sheep. The strip and the website blend together so seamlessly that it really is a thing of beauty. However, Count Your Sheep is kind of a special case, since Adis specifically limits himself to shades of blue and purple, making it very easy to build a site which will blend with the strip and look good every day. Most other comics use a much wider pallete and it can be very difficult to find a set of colors that will always look good with your comic, no matter what you decide to draw on any given day. That's not too say it can't be done, though. Both Tweep and Inverloch have done a good job of it.

Still, it's a great temptation for artists to use a white background with their color strip, just like the black and white folk do, since they know white will never clash with anything. But this typically doesn't work out too well. Instead of feeling like the strip is blending with the page, you really get a feel that the strip has been pasted on top of it. Take a look at Winger, for example. Carson Fire has even bothered to include exagerrated white space between his panels to try to fit the color strip onto a white background, but it's just not working. The strip looks like four boxes slapped on top of a white background. Now, there are two color strips which use a white background which I feel have successfully managed to blend their strip with the page: Real Life and Ugly Hill. And in both cases they've broken the white background with some blues and some more elaborate background work than just a solid color. So if you want to make a color strip blend using a white background, you've got to have that white background run into some other colors so that the overall feel is one of colorful pieces brought together with white.

So that's it for the colors in webcomic website design. I hope this information was useful and helpful to people out there, so that they can turn around and use it to improve their own webcomic's website. I think we need more better looking sites and fewer site which are either too busy or too bland. Sites which really present a comic looking it best by surrounding it with the optimal colors to complement it.

So what does everyone else think? Do you agree with one school of thought over the other? Did I miss anything? Did I diss someone's color scheme that you really thought was fabulous? Do you have an example of a great color scheme you want to share with the rest of us?

Post it up!