XSitePro Makes Website Design Building Easy

Picking a Color Scheme from the many templates in XSitePro.

Before you can consider the finer points of your design, you need to make the big decisions.  Few of these decisions are more important than what color scheme your website is going to use.  If you choose the wrong one, your site will be, in the worst cases, completely unreadable.  Fortunately XSitePro comes with several hundred templates to choose from with many different color combinations.

Pay Attention to Contrast.

First of all, before you do anything else, you need to check that the colors you've chosen provide enough contrast for your text to be readable. Don't put orange text on a yellow background, or red on blue, or anything like that.  You should especially avoid using a lighter version of a color on top of a darker version of that same color, or vice versa. You've got to make sure that your text is readable.

Never Use Black Backgrounds.

You can generally use whatever colors you like as part of your color scheme, but stay away from black backgrounds. It makes your website look 'underground' and threatening, not to mention old-fashioned.

Not Too Many Colors.

You should choose three or four colors for your site, and use only those colors (or shades of those colours).  You can't go using the whole rainbow without the design looking garish, and garish is never good.  Decide ahead of time which three or four colors you're going to use, and stick to it – if you want to add one, you have to drop one of the ones you've already got.

Complementary Colors.

These are colors that are opposite each other on a colour wheel, and so look good together, at least according to color theory. The three most common sets are red-green; blue-orange, and yellow-purple.  Whether you agree with this or not is up to you, but it can work surprisingly well, especially if you use subtle shades of the colors.

This is also a good way to pick colors that will be easily readable against a certain background: look for the exact opposite colour to maximise readability.

Analog Colors.

Another approach to try is to pick colors that are similar to your main color, meaning that they're near to it on the colour wheel. Red, for example, goes well with its analog colors, orange and yellow.  Overdone, this can make your site look overly bright, but it can look good with restraint.  It's no coincidence that these combinations often occur in nature.

Chromatic Colours.

My personal favourite technique is to use colors chromatically.  You use different shades and hues of one color in your design, and nothing else apart from black and white – for example, you might use light blue, bright blue and dark blue together. This creates a sleek, professional look, and comes highly recommended.

Take Colors from Nature.

If you're lacking inspiration for a color scheme, one of the best things you can do is go for a walk outside.  Take a look around at plants, flowers and animals.  I once based an entire design on a photograph I took of a cat, and it turned out far better than I would ever have expected.  Nature knows how to use colors better than you do – learn from it.

Color Blindness.

Finally, it's worth dropping in a note here about color blindness.  Try to make sure that your design uses color to make itself aesthetically pleasing, but doesn't rely on it for anything essential.  You wouldn't believe the statistics for the prevalence of color blindness (some say as high as 10% are at least partially color blind), and you need to consider these people too when you're designing your site – they're at least as important as the people with unusual browsers, for example.

You might like to take a look at your site using www.vischeck.com, which will let you see things the way a color blind user would. Make sure they can at least still read your text!