5. Principles of Design

Discussion - Week 1 Discussion - Week 2 Assignment - week1 Assignment- week 2

Gestalt theory

Gestalt covers the study of visual communication from the point of view of how the brain makes sense of the visual stimulation that is received. Each species has its own way of seeing. Spiders have eight eyes which are located in two rows. Most spiders have extreme sensitivity to global light, which enables them to hunt at dusk and in the dark. Birds have quite large eyes in proportion to the rest of their face. The extensive input from the eyes is necessary for take off and landing and to provide extremely accurate depth perception in hunting. Butterflies are extremely nearsighted and have monocular vision. They also see a wider range of colors, than we are able to see in the human spectrum.

Likewise our human visual perception has evolved with some unique adaptations. Gestalt is the concept that "the whole is greater than the sum of its parts." Gestalt is a concept from psychology, where theorists note that humans have a propensity to conceptually group things together to make a meaningful whole. Visually, humans have developed coping strategies to make sense of partial or incomplete information. Other coping mechanisms allow us to quickly organize objects into identifiable (and manageable) categories and sub-categories.face - vase

Perhaps the best known example of a gestalt is the vase/face profile (to the left).Depending on hidden messagehow your mind is organizing figure or the ground, you will see either a vase or the heads of two people in profile. Typically, the smaller of the two figures is perceived as figure while the larger is regarded as ground.

Theories of figure/ground formed the basis of the subliminal advertising movement of the 1950s and 60s. It never has been shown that these were actually terribly effective, but some of the ploys that were tried are interesting or amusing. To the right is an example of a book cover illustration. Can you see the hidden message? Solution

Below is a list other visual organization mechanisms identified by the Gestalt psychologists

Elements of Gestalt

Term

Refers to the tendency to...

Figure - Ground to organize a visual image into a foreground figure, and background
Proximity

proximityGroup objects by relative distance or closeness. Viewer tends to group objects that are close together into larger units.

In the image to the right, you can see 48 dots.

But you probably didn't perceive them as 48 dots, but rather as three groups of dots, and each group had a different pattern with in that group. These divisions are created by proximity.

Similarity

similarityGroup objects into categories of like or unlike (based upon size, shape, color, etc). Our brains will tend to relate and group objects of similar shape (or color, size, etc).

To the right is a rectangular figure composed of 42 smaller figures. Because of our tendency to group objects by similar characteristics, you probably will perceive a triangle made of circles in the center of this rectangle

similarity testThe image to the left is from a study involving pre-verbal babies and their ability to sort visual shapes into groups. As scientists try to teach robots to do complex tasks like drive cars, the understanding of vision and perception has become essential knowledge.

Continuance (Alignment)

continuation(of the eye) to continue moving in a direction. At the simplest, continuance is what makes us follow an arrow or a pointing finger or a path leading into the woods. In the illustration to the right, our eye tends to follow the curving path of dots across the page.

Below are a couple more examples of continuation. In the first the I simply moves from the pointer finger at the dot. In the second, what happens to the eye movement when you add a second dot?

continuation continuation

grid layoutAlignment becomes extremely important for us later when we start to look at page layout. The tendency for the eye to move in a straight line or to follow any established direction governs the rules of layout design.

Closure

complete a composition by supplying the missing parts. This can be as simple as completing a lines (to create in the mind an image of a square or a circle) or as complex as seeing the invisible triangle in the picture on the right below.

closureclosure

You can see a good demonstration of closure on this web page. What appears to be a meaningless random pattern, becomes a collection of scattered letters when you move your mouse over the image.

An interesting phenomenon is that in making sense of random shapes and objects, humans tend to find faces in most everything:

face

Color

In any design, color is the most difficult part to get right. Color is very personal and highly cultural. Add to this the tendency to use bright, deep toned colors and there are a thousand possibilities for going wrong with color.

Bruce Fraser's article deals with some of the physiological and cultural aspects of color. Our ability to perceive color is based upon our physical ability to receive and colorblindnessprocess light and color information. If anything is awry, the color perception is incorrect. Wellstyled.com offers a color scheme generator with a feature that will allow you to view your selected scheme as seen by a colorblind individual (image at right).

Language limits our awareness of color. Fraser talks about cultures that don't use the color wheel, but simply describe their world in terms of greeness or brownness. This is backed up by the paper by Kay and Reiger, which asserts that color is perceived by all individuals, but the naming and grouping of colors into like categories varies between cultures (p. 3).

What's a designer to do?

First, as always in design, is to recognize your audience and design with them in mind. Beyond that, Krause offers some solid suggestions for how to use color in a safe manner:

colorwheelSome other ways to experiment with color

If you have not created a color wheel ever, or if you have not created one since elementary school, you need to steal your kids crayons and get to work. Below is a color wheel exercise for you to color. Kuler's color scheme generator allows you to play with digital color schemes (click the Create link.)

Some definitions:

hue

luminance

saturation

IN 1915, Albert H. Munsell developed the Munsell color system, which is based on a grid of hue and tone, which was derived from his color wheel. In the Munsell color wheel, there are five principal hues with five intermediate or secondary hues between:

Munsell color is specified by selecting one of these ten hues and then modifying this by a combination by saturation and luminance. Using this system allowed for a standardization that had never before been available to printers.

Pantone is a later color system that further codified color specification. Pantone Matching System¨(PMS) originally specified colors for printing. Each PMS number corresponds to an exact recipe of RGB (red, green, blue) inks, with additional neon and metallic colors. Pantone has become the standard for specifying brand colors. For example, UNC stylesheet specifies:

In recent years, pantone has been used for specifying color in fashion and home furnishings as well as some unexpected uses such as, "The U.S. Government Printing Office specifies Pantone 186 and 288 for the red and blue colors of the United States flag" (US embassy Stockholm). A bi-yearly report recommends colors for the upcoming season.

color wordsThere are groups, such as the Color Marketing Group (CMG), who forecast color trends. Have you ever wondered why all the clothes from one store in the mall to another coordinate each season? It's advance planning. Car colors, wall paint colors, carpets - it's all forecast! CMG explains itself: " CMG's major focus is to identify the direction of color trends, and then CMG members "translate" that information into salable colors for manufactured products in all industries. The Association's semi-annual International Conferences provide a forum for the extensive exchange of non-competitive information in all phases of color marketing, including color trends and combinations, design influences, merchandising and sales, education and industry contacts."

To the right, a visual tongue twister: Read the words at right out loud, but instead of reading what each word says, say the name of the color it is written in.

Required Readings

Recommended Readings and Resources

Discussion

Discussion week 1 (Mon Mar 16 - Sun Mar 22) in the forums (not the blog!) <--revised!

In the Blackboard forums class blog, post 2 design images (ads, page layouts, product design), which illustrate the use Gestalt principles. With your image, post the following information:

Please read and comment on the images posted by others. Do you view images the same way? If not, how do you respond to them? Why do you view them differently? Reflect on Bruce Mao's Incomplete Manifesto as you do your work for this unit. Almost every statement is relevant to this exercise.

Below is an example from our book:

trail sign

Discussion: Week 2 (Mon Mar 23 - Sun Mar 29) in the forums (not the blog!) <--revised!

Post 2 design images in the Blackboard discussion forum exploring the proportion and color principles that we are discussing. Snapshots from the world around you are wonderful! With the posting, discuss:

Assignment - Week 1 - Due March 22

Rhythm and Balance Design Problem 1- Symmetry and Asymmetry on Graphics Design - The New Basics.

Post to the blog 4 images, each 640 pixels X 640 pixels (96 dpi). You can create your images in a digital drawing program, such as Photoshop, or you can create your images using real-world materials, such as cut paper and glue. The real-world examples should then be scanned with a final size of 640 pixels X 640 pixels (96 dpi) and uploaded to the class blog.

These 4 images should meet the following criteria:

Assignment - Week 2 - due March 29

Complete the Pattern Design Problem 1 - One Element, Many Patterns on Graphics Design - The New Basics.

Post to the class blog 4 images, each 640 pixels X 640 pixels (96 dpi). You can create your images in a digital drawing program, such as Photoshop, or you can create your images using real-world materials, such as cut paper and glue. (For this exercise, using a digital program and copying and pasting the shape will be MUCH easier.) The real-world examples should then be scanned with a final size of 640 pixels X 640 pixels (96 dpi) and uploaded to the class blog.

These 4 images should meet the following criteria:

  1. This image should contain a single element, such as a dot, diamond, squiggle, or square. Try making your element really large.
  2. This image should contain a simple pattern. Copy and repeat the element in columns or rows to make an overall pattern.
  3. This image should be a variation on image #2. Vary the spacing of the elements in the rows to create variation.
  4. This image should be a variation on image #3. Continue to create new variations by varying the size of the elements, by creating overlapping rows of elements, and changing the color, size, and orientation of elements.