In this post, I will continue my discussion of the meaning and the use of colors in web design. As I have previously mentioned, color is one of the web designer’s most indispensable tools, because it is one of the main building blocks of a superior website. Below you will find my list of simple tips to improve the use of color in your site. Moreover, I have selected three main websites in which I find use color successfully. Throughout each of the 7 tips, I will discuss and give explanations as to why I think these three sites follow my simple tips properly. I hope you find my advice useful, and please leave any questions or comments, as I love to hear from fellow web aficionados!
Examples
Use a Color Scheme
The use of a color scheme is essential when organizing a website. You want your website to look uniform, well planned, and well designed. The colors you choose to use can be balanced, harmonizing, contrasting, or complementary, depending on the goal of your site. As I mentioned in, The Meaning of Colors for Design, colors can have a psychological effect on viewers, so it is important to consider that when organizing your scheme. For example, here in Admix Web, I contemplated my color scheme and decided I use green, white, and black throughout the site. This color scheme gives a feeling of uniformity and balance, which was my goal. In addition, use colors that complement your logo, so that your site’s logo is included in the color scheme. In regards to my three selected sites, Versions, Newsberry, and Cork’d, the web designers used very well-organized color schemes that each create uniform well-planned designs. I like each of these color schemes because they are consistent, clean, crisp, and fresh, and each color scheme gives the website a very professional feel. Moreover, each site incorporates its logo into the color scheme and they use the appropriate colors for the intended purpose of the site, which I feel both make for well-planned sites.
Use the Right Amount of Color
The right amount of color is also important when organizing your site. Too many designers think that they must incorporate a myriad of different colors in order to make a great site. I have seen many websites that use so many different colors, that it becomes distracting, off-putting, and downright unattractive. Not only is the overuse of color going to create an unattractive site, but it also will also make it uninviting and cause problems with navigation for the viewer. Moreover, I have stated before in, Good Tips to Increase your Site’s Speed, that you do not want to sacrifice the speed or the navigability of your site for your design. One way to keep your site simple is to use fewer colors. When it comes to colors, less is more. In my opinion, generally, a designer should not utilize more than four different colors in a site. Now, on the other hand, you do not want to use too few colors, and thus create a flat, boring design that will not catch the eye of your viewer. Designers that employ only one or two drab colors can also cause design problems because the site can be uninteresting and will not grab attention. Versions, Newsberry, and Cork’d each use just the right amount and variation of color in their sites. The designers of these sites understand the idea of using only a few key colors in their design, and how that creates a clean, simple design that can still be very aesthetically pleasing. For example, in Cork’d the web designer only utilizes two key colors, but those contrasting colors of blue and red complement each other very well in the suite, and thus these two key colors are all that is required in the site. The addition of another color would have only created chaos in the design. In my opinion, Versions and Newsberry also do successful jobs in using the right amount of color, which creates very exceptional designed sites.
Use Light Background for Text
Try to use the lightest background color on your site for the use of text. Ideally, you should use a white background for content, but if white is not in your design scheme, try to use the lightest color you are utilizing for your text. This is a novice-level design rule, however, I still see this faux pa committed very frequently. This is important because it helps to make the website cleaner and easier to read. If however, it is impossible to use a light background with your color scheme, use contrasting colors between the background and the text; preferably still using white, black, or gray for content. For example, use a dark blue background with white text. However, never, and I repeat NEVER, use a black background with blue or red text, or red background with yellow or green text. Those combinations are just design nightmares and they scream novice! Keep the background and text simple and your site design will improve because of it. In my selected sites, you can notice how they apply this simple rule to help to make the text clearer and easier to read. Newsberry and Cork’d each make use of their lightest background when content is concerned. When one of the sites does stray away from the light background to create a different feel, they each still apply this tip accurately because when using a darker background, they each use a contrasting color when using content. However, at times, Newsberry and Cork’d use light color text, which does make it difficult to read. In my opinion, the Versions site is the most successful in using colors correctly with its content.
Use Contrasting Colors to Attract Attention
This rule goes along with my last post, and it is a great rule to implement when you want the personality of your site to scream. However, as I mentioned in Tip #2 of this post, do not overdo it with the amount of color. If you are going to use contrasting colors to attract attention, it does not mean using so many colors that you create a tie-dyed website. Rather pick your contrasting colors, and be consistent throughout the site. The two websites that implement contrasting colors the most successfully are the Versions site and the Cork’d site. I absolutely love the use of yellow and green in the lotus flower and the grass in the center of the Versions site, as contrasted with the dark black background. These contrasting colors draw the eye directly to the flower, and they are very successful at attracting attention. Moreover, the Cork’d site uses the contrasting warm and cool colors of red and blue to create a visually interesting site and to create more focus on the wine. Finally, even the Newsberry site uses divergent colors to draw attention, because the entire site uses a calming color scheme with the repeated use of blue, but the designer shakes up the scheme with the use of bright red for the “log in” button to draw attention and focus.
Try to be Original but be Consistent
Originality is one of the main goals for web designers these days because your website is essentially competing against millions of other websites on the World Wide Web, so I suggest trying to be as original as possible when it comes to colors. In addition, however, try to be consistent with your color throughout your site. One way to be more original is to play with different shades and hues of each color you implement. For example, I love the color green, but I know that green can be boring and lack originality; therefore, I varied the hue and came up with a unique sage olive green that I used for Admix Web. You can do this same thing when you come up with your colors. Moreover, be consistent in your originality, for example, if you come up with a unique color, use that same hue throughout the site to create a uniform feel. I feel the Cork’d site was exceptional in its originality and consistency in its use of color. I love the unique wine red color they utilize for the site. Also, the other two sites did an excellent job in this area as well.
Use the Right Color to Express your Website’s Personality
This rule goes along with what I wrote in, The Meaning of Colors for Design. You should consider what personality your website is trying to convey, and use the appropriate color to achieve that goal. For example, blue, green, brown, turquoise, and silver are all considered cool colors, which have a calming or reassuring effect when viewed. These colors would be most useful for sites about relaxation, nature, medicine, law, or any other site that is trying to invoke a sense of relaxation and reassurance. Red, pink, yellow, gold, and orange are all warm colors, thus causing excitement for the viewer. These colors would be best suited for fast food sites, sports sites, sites where you want the viewer to purchase items or any other site where you want to stimulate the viewer. In the Newsberrys site, the blue color scheme was correctly applied to create a simple, clean, calm site, which creates a sense of assurance in the reader. Versions is another site that uses the right color for the site’s personality. The black background gives a contemporary sophistication, while the contrasting green gives a feeling of nature and being grounded, which creates an exceptionally visually pleasing site. Finally, Cork’d use the wine red to create a warm sophisticated personality that is fun, young, and trendy.
Remember Web Accessibility when Using Color
Last but not least, remember the issue of web accessibility when you use color in your design. In order to keep web accessibility in your site, try to use colors according to their universal meaning. For a further explanation of this please see Tip #9 of my post, Simple Tips to Improve Web Accessibility.