TIP OF THE MONTH: Graphic Design 101

January 2009  |  Posted by Carolyn Pikoulas
Since the dawn of civilization, people have communicated through visual imagery. In fact, the first languages were formed through the use of symbols and pictures. Did you know that the letter "A" can be traced back as far as the ancient Phoenicians? They called the letter "alef," the Phoenician word for "ox." Originally it looked more like an upside-down "A" to depict the head of an ox, and it eventually morphed into what we see today. Although in the modern day we have a full alphabet to form words and sentences, visual imagery is still a powerful (if not more powerful) form of communication. And with so much imagery in the world, it's vital to create imagery that is designed in a way that attracts attention.

There are many great designs out there, but few people understand why some are better than others. So what constitutes a good design? From the Chinese tradition of Feng Shui to the era of the ancient Greeks, artists and scientists alike have studied what makes good design and composition. The Greeks followed "the rule of thirds" that is still used by designers today. They insisted that a good composition can be achieved by creating a 9-box grid which cuts an image into thirds, both horizontally and vertically. If the main focal point lands on an intersection, it's an eye-pleasing composition. If it doesn't, it must be cropped. Below is an example:



Even as early as the 1920's, German and Austrian psychologists have pursued the psychological reasons of good design through the theory known as Gestalt, a German word meaning "shape." It was their goal to learn how the mind perceived, processed, and organized visual input. The result was a theory of principles, allegedly free from bias, that artists have been able to use to present visual information -- whether it be a printed page, painting or photograph. Some of the principals of Gestalt include the need for balance. Whether we are aware of it or not, our sense of balance profoundly influences our visual judgments.

Some helpful design tips:

• It is easier for people to read short lines of text, rather than long lines of text (hence thin columns in newspaper articles).
• A composition should not look as though it is divided right in half.
• Shapes or groups of shapes should have a variety of sizes to create dominance. (The largest mass is seen first, then smaller sub-dominant masses are seen second.)
• Negative space is important to preserve order and keep a layout uncluttered.
• A body of text is considered a shape and has its own mass that should also be considered in the design.
• The visual "mass" of a graphical element can be used to decide how large it should be, how much dominance it should have, where it should be placed on the page, and how much contrast it needs.
• Avoid unholy "tangents," which are points or edges of shapes that barely touch each other but do not overlap and fail to create the illusion of depth. Either move them apart or overlap them.

Good design has:

• Contrast: Text must be readable overtop of a background. If the background is dark, foreground elements should be bright and vice versa.
• Consistency: Don't use too many different fonts. Use one main font for headlines and a readable font for smaller copy text.
• Dominance: There must be a main focus for the viewer that catches his eye, whether it's a headline, a photograph or a grouping of graphical elements.
• Flow: After the viewer sees the dominant element, their eye must go where you want them to go. If you want them to see your website next, it must be placed in the right position, be the right size, and have the right amount of contrast.
• Organization: Negative space is a good thing. It helps to eliminate clutter and organize the layout in a way that allows the viewer to discern the most important elements that you want them to remember.
• Color dominance: A rainbow in the sky is pretty because it's subtle. A bright rainbow gradient in the entire background is not. Subtle colors are great to use because you can use bright accent colors to make certain elements pop out.

The truth about color
It can be quite an ordeal choosing the right dominant color for a logo, print ad or website. It's not about choosing your favorite color, but choosing the color that's right for the message. Colors have always been used to evoke emotion. For example, red is intense and can actually stimulate a faster heartbeat (which may be why it is the color of love). Blue is considered to be peaceful, but is also one of the most unappetizing colors. Why? Possibly because blue food is a rare occurrence in nature, so our primal instincts tell us to avoid foods that are blue. Pink, on the other hand, is supposed to be the most appetizing color and is associated with health. Regardless, whatever color is chosen, be consistent with it. Don't just use it in the logo -- use it as an accent color, as the background color of your website, or as the header in a print ad.

Colors and their associations:
Red= passionate, strong, aggressive, confident

Pink= innocent, feminine, healthy, gentle, tranquil (Sports teams have been known to paint the opponent's locker room pink, so that they'll lose more energy.)

Blue= peaceful, cold, depressing, loyal, responsible, trusted (Blue is rather conservative, which makes it a good color for job interviews and very common in corporate marketing.)

Yellow= energetic, happy, motivated, noticeable (Yellow has been known to enhance concentration, hence yellow pencils and legal pads).

Green= natural, calming, refreshing, relaxing, fertile (Hospitals often use light greens in rooms to calm patients.)

Purple= royal, luxurious, spiritual, sophisticated, romantic

Brown= earthy, practical, timeless, solid, masculine, genuine

Black= classic, serious, dramatic, mysterious

White= pure, truthful, contemporary

For ideas on color combinations, check out these cool sites:
http://www.colourlovers.com/palettes/new
http://kuler.adobe.com/#themes/newest?time=30