{"id":8275,"date":"2017-02-17T14:33:50","date_gmt":"2017-02-17T14:33:50","guid":{"rendered":"https:\/\/graphicmama.com\/blog\/?p=8275"},"modified":"2022-08-09T10:25:10","modified_gmt":"2022-08-09T10:25:10","slug":"use-color-improve-web-design","status":"publish","type":"post","link":"https:\/\/graphicmama.com\/blog\/use-color-improve-web-design\/","title":{"rendered":"How to Use Color to Improve Your Web Design"},"content":{"rendered":"

In this article you will learn some basics for\u00a0how to use color<\/strong> in your design.<\/p>\n

No matter what’s the case with your website – if you want to sell, educate or just share your ideas, in the end of the day, you are aiming at cathcing the viewer’s attention and retaining it.<\/strong> Most probably too, you have content on this website of yours, that you want to be read, understood and lead\u00a0the audience to certain actions.<\/p>\n

Many designers understand that one of the strongest tools for achieving\u00a0these\u00a0goals is good design<\/em>. Good design keeps people on your page, helps them understand your content and creates positive experiences<\/strong>. Not to argue, one of the most important elements in design is color. The successful or poor implementation of color in your design can often be make or break\u00a0situation for you and your project.<\/p>\n

Related: 39 Inspiring Website Color Schemes to Awaken Your Creativity<\/a><\/p>\n

Why using color in your design is important<\/h2>\n

\"color-theory\"We are surrounded by color and in recent times – honestly speaking- overexposed to it. Brands are fighting over\u00a0the attention of customers<\/strong> and trying to stand out from the crowd and the vast amount of visual stimuli around us. We are not going to delve too much into detail\u00a0why and how colors have effect on us, but here is\u00a0some statistics, which could be\u00a0particularly interesting\u00a0for you, as someone who is doing business:<\/p>\n

 <\/p>\n

 <\/p>\n

85%\u00a0of shoppers place color as a primary reason for why they buy a particular product.<\/span><\/em><\/p>\n

80%\u00a0increases in brand recognition when using color. Brand recognition directly links to consumer confidence.<\/span><\/em><\/p><\/blockquote>\n

If we caught your interest, then we’d like to explain some terms and definitions<\/strong>\u00a0that we are going to work with in this article.<\/p>\n

What is color theory?<\/h3>\n

The interaction of colors in a design through complementation, contrast, and vibrancy.<\/p><\/blockquote>\n

 <\/p>\n

Let’s look at the last 3 terms in detail:<\/p>\n

What is complementation?<\/h3>\n

We often see colors in proximity to\u00a0each other and not isolated. They form different relantionships. Studies and experiments have shown, that colors occupying opposite ends of the spectrum<\/em><\/a> are visually more appealing to people<\/strong>. In short, these colors “complement” each other.<\/p>\n

Here we used Adobe Color<\/a>\u00a0to generate some colors – note how\u00a0the colors sit at opposite ends and they form really pleasant combos.\u00a0Try and experiment with\u00a0the tool yourself, it has a very user-frienfly interface and it is very intuitive, so even without knowledge about color you can manage to create nice color palettes!<\/p>\n

\"complementary-colors\"<\/p>\n

What is contrast?<\/h3>\n

Contrast is important because reduces eyestrain and helps focus attention<\/strong> in certain areas. Contrast is most crucial for areas with text. If used correctly it can help you “highlight” important areas and “mute” others. When in doubt, use very light background color and very dark color for your text – this is one of the most used combinations for making a text readable.<\/p>\n

Here you can see an illustrative example of contrasting colors. Using the same tool, we generated high-contrast color scheme, and a low-contrast one:<\/p>\n

\"high-and-low-contrast-colors\"<\/a><\/p>\n

What is vibrancy?<\/h3>\n

Vibrancy dictates emotion in design.<\/strong> If you use brighter colors, the user will feel more energetic and active, where using of deeper and darker colors, often relaxes the viewer and stimulates more critical thinking. Think of some tabloid designs- they often use bright, red color, which excites the user, whereas sites with information, which need more focus – use dark, somewhat pale colors.<\/p>\n

Here is an example of a website with darker, muted colors:<\/strong><\/p>\n

Fox Cities Chamber<\/a><\/p>\n

\"muted-website\"<\/p>\n

Then, example of a website with vibrant colors:<\/strong><\/p>\n

Tory’s eye<\/a><\/p>\n

<\/a><\/p>\n

 <\/p>\n

To sum it up, some of the main\u00a0topics treated by the color theory, are how colors and their qualities work in relationship to one another.<\/p>\n

Psychology and preference of color<\/h2>\n

Color psychology \u2013 the feelings and meanings people often associate with particular colors<\/p><\/blockquote>\n

<\/h3>\n

<\/h3>\n

Preference of color<\/h3>\n

\"1400101835-psychology-color-marketing-branding-personality-men-women-shades-tints\"<\/p>\n

\"3-color-targeting-demographics\"<\/a>

Source: Infographic: How Colors Affect Conversions<\/a> & Gender and Color<\/a><\/p><\/div>\n

Have you thought that driving a particular car, going to a hipster coffee shop, or wearing high-fashion purse – they all quietly communicate what the person wants to be associated with<\/strong>. Brands make careful and thorough analysis of their customers, how they behave, what their feelings and thougths might be, and they often use color to provide a\u00a0ceratin feel for their users.<\/p>\n

Think of industrial cafeterias with lots of deep greens, dark grays and elegant, resticted color palletes. Who is the typical\u00a0customer? Who buys bright, red sports cars? Who buys pink clothing and accessories? Well, we gave you some room for thought when you are planning your design. Always keep in mind, WHO are you designing for.<\/strong> In the end, your personas will buy the products and you should offer them something they like,<\/strong> and something they can “connect” to.\u00a0You can read more about how brands influence people and connect to their emotion and identity in our article about visual storytelling.<\/a><\/p>\n

We will give you one more simple fact\u00a0about color – in the vast majority, tastes for color and color preference depends on the sex of the customer – yes, men and women like different colors<\/strong>, but don’t worry there is an established “common ground” for some colors. Again, you simply have to\u00a0have your audience in mind!<\/p>\n

<\/h3>\n

Meaning of color<\/h3>\n

Different colors often have unique, applied to them meanings and evoke different emotions in the viewer. By carefully selecting colors, you can reinforce the overall message of your project\/design. Note, that sometimes colors are interpreted differently across cultures and around the globe.<\/p>\n

\"red-color-brands\"1. Red color – vibrant, power, flair<\/em><\/strong><\/p>\n

In combination with:<\/p>\n