Use Color in Websites and Call-to-Action Buttons to Grab Attention
Color is the Key to Branding Consistency
Written by Mike Hamers, Lightspeed
Edited by Kate Hamers, Lightspeed and Kris Green, Turn Words 2 Money
Instill Confidence Through Color Consistency
Research by Xerox discovered consistent color branding across all your platforms (branding, social media, advertising, logo) not only makes you look more professional, but also causes prospects to remember your brand and your business.
Color improves brand recognition by up to 80%
and increases comprehension of your message by as much as 73%.
When it comes to branding, your logo is the most important guiding element. Your logo sets the tone for what colors you should use on your website. Your website and landing pages are perfect places to communicate your branding – and influence prospects' behaviors – by how you use color.
Using colors consistent with your logo/branding assures visitors they are in the right place. They’ll feel more secure about using your site. This in turn instills confidence and trust in your brand. If users don’t trust they are in the right place, there’s little chance they’re going to make a purchase.
Develop An “Expanded Color Palette”with Your
Logo as Your Foundation
Color consistency does not mean you can only use your logo colors in your advertising. In fact, you should develop an “expanded” color palette with a few additional color variations– but not too many. At a minimum, your color palette needs a dark, a bright, a neutral/pastel and several supporting secondary colors.
- The dark color (or black) is typically needed for your main text so that your message can easily be read against the (generally light or white) background.
- The bright/main/dominate color sets the tone or mood for the palette a well as your web site.
- A neutral or pastel can be used to differentiate areas from white, to help give the site or your collateral materials (brochures, flyers, etc.) an interesting look without being visually demanding.
- The supporting colors can be either adjacent or complimentary (opposite) to your main color or can be one or more of each. (Please see the two web page samples with color palette information diagrammed).
These color selections create a visually interesting professional appearance for all your marketing. Implement your extended color palette in both your web-based and print messages. You can give your brand a strong solid foundation through consistent color usage.
Strategic choices: color can make or break your opportunity.
Your Call-to-Action buttons need to command attention without overwhelming your design. Color can be used to help balance the size of your buttons. For larger buttons, choose a color that’s less prominent within your design (but still stands out again the background). For a smaller button, you may want to choose a brighter, contrasting color to really make the button pop. In either case, make sure the color you use sets the button apart without clashing with the site’s overall design. Be aware of colors that have cultural meanings as well. For example, don’t use “stop sign red” if you want someone to “go” and accept your offer.
According to recent studies, people make subconscious judgments and decisions about a person, environment, or product within 60 seconds, and up to 90% of that assessment is based on color alone!
Call-to-Action Buttons Need Extra Consideration
Color is instrumental in driving site and landing page visitors to take specific actions.
A remarkable 85% of shoppers credit color as a primary reason behind their product purchase decisions according to the Color Marketing Group.
Size, Color and Location
Special attention should be given to the color on Call-to-Action buttons to make sure they stand out clearly. How large these buttons are is very important. A button that’s too large can overpower everything around it. A button that’s too small can get lost in all the other content on a page. You want your Call-to-Action button to be large enough to stand out without overwhelming the design and not TOO integrated so it’s not lost in the layout.
- Your Call-to-Action buttons should ideally be the largest buttons on a given page
- Use contrasting colors to make smaller buttons stand out more
- Use less distinct colors to make oversized buttons fit in better
- Make sure there’s enough space around your button so that it doesn’t feel cluttered
- Consider principles like the “Rule of Thirds” (grid approach with natural focal areas) or the “Golden Ratio” when determining how much space to include
- Use "white" space (text and image free space) to give your Call-to-Action button room to stand out among your other content and set it apart
- Make buttons look like buttons. Don't make user guess if it's really a link or not.
Test The Colors You Use On Your Web Page Repeatedly
That doesn't mean you should change your brand's look and feel. Instead, test different color elements within the framework of your brand identity to see what reflects the image and feel you want most effectively. For example, test different Call-to-Action button colors, and track the change in results over time.
Often using a contrasting button color against the dominant color on the page can successfully attract more attention than using a button color that is too similar to the overall color palette. This simple change may increase your conversion rate and increase your sales. – MH
So what is your logo saying about your brand?
Is the color you are using sending the message you want sent?
Consider and, if necessary, rethink your identity, brand, and values, and then select colors to convey those attributes. With a color palette that evokes your brand's true DNA, your marketing can achieve greater success.
Call Now to Schedule Your...
FREE 30-Minute "Coffee Critique" of your current logo and branding
Comprehensive Brand Audit – Written analysis with recommendations
Price Quote on logo redesign and/or upgrade of your brand consistency
To Your Success – Mike Hamers
ABOUT MIKE HAMERS
Mike Hamers is an award-winning graphic designer, illustrator and author who lives and works in Niwot (Boulder), CO. He has been the owner of Lightspeed Design for 23 years. During that time he has won over 20 national and international awards for this logo design, stationery, packaging and font designs.
Mike has had his illustrations in Wired magazine and brochure design work in "The Little Book of Layouts: Good Design and Why It Works". Mike enjoys working with all size companies – from solopreneur's startups to large national companies. His broad experience crosses most industries including bio- and nano-science, biomedical devices, technology and manufacturing, software, foodservice, and more. Mike's comprehensive design and illustration portfolio is viewable at http://www.Lightspeedca.net.
To Read Past Issues of the Newsletter – Link to Index
Get help with all your graphic design needs — Call if you have
any questions, suggestions, or wish to schedule a free consultation:
Mike Hamers' cell: 303-527-1222 or email: firstname.lastname@example.org
Read what others are saying > Testimonials
More Award-Winning Logos (pdf) > click here
More Business Cards (pdf) > click here
Online Portfolio >