Importance of Colors on a Website
First off let’s start with the basics, each website has it’s own “soul”. In other words, this is the color theme that it employs. This can either make or break a website. Pre 2010 era website did not care so much about the color design, the main concern was always is it informative? Does it get the main idea across? Now past 2010, we see a drastic shift in design before we had a very static feel. Now website’s are shifting from skeuomorphism to flat design. The main difference is the appearance and use of certain colors. Like in the example below you can tell the difference between both designs. The difference is very obvious, the design on the right is much more visually aesthetic.
The big question then arises, how do we have a constant color flow on the site? It all starts with a mood board. In our Toronto design agency, we always focus on this first before we apply any colors to the site. A mood board is essentially color inspiration, we find 6-10 images that feel aesthetic to our niche or in this case the website. We then proceed to select the common colors from the images as we want our website to have the same “mood”. This ensures consistency all over the website, so when a possible client goes on our site, they feel the same theme everywhere. When we begin the visual design we always refer back to this mood board, the colors we use and pick all depend on it. Below is the mood board example that we at Asigma Design used for our website.
The three main colors used are Red, Black, White, Grey. As you see in the picture above, all these colors flow, even though the images are all different in a sense they all feel the same. The colors give this consistent aesthetic. When you visit our website aSigma.ca you will see how and where we used all these colors.
The next step after the mood board creation and color choosing is where to use what colors? This is the struggle that all of our clients faced when they came to us. Each element on the website has its own colors. For example, all the important heading on the site use the color red. While all secondary headings (less important) use the color black. This way when the human eye jumps across the website it will understand that red is important while black is less important. The crucial takeaway from this is that this use of red for primary heading and the use of black for secondary is consistent all over the website. Every page you go on will have this consistent “theme”. So for the future when we create a new page, we then know where to use read and where to use the black.
Red is not used everywhere as you might image, it is only used in spots where there is emphasis needed. In places where we want the client to look. An example is our “Start Project” button, this is an action so the color used for text within the button is red. To stress the importance of red, we only use it in the most important parts of the sites. There where we want the most attention.
Imagine if we used red everywhere, then it would lose all the importance that it holds. It is important to use your “main” color where it is truly needed. To wrap this up let’s look at the main takeaways from this.
-Before implementing colors on the site start with a mood board.
-Mood board must be consistent with colors, it has to be aesthetic.
-Focus to determine the main color to use for important bits of the site. Then choose the secondary colors.
-Make sure the colors flow, they must all have a purpose.
-Outline where you will use the colors, example red for headings and black for subheadings.
-Be consistent with your choices, don’t use yellow for the title if your main theme is red.
I hope this articles helped you understand how we at aSigma design our website’s to be aesthetic and flow with purpose. If you could only take one thing away from this, its always start with a mood board!
Feel free to send us an email or give us a call if you would like to discuss your website and what we could do for you to improve it.
