Colors And What They Mean To The Design Of Your Website

Updating your Website

I have a confession to make- I’m not satisfied with my own website. I am like the interior designer who can’t settle on a distinctive look for her own home nor has time to decorate it.

My current website wasn’t the first one I had designed but it was the first one I executed all by myself. Initially, I was going to use it to market my writing and editing services and so it had a portfolio section in addition to the top level pages.

To that end, it was achromatic – black, white, and grey with a few discrete touches of old gold. After it was finished, I was contacted in succession by four business people I knew who were so impressed by it, they actually hired me to design and develop their websites. And so, a new career was born.

Since then, my website has gained multiple new pages and gone through a few changes, which included an orange phase – hideous, to say the least. Right now, it’s rocking some dramatic photos of Chicago’s business district and skyline. Why? Because I’m trying to decide how I should redesign the site and whether to niche my business in a particular direction.

My point is- a website is never written in stone. If the framework is right, the colors, fonts, images, videos and content can be changed and should be updated regularly.

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

andy new 2 (2)andy home page 2

Old

andy page 1

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 look and function 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:

  1. Which color would you use to promote fast food?
  2. Which color would you use to promote corporate business?
  3. Which color would you use to promote beauty products?
  4. Which color would you use to promote eco-products?

Easy, right? Now:

  1. Which color has the most appeal to teens?
  2. Which color has the most appeal to men?
  3. Which color has the most appeal to creatives ?
  4. Which color appeals most to women over thirty-five?

Still with me?

  1. Which color is universally hated?
  2. Which color do women loathe?
  3. Which color looks cheap?
  4. 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

.color-1065389_1920

 

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:

  1. Yellow
  2. Orange/ cantaloupe
  3. White
  4. Grey
  5. Green
  6. Various shades of blue: light blue, grey –blue
  7. Turquoise
  8. 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.

textile-548716_1920

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s