Welcome to part two of MTC’s four part series - “Building a Website that Works for Your Users.” If you haven’t already read the first part “User Flow and Calls to Action” - you can catch up on it here. In this installment of our series, we’ll discuss how the psychology of color affects the user’s decision-making process and how to use it to your advantage.

Designing Web Pages Using Color Theory and Psychology

Interactive design is an ongoing process of refinement and A/B testing. If something doesn’t work, try something different and experiment. Because computing power doubles every 18 months, the web has undergone an amazing 20 year transformation from its early days. Over this span of time, we’ve moved from a world of static Geocities pages using <table> tags and bulleted lists that looked like this to dynamic, interactive pages using CSS, AJAX and Javascript.

This rapid development and refinement is the reason graphic designers stay on top of trends and new technologies in the field. But some things never change and represent the foundation upon which all good design rests.

Among them is the importance of color theory - basically what colors work well with each other and which do not.

The web has always been dependent on visuals with the purpose of driving users to a goal. These concepts explain why some websites are pleasing to view and others just…hurt. Hence why color theory is so important.

While visitors may have trouble vocalizing what makes a site work and what doesn’t, they can usually recognize it when they see it. Nothing drives a visitor away faster than something visually offensive. Maintaining happy web visitors goes beyond just filling a website with content. Crafting a site that is visually appealing and entices clients to stay longer should always be your goal.

The look and feel of your website from an aesthetics perspective is important, and creating the basis for this theory is the psychology of color.

Psychology of Color

While not an exact science, the psychology of color theory proposes that people associate and respond differently to various colors. Men and women (in general) have differing preferences on tones, shades and saturation of color. Traditionally, men prefer brighter colors, whereas women prefer softer colors. Color does not have some sort of magical hold on people enough to completely change their buying but it does play a role in what consumers are subconsciously attracted to purchasing.

For instance, it is a commonly believed notion that the color yellow makes people happy. So if you have a brand that is focused on happy things - like a travel agency or a crafting store, you should plaster your web page in yellow and your sales will go through the roof - FALSE. While this would be a convenient rule of thumb to follow, personal experiences weigh too heavily on people’s preferences for any one color to apply to everyone equally. Instead, it is how you choose to use color that matters, not necessarily just which color you pick.

The Brand - Color Relationship

Utilizing color to differentiate one brand from another is key to increasing revenue. In fact, research has shown that up to 90% of a person’s motivation to purchase a product is based off of color and the brand associated with those colors.

Much of how this relationship between consumer and brand is initially formed is if the consumer views the colors of brands as “fitting” of the product being sold. Does the color selected reflect the brand’s personality? Imagine, for instance, if two iconic brands had swapped color schemes - would these new color palettes work for their brand?

See? Finding the right color scheme can say something completely different to your audience. While Harley-Davidson motors has profited from the Orange & Black, it is unlikely that the engagement ring mogul would benefit as greatly from the autumnal palette.

Now, imagine if two other iconic brands, whose colors were chosen specifically to reflect their brand message, were swapped. Starbucks chose green and white as their brand colors to highlight that they use natural, responsibly sourced and high-quality ingredients. This has been important to their brand messaging since Starbucks’ inception. Dunkin’ Donuts is a chain known for their quick service coffee and breakfast menu. Even their slogan - “America runs on Dunkin’” illustrates their expediency. So bright, alerting colors like red orange and pink, make sense for the brand.

This holds true for web design as well - your colors form the basis for the look and feel of your website, and may be the first opportunity that your prospects will get to experience your brand - so colors do matter.

Break with Tradition - but not too much

Consumers like change, but it has to be gradual (see our blog on the evolution of the online store) and it has to be logical. For instance, when Amazon updated their website from 2008:

to this, present day:

Their changes were purposeful and gradual. They shifted from an all white background, to a dark blue header that draws the consumer’s attention to important information and makes their logo more prevalent. The design doesn’t overwhelm the eye and make the consumer want to leave the page quickly. Simple tricks like focusing on one image at a time, followed by smaller, targeted images, keeps the page visually appealing.

Successful websites also know when to draw attention, and when to not. Mailchimps’ website (below) uses color to draw attention to important information on the page.

The current tab is highlighted in a complementary blue. Regardless of the page that the user is on, the “Sign Up Free” button is in bright red. This heavily contrasting color draws the visitor’s eye immediately and creates a sense of urgency (red = action, alert).

Websites that are less successful (below) tend to overwhelm the user with color. This company chose green to play off of their “mint” name. However, the choice of a green background washes out their logo. Desired calls to action here are not obvious, and the sponsor banner ads take away from the purpose of the website.

Context Matters

The most important aspect of color selection in the design of your website is remembering that context matters. As we stated earlier, no matter what colors are supposed to mean, the colors you choose will impact everyone a little differently. The context with which you use them is important. If your brand is simple, sleek and sophisticated, utilizing bubble gum pink and turquoise will have far less impact than using black, white and silver. However, that same color palette will be far less effective if you sell children’s birthday party supplies, when a brighter, more colorful selection would be appropriate.

The bottom line is - if you look at your website and the colors don’t portray the look and feel that you are hoping to evoke, then it is time for a change. And if your website is ready for a change, and you are not sure where to start, it’s time to call the MTC team at 617.250.3220.