Skip to content

Effectively Use Colors to Direct User Traffic on Your Online Storefront

June 20, 2012

In the first lesson in our color series, I thoroughly explained how colors subtlety influence customers- if you knew that already and came back for more knowledge; it’s nice to see you again! With this fresh understanding that the visual spectrum is full of depth, emotion and gentle subtleties for the human mind, you can apply that knowledge to building a better website for your customers. By carefully picking and choosing certain colors to use in certain situations, you are much more likely to construct a cohesive design for your website.

Color Wheel

Color Wheel

If you are still unsure about which color combinations will draw attention to where you want users to click on the website, consider using complementary colors. Complementary colors are essentially the opposites of each other, as seen on a color wheel. These pairings effectively produce a distinct contrast between elements of your website’s features- If used correctly, this will hilight the sections that you want users to focus their attention on. A few examples of complementary color sets include blue and orange, green and red, and yellow and purple. These color schemes are famously seen in the Mountain Dew Logo, Florida Gators logo, common Christmas themes, and Los Angeles Lakers branding. All of these examples are not simply iconic uses of complementary colors, but they show how effective each one is to emphasize certain elements of each design. We will write more about contrasting colors and color theory in another article.

The "Dew" in the Mountain Dew logo stands out and draws your attention.

The “Dew” in the Mountain Dew logo stands out and draws your attention.

Let’s start by examining the packaging of Pepsi Co.’s Mountain Dew: An excellent use of the complementary colors green and red. Although the designs of this iconic citrus soda have changed over the years, the visually contrasting colors used to highlight its logo have been fairly consistent. Whether it is seen on cans, boxes or bottles, the green and red Mountain Dew logo is emphasized by a backdrop of stark white which clearly stands out from the jade tones of the packaging. While the word “Mountain” reflects the natural connotations of the word, (Nature, outdoors, lush forests, etc.), “Dew” is the only red text that you can find. It draws in your attention to the word and boldly stands out from the lime colors of the container. Not only is the word “Dew” a bright crimson, but the word is often printed in a bolder font to emphasize brand identity. Pepsi Co has done an amazing job by choosing Mountain Dew’s complementary color scheme, as there aren’t any other sodas on the shelves with color schemes remotely close to theirs. Take notes- this is exactly how to start building a visually distinct brand! Consider your website for a moment and how you could apply these rules to make your “Buy It Now” or “Add to Cart” buttons highly noticeable …

4Bs of Color Design

4 B’s – Background, Buttons, Banners, & Branding

When applying a committed color scheme to your webdesign, you should first consider the Four B’s: Background, Buttons, Banner and Branding. These elements compose the vast majority of ecommerce websites and the established online storefronts thrive because their color scheme complements the site’s accessability. Everyone who has ever used the internet understands that a good layout is important. However, it is just as vital to apply the correct colors in just the right places to guide your userbase to click exactly where you want them to.

Background
Generally speaking, neutral colors are better suited for the backdrop of your storefront. Using a clean white or sleek black background places the viewer’s focus on your product catalog by allowing the items to stand out from the duller backdrop. While bold and bright colors are visually interesting, they may distract the user from examining your products. Note that ecommerce giants Ebay, Amazon, Best Buy, Target and Sears all incorporate the same stark white background to put as much visual emphasis on their merchandise as possible.

Buttons
Perhaps the most important way to implement color in good website design is directing the user to click where you want them to. While all buttons and links on the storefront should fall inline with your brand’s themes, you want these clickable tools to visually stand apart from everything else. Bright, bold and contracting colors are usually a safe choice for important buttons such as “Add to Cart,” “Wish List” and “Sign In.” If people can’t find these vital buttons, your business is in trouble! If your website is covered with cool, conservative blue tones, consider installing bright citrusy orange buttons to ensure that they are difficult to overlook. For example, the Microsoft Store’s links are black against the white background for a distinct visual contrast, while the “Checkout” button is a lime green color. None of these links are difficult to spot and no user should have to search for any of the store’s essential product lines or user options.

Banner and Branding
The banner that sits ontop of your website should contain your brand’s logo and signature colors, especially since this is the first thing that visitors will see when they load the page. This rectangular bar is a standard tool for ecommerse users to make a good first impression and to establish their personal label. Make your store’s professional logo a central focus and use complementary colors and/or neutrals to hilight your brandname. CVS Pharmacy does an excellent job of hilighting its logo against a deep red background by making its logo a stark white.

Compare and contrast your website’s colors to others to see how they stack up against the competition: Does your website’s background distract you from viewing the catalog? Is any of the text difficult to read due to the color choices that you picked? (Too light? Too dark?) Are important buttons such as “Add to Wishlist” and “Cart” visually bland and dull as opposed to the other elements of your website? Are the color choices that you applied inconsistant throughout the website? If you can’t answer each of those with a resounding “No way!”, then you need to review the design choices that you have made to fix the issue.

All of the most dominant ecommerce websites are masters of directing their viewers to see (and click!) exactly where they want them to. Controling color placement not only drasticly improves any website’s usability, but it consistantly increases sales too. Don’t be afraid of color! It’s one of the easiest tools in your marketplace arsenal to work with!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: