HOW WEBSITES CHANGE OVER TIME ACCORDING TO NEED
Two years ago, my client Andrew Swan Ph.D, asked me to put together a website for him with the sole instruction that it was to be IBM blue. I went to work immediately. However, when Dr. Swan began using his website this winter, the blue was the only element that remained. The images, content, and design features were changed to reflect his current status and career direction.
NEW
OLD
ELEMENTS OF A GOOD WEBSITE DESIGN
Before embarking on a color scheme you must make sure your website will meet the following criteria:
-It needs to be responsive, that is, that it looks and functions equally well / the same across all devices.
-It needs to be fast loading- a page should take no longer than three seconds to load.
-It needs be user friendly – designed in a logical and easy to navigate manner
-It needs to be appealing visually to your ideal customer-and you need to know who that is.
PSYCHOLOGY OF COLOR
Today I’m going to discuss the psychology of colors, which has been developed, refined, and tested by the advertising industry for decades.
The following is an explanation of colors, the demographic to whom they appeal, and their positive and negative connotations.
Red: Excitement, passion, stimulates the appetite / negative: anger, rage
Orange: Creativity / negative: superficiality
Pink; Love, femininity, nurturing / negative: immaturity, neediness
Purple: Beauty, royalty / negative: immaturity
Blue: Security, trust, reliability, loyalty / negative: conservatism, coldness, fear
Green: Health, harmony, nature, holistic matters, relaxation / negative: materialism, selfishness, envy
Yellow: Warmth, positivity / negative: impatience
White: Cleanliness, safety, space / negative: coldness, illness
Brown: Grounded, stable / negative: boring, old-fashioned, cheap
Black: Authority, power, intellect / negative: depression, negativity
Grey: Neutral, practical / negative: detached, indecisive
Each of these colors can have a wide range, for example red – maroon, crimson, scarlet.
Quiz:
- Which color would you use to promote fast food?
- Which color would you use to promote corporate business?
- Which color would you use to promote beauty products?
- Which color would you use to promote eco-products?
Easy, right? Now:
- Which color has the most appeal to teens?
- Which color has the most appeal to men?
- Which color has the most appeal to creatives ?
- Which color appeals most to women over thirty-five?
Still with me?
- Which color is universally hated?
- Which color do women loathe?
- Which color looks cheap?
- Which gender prefers bright colors?
Not so intuitive! The answers are: 9. Brown 10. Orange, especially burnt orange 11. Orange-except that young creatives love it. 12. Men
When choosing the color scheme of your website, think about the meaning behind colors. Please don’t do what a recent client did and ask me for a brown and orange scheme -one that was geared towards redefining careers after age fifty. Thankfully we settled on tasteful greens
.
Now, let’s go back to my client who wanted IBM blue on his website. So how do we decide on a color palette that works with IBM blue? Remember the color wheel we studied in primary school? Here are a few options:
- Yellow
- Orange/ cantaloupe
- White
- Grey
- Green
- Various shades of blue: light blue, grey –blue
- Turquoise
- Red
This is a business website, so immediately we can eliminate orange, green, and turquoise. Let’s consider other shades of blue. Keeping the site monochromatic could work, but after we tested it, the result was dull and staid.
White, of course, is like a crisp dress shirt that would complement a navy blue suit. But too much white and blue and the site comes across as sterile ( See my previous post about color ). Instead adding a soft grey to the background results in instant elegance. How can we punch it up? Red? Too garish. Yellow, possibly, but Gold is even better. Going from yellow to gold is like going from a wholesome Swedish flag to something much more refined and elegant, something which connotes success and wealth, because the color gold represents gold, after all.
In case you don’t recall primary art theory, here a few definitions, so that you will understand how colors work together
– Monochromatic – shades or tints of one color.
-Analogous – tones or tints that are adjacent to your main color -e.g: Blue, blue-green, blue violet.
-Achromatic – grey, white and black.
-Complimentary – opposites, e.g: blue and orange.
-Split compliments – instead of the opposite color -a shade next to it – e.g: IBM Blue and gold.
-Diad – two colors that are two colors apart on the color wheel – eg: blue and green.
-Triad – three colors each equally spaced from each other.
-Tetrad – four or more colors on the wheel.
One thing to remember that unless you are designing a website for children or a fast food restaurant you should go a bit greyscale on all your colors. Pure hues are too garish, too childish, and unsophisticated. Adding a touch of grey adds elegance, sophistication and is visually much more appealing.
Hue = another word for color
Tint = color+white
Tone = color+ grey
Shade = color + black
BACKGROUND / WHITE SPACE
Remember the early days of the Internet when you would run across pages that displayed content on patterned backgrounds or just as bad have white colored fonts on a black background? Don’t be tempted to get too creative. Let your images provide the color and your text be easy to read. The question is-do your website pages necessarily have to be white?
Sometimes white can be too harsh and elements get a pop from being on a slightly colored background. There will always be a tint that is slightly more saturated than white within your chosen color. For an example see this chart. if you need to go even lighter you can choose tints of the light hue color see chart II.
Or you can work with the palest shades of complimentary colors, greys and so on.
I hope this has been helpful in helping you think about how your end user will perceive your website and which colors you might use to appeal to them and make them stay on your pages.
