Looking through a book that showcased some of the best designed web sites and I decided to find out what it was about the these sites that made them so visually appealing. I came up with 7 things. There are lots of general graphic design principles but these are additional to those, and specifically for the web where the limitation of file size is important. The question is: “How do you design a good site and still keep the download times low?”

Note: For this article I'm using the word 'design' to refer to the look of a page rather than more general aspects of web site design like navigation, structure etc.

Careful typeface selection

This is always important in any design project but I'm putting here because on the web it is even more so. Choosing a different typeface (font) won't add anything to the size of your site and will be an important part of the overall feel. Type is even more important than normal.

Check the links section to find sites with free fonts.

Careful use of colour

Choosing a good colour scheme adds nothing to the size of the site. The 216 web safe colours that designers used to limit themselves to is now a thing of the past. Picking two or three colours that look really great together, rather than just OK might take time but is well worth it for important projects.

Colour schemes can be usefully broken down into a number of categories, deciding which one your site will use gives you a head start in getting to the point of picking the actual shades and hues you will use.:

• Key: mainly black and white with a third color for emphasis or contrast.
• Monochrome: various shades of a single color. They can look very classy or very dull depending on how well the shades are chosen and used.
• Complimentary: combinations opposite sides of the color wheel eg. commonly used are blue with yellow or red with green. Can be striking and distinctive if done well or garish and unpleasant if the shades are not carefully chosen.
• Adjacent: colours adjacent to on another on the color wheel, eg green with yellow or purple with blue. Tend to be very subtle and can be an excellent choice for creating 'moods'.
• Color Coding: The use of different colors to indicate location in the site. This is best done with by using a basic and consistent scheme and varying one emphasis color.

In general it is best to restrict the use of colors to no more than three with perhaps additional colors introduced the form of different shades of these. An exception is where a riot of colors is a design feature with the proviso this is a difficult thing to do really well and if not done to a high standard can look a mess. [NB. the above info is from Outfront.net]

TAKE YOUR TIME CHOOSING COLOURS. You don't just have to try different colours together. Scour the web to see what you like.

Limited size of complicated images (eg photos)

Using photos is an easy way of creating good design. Photos dominate other forms of visual media from Billboards, TV and magazines. Unfortunately they add lots of file size to a site. You can reduce the size of JPEGs by blurring parts of the image (eg the background) or make them monochrome. Using small photos, tightly cropped, is the most common way to avoid big file sizes though.

Use large images

You can make pretty big images using gifs with a limited number of colours. Use these instead of photos for design.

Limited HTML text

I've noticed that good sites don't use too much HTML text and instead use graphic images of the words for headings etc. Usually these need only 4 to 8 colours (background, foreground and 2 - 6 anti-aliasing colours) and so don't add much to the overall page size.

Text done this way not only gives you an infinite choice of typefaces to choose from. Characters are anti-aliased and so look much better too. And of course you can also add any effects too, drop shadows, chrome etc.

Full screen or apparent full screen.

Making sites that use lots of graphics are easier to make as fixed size and optimised for a certain size screen (800 x 600 or 1024 x 768 are most common these days). However for anyone with a different size this usually looks like a bit of a bodge. One way round this it to think about the dead space that will be visible on higher res monitors. Put something there, maybe a background image or even just choose a suitable colour and centre the main table.

Alternatively make liquid (resizable) design, like this page, so that the whole screen is used whatever resolution the viewer is using. It's bit more tricky if you're using a lot of graphics but makes a better looking site.

Use background images.

With CSS you can add background images to any element. However with cascading style sheets you can use backgrounds in more creative ways, such as just along one edge, or even unrepeated. Gradients can really add sophistication with relatively small file sizes, repeated across just one axis.

Pattern backgrounds make text harder to read so its best not using backgrounds under blocks of text. If you do, keep the contrast low and the pattern large.

Finally ...

These principles, like any rules, are just for guidance. If you find them useful use them but don't let them block creativity.

There is a whole lot more to design than just these. I'd recommend any books by authoress, Robin Williams, for anyone starting to learn about design.