Main Page Go to Short Stories Go back to Articles Go to Comics Go to Continued Series Go to Editorial Go to New Series

Show All | Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6 | Week 7 | Week 8 | Week 9 | Week 10 | Week 11 | Week 12 | Week 13 | Week 14 | Week 15 | Week 16 | Week 17 | Week 18 | Week 19 | Week 20 | Week 21 | Week 22 | Week 23 | Week 24 | Week 25 | Week 26 | Week 27 | Week 28 | Week 29 | Week 30 | Week 31 | Week 32 | Week 33 | Week 34 | Week 35 | Week 36 | Week 37 | Week 38 | Week 39 | Week 40 | Week 41 | Week 42 | Week 43 | Week 44 | Week 45 | Week 46 | Week 47 | Week 48 | Week 49 | Week 50 | Week 51 | Week 52 | Week 53 | Week 54 | Week 55 | Week 56 | Week 57 | Week 58 | Week 59 | Week 60 | Week 61 | Week 62 | Week 63 | Week 64 | Week 65 | Week 66 | Week 67 | Week 68 | Week 69 | Week 70 | Week 71 | Week 72 | Week 73 | Week 74 | Week 75 | Week 76 | Week 77 | Week 78 | Week 79 | Week 80 | Week 81 | Week 82 | Week 83 | Week 84 | Week 85 | Week 86 | Week 87 | Week 88 | Week 89 | Week 90 | Week 91 | Week 92 | Week 93 | Week 94 | Week 95 | Week 96 | Week 97 | Week 98 | Week 99 | Week 100 | Week 101 | Week 102 | Week 103 | Week 104 | Week 105 | Week 106 | Week 107 | Week 108 | Week 109 | Week 110 | Week 111 | Week 112 | Week 113 | Week 114 | Week 115 | Week 116 | Week 117 | Week 118 | Week 119 | Week 120 | Week 121 | Week 122 | Week 123 | Week 124 | Week 125 | Week 126 | Week 127 | Week 128 | Week 129 | Week 130 | Week 131 | Week 132 | Week 133 | Week 134 | Week 135 | Week 136 | Week 137 | Week 138 | Week 139 | Week 140 | Week 141 | Week 142 | Week 143 | Week 144 | Week 145 | Week 146 | Week 147 | Week 148 | Week 149

Neopia's Fill in the Blank News Source | 16th day of Eating, Yr 26
The Neopian Times Week 75 > Articles > A Neopian Web Design Treatise: On Images

A Neopian Web Design Treatise: On Images

by oddhatter

A MESSY DESK - In the previous section of my so-called "treatise", I discussed the use of colour and its corresponding aesthetic and accessibility issues as related to web designing for Neopia. This one will extend that central theme of making a Web site accessible to as many people as possible, without having to sacrifice excessively in the looks department - this time to the use of images and text/typefaces.

Images - Backgrounds

It is easy to come across a picture that looks like it would make a good background and consequently, use it as such. Coincidentally, it is a lot harder to come across a picture that will actually make a good background. A good background is not just one that is attractive and repeats seamlessly, it also has to be one that does not interfere with text legibility, or draw attention to it that should instead be focused on the site's content.

That being said, it is generally a bad idea to use backgrounds that have contrasting light and dark colours, since it is often difficult to find a good "in-between" text colour. Besides, the changes in background colour will make the text a lot harder to read. Similarly, it is also obviously a bad idea to have a background in a similar shade of colour as your text.

A stickier issue on the topic of backgrounds is that of the repeating background. I am personally not fond of them at all. The human eye is drawn to repetition, and therefore, a repeating background can distract your visitors from reading that lovely story on your pet page, or anything else that you may want them to pay attention to. Considering the number of people that do use repeating backgrounds though, it is obvious that they do have a certain amount of aesthetic value. Keep in mind though, that in the majority of places where such a background can be used, a solidly coloured background will most likely be no less aesthetically pleasing, and probably more effective.

Needless to say, if a repeated background is distracting, an animated background is a terrible idea. I have seen it used before, usually by people who think that it adds a certain environmental aura to their site or lookup. Perhaps it is for this reason that most of these backgrounds are little blinking stars. It is a justified move, however, the "environmental aura" does not eclipse the fact that it is not only often unrealistic, but also gets rather annoying, especially if the site actually has interesting content. On the other hand, I also know people who do use garish and plainly hideous repeating, animated backgrounds despite the fact that I know they know better (yes, this is a very pointed comment). Like everything else, the use of an animated background is a plausible design choice, however, I have yet to see it used in a way where it can actually be called a good one.

Clipart and other fun things

As an extension of the generally accepted background conventions I discussed earlier - the same applies to other site images, such as clipart, site buttons and so forth. Animated images are distracting, especially if they are generic clipart. Generic clipart in itself is well - generic. Design reflects on content, and if your page, shop or lookup is filled with common and widespread items, it will be presumed that any content you have is unlikely to be particularly interesting. To what extent this is true, I do not know, but it is difficult to deny the psychological impact a site's design can have on its viewer.

Is it necessary?

No site should rely on graphics. This is one of those "set in stone" design rules that have unfortunately, been forgotten, or intentionally ignored by many, myself being one of them. It seems to be a very Neopian tendency to clutter up one's pet page or shop with shop dolls, adoptables or quiz results. Don't get me wrong, one or two can be cute, and even enhance the personality you project through your site. But having a shop full of dolls representing you and your entire classroom of friends, twenty adoptables to represent your pets, their petpets and respective companions and a number of rectangular squares declaring that you are a Fire Faerie, the colour Blue, Chet Flash, a clone of Obi Wan Kenobi and a bent Spork are quite simply - ridiculous. Not to mention that these items are mostly for your personal enjoyment - the majority of your visitors will not care at all. They just want to read your pet pages, view your profile and buy from your shop. Please, make it easier for them.

Matching site colours with images.

Images should always blend as seamlessly as possible into a site design. There is little less appealing that a site filled with "bordered" .gif images. I'm referring to the supposed "transparent" images that have borders around them that clash terribly with the background colours. For instance, a jagged white bordered .gif image on a dark background. This can and should be avoided as often as possible - the simple fact is this - some images were meant to be used on dark backgrounds, some on light ones, and deviating from that intention can produce some rather anaesthetic results.

Yet another mistake often made is specifying a background image that looks little like the background colour. For instance, I can set my background colour to black (#000000) and have a background image that's let's say...shades of light blue. To complement that, I use black text. Now, then the page is completely loaded, it looks pretty good. However, if I have a background that takes a while to load, while the page is loading, the page will have, guess what - black text on a back background (the page's original background colour). Similarly, a number of people browse the Internet with images turned off, which is an option in most browsers.

Once again, considering people with disabilities...

In my last article, I discussed and suggested a number of ways to make your site as legible and good-looking as possible to people with colour deficiency problems. Images play by the same rules.

However, what about people who are not just colour blind? How will your images work in, let's say, a Braille web browser (yes, they exist)? If someone cannot see the images on your site, how will your site function? For that matter, this also applies to people who prefer to browse without images. As such, you should make sure that your web page is fully functional and navigable, even without any images. Also, even though someone cannot see your images, you can describe the images to them. This is what the "alt" function that can be used in an image tag is for. For example : <img src="moopey.jpg" alt="my Sheep of Doom, Moo"> . For someone who has images (and vision) enabled, the image will load just fine, presuming that it is linked correctly. For someone who doesn't, the text description will appear (it will also appear when you hold the mouse over the image, so it is a good way to include more information about an image).

There are many other aspects of designing for people with disabilities, and I'm presuming (or at least hoping) that Neopets conforms to them. However, making sure that your site is not dependent on images or colour is a very good start.

Thus ends another section of my so-called treatise on Neopian web design. The normal "you don't HAVE to listen to me" disclaimer stands. I know I promised to cover text and typography as well, but I didn't expect that I had that much to say about images (and there as far more than this). Please join me next week, if you found this interesting or helpful - because text and typography really is quite an interesting topic. Yay.

Next time: A Neopian Web Design Treatise: On Text

Week 75 Related Links

The Dung Hero
Thank you and good night.

by hippiesoul

Sheep of Doom
Oh, issue #75... thou art special.

by oddhatter

Search :
Other Stories

A Call to Arts
Sure, I browsed through the Art Gallery and checked in on the Poetry Contest.

by aristaea

What's in 69 Million Names and Counting?
First, a side note on the title. The last article I wrote mentioned 68 million names, and this one, just a couple of weeks later, says 69.

by scriptfox

More Crisis Strikes at Neopets, Inc. - The Invention of Zurroball
Since the loss of Meridell's fascinating games, Neopets has been frustrated about this dwindling issue yet again.

by alexmax13

Final Math in the Battledome
Pet skills and the famed Berserk Attack are gained by your pet if he or she reaches a certain level.

by beatzero3

Gallery Spotlight: Healthy Competition or Security Threat?
Neopets has done it again: turned a leisure activity into another competition...

by cherriepoof

Neopets | Main | Articles | Editorial
Short Stories | Comics | New Series | Continued Series | Search