In this Whiteboard Wednesday, Lenny Ford gives an overview of color theory and psychology in web design.

Transcription

Hi everyone, welcome to another Whiteboard Wednesday. I’m Lenny Ford from Links Web Design. Today we’re going to be talking about color theory and web design. This is a broad topic.

Today, we deal with the very basics. It should give you a good place to start. You can go look at your own website to tell if you’re using the right colors for your brand and website.

Color Schemes

We’ve all seen this color wheel in first or second grade. We learned about the color wheel. You probably heard some of these terms about complementary colors and analogous colors.

Color schemes, in an overall term, are the breadth of colors that you use on your website. You can use analogous color schemes. They create tension with people’s eyes. It creates eye strain because the shades you use are close to one another.

A lot of times it creates strain in your eye because you need to look hard to tell the difference between the shades. Complementary color schemes, utilizing colors on the opposite sides of the color wheel, tend to be a lot better in web design. They’re a real stable color scheme. They give the eye a place to rest.

For instance, it doesn’t try hard at all to tell purple from yellow, or blue from orange. It creates a really nice color scheme. It is easy on the eyes. This is probably the fun part of color theory and web design, the psychology of it.

What do colors mean?

They all mean different things to different people. Not everybody likes the same colors. We all understand that. The colors have fairly well-defined psychology behind them.

Black

It really highlights power and luxury. You see it a lot on high-end cars websites. High-end jewelry websites, for instance, utilize black a lot.

You also see it on gaming websites. Usually, as a background color to make other colors pop out of the web design. You also see it on some low-end websites.

In the late ’90s – early 2000s, it was common to see black websites made by people who weren’t really professionals. They can have that feel. If you have a professional web designer doing your website, they can utilize black in a nice way.

Blue

This is a really common one on the web. I’m sure you’ve probably not noticed that a lot of websites have blue. You’re not really looking at it. But, in fact, they do.

Most websites use blue. Because a website is usually the first touch you have with a potential business that you associate with. You don’t know them. You haven’t met the people there.

Blue really cries out trust and stability. You’ll see it a lot on banking websites for big corporations. Think Walmart. Blue website, right? We don’t know anybody in Walmart.

Maybe you know somebody that works there. You don’t know the corporate people. It’s a huge corporation. So trust and stability are really great for companies, banks, and big corporations.

Red

This is a tricky one. It’s high emotion. It also promotes hunger. It’s the color of stop signs and fire.

People have positive or negative associations with it. We don’t really know. It’s also the color of blood. So, use it carefully.

It works really well for restaurants. If you think about the logos of your favorite fast-food restaurants, McDonald’s, Burger King, and Wendy’s. All of these use red.

It does promote hunger, a feeling of hunger in people. It’s also really exciting. If you want a really impactful, emotional website, you can use red to achieve that goal.

Purple

Not used a whole lot in web design. There are some really nice purple websites out there. It’s kind of mysterious and romantic feeling. Maybe if you do a website about couple’s therapy, you might have purple as your main color.

Green

Of course, fresh, new, spring, rebirth. Maybe your website’s about some revitalizing skincare or lotion. Green would be a great choice. Through the color, you tell them the same thing the website tells them. We’re going to make you look fresh, new, and young.

Yellow

It is a really tough one on the web. I don’t know if you can read this on the whiteboard. It washes out so easily. We don’t know what somebody’s monitor color is going to be or their color settings.

They could wash it out or it could display really nicely. I usually tend to stay away from it in web design because it’s so hard to deal with. With the range that people can do on their monitors, it does promote warmth and happiness.

When paired with blue, it works really well on children’s websites. It can work out really nicely with that nice youthful look.

Orange

This is probably my personal favorite because it’s exciting. It creates desire in people. It’s not as bold and strong as red.

It’s still warm and inviting. It works really well with a wide range of other colors. I really like orange.

Brown

Tradition and comfort work really well if you don’t want to excite people. You want to show them, “We’re just kind of down to Earth.” It works really well there.

White

Then, the one you can’t see, white. White is a color or the absence of color. It’s sometimes referred to as the perfect color. It works really well. You can’t really go wrong with white.

White and black paired together. Obviously, text that you read on the web is all black, usually on white. White text on black is a little hard to read and eye-straining.

White creates space in your website. That’s really important. You don’t want to cram everything together.

When we talk about white space, it’s not necessarily the color white. It’s the placement of elements on-page. White does create space when you use it as an actual color on your website.

Putting All This Together

• How does this all work?
• What does this mean?
• How do I figure it out?
• If you audit your own website, go back and say:
  • Am I using the right colors?
  • What do you want to think about?

The most important thing, don’t think about your own color preferences. Your website is not about you, as a person or business owner. It’s about the brand, the company, and the client themselves.

None of it is about you. You don’t want to think about “my personal color preferences.” Think about your brand.

What is your brand?

Is it an exciting youthful brand, or is it a stable, traditional, long-term brand? You can kind of say those adjectives. Then, look back to our psychology part. Which one of these fits what I think my brand is?

Think about your clients. It’s important to know what your potential client’s demographics are. Men, women, age range, income levels, all of that ties back into psychology.

Who am I trying to target?

If you’re building a children’s website, yellow is great. It works really well. Black, probably not so much. Children don’t really have that concept of money.

They don’t really care about luxury. They care about fun. If you think about your client, that can give you a really good indication of what kind of color you should use.

Your Website Goals

It’s really important. If you try to convert people, use colors to ensure that conversion happens. At least, help it along. Again, orange is one of my favorites because it works really well for “call to action” buttons.

Think back to Amazon, Walmart, and big e-commerce sites. A lot of them use blue as their primary color and orange as their call-out color for the “call to action” buttons. It works really great. It draws the eye away from all these other colors to that nice warm color.

That’s what you want in the “call to action.” When I think about, “What am I trying to achieve here?” This is a call to action. I want to draw people’s eyes to it. I automatically go to my bright colors. I’m not going to use a really subdued color. Their eyes skip right over.

I hope this helps you when you think about color on your website. This just touches the surface of it. If you want, you can head over to our website. We have some blog posts that go a little bit more in-depth about color theory. 

Voted One of The Best Website Design Companies in Bangor, Maine Since 2009 – Links Web Design