A Neopian Web Design Treatise : On Colour by oddhatter |  |
A MESSY DESK - Welcome to Neopia. A world where the unwritten (or maybe written,
in some places) rules of Web design are often flaunted, broken, stepped on,
thrown in the mud, and handed over to the delirious advances of a starved camel.
"What?" you say, "Of course not!" After all, you spent so long on that gorgeous
pet page - full of every new piece of clipart you could fit in, a few dozen
animated .gifs and your absolute favourite colours in the world - neon green
and red! "Oh, shut up, Oddhatter. We'd never do that," you groan. Of course
you wouldn't, but you'd be surprised at the design atrocities that you can run
into while browsing through the pet pages, user lookups and shops of Neopia.
Pardon my tone, I have a tendency to exaggerate. This article series was written
with the purpose of sharing some simple Web design concepts that are considered
a given by the larger Web design community (as in, outside of Neopia) that I
have picked up over the past six years. Having worked (and still am working)
in a small Web design firm, I am still having these concepts pounded into me.
Bad habits do not die easily, and I'll be the first to admit that. I'll also
be the first to admit that I have, years ago, placed purple text on a neon green
background. I do not claim to be an expert in the matter - but I would like
to share the things that I have learned from talented and intelligent designers
far more skilled than I am. This is not an HTML guide - there have been tons
already written, including the very helpful Neopets
HTML guide. Rather, it is a collection of ideas that may be helpful
to keep in mind when designing your pet page, lookup or shop.
This section of my "treatise" is on an aspect of Web design that is often
taken for granted - the use of colour. Coincidentally, it also happens to be
the singularly most important factor in a Web site's design. A pet page/shop/lookup
can get by with minimal use of images, to the point of not being noticeable,
and in fact many do. What is important however, is to select a palette of colours
that are not only suitable to the site, but are also pleasing to the eye and
easy to read.
Variety!
The "pleasing to the eye" part is fairly simple. Most people know that neon
pink and neon green do not go well together. It seems though, many people continually
limit themselves to a few basic colours or one that they are familiar with,
and do not take advantage of the broad palette of hex colours available to them.
Hex colour charts can be found all over the Internet - you merely need to run
a Web search for "html hex colour chart" or something similar.
A small change in colours can make an ordinary looking page look distinctive
and unique. For instance, blue and green are a perfectly decent combination
of colours. A mistake often made, though, is the usage of the most common "blue"
and "green", such as this:
| This is blue(0000ff) text on a green(00FF00) background.
|
As you might notice, the colours are rather glaring and will not be easy to
read after a while. Not to mention, they are part of the very basic colour palette,
which on a psychological level, sends most people into "I've seen that before"
mode. This is not to say that blue and green are bad colour combinations, but
changing the shade of those particular colours can make the site's content a
lot more legible and its look more unique.
| This is still blue(CCFFFF) text on what is still
a green(336600) background. |
Admittedly, it is not something completely mind-blowing, but a site with that
colour scheme is less likely to be lumped into the "generic" category as the
previous example. However, the second combination of colours leads to another
problem, still one involving legibility, with colour schemes.
"Can I print it?" and legibility issues...
As much as I personally love using light text on dark backgrounds - there
is a definite problem in doing so, especially in content heavy sites that someone
might just want to print out. Most browsers, to conserve ink, will not print
a Web site's background colour or image in order to conserve printer ink. As
you can imagine, when a Web site with light blue text and a dark green background
is printed out, it will end up as light blue text on white paper. If bright
blue text on a bright green background is difficult to read - this will be rather
illegible. Using dark text on light backgrounds will easily solve this problem.
This may not be a problem if you doubt that people might want to print out
your Web site or parts of it, for instance, a story on your pet page. Don't forget
- you can always create a "print friendly" white-on-black version of content
that people may want to print and merely link to it. However, the legibility
issue still exists. It is simply easier to read dark text on light backgrounds
than it is to read the opposite.
Use contrast!
That being said, it should be obvious that dark text on a dark background
or a light coloured equivalent is quite ineffective. However, when using colours
from the same basic shade, it is easy to end up using two very similar shades
of colour.
| An aquaish blue(33CC99) on an...grey-blue(99CCCC).
|
| Same background, darker font colour(003366).
|
But then, that was one of the "duh" points. I have seen it used, though.
By the way, it is not a good idea to completely black out (or white out or
purple out or whatever) text in your shop. Not only does it make you look like
a scammer, considering that it is a frequent ploy used in scammer shops, it
makes your shop difficult to browse though, especially since images take a while
to load.
Consider people with disabilities.
This is one thing that you should always consider when choosing your colour
scheme, especially considering that eight percent of males and one percent of
females suffer from some form of colour blindness. The sure-fire way to make
a site accessible to everyone with colour vision deficiencies is to use black
text on a white background. This, however, as I'm sure you're thinking - gets
quite boring (but I have seen it used very effectively). For that matter, "design
in black and white- add colour when necessary" is a tried and true design rule,
albeit one that I break very frequently. A through discussion on the "designing
for disability" issue will take up a whole new article, and a mostly irrelevant
one at that, but there are certain things that you can try to do (or try to
avoid) that will make your Web site accessible (and readable) to the largest
number of people.
What it comes down to is that many colour-blind people have problems distinguishing
between shades of colours. Some colours (most commonly those with red or green
tints) will appear lighter to them. Due to this, it is best to use contrasting
colours in a Web site, and avoid using similar shades of colour. A nice exception
to this is that most colour-blind people can see and distinguish between shades
of blue and yellow.
It is best to design in high contrast, bright colours. As a matter of fact,
using a bright blue and bright yellow would be readable by most colour-blind
people. However, that undermines the fact that it is still not a very aesthetically
pleasing combination of colours. Colour combinations that should be avoided
are those in similar spectrums of colours(or those in reds or greens)- such
as green and yellow, green and orange and obviously - red and green. Using any
colour on a black background is generally risky - especially either red or green,
since some people see those colours as black. As stated earlier, the safest
colours are black, white and shades of blue and yellow.
I'll admit that I have chosen aesthetics over accessibility before, and still
do. There is nothing wrong with that. But if your goal is to allow your pet
page, shop or lookup to be enjoyed by the largest amount of people, it is best
to design for such (this goes far beyond the use of colour - but that's a few
more articles).
Make it relevant.
This is a given - but I have seen cheerful, feel-good sites clad in black
and similarly dark colours. Make sure that the colours of your site convey the
tone and emotion that you are trying to get across with your Web site.
All this being said, I thank you very much for bearing with me through this
article. This is obviously not the final word on the use of colour in Web design,
nor is it a particularly comprehensive one at that. But it is a fair introduction
to a few basic, universally accepted design concepts and hopefully, a number
of other things that should be kept in kind. And of course, if you found this
article helpful, please tune in next week for more of this so called "design
treatise". Yay.
Next week (if the lazy monkey Oddhatter writes it on time): A Neopian
Web Design Treatise : On Images and Text |
