Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close

Learn

Access the Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Blog / Newest Insights

Jump straight to the latest inbound marketing and They Ask, You Answer insights

Access the Learning Center

Free and Pro Courses

Take your knowledge to the next level with free and Pro courses inside IMPACT+

Access the Learning Center

Recordings on Demand

On-demand recordings from past IMPACT events and livestreams

Access the Learning Center

Featured

Inbound Strategy Playbook 2022

Learn 7 foundational principles that have proven to set inbound marketing strategies up for success

Access the Learning Center

Free 5 Min. Inbound Marketing Assessment

Take this free assessment and learn what you can start doing today to boost traffic, leads, and sales

Access the Learning Center

Blueprint for a More Profitable Agency

See why coaching, not implementation, is the key to happier clients and better profit margins

Access the Learning Center

Case Studies

See examples of companies working with IMPACT and thriving with They Ask, You Answer

Access the Learning Center
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

How to Create Consistent UX on Your Website Using Color Theory

By Christine Austin

Christine Austin also recommends this free course, Elements of a Great They Ask, You Answer Website.

How to Create Consistent UX on Your Website Using Color Theory Blog Feature

Color is not only an incredibly powerful part of one's website, it plays a crucial role in defining the user's experience.

Free Course: Elements of a Great They Ask, You Answer Website

Using color gives you the ability to evoke particular emotions, attract attention, and deliver visual cues that direct your users on how they should interact with your website.

They also help deliver a psychological message about your brand & product, so it has the ability to be recognized within your industry.

Depending on how you use color, it can make or break your brand; choosing the wrong scheme could confuse your audience or give them the wrong idea about your company.

To make matters more complicated, choosing a couple of nice looking colors you personally like, may not properly represent your product or resonate with your target audience.

To help direct you in your quest to picking an ideal color palette, let’s look at what colors convey certain emotions, how to use them to brand your site, and best usage practices to channel specific visual messages.

Identify and Understand Your Target Audience

Typically, the colors and patterns you use are meant to evoke appropriate emotions from your user while giving your site it's own personality.

As you incorporate color into the UX of your site, the goal becomes trying to get users to perform a certain action, read specific content, or engage with your site in a particular way.

In order to get your colors and ux to accomplish these goals, you need to identify your target audience/buyer persona. This is especially important since the colors you use can be perceived differently based on their age, culture, social status, values, etc.

Before your pick your color palette, there are four crucial points that need to be recognized:

  • Identify the product & industry the UX is being designed for
  • Define the primary demographic for the product/industry
  • Understand how colors are perceived by that demographic
  • Identify how the colors can be used within the UX of your site

You will want to make sure you pick colors that emotionally expresses the type of personality you want your company to have, that will be most attractive to your demographic.

You may even start to notice that certain industries tend to use specific colors (blue for tech giants(Dell, HP), Green for nutritional/food companies (Whole Foods, Tropicana), etc).  The industries mentioned best identify with these colors because they help evoke their ideal emotions from their consumers.

color-emotion.jpg

While you might like how Twitter uses the color blue, that doesn’t necessarily mean it’s going to work well for your user base. Choosing the colors best suited for your users is the first step to creating a personality specific to your industry and brand.

Doing the research on your demographics and industry color patterns will help create a more consistent brand for your company while also creating a sense of authority and trust.

Designing Palettes

Take a trip down memory lane and head back to your elementary school art class. I’m sure at least once, your teacher taught you about the color wheel.

color_wheel.png

On it, you have your primary colors (red/magenta, yellow, and blue/cyan) which can be combined to create your secondary colors (orange, green, and purple). Adding white can help tint a color while black will create shades.

You might also remember that the colors across from one another are complementary colors. The contrast generated from these colors can help attract attention to specific areas of your site. Work Ninja utilized this on their homepage to draw attention to the “Get Started” button as well as any important elements on their graphics.

work-ninja.png

If you're taking this route on your site, make sure you don’t have too many complementary colors, or you’ll start driving attention to areas of your site that don’t deserve it.

Also, colors immediately next to one another are analogous. They tend to be a ‘safer’ choice due to the similarity of the colors, which evoke calmer feelings and have low contrast.  Lloyds Bank incorporated this theme across their site creating an overall unity to their banding.

lloyds-bank.png

Be wary of using colors that are too close to one another that lack contrast, as this may create readability issues for your user.  

Even with all these guidelines, choosing a color palette can still be a bit difficult to settle with. One tool I enjoy using when trying to pick out colors is Adobe Color, it allows you to explore a variety of color schemes, more than are touched on in this article.  

Utilizing Adobe Color is a fantastic way to visualize the different categories of color theory and generate inspiration for branding your site. Play around with the tool and see what kinds of combinations are recommended for your color preference.

Enhancing the User’s Experience

After you identify a palette that's suitable for your brand, it’s time to begin understanding how it can be applied to your website.

On the surface, you need to focus on making sure you stay within the colors you’ve chosen to keep the sites look consistent. But beyond that, you need to make sure the colors you choose support users tasks and keep your users satisfied.

Let’s look into some of the examples where you can use colors to deliver the proper visual cues and messages to your users.

Identify Related & Specific Web Pages

You can use specific color schemes to identify web pages that are meant to be grouped together or stand out from the rest. This helps users learn how the information of the site is organized, so they can begin categorizing what certain page styles and colors represent.

Differentiating certain pages also allows users to pinpoint areas of your site that may hold its own unique purpose. For example, if you have a stand alone landing page for a special webinar you are running, that page's layout may differ from the rest of your site to alert your users it's not like the standard landing pages they’re used to seeing on your site.

Wrike uses this technique to help create unity for their product pages. They all have a very similar template and follow the same style by utilizing large images with light black text alternating sides. They even have tabs on each page to signify which product page you are on.

wrike-product-pages.png

Relate Visual Elements or Controls

You need to have a distinct style to the certain visual elements and controls so yours will be able to relate the purposes of them without users having to guess.

For example, you are going to want your BOFU button to have a distinct color from the rest of your buttons to highlight it as the most important call-to-action. Tabs emphasizing categories on your blog should be easily recognizable for users to identify what topics you discuss.

You can also use analogous, or different shades of colors to define certain states of your links/buttons. This technique can also be used to add depth to your elements, making them looked pushed in when clicked or hovered.

Republica uses this technique on their buttons to draw attention to what is currently active based upon what your are hovering over.

republica.jpg

Highlight Important Task-Related Information

Using high-contrasting colors is a great way to attract your users to elements that may require their attention or certain action.

For example, if you have a form that needs to be filled out, using red to identify if there's an error in it is a great way to draw eyes to them. Google uses this technique when filling out a form to sign up for a Gmail account.

Gmail.png

You can also apply that concept when certain tasks have been completed. Using cooler or more subtle colors gives users the cue that they have finished the task. Gmail uses their minimal style and a blue button to help signify when you’ve successfully signed up for an account.

gmail-completed.png

Represent Hierarchical Information

Color is especially important in establishing information hierarchy across your pages. If done properly, users should be able to skim through pages and understand what they are about.

To achieve this, you don’t necessarily need the brightest pink you can find to draw their eyes to a specific action. Using a tame palette accompanied by bolder or lighter colors will do the trick.

Vimeo uses this technique on their homepage by placing a black box around the white form which adds contrast against the background. After the user sees the logo and value prop, the form is the next item the user's eyes are drawn. That’s important since it’s the next step they want users to perform.

vimeo.com.jpg

Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
Published on February 16, 2016

Recent Articles

11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2021)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read