DIY Design Webinar Part 2: Choosing Colors that Convert

We're celebrating summer with five weeks of webinars based on design-related goodness. This week we discuss how to pick the right website colors that will help you earn conversions. Watch it below!





Can't watch the video right now? No sweat: we have the transcription right here:

Hey there! Today’s DIY design video is all about choosing high-converting colors that will help turn visitors into buyers. Picking the right color scheme for your website might feel a little overwhelming at first, but I’m here to give you a few simple tips to make it easy and show you how choosing certain colors can actually even influence the conversion rate on your store. Let’s jump right in!



Screen-Shot-2018-07-25-at-2.11.30-PM



The colors you use on your site can actually have a pretty big impact on your customers and their perception of your brand. They can be associated with our emotions and make us feel a certain way when we look at a product or a service. For instance, if your brand or website uses a lot of red, it can project passion, love and drama to your customers, but if it uses a lot of blue, it projects a sense of calmness, pureness and even loyalty. Choosing the right colors can help differentiate you from your competition, focus your customers' attention on your products and even generate more sales. At the same time, colors allow you to show your personality and increase your brand’s recognition.

When designing your website, it’s important to think about the tone you want to set. First, you need to ask yourself two questions:

  • How do you want your customers to perceive your business?
  • What colors will complement your products or services to make them stand out?

How do you go about selecting the right colors for your brand? Let’s start by looking at a few common types of color schemes and how you can use them to enhance your site.



Screen-Shot-2018-07-25-at-2.13.07-PM



One type of color scheme to consider is a monochromatic color scheme. This is basically where you choose one single color as your base and choose lighter and darker shades of that color to add contrast, emphasis or simply separate content on your site.

This color scheme is commonly used when a site wants their photography or illustrations to be the main focus of their site. In this example, Labsphere uses a lighter shade of blue to draw the attention to the categories on their homepage. They use a darker blue between sections and a greyish blue at the bottom to divide their content and create separation. The lighter blue stands out a bit more in comparison to the darker shade, which draws customers to Labsphere categories where their products are and gets their customers shopping.



Screen-Shot-2018-07-25-at-2.14.13-PM



Another option is the analogous color scheme, which combines two or three colors that are next to each other on the color wheel. The result can bring harmony in a design. In this example, you can see how the blueish purple from Nutrasal’s logo is used as the base color, and they’re using the green and pink to highlight categories and a call to action button to drive sales. This is a nice way to tie in your brand colors while also choosing complementary colors to highlight important elements and focus your customers’ attention where you want it.



Screen-Shot-2018-07-25-at-2.15.01-PM



The complementary color scheme pairs opposite colors on the color wheel, which creates even more contrast between content. Here, you can see that the green from the leaves on Life Products’ logo is used as the base color, while its opposite color, red, is used as the accent color for grabbing attention for their selling points. This allows their most important information to stand out and to quickly get their customers to start shopping. This high contrast between colors can be very effective and easy to use throughout your site, including in the add to cart button of your product pages and additional important elements on your site.



Screen-Shot-2018-07-25-at-2.15.40-PM



So, now that you have a good understanding of the different types of color schemes and the benefits of each, let’s talk about how to implement this for your brand.

It’s a good idea to start with your base color. This can be the main color you want to represent your brand and is usually the primary color of your logo or branding.

Next, I recommend choosing one or two accent colors to highlight important details like links, buttons or even subtitles. Remember like we talked about earlier, there are common types of color schemes that make choosing the right accent colors easy. It just depends on which approach you want to take.

Last, you can choose a background color that’s more neutral like using lighter colors like grays or light shades of your base color to divide your content and ease the eye of your customer. This can help them not feel overwhelmed when shopping on your site, but still add some subtle personality and uniqueness. This is how the final design of this website looks. The color scheme used here was the complementary scheme, where the blue is the base color, yellow is the accent color and gray is used as the background color of different sections to separate the content. This website wants their customers to sense a service of trustworthiness by using the blue, but also fun and energy by using yellow as the contrast color.



Screen-Shot-2018-07-25-at-2.16.16-PM



Want to know what’s my favorite color tool that I use when designing a website? Here’s a picture of Adobe’s colors interface. They make it super easy to implement what we just talked about and produce awesome color combinations. I hope you learned some helpful tips for choosing the best colors for your brand and can see how the right types of color can even impact the focus and conversion for your site. Please leave us a comment below if you’d like to know more about choosing colors, and stay tuned for another episode of DIY Design Tips coming soon. Happy color picking!

Have any questions about this webinar, or is there a topic you want us to cover? Let us know in the comments!