Examples of Color Schemes and Color Combinations Within Designs

[dreamcon]

Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations for your website? There area many helpful tools and websites out there that list good combination colors but wouldn't you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color combinations, and I will add to this list at regular intervals. So bookmark this page, and come back when you are in the process of designing a website. Designers may send to me hex numbers and I will create thumbnails ( like the ones below) from these color combinations and add these to our list. An added benefit, Everone who adds a good color combination to this list will have there website listed (only if you want to). If you would prefer to send to us your own thumnail or a link to a website, you can do this instead.

On the next page, you will find the designs created with workable color combinations. Each picture includes hex numbers so that you can try them in your designs. Below these color combinations you will find a guide to choosing beautiful color schemes for your website designs. Enjoy and feel free to comment on these designs color combinations.

Everybody lives with colors all around them, and everyone views their surroundings in a different light, as well as in different colors. Both men and women coordinate their clothing together according to colors and patterns, although some people do it MUCH better than others. If you have never seen anyone coordinate their clothes badly, then you are probably the one who chooses bad color schemes for your outfits (sorry). If this is the case, either steer clear of design or use the color combinations used in the color combining list above. Even for those of us who do a great job at combining colors within our designs, we all have those days where our brains just aren't working right. When I am having one of those days, I usually go to CoolHomePages.com or other similar pages and find sites that implement great color schemes. However, for the purposes of this article, I decided to collect these color palettes into one list...as I did above. This might be helpful to you, but if it isn't, below this article you will find a long list of other resources for combining colors. Even if you are a great web designer, every designer should implement color scheming tools and inspiration files to help them on those 'nothing is going right' kind of days.
THE IMPORTANCE OF COLOR WITHIN YOUR WEBSITE'S DESIGN

Color is very important in web design, and can be used to add spice to your website, relay the mood of a page, as well as to 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 the way they smell, look, and feel, we also judge a website by its color scheme and style of design. We can usually tell almost immediately, whether a website is corporate, personal, whether it is for kids, teens, or just for adults, etc. Most of this information is perceived solely by taking in color and design elements.


USE YOUR COLOR INTUITION TO CHOOSE APPROPRIATE COLORS FOR A WEBSITE'S TOPIC

We use color intuition every time we design. It is very intuitive to 'know' what colors are appropriate for a specific website topic. When you sit down to start designing, you probably take a look at the blank Photoshop screen and know by pure perception which colors are off limits to that specific design. For example, you wouldn't use blue, red, yellow, and green for use on a website design for an insurance company. However, this color scheme would work fabulously on a website for a preschool. On the other hand, You wouldn't use black, grey, and brown for use on a preschool's website, but this color scheme would work wonderfully on an insurance company's website. I didn't have to tell you this, with the use of your color intuition, you knew this without even being told.
USE COLOR TO EMPHASIZE IMPORTANT SECTIONS OF YOUR WEBSITE

As designers, it is our role to use color and other design elements to draw a visitor's eye to the most important part of the page. I started out my career as a fine artist, so I am going to put a different spin on your site's page elements. Fine artists make compositional choices in order to guide the viewer's eye to important components within their work. Web designers are artists too, and 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, that you will design your website's page elements in a fashion that presents a pleasing flow to the user's eyes. If it was 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 pngs. 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 going to discuss elements of composition today, but I will come back to it within a different blog entry. However, I will summarize a few things for you on page elements and how a web surfer will scan 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 most often fixate first on the upper left portion of the screen. Viewers often fixate on the point for a few seconds before moving their eyes to the right and then 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 when they are in the upper right.)

(4) I don't recommend this one because it is annoying ... If you want to force your visitors to read, then smaller type encourages a more focused reading / viewing behavior and larger type encourages a light scanning result.

(5) Website readers often read blurbs and headlines, however, they tend to only 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 will scan down to the bottom of the page to see if something catches their eyes.

(7) Website navigation works best on the top of the page...so try to use navigational features on the top of your page instead of on the side or on the bottom of the page.

(8) Images of beautiful, clean faces, causes the visitor's eyes to fixate on this image.

(9) If you display articles on your website, then try to use short paragraph structure. Web surfers prefer short paragraphs opposed to longer ones. And it is no surprise that we all tend to like one column formats opposed to a newspaper format of several columns.

(10) Details and Depth within elements of design are noticed before items lacking 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, for example color 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) Bigger banner ads did better than smaller, less noticeable ads.

(16) Text ads do better than banner ads because users tend to mistake the text ad for a link to content within your site.
IMPORTANT RULES FOR USING COLORS WITHIN YOUR WEBSITE'S DESIGN

One of the best aspects of the internet is the wide array of different pleasing designs that you are lucky enough to witness. However, for every beautiful site that you visit, there are at least a hundred more badly designed sites. Everyone has access to a beautiful web-safe color palette, however, it is amazing at how badly some people can implement these tools. The intention of this article is to make sure that we all use this color palette in the correct way so I can possibly get to old age with my vision still intact.
FOR THE LOVE OF G_D, PLEASE DON'T COMBINE THOSE COLORS TOGETHER

Have you ever gone to a webpage and almost puked?! Well, you aren't alone, I've been there, done that. We all have the same colors in our arsenal, however the way that some people combine them makes me want to start a new law forcing new designers to be issued color permits. I tease you, of course, however following some rules can help you sort out what combinations look good and what colors should never be combined. Yellow alone is such a beautiful color, and so is green purple, blue, and red. However, you put them all together on one site, and something might go wrong. What many novice designers don't realize is that more isn't always better. Color simplicity is very 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 colors. What some might think is 'hot', 'fancy', 'cool', is really just obnoxiously ugly.