A Guide to Combining Colours & Colour Schemes For Great Web Design

The Importance of Colour Within Your Website's Design

Colour is very important in web design and can be used to add spice to your website, relay the mood of a page, and emphasize sections of a site. If you think about it, as soon as you look at a website, you can normally guess within seconds what that site is all about. Just like we all are quick to judge other people by their appearance and surroundings by how they smell, look, and feel, we also judge a website by its colour scheme and design style. We can usually tell almost immediately whether a website is corporate or personal, whether it is for kids, teens, or just for adults, etc. Most of this information is perceived solely through colour and design elements.

USE YOUR COLOUR INTUITION TO CHOOSE APPROPRIATE COLOURS FOR A WEBSITE’S TOPIC

We use colour intuition every time we design. It is intuitive to know what colours are appropriate for a specific website topic. When you start developing, you probably look at the blank Photoshop screen and know by pure perception which colours are off-limits to that specific design. For example, you wouldn’t use blue, red, yellow, and green on a website design for an insurance company. However, this colour scheme would work fabulously on a preschool website. On the other hand, You wouldn’t use black, grey, and brown on a preschool’s website, but this colour scheme would work wonderfully on an insurance company’s website. I didn’t have to tell you this; with your colour intuition, you knew this without even being told.

USE COLOUR TO EMPHASIZE IMPORTANT SECTIONS OF YOUR WEBSITE

As designers, we use colour and other design elements to draw a visitor’s eye to the most important part of the page. I started my career as a fine artist so that I will spin your site’s page elements differently. Fine artists make compositional choices to guide the viewer’s eye to important components within their work. Web designers are artists, too; a good designer will see his page as a work of art. Try to imagine that your website is an art composition; in other words, you will design your website’s page elements in a fashion that presents a pleasing flow to the user’s eyes. If it were not for search engines finding websites almost completely by text on the page, I would design my entire website completely within Photoshop as gifs, jpegs, and PNG. But since we are all forced to use tables, CSS, and text within our pages, sometimes web design isn’t a simple task and is much tougher than Print Design (although, thank goodness, we don’t have to put up with print bureaus and prepress). We aren’t discussing composition elements today, but I will return to it in a different blog entry. However, I will summarize a few things: on-page elements and how a web surfer scans a website element by element.

WHAT ELEMENTS OF WEBSITE DESIGN WILL CATCH A SITE VISITOR’S EYES? WHAT PATHWAY WILL EYES NATURALLY FIXATE? WHAT DIRECTION WILL THEIR EYES FOLLOW?

1. Eyes naturally being scanning left to right
2. When viewing a website, a visitor’s eyes often fixate first on the upper left portion of the screen. Viewers often fixate on the point briefly before moving their eyes to the right and down the page.
3. Dominant, noticeable headlines tend to draw the visitor’s eyes first upon entering the website (especially when they are in the upper left and most of the time in the upper right).
4. I don’t recommend this one because it is annoying … If you want to force your visitors to read, the smaller type encourages a more focused reading/viewing behaviour. The larger type encourages a light scanning result.
5. Website readers often read blurbs and headlines but tend only to read the first one-third of the blurb. Unfortunately, you only have less than a second to grab the reader’s attention on these headlines.
6. Website visitors often scan the bottom of the page to see if anything catches their eye.
7. Website navigation works best at the top of the page…so try to use navigational features at the top of your page instead of on the side or at the bottom of the page.
8. Images of beautiful, clean faces cause the visitor’s eyes to fixate on this image.
9. Use a short paragraph structure to display articles on your website. Web surfers prefer short paragraphs as opposed to longer ones. And it is no surprise that we all like one-column formats instead of a newspaper format of several columns.
10. Details and depth within design elements are noticed before items lack depth.
11. The bigger a graphic or image, the longer the user will fixate on it.
12. Eyes always lock on the most noticeable aspect of a website, such as the colour within a grey-toned website.
13. Ads tend to do better on the top left portion of the site. This is no surprise, considering that this is the first place people look when opening a webpage.
14. Placing ads next to popular content increases an ad’s success.
15. More prominent banner ads did better than smaller, less noticeable ads.
16. Text ads do better than banner ads because users mistake the text ad for a link to content within your site.

Important Rules For Using Colours Within your Website's Design

One of the best aspects of the internet is the wide array of pleasing designs you are lucky enough to witness. However, there are at least a hundred more badly designed sites for every beautiful site you visit. Everyone has access to a beautiful web-safe colour palette; however, it is amazing how badly some people can implement these tools. This article intends to ensure that we all correctly use this colour palette so I can get to old age with my vision intact.

FOR THE LOVE OF GOD, PLEASE DON’T COMBINE THOSE COLOURS

Have you ever gone to a webpage and almost puked?! You aren’t alone; I’ve been there and done that. We all have the same colours in our arsenal; however, how some people combine them makes me want to start a new law that forces new designers to be issued colour permits. I tease you; however, following some rules can help you determine what combinations look good and what colours should never be combined. Yellow alone is such a beautiful colour, as are green, purple, blue, and red. However, putting them all together on one site might go wrong. Many novice designers don’t realize that more isn’t always better. Colour simplicity is often overlooked as an important aspect of good web design. However, remember the last garishly bad website you witnessed, and you will recall a probable overuse of colours. Some might think ‘hot’, ‘fancy’, or ‘cool’ is just obnoxiously ugly.

HOW DO COLOURS BEHAVE WHEN THEY GET TOGETHER

One thing about colours is that they are rarely seen alone. It would help if you visualized them in the context of being surrounded by the boundaries of other colours. When colours are alongside other colours, they will all change their appearance. It sounds crazy, but it is true. A light block of colour near a dark area will appear lighter than it is, and the dark one will appear darker. Web designers need to consider how colours behave around each other, so please keep this in mind so that you don’t wreak havoc on your visitors’ eyes.

Look at the same orange square and how it looks within the boundaries of other colours within the spectrum. Can you see how the orange square appears darker when surrounded by lighter colours? It should also appear that the orange box appears lighter when surrounded by darker colours. Try it with other colours.

COLOURS USED WITHIN GRAPHICS, BACKGROUNDS, & PAGE ELEMENTS ARE MEANT TO ENHANCE THE LOOK OF THE PAGE, NOT TO TAKE OVER THE PAGE

I hate nothing more about bad website design than overusing colours, graphics, and animations. You all know the type of website, but just in case you have been lucky enough to pass by such websites, here is an example of such a website – http://www.neiu.edu/%7Eflanglab/. If you think this website’s design is amazing and want to find out how you can design this way, please immediately enrol yourself in a design course or find another career other than design. Of course, I wouldn’t say this if I wasn’t 99.9999% sure that everyone who reads this article intuitively will know that this website’s design was lousy. We all know what a beautiful website looks like; it is difficult to get from a blank screen to a well-designed website. Just beware of overusing graphics and images, and you will be taking at least one step towards a well-designed website. One of the problems with using too many graphics is that a high percentage of people will leave your website before even reading the content. You want visitors to leave your website thinking about the great article they read or the wonderful products you sell rather than the user leaving irritated with the look of your site. Nobody wants to stay and linger on a site that is badly designed. Another reason to minimize the number or size of the graphics on your site is that the more images you add, the slower your website will be loading. If your webpage doesn’t load within a few seconds, you can say ‘goodbye’ to that visitor.

MAKE SURE THAT THE TEXT COLOUR ON YOUR WEBSITE CONTRASTS ENOUGH WITH THE BACKGROUND COLOUR

I hate when I have to squint to read text. I have bad eyes, and trying to read yellow text on a purple background is like taking a hammer and slamming it over my head. Knowing how to pick contrasting backgrounds & text colours is essential in website design. Otherwise, your website visitors will exit your page without a proper visit. How rude.  Consider using black and white or colours at the opposite ends of the colour saturation pole. A white background with black text is the best format for the website and printed copy. Maybe I’m getting old, but I am sure we have all read an article online and landed a huge migraine headache because the yellow text on a blue background was too much for our eyes to take. If you don’t want to use black and white for text, after laying out the page, ask yourself, “Does this text Contrast Well With the Background?!” Use as much colour as you want in the surrounding parts of the page, as long as it doesn’t take away from the contrast of the text. This doesn’t mean that you have to take up the entire page with these colours, you can instead use a table’s background colour as white (or another colour) and leave the rest of the page the colours that you had intended.

STAY CONSISTENT IN YOUR COLOUR SCHEME THROUGHOUT THE SITE

The use of colours within your website should stay consistent. Otherwise, if you use completely different colours on every page, how will your visitors know they are still on your website? Also, if you want your visitors to recognize your website, having a consistent look and feel is important. Reinforcing brand recognition and earning familiarity amongst web surfers is tough, so don’t make it any tougher on yourself. A consistent and steady usage of colours will allow web surfers to feel more at ease and control of their navigation. This colour standardization will keep your users from feeling panicked with every click.

An example of our Colour Theory put into use:

You might feel you have all this newly learned colour knowledge but nothing to do with it. Let’s look at an example that you might find helpful within your everyday design projects. Look below at the corporate Sony logo.

I am sure you are all familiar with this corporate identity and that you all own something with this very logo. Let’s pretend that Sony hired you to design their website and that your first assignment is to develop a usable colour scheme. Let’s use some of the colour theory principles we learned in this article. Without looking at my example below, why don’t you try coming up with a colour scheme for the Sony corporate website in the following formats:

• Monochromatic Colour Scheme
• Analogous Colour Scheme
• Complementary Colour Scheme
• Triadic Colour Scheme for the Sony Logo.

If you don’t remember what those terms mean, look at the definitions and visual examples I provided for each term. This should guide you in the right direction. Don’t forget to use tints and shades as well.

Now, this process doesn’t have to focus on the logo. You can instead focus on a photograph, graphic, or a critical ad. Just remember your website’s composition and draw your visitor’s eyes to the most important sections of the page. Take a look at this website. The first thing that pops up on the screen is the red and white logo on the grey background. This example is very obvious, but it looks really good. Then the backdrop comes up, and your eye scans down to the motorcycle. Wow! I’m not too fond of motorcycles, but I love this page.

Corporate Colour Schemes and Designing for Big Companies

Most websites are for small companies, hobbyists, and individuals. You should feel lucky that this is the case, considering that most of these websites don’t have any recognizable brands yet. Designing for a large, established company or corporation can be difficult. When designing a website for a corporation, large company, or similar establishment, you must handle working with branded images and colours. Sometimes it is hard to be as creative as you would like in cases like this because there are too many rules and regulations to follow. Most large companies and corporations have a recognizable brand that must be adhered to and few strays from their ‘locked in’ colours. Although keeping to a specific corporate identity and colour scheme is a great idea, some large establishments go overboard and don’t allow for any variations on their colour set. Every large company should have many variations of their logo and colour schemes, but if they don’t, you will have to follow their rules and be as creative as they allow you to be. With pages and pages of regulations, do’s and don’ts, it is enough to cause your head to spin. If you aren’t allowed to stray from specific colours, you might be allowed to use tints, hues, and monochromatic or analogous colour schemes. Look at how the designer for Coke.com handled their colour restrictions … http://www.coke.com/flashIndex1.html.

Above, you will find examples of corporate colour schemes.
Unlike FedEx Kinkos, most websites use subdued colours like blues, dark reds, greys, and black.
Since FedEx Kinkos is known for printing colourful materials, they can get away with having a colourful, less subdued colour scheme.

It is a Good Idea to keep your Colour Usage Lists in CSS

Keeping a colour-usage reference list on your websites is a good idea, especially if you are designing a website for a client. As the website gets redesigned, sometimes regularly, a colour palette will be needed. Although it is straightforward just to use the Photoshop eyedropper tool to find out what colours were used, it is good etiquette to code it into your CSS, just as you would comment important instructions within your PHP code. Commenting on your colour schemes in your style sheets is an excellent way of maintaining your custom palette. As further production takes place on the website, other team members or new web designers can source colours correctly without making unnecessary mistakes. If you are unsure of how to comment text into your CSS code, place something like the below text into your CSS Stylesheet…you can type whatever you want between the ‘/*’ and the ‘*/’ . These comment tags mean you can type whatever you want, but the browser won’t try to read it. If you wish to comment on other important information in your CSS code, go ahead. Place this within your HTML Head tags:

(1) Use a starting

(2) Add the first part of your CSS comment
/*

(3) Write the colour schemes that you want to comment

(4) Close the CSS comment:
*/

(5) Use a closing

So here is an example of commenting on your colour codes in CSS:

/*
Background Colour is #FD7303
Background Table Colour is #FEC14C
Text Colour is # FC4C04
Table Text Colour is #000000
Edited on Jan 01, 2005 by Madey UpName
*/

Here are a few tips if you are unaware of CSS comment rules. CSS comments can span multiple lines. These comments can also include CSS elements you don’t want to be seen by the web document but want to save for others on your team to see. You might also want to add information such as the date the file was last updated, your name, copyright information, and other vital instructions. All you need is a text editor, Dreamweaver, GoLive, etc.

Save your Colour Palettes in Photoshop

It is also a great time-saver to save your colour palettes within Adobe Photoshop.

To save your custom colour palettes in Photoshop, select Save Swatches from the palette options menu. In the Save dialogue box, browse to where you want to save the swatches, enter a name for them, and then click Save. To load your colour swatches/palette back up, select Load Swatches from the Photoshop options menu. This will allow you to save and load your custom palettes on any computer with Photoshop installed.

We have reached the end of this article. I hope you learned a lot and put what you learned into practice. With your excellent colour intuition and knowledge of colour theory, the sky is the limit.

Have fun and be creative.