ClickShip Academy 105: Website Design: Colour Theory and Finalizing Design

ClickShip Academy 105: Website Design: Colour Theory and Finalizing Design

Welcome to part five of our ClickShip Academy series, “Everything You Need to Know to Start an eCommerce Business”. If you're not caught up with the series check out parts 1-4 below. 

Part 1: Finding Your Market Niche and Product

Part 2: How to Create Your Brand Name and Logo

Part 3:  How to Buy Your Domain and Choose a Web Hosting Provider  

Part 4: Web Design:  Template  or Custom Design?      

In our second blog, we discussed how to create your brand name and logo (and how colours affect your branding). In the last blog, we covered the various pros and cons of going for a template or custom designed website.

Today, we’ll be going through the last design related article, in which we’ll be going deeper into how your brand logo design should be reflected in the look of your website and how you can brand your website as you move towards finalizing your design. 

Before we delve into creating a more solid brand identity and how colours and design can help reinforce such this, let’s do a short recap of what we discussed about colour theory in ClickShip 102.

What Are the Basics of Colour Theory?

Colours play an important association for consumers on how they perceive a brand. Once you have decided your brand name you can start looking at the colours you think would best represent your brand. 

There are three colour schemes you can work with; complementary, analogous and triadic. What colour scheme you go for is up to you however, the connotation of the colours is something you must keep in mind as you are deciding what your website and logo will look like.

Here is a general description of what each colour can represent :

  1. Red: Passion, Love, Anger
  2. Orange: Energy, Happiness, Vitality
  3. Yellow: Happiness, Hope, Deceit
  4. Green: New Beginnings, Abundance, Nature
  5. Blue: Calm, Responsible, Sadness
  6. Purple: Creativity, Royalty, Wealth
  7. Black: Mystery, Elegance, Evil
  8. Gray: Moody, Conservative, Formality
  9. White: Purity, Cleanliness, Virtue
  10. Brown: Nature, Wholesomeness, Dependability
  11. Tan or Beige: Conservative, Piety, Dull
  12. Cream or Ivory: Calm, Elegant, Purity

Now let’s go back to an example we’ve been using throughout this series, our custom knee pads business. We have our niche, logo, domain/ hoster and we know how we want the website to be designed. What’s next?

Let’s say we opted for a template design, now we have to bring all the design decisions we made before and bring it all together. If you’ve already designed your logo according to the colour theory you may have already worked through this, however, it’s important to go through this again for the website. Let’s talk about our website’s final design. 

Taking inspiration from colour theory, let’s go with a triadic colour scheme. If we look at the descriptions of the associations with the different colours, we can say maybe we’d like to associate with emotions such as Passion (red), Energy (orange) and Creativity (purple). 

If you’d like to do some research in your market you can find references to how your market uses these colours. For example, in the general “sports” associated products orange can be seen with Gatorade. In contrast, Nike and Puma both have Black logos. Take a look at these websites and see how they use their logo colours on their website.

The way we go about choosing our colours can differ, for example, your website logo could be mostly red but have orange and purple as additional colours. Let’s follow this colour calculator and find a triadic scheme that works with at least two of these colours. 

We can find that we can use :

  1. Red (#ff2104)
  2. Purple( #4304ff)

However, the last colour is yellow (ish) and doesn't fit with our plans. So let’s assume we went with a red logo, we can use a white background much like the Nike website and use purple to accent buttons etc. 

Now, this is a very fast and loose way of using colour theory, as we’re not using all the triadic colours, but this is one way to go about it. You may choose complementary colours or whatever you feel works best for your business.

Let’s recap. You have your logo, you have your domain and hosting provider, you have your wireframe and know exactly how your website will look, now we know how you will “fill” that design in with your colours. Hopefully, this has painted a picture of the design process and how you can finalize your design as you move forward in the eCommerce business journey.

Before we finish, branding and the feel of your brand is now very much embedded into your website. Your reds give your customers a sense of adventure and  your purples assures them that your products aren’t some standard knee pads. This is the beginning of your branding journey. Brand development is of course a much larger subject and something you must continually work on before and after your website launch. 

You are now ready to go on to the next step, actually getting your finished design built. In the next article, we’ll be discussing custom building your website vs using a website builder. 


Written by freightcom