Thursday, 6 December 2012

Design Meltdown: Study the Colour Usage

  • Black
Black is such a strong color. Its weight is almost as powerful as the color red, but in a different way. It is a strong color without the attention grabbing aspects of red.

One really interesting thing about black is how it makes color pop. Photos really stand out on black, and anything with some color to it can really carry a lot of weight.

Adding color to a mostly black design creates a rich and tasty contrast. One of the most common features of these sites is how saturated the imagery is. When laying in images on top of black these rich colors typically look far better then washed out ones.

Connotations of black : Evil, self-confidence, power, strength, death, sophisticated, designer, formal, conservative, serious, mysterious, sexy, mourning, rebellion, elegant, night, illegal, wicked, intensity, mature, advanced, fashionable, stylish, chic, and trendy.

  • Black and White
McNeil ponders a connection between the simple beauty of the color usage and the appeal of black and white photography. Something about simple b&w photos is so remarkably beautiful and the same seems to apply to some of the websites. 

The black and white combo is one with both classic appeal and modern pop. This color pallet can be made to have very traditional classy aesthetics, or it can easily be combined with sharp saturated colors for a look that is very hip and stylish. The combo is perfect for presenting content that really needs to stand out. By having such a neutral framework, the contents of such a design can be made to come forward in the design giving them the most visual dominance. Ultimately this combo is far more useful then one might expect. It is in no way out dated as its B&W film counterpart.

Nostalgic designs can take on many forms. Sometimes through classic typography. Sometimes through the visual language of an era like retro pop 1950's elements. In this case the color combo forces such an appeal onto the design. Combine this with other classic elements and one has a recipe for success.

  • Blue
The color blue is perhaps one of the safest colors to use for a web site. It can apply to nearly any subject simply because blue is one of the most well liked colors. Blue is calming, safe, and feels very trustworthy; this is perfect for the web, where one never knows who to trust. Good old trusty blue. It is like the opposite of red in so many ways. It is diplomatic, passive, and far from confrontational

It comes as no real surprise that blue continues to be such a popular color. In fact, it would almost be surprising if it weren't. Its ability to apply to most any topic, combined with the mostly universal appeal of the color makes it about as fundamental as white or black.

Connotations: Patriotism, stability, power, trustworthiness, conservative, water, coolness, fun, cold, defeat, trouble, calm, strong, steadfast, light, friendly, confident, safe, corporate, intelligence, unity, sad, depression, old-fashioned, mourning, richness, superiority, truthful, loyal, faithful, noble, scholarly, unexpected, harmony, unity, clean, and technology.

  • Blue and Green
The blue and green combo is one of those trusty old stand buys. A combo that always looks great and almost always comes across as conservative and safe. This is most certainly not to say that it isn't a great choice, or that it can't have an impact on its viewers. Perhaps that is just what is intended. These colors of nature connect with everything that is life giving. Green for plants and growth; blue for air.

Consider some alternatives like green and brown or blue and brown; other combos that allude to nature. These combinations have completely different connotations and certainly give an entirely different meaning to sites using them. It is amazing to see how much a difference color choice can make in how a site feels.

Perhaps this is why the combo is often seen in use on software related sites. Those sites want to draw on the friendly "natural" feel of the colors and convince potential clients that the application is not hard to use. Sure this is a subtle connection, but in design every element matters, and every element adds up to the cumulative effect of the design. Color is a critical choice. Choose wisely!

  • Brown
The color brown can offer a variety of meanings to a design. One of the most obvious is the association to nature. Some sites have subject matter which makes this a logical choice, such as a park, or a wilderness lodge. But some layouts use this color for other reasons, such as Weightshift , who draws on its power to show dependability and honesty, two critical attributes for a designer. Brown certainly creates a warm and inviting atmosphere, as seen in all the samples below.

The color brown falls into one of the lesser used color categories, and yet it can yield some absolutely beautiful results. It can create tasty delicious visuals that pull users in. McNeil loves the natural down to earth feel they create. 

Many sites have pretty straight forward reasons for using the color. Take the Backpackers Bazaar for example. The site is all about activities that take place away from a computer in nature. Thoughts of getting in touch with nature are pretty obvious here. So using brown was a wise choice. It quickly sets a peaceful, nature oriented mood to the site. Connecting with the experience users desire is the key here. The site could have been all shiny and trendy, but what would that be saying? It would just be a random wrapper for the content.

Connotations of brown : Warmth, comfort, steady, conservative, earthy, natural, nature, down-to-earth, wholesomeness, simplicity, friendliness, dependability, health, honesty, old, and aged.

  • Green
The color green primarily symbolizes nature and environment. Green is closely associated with money and the suggestion to "proceed", as suggested by traffic signals. The color can range from Irish, to financial, or even punk. The use of green also creates a soothing and safe feel, and many of the sites are very refreshing. A versatile color for sure. 

Green is one of those colors that somehow manages to offer a wide variety of usage and overall feel. By that I mean that it seems to be a really flexible color. You can get a lime green that really pops, a deep green like a cozy forest, or a grayish green that feels really subdued. It is a fresh and lively color and this perhaps accounts for the main reason it is used so widely. 

Green is one of the more versatile colors available to the web designer. McNeil would argue that blue is the most flexible, and green the second. This explains why the blue and green color combo is such a common choice. Green is simply a pleasant color. It isn't over bearing, instead it is calming, friendly, and connected with nature. These positive connotations make it a safe and effective color to use.

Connotations of green: Nature, environment, money, wealth, family, harmony, health, peace, posterity, soothing, relaxing, springtime, youth, humor, fun, happiness, life, growth, jealousy, envy, novice, restful, calming, balance, stability, summer, organic, recycled, plants, trees, fertility, fresh, good luck, and vigor.

  • Grey
Grey is kind of an odd beast in terms of color since it is more about what it isn't instead of what it is. It isn't bold, powerful or intense, and it is more about the lack of color then having it. 

Grey is commonly associated with technology. There is a strong connection between stark neutral tones and modern design and technology. Perhaps this is a results of modernism's roots. Early modern design included lots of samples of neutral colors. This is probably where this association began and has persisted since.

Quite commonly portfolio sites will make heavy use of a neutral layout. This really makes the samples stand out. This is one of the real strengths of grey, establishing hierarchy in a design. By having most of the layout in grey you reduce those elements importance in the overall design, allowing color elements to really pop

McNeil views grey as the workhorse of colors on the web as it finds its way into nearly every design in one way or another. It works well with any colors, it is subtle and doesn't draw attention, all this makes it great for reducing elements in the hierarchy of importance on a page

Connotations of grey : Stylish, chic, elegant, classy, fresh, innovative, modern, futuristic, technology, spacious, fashionable, soft, airy, high-tech, sleek, neutral, conservative, smart, designer, trendy, light, open, state-of-the-art, impartial, calm, comfortable, peaceful, and relaxed.

  • Muted
The muted color pallet is essentially the polar opposite of the Ultra Pop pallet. Instead of working to make everything bold and in one's face, muted pallets work to be more restrained, and perhaps even sophisticated.

Don't confuse this with designing with gray, there is certainly a difference. Many of these muted designs, if not all of them, use gray. But, one can certainly create wonderful muted designs that don't purely rely on it.

One major bonus of working with such a pallet is that when one really need to make something stand out, one can do so very easily. All one has to do is put in a bit of full color and one can make an element leap out of the page. Certainly too much of this can destroy the atmosphere created by such a color scheme, but it is a real bonus of this style. Actually, this isn't just a bonus, but perhaps the real reason to use this design. It has the ability to let certain content leap out at user.

  • Orange
The color orange is a very flexible color. In some ways it is closely associated with Halloween. Orange carries a lot of power, not quite as bold or harsh as red, yet not as light and soft as yellow. It somehow conveys the sense of a friendly and inviting environment while still maintaining a level of professionalism and seriousness. Orange also seems to be a very hip and youthful color.

Connotations of orange : Fall, Thanksgiving, Halloween, nature, earth, warmth, energy, flamboyant, energetic, sun, stimulating, health, sociable, friendly, citrus, balance, enthusiasm, vibrant, fertility, fire, luxury, heat, and activity.

  • Pink
What's in a color? Everything. The color pink primarily symbolizes love and beauty. Pink tends to be calm and soothing. It can also can be very stylish and is currently a very trendy color.

It doesn't appear to be used primarily to convey the typical connotations of romance and a feminine quality. It seems to be hot right now for conveying a fun relaxed atmosphere, or for showing a creative side. It has a very stylish appeal when mixed with grays. The cool thing about this stylish combo is that it doesn't feel to serious, it retains a relaxed and approachable feel.

The color pink doesn't seem to be going away. Something about it is trendy, stylish and fun. 

So perhaps that is the lesson in pink. A color typically reserved for cute little girls. Combined with the right pallet pink can create a very professional, hip, and enticing design. 

Some colors appeal to certain demographics; some have universal appeal; some are trendy; others are boring; but pink is the one color that when used well just makes things work. Somehow this color can just ooze with style and elevate a site to an aesthetic other wise not possible. McNeil love how this presumably feminine color can cut across the sex barrier and appeal to men and women alike.

The color pink continues to be a popular color in web design, which is of course a bit surprising. This is certainly not the color one might expect to be so widely popular. Interestingly this color is found in many place one might not expect it. Its playful, happy, and hip connotations make it an attractive color to those looking to set a different type of expectations and mood on a site. 

Connotations of pink: Passion, romance, love, innocence, soothing, relaxing, fresh, sensuous, restful, tranquilizing, marriage, healthy, happy, sweet, nice, playful, good health, life, sexuality, purity, gratitude, appreciation, feminine, fun, free.

  • Purple
Certainly the color is seldom used. McNeil believes the key is in that it is perceived as being too feminine. This certainly doesn't have to be the case of course. However, it seems it is a real challenge to turn purple into something stylish. 

And of course, one cannot escape the obvious religious connotations of this color. According to the Easter story in the Bible, one knows that purple robes were placed on Jesus prior to his crucifixion. They were of course mocking him because they had conquered this "king of the Jews." It seems this is the root of purple and Jesus connection. Strangely one seldom find purple used in a church related site. Seems an obvious connection to make, and yet few do. 

Connotations of purple: Royalty, prosperity, wealth, Easter, Jesus, spirituality, wisdom, healing, nobility, romantic, delicate, cheerful, feminine, justice, mystery, mourning, death, humility, and purity.

  • Red
Red is an emotionally charged color. The emotional connotations of red are all about the extremes. From courage and love to danger and hell. Red is known to be a powerful color, some even think red is so tied to victory that simply wearing it can aid in one's success. In a more serious business web site red is bold and powerful , compared to the traditional corporate blue which is conservative and safe. On the opposite end of the spectrum Bad Design Kills uses red to grab attention and issue a warning, a very appropriate usage of the color.

Connotations of red: Patriotism, conservatism, Christmas, stability, power, trustworthy, warmth, fire, fun, blood, success, sacred, hearth, emotion, courage, love, good fortune, heat, hot, evil, hell, anger, stop, respect, vitality, strength, aggression, intense, high energy, danger, communism, passion, and of course Valentines Day.

  • Ultra Pop
McNeil thinks the idea of using these ultra saturated colors embodies what the new internet is all about. They are fresh and fun colors, that evoke friendliness and ease of use. So many new little apps are coming out and many of them are treated with this fresh color style. The web is moving away from things that look like programmers built them and more towards mainstream easy to use well designed applications. The psychology of the colors used couldn't play into this more.

This isn't for everyone and it won't work in all situations, but there are strong connotations and power in the colors one chooses. Choose them wisely.

This pattern of using super saturated colors seems to be here to stay. McNeil particularly loves how it escapes the limits of print and uses colors that would be next to impossible to print making the web a unique medium.

A few connotations of ultra pop : Fun, fresh, new, young, hip, easy, simple, exciting, happy, and cheerful.

  • White
White is such an underrated color. McNeil feels compelled to point out that white does not equal boring.

More often then not the usage of white results from a need for a clean and simple design. These designs often contain quality content that doesn't necessarily need a flashy wrapper. Or, the owners of the site are not as interested in grabbing as much attention as possible with the design, and prefer to rely on quality goods to attract interest.

Connotations of white : Cleanliness, purity, life, stability, trustworthy, peace, happiness, cold, marriage, goodness.

  • Yellow
Yellow is somewhat of a less popular color. It doesn't show up very much in web design, at least not in very prominent ways. 

The no-spec.com is the first to stand out. They clearly use yellow to reinforce the purpose of the site, to warn people about the down side to accepting spec work. The entire site is a great big caution sign, it is only appropriate that they use the color yellow. Caution is one of the most common connotations of the color yellow.

Yellow is not nearly as powerful as red, but at the same time it carries some impact. Perhaps it is the less used nature of the color, or just that it is a bold one.

Connotations of yellow: Nature, earthy, warmth, fun, sun, summer, illumination, inspiration, energy, hazard, warning, emergency, sunshine, happiness, joy, cowardice, deceit, cheerful, excitement, healthy, hope, support, laid back, spring, and relaxed.



No comments:

Post a Comment