Website color-shading technique

I’m interested in understanding what it is that makes websites look good or professional (graphically).  One thing I’ve noticed that seems to help is related to the way the website uses different shades of the same color.  By weaving onto a page different shades of even a single color, the page can achieve an appearance of both unity and variety, which seems to be essential to the professional look.

The MSN.com homepage is a good example.  The vast majority of color on the page is blue (except white of course).  But the text is a dark blue, the header backgrounds are a light blue, and the MSN title picture and page background are a gradient the lies between the two.  And so I see overall theme on the page, but without that cheap effect that is produced when only one shade is used throughout.

I am trying to incorporate this technique into my personal web-page.

More on Fireworks

I’ve spent more time with Fireworks now and so am a little more qualified to evaluate its usefulness to me.  It still seems like a very useful tool for web-design, especially when used in combination with PNG files.  Because Fireworks works with vectoring so well (at least, as far as I can tell), I can use it to make quick work of a lot web-design, such as in putting smooth corners inside div tags and in creating quick backgrounds/watermarks.  I can put Fireworks on one monitor and Dreamweaver on another and adjust images on my pages in real-time.

The vectoring tool is pretty cool.  It’s really useful for making illustrations to add to text.

My only serious gripe is related to the layers tab.  I like to work with layers, but it seems that whenever I drag the layers/objects around inside that little box that they never end up where I want them too.  That can be annoying.

Also, it would seem like Fireworks could make it easier to connect points on different vector objects (not group, but connect — like attaching a curvy-line to a corner of a rectangle).  But perhaps I just haven’t become used to it yet.  Or maybe it has something to do with the way PNG files handle vector data.

Of course, I imagine that Fireworks falls short in the bitmap-editing department.  But most of that kind of work is outside of my league anyway.

I’m not sure I’d pay $300 dollars for it, though.  I’d have to see if there are any $100 programs that do the same sort of thing.