• 
  • About Me
  • 
    • Articles
      • Life Before A Webpage
      • Kick Your Website Into Gear
      • HTML - Tag, You're It!
      • Padded Cell, Anyone?
      • CSS - Magic Or Madness?
      • History On-line
      • CSS In A Nutshell
      • HTML Tagged & Bagged
    • School Notes
      • The Secrets of Immortality
      • The Silence of the Flames
      • Drabbles
      • Indiana Jones Morning
      • On Writing Well Notes
    • Other Articles
      • Serving Stewdents
  • 
    • Basic Design Notes
      • Photoshop
      • Illustrator
    • Animation Notes
      • Fireworks
      • Flash
    • Web Design Notes
      • Dreamweaver
      • Assignments
    • Other Notes
      • Employability Skills
      • Communication Skills
    • Projects
      • AV Projects
      • Treatments
      • Storyboards
      • Proposals

K.I.C.K. YOUR WEBSITE INTO GEAR

We had corned beef hash for supper last night. The kids took one look at it and declared it 'gross'. Making a cheap meal that kids will eat is a lot like designing a website. Done one way, it looks like something worth investing your time and tastebuds on. Done another way, it looks like a dog's breakfast.

Just as there are three basic types of web sites - commercial, informational and recreational - there are also three general styles of web sites: formal, informal and casual.

Formal sites generally have plain or lightly textured background in neutral colours. Colour is kept to a minimum, with the majority of it in the form of images, such as logos or replicas of the company or organization's letterhead. Sections are divided by simple lines. Most government sites are examples of this style.

Informal sites use slightly 'louder' colours, either darker or brighter. Some use full-sized images as their background. That is acceptable, provided it still permits the text to be easily read and provided the image isn't so large a file as to hamper page loading. Informal sites may use wide, thin images to divide the page, rather than simple lines. Many e-commerce sites are informal in style, as are many discussion forums.

The hardest of all the sites to do successfully is the casual style. Dark backgrounds, animations, background music and all manner of 'cutting edge technology' gets used and misused on 'casual' web sites. Check out some of the 'homepages' on the Internet and you'll see what I mean.

It's not that this technology shouldn't be used, but it should be used with care. "More is better" doesn't always work, especially if you don't understand the basics of human psychology and how the mind works.

So, how do we know what we're serving? Well, there are fancy templates out there, but they can be a royal pain to adjust to suit your needs. The easiest way to kick our website into the proper gear is to keep our reasons for creating a site in the first place firmly in mind. And by considering the following.

Keep It Colourful, Kiddo!

Colour has many roles in design. Background and text colours draw a page together. Section or header colours both draw the eye and separate the page into areas of importance. The most important role of colour, however, is to create a pleasant mood and to evoke a positive emotional response in your visitors.

We are conditioned to associate things by their colour, whether it be the bright red of a warning label, the colours in a flag, or the red and white logo of a soft drink company. We also associate colours with traits. Blue, for example, is considered the colour of 'masculinity' in the western world, but in the Orient, it represents 'villainy'. The Arabs associate it with 'faith' and 'loyalty'. Because the Internet transcends geographical, political and cultural borders, we need to pay attention to the message our choice of colours sense, as well as the actual content of our message.

• 'Warm' colours, such as reds and yellows, speed up our perception of time. They are cosy and inviting.
• ''Cool' colours slow down our ideas of time and appear 'professional' when used in presentations. Their very coldness, however, can irritate.
• 'Bright colours (pure reds, blues, greens and yellows) are exciting. They represent impulsiveness, magic, wit and freedom.
• 'Deep colours (oranges, deep reds, greens and blues) are powerful colours. They represent energy, aggression, resourcefulness, enthusiasm and devotion.
• 'Dark colours (gold, burgundy and green-blues) are restraining colours. They represent inhibitions, cynicism, morality and conceit. Dark greens, on the other hand, are the most 'logical' of the colours. They represent precision, stamina and high standards.
• 'Black, especially in western cultures, represents the unknown. It is a colour associated with evil. When placed on a white background, however, black becomes exceptionally formal and intimidating.
• 'Earth colours (beige, red-browns, yellow-greens and dusty blues) are neutral. They create feelings of relaxation, familiarity and satisfaction.

So, now that we know what colours we're using and why, how do we add it to our site? First, design the layout of your page in black and white. Sort out what you want to go where and the basic look of the page. Now add your colours, one at a time.

You've already got two colours on your site - a white background and black text. Change them, if you like, keeping the colour scheme as simple as possible. Go for high contrast differences, but not loud ones. Dark text on a light background is easiest to read. You can add highlighting colours, but no more than two. A good idea would be to have a ligher version of your main colour and a darker one for the highlighting. Or, if you have a multi-coloured logo, use a lighter version of the predominant colour as your background, a darker version of your next predominant colour for text and a light and dark version of your third colour for highlighting special areas and titles.

Create a visual balance on your page. The darker the colour, the 'heavier' it looks. Don't let one area 'weigh down', or dominate, the entire page.

Using pastels or greys as highlights will soften the harshness of a strict black/white page without detracting from the formality of it.

Don't use dark text on a black or dark background. The default blue of a link can be very hard to read on a dark background.

Make sure your colours complement each other. Bright green with bright red might work for a Christmas design, but trust me, it doesn't work on a computer screen.

Keep It Clean, Kiddo!

Cleanliness, in web design, doesn't just involve using the minimum amount of HTML or CSS coding to get the job done, or a minimum file size for images and pages. It also means having enough 'whitespace' for your text to be easily read and enough space around images to keep them from doing battle with each other. 'Cleanliness' also means not having distracting elements on your page, or grouping them so they don't interfere with viewing the contents.

I won't go into the coding aspects here because the site's designer may not be the pages' author, but it is something to keep in the back of your mind. The two points of cleanliness I will address, however, are the whitespace and the distractions.

Whitespace

'Whitespace' is actually a misnomer in web design. It refers to the spacing around the text, the space the human eye uses to distinguish the shapes of the letters. On many web sites, the space is any colour but white.

The human eye is conditioned, or prefers, if you like, to distinguish information as dark images on light backgrounds. From prehistoric petroglyphs to illuminated manuscripts to modern computer print-outs, we are used to seeing dark shapes as being the message and light shapes as being the background. Web sites aren't restricted in the same way print media is, though. Quite a few sites use black or very dark-coloured backgrounds. The wise designers have taken the 'human condition' into account when designing these sites. They know that the human eye tries to make sense of the dark shapes, not the light. They know that this confusion can cause an optical 'blurring' that makes light-coloured text appear to be smaller and the letter shapes less distinctive than dark text of an identical size.

There are three ways to get around the optical illusion. A larger size of text can be used. Both the text and the whitespace around it will be larger, making it easier to read.

By avoiding extreme contrasts, the blurring can be minimised. Use pastel-coloured text - light blue, light green or yellow - rather than stark white on black.

You can also minimise the contrast by changing the background slightly. Add 'noise' to the unrelieved black, randomly scattered pixels of pastel colours. You can lighten the colour by adding a specific pattern of pixels, too; a checkerboard of medium grey pixels over a plain black tile, for example. You can also change the opacity of a background image.

With sans-serif types of text, such as Arial or Helvetica, increasing the weight of the font to 'bold' may also help. Increasing the weight of serif fonts, like Times or Garamond, will only make things worse. The serifs, the little ticks on the ends of the letters, will blur more, interfering with the natural shape of the letters.

A trick I use for my own pages is to squint at them. If I can read the text with half-closed eyes, then my visitors should be able to read the text normally.

Distractions

Distractions come in many forms on a web page. The most common ones are motion and sound.

Background music, however pleasing the tune may be to you, can irritate your visitors, especially if there's no way to turn it off. As well, sound files add to the loading time of the page. Would you wait around for the page to finish loading someone's idea of 'cool'? The third point to remember about sound files is that not all browsers and/or platforms can 'read' the same types of files. If music or sound is absolutely viatal to your site, make sure to include a visible 'off' button and/or instructions that prevent the file from being loaded if the proper plug-in is not detected. Telling your visitor that they have to go someplace else to get a special plug-in to view your page is tantamount to telling them to go away.

Motion distractions come in one of three formats - Flash/Shockwave files, GIF animations and Javascript effects.

Flash/Shockwave files are generally used for navigation menus and games. While I will admit that Flash navigation is the nicest to look at and the easiest to use, it has a couple of problems with it. One, it needs a special plug-in in order for it to work, and two, Flash files can be much larger than the equivalent Javascript navigation and most certainly larger than similar CSS effects.

The simplest animations are the GIF89a animations. Like the 'flip books' that predate computers, they are a simple series of images, each slightly different, put together to create the illusion of motion. They are usually the smallest of the distraction files and can be set to run once, to repeat a specific number of times, or to repeat indefinitely. Most ads are GIF animations, so I'm sure you've seen examples of how not to use this format. There's nothing more annoying when you're trying to read a column of text than to have several moving ads placed at the end of each row, each ad flashing at a different speed and in a different colour. If you must use animated ads on your site, alternate them with static images, or set them apart from the main body of information. Money from advertising space is nice to have, but if no one visits your site, you won't have much money coming in.

Keep It Co-Ordinated, Kiddo!

One of the most poorly designed sites I've ever seen had a beautiful opening page - and the rest of the pages looked terrible. They were of different colours and 'loudness'. They had different styles of text, and the posted images declared 'open season' on the background. The only thing that had you believing that they belonged on the same site was the URL, the page address. Nothing else matched.

I've also seen sites that had each section as a different colour, but it wasn't the background or text colours that changed, it was the main highlighting colour that changed. The subsection highlighting stayed the same, both in text colour and size and the background colour for those titles. I've also seen the same colours used throughout a site, but only the saturation changed. The most important sections were done in the same colour as the introduction page. The next important section was a bit lighter, the next lighter than that, and so on. Every page looked like it belonged on that site.

Another aspect of co-ordination is the way you group your information, and the way your navigation is laid out. Always have a 'home' button on your page and always have it in the same place. Group your products in the same manner as you would in a print catalog. Group your games according to type or according to difficulty. Don't put your 'Rants' in with your fiction. It doesn't matter how you group your information, just make the groupings all the same.

Final Kick

If you take the time to think about your web site, think about who you want to visit and how you're going to keep them coming back, you won't have any problems. It will, like anything else, take time.

Oh, just one last note. That terrible web site with the mismatched colours and poor navigation? That was mine. The very first site I ever did. I keep it to remind me of what I need to do to K.I.C.K.