One area of visual design that seems particularly subjective is colour (that's Australian for 'color').
This post is a summary of basic colour ideas researched up from the wild web.
Colour Matters!On your website, use color to create the most functional user-interface design.
For example, use color to direct the eye to the most important areas on the page. The web designer must identify what ideal and normal sequences might entail: what the viewer should see first, where the eye should move next, and how much time the viewer's attention should be held by each area.
Keep colors to minimum. "Signal detection" theory means that the brain is able to understand and organize information when a minimum of colors and shapes exists within the visual field. Too many colors and shapes make it impossible to focus and find anything.
- Use colour to direct the eye to important areas
- Identify the sequence of focal areas (ideal & normal)
- Keep Colours and shapes to a minimum
Which Colours?This is where things get very subjective - the realm of psychology. Color psychology is a field of psychology devoted to analyzing the effect of color on human behavior and feeling.
This seems to be very culturally dependent - see Wikipaedia for a table of some common cultural (symbolic) connotations attached to colors in Western cultures.
- Realise that colours will evoke behaviour & feelings in humans!
- Keep in mind colour psychology when selecting your colours
- It's subjective!
Using Colours For FocusLet's move on to something less subjective - how to use colours to direct the eye. In order to understand this, you need to understand how colours relate to one another.
The Colour WheelAn indispensible tool for selecting colour - the color wheel (or circle) is a visual representation of colors arranged according to their chromatic relationship. It essentially provides a method of selecting colours based on their relationship to one another.
There's a number of useful colour wheels you can user directly on the web - google 'em.
Here's a selection:-
Peter Piper's Pallete:
Uses a 'cross' rather than wheel, but shows 7 colours at once - each in varying levels of proporition.
The Color Wizard:
Select a colour - then it will show you related colours.
Digital Color Wheel:
Similar to the color wizard, it helps see which colors go with what. You can choose your primary or reference color, then move the mouse over the different color schemes – analogous, split complementary etc.
Random Color Generator:
Generates three random colours with a text block preview. Useful when you're totally stuck with designer's block!
Complimentary or analogous?When complementary colours are used together, they seem to make each other brighter and more vivid. They are located opposite from each other on the colour wheel.
Analogous colours will tend to blend together, and provides a feeling of harmony. They are located next to each other around the colour wheel.
Passive or active?The color wheel can be further divided into ranges that are visually active or passive.
Most often warm, saturated, light value hues are "active" and visually advance. Active colors will appear to advance when placed against passive hues.
Cool, low saturated, dark value hues are "passive" and visually recede. Passive colors appear to recede when positioned against active hues.
ProportionsWhen using colours, realise that the proportions of each colour affect focal points, and can help draw the eye from one area to another
- The color with the largest proportional area is the dominant color (the ground).
- Smaller areas are subdominant colors.
- Accent colors are those with a small relative area, but offer a contrast because of a variation in hue, intensity, or saturation (the figure).
Summary of links:Principles of design: http://www.digital-web.com/articles/principles_of_design/.
Colour tutorial: http://www.worqx.com/color/index.htm
Color and E-Commerce: http://www.colormatters.com/des_ecom.html
Learning to Use Color on Your Website: http://www.creativepro.com/story/feature/6858.html
Peter Piper's Pallete: http://www.worqx.com/color/palette.htm
Random Color Generator: http://www.colorsontheweb.com/colorwheel.asp
The Color Wizard: http://www.colorsontheweb.com/colorwizard.asp
Digital Color Wheel: http://www.paintquality.com/color/index.html#