{"id":14218,"date":"2017-05-31T15:49:47","date_gmt":"2017-05-31T19:49:47","guid":{"rendered":"https:\/\/www.mgb2b.com\/blog\/?p=14218"},"modified":"2017-06-02T16:36:29","modified_gmt":"2017-06-02T20:36:29","slug":"importance-color-website","status":"publish","type":"post","link":"https:\/\/www.mgb2b.com\/blog\/importance-color-website\/","title":{"rendered":"The Importance of Color on Your Website"},"content":{"rendered":"

\"color-title-box\"<\/a><\/p>\n

There are a lot of variables you need to think about when building a website. Layout, page flow, content, photo choices, CMS, hosting, the list goes on. But a major part of the design you need to keep in mind from the get go is the overall color scheme of the site. Below are a few key items to keep in mind when deciding on a color scheme for your new (or redesigned) website. <\/span><\/p>\n

Color Psychology<\/h4>\n

Every color has built in associations for people. Those associations can vary widely in different cultures \u2013 but lets stick to the US for now. The use of color on\u00a0your website helps\u00a0set the mood for the user ‘s experience, affects how long they stay on your site, and helps drive them to action. <\/span><\/p>\n

People associate blue with serenity, security and trust. Green can mean renewal, growth and nature. And\u00a0red, the most eye catching of all the colors, can create feelings of action and danger. Colors not only have their own associations amongst cultures. They have specific associations with marketing due to the influence of the big multinational corporations we all know and love. See an interesting piece about this on ColorPsychology.org<\/a>.<\/span>\u00a0These color associations should be taken into consideration with all design elements on your site, icons, call out boxes, and even the shades of color in the photography you are using.<\/span><\/p>\n

\"color-title-box2\"<\/p>\n

Brand Consistency<\/h4>\n

Another major consideration: how does your website match up with your overall brand identity? Your brand identity should not just be taking a look at the colors in your logo. Sit down with all your marketing materials to see what a viewer of your website has possible already seen. Does the general color tone of your new website match the look of the email campaigns a client may have seen? Does it look similar to your print ad or Sell Sheets? If you spread all the work out on your desk, you should notice a theme. If not, and your desk now looks like a rainbow, then maybe you have other things than your website to think about.<\/span><\/p>\n

Buttons and CTA\u2019s<\/h4>\n

I have been talking a lot about color consistency. However, since\u00a0rules are meant to be broken, the Call\u2019s to Action and Buttons on your website are the perfect place to do it. You want your website to make sales, generate new leads, and in general perform well. If the items on your website that drive this\u00a0blend in too much, you are missing an opportunity to convert viewers\u00a0into sales.<\/span><\/p>\n

Here’s the tricky part: using color to create buttons that stand out, but don\u2019t look gaudy. This can actually downgrade the quality of your brand. The easiest way to figure this out is through a tool that you may remember from elementary school art class\u00a0\u2013 the color wheel. <\/span><\/p>\n

\"colorwheels\"<\/p>\n

Your corporate color is your starting point. Then, I suggest you pick a either a complimentary, analagous, or split complimentary color scheme. This comes down to basic\u00a0theory ideas. As you can see in the example above, a complimentary color scheme chooses the colors exactly opposite on the color wheel. Complimentary colors make a stark difference that will help your highlighted buttons really stand out. (Side note: beware of Red\/Green combos that look very Christmasy if you are not careful). An analogous choice selects the colors directly adjacent to your brand color and is a much more subtle selection. And finally a split complimentary\u00a0color scheme is a\u00a0nice balance between the first two choices \u2013 it’s the two colors adjacent to your brand’s complimentary color. This helps make buttons and CTA\u2019s stand out, but keep them from being\u00a0jarring.<\/span><\/p>\n

Complimentary Colors In Action<\/h4>\n

Merrill Corporation,\u00a0the winner of the 2016 B2B Web Award. This is a good example of a site using a complimentary color scheme with blue as their corporate color and using orange as a highlight color for all their buttons.
\n<\/span><\/p>\n

\"screencapture-merrillcorp-en-1495792849902\"<\/p>\n

In the end, there are endless directions you can take with the color scheme of your website. There are also lots of resources online to help with the process. At the onset of any major branding project, I often find myself turning to Adobe Color CC \u2013\u00a0great part of the Adobe Suite of products. This tool allows you to develop your own color schemes and\u00a0to explore those of other Adobe users who have shared theirs. It is a great place to start.<\/span><\/p>\n

\"Screen<\/p>\n","protected":false},"excerpt":{"rendered":"

There are a lot of variables you need to think about when building a website. Layout, page flow, content, photo choices, CMS, hosting, the list goes on. But a major part of the design you need to keep in mind from the get go is the overall color scheme of the site. Below are a […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[98,8],"tags":[209,264,220,687,689,688],"class_list":["post-14218","post","type-post","status-publish","format-standard","hentry","category-b2b","category-design","tag-b2b","tag-b2b-digital-marketing","tag-b2b-website-design","tag-color-theory","tag-cta","tag-website-colors"],"_links":{"self":[{"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/posts\/14218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/comments?post=14218"}],"version-history":[{"count":11,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/posts\/14218\/revisions"}],"predecessor-version":[{"id":14253,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/posts\/14218\/revisions\/14253"}],"wp:attachment":[{"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/media?parent=14218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/categories?post=14218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mgb2b.com\/blog\/wp-json\/wp\/v2\/tags?post=14218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}