Colours and Layout

Choosing colours and layout (aka skin) can be the most fun part of designing a site. It can also be the most seductively time-consuming, or even frustrating.

If you have colours or layout that you like, we can use them. Many people use the same logo and colours as their paper advertising.

If you have no ideas, we can provide samples, or design one for you. Strange Banana is a fun place to start.

Paper and crayons work best for initial design. It's an easy way to get several ideas down fast. A Word document or a sketching program can work just as well.

Advice on Colours and Layout

Separate work on the skin and the content. The only content that affects the skin is the menu, and even that is easy to change.

Limit the colours, fonts and effects. Using too many will make the site harder to read. We recommend no more than three colours, plus one very light and one very dark. Also, clients may not have the fancy font you choose. We have ways to use fancy fonts, but they should be used sparingly.

Use high contrast (light/dark) for text. Do not rely on colour alone to draw attention. This makes the site more readable for people with low vision or an old computer screen. It also makes it easier for people who are colour blind. (We can show you how your colours will look under the most common forms of colour blindness. Check out wickline.org for colour blindness simulations.)

Online Resources

For Those Who Want to Experiment on Their Own

I have yet to find a perfect palette generating site. However, these can be useful for ideas.

If you find a colour you like, record the six letters and/or numbers after the '#' sign. If this "Hex number" is not given, record the site and the numbers they do give. (The methods of calculating other types of numbers vary with site.) Or, bring your favourite pencil crayon.

www.strangebanana.com is a random site generator. If it shows something you like, save it to your computer immediately. It won't recur. To save, in Internet Explorer use Page / Save As. In FireFox, use File / Save. You can then email me the file.

Eric Meyer's Color Blender is useful for monochrome sites. You select two colours and it gives you several intermediates. If the two colours you give look good together, the intermediates will as well.

Well Styled's ColorScheme2 creates palettes that are fairly good, and shows how the colours are affected by various types of colour blindness. It allows you to enter one colour on which to base the palette. It uses Hex, but has a rudimentary HSB system as well.

www.colourlovers.com used to be an easy-to-use site, but it got expanded. Click on a colour to see submitted palettes that include it, and vice versa. It also has a colour search to find colours within a defined range, and a very sophisticated palette generator called COPASO. To choose a colour in COPASO, click on "no color", then drag the sliders around and watch them change. Feel free to explore. You can also register for a free account and the site will remember your favourites. If you doubt that colours make a difference, see here.