How Color Will Make or Break Your Website

Thinking about color in any respect can be a tricky subject. When it comes to web design, color can either make or break your website; if color is not the absolute most crucial element of design when developing your site, then it should most definitely be at the top of the list of things you need to consider. To help you out, here are three key components about color that not only build the foundation for a website, but accent its design:

Contrast
Take a look at your website: Does it seem dull and flat? Contrast on a website is a key component in breaking up content. You should always use colors that are eye-catching for headers and subtle colors for your body content. Taking advantage of color like this is extremely helpful to your visitors when they need to find something on your site quickly. Say for example, I am a visitor of your website. Would I be able to find your phone number at first glance? Would I know where one blog post ends and where another begins? If the answer is no to either of these questions, then your site may be lacking contrast. Without contrast your visitors are lost in the abyss of your site. But you must remember not to go overboard– use color mindfully. (Seriously, leave the rainbow coloring to preschoolers.) Keep it simple, and remember to restrict your color scheme to a maximum of five colors–this will keep your site looking unified, cohesive, and professional; however, you must be very cautious of the colors you choose. Choosing colors such as red, green, and black, doesn’t give you high enough contrast. For example, using green for the text and red for the background affects the readability of the site and may even cause visitors to avoid even reading your site and, as a result, drive your visitors away.

 

Hierarchy

Don’t you hate websites that have a million things going on all at once? And to top it off, they usually use an explosion of colors to distract you even more. In order to ensure that your website is truly effective and presents information in an organized manner, be subtle and use color to your advantage, don’t drown visitors in it. Direct your viewer to where they need to be looking by using color to highlight the most important content vs. the least. For example, our website’s header calls your attention to our phone number because of the high contrast relationship between orange and white (check it out http://www.gowebsolutions.com/).

Another example of this is seen in our Web Design information page (http://www.gowebsolutions.com/tucson-web-design/). It uses variations of blue to emphasize headers and black to differentiate the content. The contrast relationship between each color emphasizes to the visitor the blue text is what the viewer should read first and the black text is what they should read second.

Using color in this manner really helps your viewers know how to navigate through your site as well as what they should be looking at, and in turn keeps their attention focused on the important parts of your website. (You do want your visitors to stay on your site don’t you?)

Brand Identity
Reinforce your brand—don’t be afraid to use your brand colors in your color scheme! People associate brands with certain colors, and that allows you to become more identifiable, thus increasing the recognition of your business. Your viewers will remember your company much better when they are repeatedly exposed to your brand’s colors. By subtly threading brand colors throughout the website, the human brain is able to subliminally pick up on them and thus increase the likelihood of the visitor remembering you in the future. On the other hand, if you aren’t branding your website, you could be throwing your visitors off, check out our blog “Could Your Website Design be Hurting Your Business”. Keep in mind, your website is part of your brand identity elements, just like your business cards, letterheads, and all other branding elements. Keeping all these colors the same will ensure your visitors will feel safe buying from your website, sending you sensitive information, or simply just browsing it. (You can also check out “12 ways to convert website visitors to customers” for more tips on selling online.) Here are a couple of sites we’ve done that incorporate the company’s brand colors in the web design:

When choosing your brand’s colors, try to incorporate colors that relate to your company’s vision, value, and/or mission. Every hue has a different meaning and using color to support your company’s overall message helps establish you as reputable and creditable. If you want to show that your company’s trustworthy, blue would be the most appropriate color to use since it communicates just that, trustworthiness. On the other hand, orange conveys a more comedic tone and energizing feel. Here is awesome infographic we found that explains more in detail of what colors represent, what they mean to your company, and how they could be applied to your website (click to enlarge):

 

[Source: http://blog.nextdayflyers.com/]

All in all, color should be utilized in a manner that will reinforce your image, allow the public to remember you, and ultimately keep them coming back. Keep these tips in mind and call us if you have any questions.

Check out these Resources for Color Palette Inspiration:
http://www.colourlovers.com/
https://kuler.adobe.com/
http://www.degraeve.com/color-palette/ (Use your own photo to generate a color palette!- From URL only)
http://www.cssdrive.com/imagepalette/ (Upload your own photo or paste in the photo’s url to get a color palette)
http://www.colorschemedesigner.com/ (Generate color schemes according to the color wheel and also view how Colorblind visitors view those colors.)

This post was written by Paulina on November 05, 2012

Paulina is all-around obsessed with design. She is dedicated to ensure even the finest detail in a design is perfect.She can be reached at: Paulina@gowebsolutions.com

3 Responses to “How Color Will Make or Break Your Website”

  1. Sandra Turner says:

    Great color tips. I think color is super important in web design. I have seen some websites that had me running off their page at load because of poor color choices. You give some good advice on how to choose the right colors for your website. Thanks.

  2. Hi Paulina,

    I like the your advice very much especially about making sure you are remembered.

    Its interesting what you write about the color blue, I have always thought blue was for medicine and business colors, I would have used brown for trustworthy. But maybe everyone has different taste 😉

    Thanks loads

  3. Nice post which People associate brands with certain colors, and that allows you to become more identifiable, thus increasing the recognition of your business. Your viewers will remember your company much better when they are repeatedly exposed to your brand’s colors. Thanks a lot for posting

Leave a Reply