Color basics - Southern Illinois University Edwardsville



Color basics

from James Hackworth

Guest Author: James Hackworth



Color Psychology

The use of color in graphic design is a powerful tool for eliciting an emotional response from the viewer. When used correctly color has the ability to influence how the audience perceives a product, service or company. Careful consideration must be used to determine the correct use of color.

Dark blue is a great color for corporate business; it is no mistake that many corporate logos and business suits are this color. It is symbolic of trust and reliability. Blue is a poor color for the food industry, mainly because it isn't a common food color.

The one exception would be for a food product aimed at young children who are excited by novelty.

Take a look at the major fast food restaurants and you will mainly find warmer colors such as yellow and orange in their logos and interior decorating. These colors have been found to elicit a hunger response and are associated with food, so it makes sense for these companies to use them.

Color Models

In the graphic design profession there are three main color models used for design depending on the application:

1

CMYK

2

RGB

3

Pantone

CMYK

CMYK stands for cyan, magenta, yellow, and black. It is commonly referred to as four-color process and is the model used for printed material. These four colors combined and layered on paper allow the creation in theory of all colors. Any printed item can use all or some of these colors and the price of the printing is greatly influenced by how many colors are used in the creation of the design. A one-color print will be far less expensive than one using all four colors.

RGB

RGB stands for Red, Green, and Blue. This is the color model used for what you see on your computer monitor or television. Since the color used for web design isn't meant to be printed there are no cost limitations on the use of color for the web.

At one time color use was limited to what are called web safe colors for the design of web sites. These colors were used because of the limitations of the then current technology. Today we don't have these limitations and can use the full range of colors available. The rules of color psychology still apply, and good design will use the best colors to elicit the desired response.

Pantone

Pantone colors are used in the printing process when you want an exact color match. Pantone color is used in the design of logos and corporate identity. If you specify pantone color for a print job, the color will be exactly as you want it from one printed piece to the next. So if you are looking for consistency in your color it is best to specify the use of Pantone color.

If you have a brochure printed for your company, you would probably have this done using the CMYK model, but to insure the company logo looks exactly as it should you would have the logo printed using a Pantone color, this is commonly referred to as a spot color. The use of spot colors will increase the cost of printing, but is necessary if you want a consistent look throughout all of your printed material.

If you are using a printing service, and specifying the use of a Pantone color, then the color should be consistent from one print job to the next. If the color isn't consistent then you need to find another printer to do your work for you.

One limitation of Pantone colors or any ink is the type of paper that your design is printed on. A Pantone color on glossy or coated paper will not look the same on an uncoated or plain paper. So your color will be very consistent between print jobs, but is influenced by your paper choices. Your printer should be able to make adjustments to compensate within reason, but don't expect the same quality on newsprint that you get on your business cards. A good printer can make adjustments so that your printed material looks the best, but they are also limited by what you are willing to spend on materials.

The Relationship between Colour & Sales

from Amanda Vlahakis

Colour Psychology

Guest Author: Amanda Vlahakis



Make no mistake that emotions are the driving force behind sales, and customers making buying decisions can be influenced through visual elements towards a particular behaviour or emotion that will encourage more sales.

Not convinced? Have you noticed that a lot of restaurants are decorated in or heavily feature reds and/or oranges? Still not convinced?

• Pizza Hut

• Frankie & Bennys

• Burger King

• Little Chef

• TGI Friday

• Bella Pasta (one of the few to focus on Orange rather than red)

These major players understand the psychology behind colour and its relationship to marketing which dictates that red and orange specifically encourage restaurant patrons to eat faster; thus - yes you guessed it ? increasing sales within the same period of time.

Red is known as an emotionally intense colour, stimulating a faster heartbeat and breathing. Orange is also an emotional stimulant.

It?s entirely possible you are suddenly frantically realising that you haven?t considered this at all when choosing your brand design and associated marketing materials and are now wondering whether you are maximising your sales through the use of colour psychology.

Luckily there?s no need to panic and start planning a complete (and potentially expensive) re-branding exercise.

Even if you didn?t initially consider this, it?s not too late to do something about it. There?s no reason why you can?t work with your existing brand colours and perhaps work new colours into your scheme that will work harder to encourage those sales ? infiltrating the correct colours through your brochures, Web site, stationery and so on.

This way you use colour psychology to strengthen your message, whilst keeping the same brand that customers may have already become accustomed to seeing and have already ?bought into?.

Colour considerations

Now that you are aware that you can do something about your glaring error ? here are some tips:

1

Culture

If you trade globally, remember that colours can have a different interpretation in different cultures ? for example in Chinese culture, white is the colour of death.

2

Shopper Habits

Apparently impulse buyers lean towards red-orange, black and royal blue, and those who plan ahead prefer pink, teal, light blue and navy.

3

Status

Colour preference is influenced by our standard of living; brighter, bolder colours appear to attract those on a lower income, whilst those targeting higher income brackets should use more subtle colours.

4

Geography

The geographical location of your target market should be considered when making colour choices; those in Latin America, for example, will prefer stronger colours, whilst those in colder regions are attracted to neutrals.

Colour marketing potentials

Finally, in many cultures the following colours have the following marketing potential:

•

Red

The colour the eye perceives the quickest (although apparently research has indicated that middle aged and older people can find it hard to see this colour). Red can represent energy, speed, anger, danger (blood), excitement, strength, sex.

•

Blue

A cool colour preferred by most Europeans, especially men, it can hint at trust, and reliability.

•

Yellow

Warm and stimulating like the sun, and encourages feelings of happiness, especially preferred by young people if not used in excess. Can also be associated with betrayal however.

•

Orange

A warm vibrant shade without being reminiscent of danger or aggression as in red, good for encouraging impulse purchases.

•

Green

Fresh and cool; associated with nature, growth, and hope, but also with illness and superstition.

•

Purple

Has links with religion (Cardinals), and can also be seen as a royal colour and therefore is often linked with spirituality and dignity.

•

Pink

Soft, nurturing, and security and is used a symbol of love and sweetness. Too much pink can be seen as childish.

•

White

Purity, cleanliness, and is associated with nature and light. Take care; in Asia this colour is connected with mourning.

•

Black

Can see seen as sophisticated, and elegant, or mysterious but does symbolise death and the occult also, however if used in the right way (as it is often used with prestige/luxury products), such as when combined with gold, it can create a chic exclusive feel.

•

Gold

Prestigious and royal colour; expensive.

•

Silver

Can also be prestigious if used correctly, or to impart a ?scientific? association.

Design Basics

Dateline: 02/10/00

Balance

Balance Definitions

I like this explanation of balance from A Designer's Guide to Web Design :

Once your page is balanced, you will no longer notice the elements as being individual. Your whole page will become one piece and the viewers eyes will flow from one element to the next seamlessly.

Good Page, Bad Page says balance is when:

Everything fits together into a recognizable whole, but at the same time there is enough variety to keep things interesting.

Balance Types

There are several types of balance:

•

Symmetrical

If you draw a line down the center of your design, you'll find the exact same elements on either side of that line. Designs using symmetrical balance tend to have a formal, traditional look to them.

•

Asymmetrical

If you compare two sides of a design, the objects are different on each side.

•

Radial

The objects in your design radiate out from a central point in the design.

Balanced Logos

Let's go back to our Tennis group logo. It can be hard to tell when a graphic is in balance by looking at it; sometimes it helps to think of the design elements as simple shapes: rectangles, squares, circles, and ellipses. Try holding your design at arm's length and squinting at it to see the basic elements.

When we look at the above logo as blocks, it's pretty obvious that it is in balance; symmetrical balance. Kind of boring though. Asymmetrical balance often gives designs a feeling of excitement and movement, like the logo below.

Although our logo is now slightly asymmetrical, it's just a little bit unbalanced. Using a graduated screen in the bar below "Tennis" helps to shift the emphasis from that bar; it also leads the eye from the word "Tennis" straight to the word "group", tying the company name together nicely. It's still a relatively conservative logo, though.

Now our logo is decidedly asymmetrical; just look how much more of the logo lies to the left of the center line. It's also a more exciting logo. Young people belong to this club.

I think it's easy to see why symmetrical balance is also called formal balance in the above logo. The entire logo is balanced; there's the same amount on both sides of the center line. A logo like this would be appropriate for a Tennis club that caters to the older crowd.

Balance Project Ideas

Are you a teacher looking for some ideas for projects? Below are a few ideas, related to balance, to get you started.

1 Download the logo above, or create another company name; set it in black and one font. Ask your students to create a logo using both symmetrical and asymmetrical balance.

2

Give each student text and three photographs. Ask your students to create a balanced flyer using these elements. Have them explain how they balanced the flyer, and why they chose a particular type of balance.

3

Give each student some text. You might try using the "Lorem ipsum" text so that they're not distracted by the words. Ask them to create a balanced design using one of the following design elements: color, size, shape, value. Perhaps assign which element to use to students.

Design Basics

Dateline: 02/24/00

Consistency

If contrast gives your designs visual excitement, consistency makes your viewers feel at home — whether they're viewing a Website, looking at a brochure, or reading an ad.

Once your page is balanced, you will no longer notice the elements as being individual. Your whole page will become one piece and the viewers eyes will flow from one element to the next seamlessly.

Consistency Definitions

According to "Graphic Fundamentals Every Editor Should Know":

While there is value in using some surprise and variation in a newspaper's design, this must be balanced against the need for consistency and a solid corporate visual identity.

Roger C. Parker in "Ten Rules of Good Design, Part II" writes:

Design creates unity by using white space, type and colors in a consistent way throughout every document your firm produces, and within every page of a single document, presentation or web site.

Consistency Tactics

So just how do you create consistency in your designs?

•

Margins and Page Layout

Use the same margins throughout a document, and choose the same underlying grid.

•

Fonts

Face it, if you're a designer, you've probably got a bazillion fonts. That doesn't mean that you have to use every font you own in every design. Two typefaces is enough for many jobs; one typeface can lend beauty to documents, too.

•

Navigation

When (if) you travel in Europe, do you find yourself confused because the language and signs change from country to country? Visitors to your Website might become confused if navigation graphics are on the left on one page, on the right on another, and at the bottom on another.

•

Color

If your logo is two colors, you probably wouldn't dream of switching those colors around. You thought long and hard about the right colors. Your viewers/readers will feel more comfortable with your Websites and printed designs if there's a recognizable color scheme. Even in a process color design, there's no reason to use all sixteen million or so colors available to you. Try to keep your design palette limited to two or three colors, and don't forget to use them consistently!

Consistency in Action

It's time to take a look at how consistency has helped our Tennis Group logo.

Above is what a simple business card for our Tennis Group might look like. I've used only two colors in the card, the same two colors that are used in the logo. The same fonts used in the logo are used in the card, and the rule underneath "Tennis" is repeated at the bottom of the card.

The letterhead uses pretty much the same scheme as the business card. Like the business card, the name is in the upper left corner; the logo is in the upper right corner; and the phone numbers and email are at the bottom, with the same rule from the logo.

Even though the Tennis Group Website has more design elements than either the business card or letterhead, it's easy to tell that we've landed at the same company.

The same colors are used; the same logo; and the familiar rule at the bottom of the page repeats the rule in the logo. Anyone who's familiar with The Tennis Group's stationery should feel right at home in their Website.

Consistency doesn't mean that everything must be an exact clone: you're going to use different elements when designing a brochure than when designing a Website. You can make viewers feel at home by consistent use of fonts, colors, design elements, and layout.

After all, part of most designs is a "branding" element. When someone thinks of tennis lessons, you want them to think of The Tennis Group first. And having a strong, consistent look will make it easier for prospects to remember the company.

Consistency Project Ideas

Are you a teacher looking for some ideas for projects? Below are a few ideas, related to consistency in design, to get you started.

1

Have your students look up the Websites of some of their favorite television shows. Do the Websites use consistency? Do they have the same "feel" as the television show itself? Then have your students design their own Website for the show, and explain how their design is consistent with the show.

2

Make up a mythical company. Have your students design a logo, ad, brochure, and Website for the company. Each student should be responsible for explaining the use of consistency in their designs. Finally, have the entire class critique the designs: what works, what doesn't, and why.

3

Have your students create a series of designs: one set will use consistency, and one will be inconsistent. Bring in a panel of people not in the class to critique the designs.

Design Basics

Dateline: 01/27/00

Contrast

Look through several design or art books, and you'll see that they don't even agree on what the principles of design are. Sure, there's lots of overlap, but everyone seems to pick and choose what they think are the principles of design.

For this series, I've decided to concentrate on the following design basics:

1 Contrast

2 Balance

3 Consistency

4 White Space

Contrast, a Definition

So just what is contrast? According to "The Principles of Design" at the DTP/HTML Tutorials:

Contrast creates interest in the printed product by providing variety in the design

Roger C. Parker explains contrast:

Good design provides visual stimulation which prevents reader boredom.

Essentially, contrast creates visual interest by placing two different objects next to one another.

How can you create contrast? There's lots of ways:

• Size

• Color

• Value

• Fonts

• Emphasis

• Shape

• Texture

I think contrast is one of the easiest design principles to grasp; after all, it's easy to see how two objects are different. Just be careful: you don't want everything in your design to contrast. Viewers won't be able to decide what's important if everything is contrasting.

One Logo, Many Looks

I have created an imaginary business for our discussion of design principles. It's a school that teaches tennis called The Tennis Group. Below is the beginnings of a logo for The Tennis Group, with examples to show how you can build contrast into your designs.

The Tennis Group presented in Helvetica. Pretty boring, huh?

I've introduced contrast via size in the above design. I've made the most important word, Tennis, the largest.

Contrast by typography. Now we've added Calisto MT, a serif font, to the Helvetica, a sans serif font.

Above is an example of contrast by emphasis. Now "the" and "group" are in italics. Contrast can be as simple as having one part of a title in a regular font, and one part in a bold or italics font.

Contrasting colors. Except that these colors don't really differ all that much, do they? Because the words "the" and "group" are small and italic, the black text appears almost gray. Both the blue and the gray are fairly similar in color. You know there's two colors in the logo above, but almost hard to tell that it's blue and black.

Above is an example of contrast by value. All of the words are in the same blue color, but the value of the blue color is lighter in the words "the" and "group" than in the word "tennis". Once again I've made the important word in this logo — "Tennis" — stand out by making it a darker value. You want to emphasize the important points.

There's no doubt that the blue and yellow above contrast. Not only do they contrast in color, they contrast in feeling, too. Blue is a cool color and yellow is a warm color.

I think that there's little doubt that the final logo is more interesting than the original logo, even though it's not really a finished logo. Contrast is what makes it a visually stimulating design.

Hopefully by the time we're done exploring design basics and have applied those to our Tennis Group logo, we'll have a more exciting logo.

Contrast Project Ideas

Here are a few ideas teachers can use:

1

Have your students download the original black, one font logo, or create a similar logo for their use. Ask them to design seven logos based on the original design. Each logo should introduce contrast by one design element: size, color, value, fonts, emphasis, shape, or texture.

2

Have your students create designs using illustration board and contact paper. They may use only basic design shapes: lines, circles, ellipses, squares, and rectangles. Have them create designs that illustrate the concept of contrast using these basic shapes. Then have the entire class discuss and critique the resulting designs.

3

Create seven designs, each one illustrating one type of contrast (size, color, fonts, emphasis, shape, texture). Discuss the examples with your students.

Design Basics

Dateline: 03/09/00

White Space

Imagine that you've just moved into a new house. Remember how excited you felt about all the extra room in your new house? Now imagine your dismay when you look around, and all you see is wall to wall boxes.

You can't stand the clutter, so you go to work unpacking the boxes and putting everything away. Next you throw out the boxes. Suddenly you have a home: there is room to walk around and breath.

White space is the equivalent of uncluttering your home. Just as you don't want wall to wall boxes in your home, you don't want wall to wall text, graphics or boxes in your designs.

What is White Space?

"Page Layout Tips" defines white space:

White space — the space between visual elements — is an integral part of the message. White space tells you where one section ends and another begins.

"Using White Space in Your Designs" says:

Called white space, negative space, or, in letterforms, counterspace, it's the part of the design that "isn't" there. And it's just as important as the elements that are there.

And finally "Taking Control of Space" says:

White space is a design term that describes the unused areas on a book, magazine, or Web page.

White Space Tips

•

Don't Trap White Space

Although you want white space in your designs, you don't want to trap that white space between two design elements. This interrupts the flow of the design. You might increase the size of a font, the size of the graphic, or reposition elements to avoid trapped white space.

•

Keep Text Cells Small

We've all come across Web sites that have text stretching across the entire length of the browser. While that might be readable on a fourteen inch monitor, it's very difficult to read on a larger monitor whose browser window is maximized. In "Page Layout Tips", Michael Sanders recommends keeping text cells to 380 pixels.

•

Avoid Rivers

Rivers may appear if you set your type justified. A river is word spaces that appear near each other on subsequent lines of text. It is better to edit the text than to change the word spacing on a line by line basis to correct rivers. Rivers may also be a symptom that your line length is too long or too short.

White Space Illustrated

Our Tennis Group business card below makes good use of white space.

But we've all had customers who insist that everything they do must be on their business card. What if we changed the layout slightly and added more text?

Not only is the above card too busy, but we have trapped white space between the information on the left and the logo. The customer might have more text on the card, but who's going to read it? Your eye doesn't really know where to look first.

Above is some text set in force justified text. That means that the text will line up on both the right and the left side of the column. Unfortunately, that can also cause rivers — large gaps in the text that are repeated on consecutive lines.

Setting justified text is definitely more difficult than setting text ragged right. It's interesting to note that justified text takes up less room than ragged right text.

Above I have cleaned up most of the rivers. I did this by first adjusting the word spacing. I set the desired word space to 75, and the maximum word space to 90. That had an immediate effect.

I still had to go in and manually edit the text. I did this by putting in soft line breaks on lines that were set tight, and followed by lines that were set loose. Never adjust justified text until the text has been finalized — every time the text changes, the lines will change, too.

White Space Project Ideas

Are you a teacher looking for some ideas for projects? Below are a few ideas, related to white space in design, to get you started.

1

Give your students a document that has "rivers" of white space. Have them correct the rivers, then have each student explain what they did to the document to make the correction.

2

Have your students surf the Web for both good and bad examples of the use of white space. Each student should prepare a presentation on the sites they choose.

3

Prepare an advertisement that has no white space. Instruct your students to redesign the ad with white space. Have a roundtable discussion of the resulting designs where the students explain their designs.

Graphic Design Rules

From Apply Now,

Your Guide to Graphic Design.

FREE Newsletter. Sign Up Now!

Typography

As a designer, it's important to know the rules. That doesn't mean that you can't break the rules, but you gotta know them before you can break them. At the very least, you need to be able to explain to your boss or your customer just whyyou broke the rules. This article will take a look at some of the basic graphic design rules for typography, page layout, Web design and color.

Typography

Do not use every font you own in one document

If you're a designer, it almost goes without saying that you own fonts. Lotsof fonts. Maybe even thousands of fonts.

When you start using many of those fonts in one document, the message gets lost in the jumble of fonts. That doesn't mean that you have to stick to the tried and true two fonts rule (one for headings and one for text), just make sure there's a reason why you're using the fonts you choose.

Serif type is easier to read than sans serif

The theory goes that serif type is easier to read because the serifs draw your eye from character to character. Therefore, sans serif type is best left to headings and short amounts of text.

The truth is that almost any font can be made readable with the correct design. If you choose sans serif for body text, remember that most sans serif types need more leading than serif type. Sans serif can give your documents a very modern look, and is often used as body text in Europe.

Do not put two spaces after a period

In the days of typewriters and monospaced fonts, two spaces after a period were used to indicate the end of a sentence. Today we are blessed with fonts that have characters of different widths, and there is no longer any need to place two spaces after a period.

In fact, I recently read a book whose typesetter did just that ? put two spaces after every period. The problem is the space creates a stop, rather than signifying the end of a sentence. I actually did find this book difficult to read because of this design flaw!

Do not use all capital letters

People read by the shapes of words, not letter by letter. When was the last time you sounded out D-O-G while reading? Ascenders and descenders are what makes it easy to quickly identify the shape of a word.

When you use all capitals, you have no ascenders or descenders. The shape of almost every word becomes a rectangle, and it's harder to read.

That doesn't mean you can't ever use all capitals. Short phrases or headings can work well in all caps. Sans serif tends to work better in all caps than serif type; the serifs can actually detract from the readability of the text when set in all caps.

Do not center large amounts of text

This is probably one of my biggest pet peeves. When you read, you rapidly scan one line, then your eye has to go from the right side of the page back to the left side of the page. When text is centered, it can be harder to find where the text begins again on the left side of the page, and actually all too easy to skip down lines of text.

Just say no to large amounts of centered text, and save it for headings that don't run more than several lines deep.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download