http://daphne.palomar.edu/design/gestalt.

html#anchor1130271

GESTALT
Gestalt is a general description for the concepts that make unity and variety possible in design. It is a German word that roughly translates as "whole" or "form." Gestalt theory is involved with visual perception and the psychology of art among other things. It is concerned with the relationship between the parts and the whole of a composition. In this section you will study five gestalt concepts: Closure the mind supplies the missing pieces in a composition

Continuance the eye continues in the direction it is going Similarity Proximity Alignment what an items looks like and how that effects gestalt where items are in relationship to each other and how that effects gestalt lining up objects to organize and form groups

The objective of studying gestalt is to put the designer in control of what the viewers see when they look at a composition. Seeemphasis for more information. Gestalt theory holds that the whole is more than the sum of its parts.

GESTALT The study of gestalt originated in Germany in the 1920s. It is a form of psychology that is interested in higher order cognitive processes relative to behaviorism. The aspects of gestalt theory that interests designers are related to gestalt's investigations of visual perception, principally the relationship between the parts and the whole of visual experience. The visual world is so complex that the mind has developed strategies for coping with the confusion. The mind tries to find the simplest solution to a problem. One of the ways it does this is to form groups of items that have certain characteristics in common. Most of what you will study about gestalt is concerned with how these groups are formed and what effect they have on perception. The stronger the grouping, the stronger the gestalt. It is this grouping that contributes to the unity in a design. Gestalt is one of the most powerful tools available to a designer for creating unity.

The same concepts that form groups can be reversed to ungroup items -- to make them look unique and stand alone. That is the basis for creating variety. Variety is what adds interest to an image. The trick is to strike a balance between unity and variety. Too much unity and the design can look boring and repetitive; too much variety and it can look chaotic and disconnected. Understanding gestalt concepts can help a designer control unity and variety. CLOSURE A complex object is really a group of simple items that the mind puts together as a single entity. A face is a collection of eyes, ears, nose, mouth, etc. You can recognize a familiar face even if part of it hidden (with a hat or sunglasses for instance). Your mind supplies the missing parts if enough of the significant features are visible. A simple example of this can be seen with this series of circles. As more and more of each is removed the circle still remains identifiable until more is missing than is present. This is called closure because the mind "closes" the image by supplying the missing parts.

This works with a simple geometric shape because you need only a few clues to remind you of the shape. More complex objects require more careful consideration as to what can and cannot be removed. Some information is critical and must be included; some information is unessential and can (and perhaps should) be eliminated. Closure is used extensively in art. It is not so much the quantity, but rather the quality of the information that lets you read an image. A clever artist leaves some things for the viewers to supply when they look at an image. It is a little like when the singer at a concert gets the audience to sing along. You feel like part of the show. CONTINUANCE Continuance describes a device for directing the viewer's

attention when looking at a composition. It is based on the idea that once you start looking in a particular direction you will continue looking in that direction until you see something significant. A simple example of this is illustrated. You notice the small circle that the hand points at in preference to the closer, larger circle. In a sense this is a kind of closure -- a grouping of disconnected items by momentum. This feature is built into typography since we are taught to read left to right in our culture. Once you start reading you will continue across a gap to ............the next words. All kinds of pointing devices are used in design. Many of these are more subtle than a pointing hand or arrow: Eye direction: If the subject of a composition is looking in a particular direction, you will look to see what they are looking at. It is an old trick to look up into the sky and see how many other will look with you. Paths: Rivers, roads, railroad tracks and rows of trees or telephone poles are just a few of the devices that artists have used to lead viewers to particular places in their compositions. Perspective: Lines of perspective, like paths, can be used to direct attention to a focal point in a composition. You will study perspective in a few weeks when you study the design element space. Leonardo de Vinci used some of these devices in his mural "The Last Supper." Notice how you look from one apostle to another because of the way they are looking at each other, but finally end up looking at Jesus. The building they are in uses one point linear perspective to also focus you on the central figure of Jesus. Click on the "The Last Supper" thumbnail at the left to go to a larger (184 K), colored image to study. SIMILARITY and PROXIMITY You will study these two concepts together in the next lesson and make a project that uses a variety of type and an image to communicate a simple phrase.

ALIGNMENT A lesson about alignment will follow similarity and proximity. Alignment is a powerful device for creating order. You will use it to make a catalog page of images and words.

SIMILARITY and PROXIMITY

Similarity and proximity are two of the four grouping concepts in classic gestalt theory (the other two are closure and simplicity). Similarity refers to whatitems look like and how that effects grouping. Proximity refers to where items are and how that effects grouping. The objectives of this lesson are to: Understand how similarity works to produce both unity and variety. Understand how proximity works to produce both unity and variety. Learn four proximity types and how to use them. Make an image where similarity is used to promote variety and proximity is used to create a unified composition.
SIMILARITY Subject matter will be eliminated for this discussion because gestalt is based on what items look like not what they are like. There is a limit to the amount of information that the mind can keep track of. When the amount of visual information becomes too great the mind tries to simplify by grouping. Groups are formed in logical ways based what information look like and where the various items are located. Similarity is concerned with what items look like. Similarity is a powerful grouping concept and as such can contribute significantly towards achieving unity. The more alike the items are, the more likely they are to form groups. By the same token, if items are dissimilar, they will resist grouping and tend to show more variety. It is important to understand that all of the gestalt concepts can be used

Similarity is concerned withwhat items look like.

both ways -- to group and to ungroup There are three major similarity types -- ways items can look alike (or look different): Size: Notice in the example on the left that the squares and circles are presented in two different sizes. Do you first notice them grouping because of their shape or their size? The difference between the sizes is probably greater here than the difference in the shapes. Had they been only slightly larger the shape difference might have been noticed first. The potential, however, for size variation is greater than the differences possible in shape so size is usually a more dominant similarity type. Size has the additional advantage of letting items be B I G ! You learned when you study emphasis that bigger is better when it comes to visibility. Value/Color: Another powerful similarity type is value/color. The two are grouped together because value is part of color but can act independently (black and white images). Again notice that the dominant grouping concept is color not shape. Color makes items easy to identify and hence makes a good grouping tool. Value can work as easily as color, and in fact sometimes is a stronger design element. You learned about color and value in the first section of the course. Try to learn all you can about using color in each of your assignments. Try different combinations of things to see what works and what does not work. Shape: Shape, and shape like elements such as direction and texture, can also form groups. When all other things are equal it performs quite well in this function. The squares and circles used here are simple geometric shapes. It is possible to make shapes that are more distinct and therefore more noticeable. Complex shapes may stand out more but there is attractiveness to simpler shapes that makes them more powerful visual elements in most cases. They appeal to our sense of order. A simple example of using shapes to group is the use of italic orbold type to emphasis and separate parts of a sentence. These and other similarity types are used extensively in design to create order and to organize information into specific groups in order to make the material presented more understandable. You will be using magazines for the raw material for this lesson's project. Look at

how they are organized and notice how often the various concepts just mentioned are used to control groups of information. It is important to understand that it is possible, often necessary, to deliberately make items look different in order to make them stand out or to create more variety in a composition. You will use dissimilar looking items in the project for this lesson to better understand how to create and control variety. PROXIMITY Where items are placed in relation to each other is another important gestalt consideration. Proximity relationships will generally dominate over similarity relationships. The strongest control is available when the two are used together. There are four specific types of proximity relationships that will be studied in this lesson: close edge, touch, overlap and combining. Close edge: The general concept for proximity states that the closer items are to one another, the more likely they are to be seen as a group. The amount of space involved is relative. Look at the example to the left and notice that there are fourteen items that form three groups with one orphan at the bottom right that is not quite part of the group above it. Size is another strong grouping option. Shape is a distant third for forming groups. This kind of grouping is used extensively with printed type. The example below forms two words -- close and edge. You know it is two words because of the larger space between them.

Proximity is concerned withwhere items are placed.

Close edge
This sign for a money exchange makes poor uses of close edge proximity. The $ sign is too close to the word exchange. Makes you think twice about using their services.

In the example below the same space that was between words in the example above is used between the letters of close and edge. Notice that they still form two words because of the even larger space between them.

Close.edge
We read words from left to right but also from top to bottom. Close edge relationships can form groups in any direction. What would you order if you saw this sign in a restaurant window?

FREE . . . .WATER

FOOD .. . .. SOLD
In the example below the letters and the colored backgrounds are in a close edge relationship. The white paper shapes the letters were printed on are not a factor against a white background.

Touch: When items get close enough they touch. They still are two different items but they seem to be attached together. This makes for a stronger gestalt than close edge. Notice in the example to the left that the touching groupings are stronger than the close edge groupings. In the example there are no size differences so the shape relationships are more noticeable. In the example below the letters and/or their colored backgrounds touch.

Overlap: The strongest gestalt between two items happens when they overlap. Two colors are used in the example to the left to show the overlaps better. When the two items are the same color they seem to form a new, more complex shape. The new shape seems flat. When the items are different colors the overlap produces the illusion of a shallow space. The overlapped items form a strong group regardless of color. Notice the grouping hierarchy. The overlapped groups are the strongest. The two color groups are a close second to the all black group. Touching is next then close edge. Shape is probably the weakest gestalt in this example.

In the example below the letters and/or their diferent colored backgrounds all overlap.

All of the above examples of proximity relationships have used simple shapes that are grouped because of where they are placed in relationship to each other. No additional elements are used. Combine: It is possible to group various items together by using anexternal element that acts to combine the items regardless of what other gestalt concepts are being used. The underline used in the previous sentence is such a combining device. Notice that it groups the phrase "external element" and sets it off from the rest of the sentence. A significant characteristic of combining is that it both groups the items used and sets them apart from the rest of the information around them. This "highlighting" (another combining device) is perhaps the most significant aspect of this concept. It is used with information that the designer wants to call attention to. The quotation marks and brackets in this paragraph serve the same purpose. There are many ways to combine items. Underlining items, putting boxes around them and putting items against a background (such as a color or a picture) are the most common. In the example to the left all of the proximity and similarity concepts are used. Note how the items combined by the red and black squares are grouped both with each other and with the background squares. Also note that these are the items that stand out the most. In the example below the letters are all combined on the green background.

PROJECT As you look at the examples notice how each of the four proximity types are used, especially combining. Student example #1 Student example #2 Student example #3

SIMILARITY/PROXIMITY COLLAGE Make a collage that consists of a simple phrase of four or more words and a picture that illustrates the phrase. The words will be made using all different sizes, colors and shapes of letters cut from magazines. The letters will be chosen for maximum variety and no duplicate styles are allowed unless there are more than twenty letters in the phrase. There will be at least one word using each of the four proximity techniques to organize all of that word's letters into the word. All of the letters must be easy to see and the phrase must be easy to read. HOW TO START Find a phrase that you are interested in using that can be illustrated with a picture you can find (or make). Use a song title, song lyrics, a bit of a poem, a quotation, a proverb or common phrase that you can relate to. There has to be at least four words with two or more letters. Do not go overboard. This is time consuming and can take up a lot of space. Start collecting letters. Tear whole pages or sections of pages out of magazines that contain large, colorful, interesting letters. After you have a twenty or more groups of letters collected start spelling out your phrase. One technique is to write the phrase out on a large page with lots of space around each letter. Cut or tear out the letters you want to use and put them in piles on the corresponding letters of your phrase. Remember that the color of paper behind the letter will often show so make the shapes around the letters look like what you want to see. As you are looking for letters, look for an illustration to use. Be open minded and flexible. Sometimes a picture will suggest a phrase and you can start with the illustration. Do not trim anything too close until you see where it is going and how it will be effected by the imagery around it. When you have all the parts start laying out the composition. Try lots of different variations until you have what you want. Use combining on the most important part of the phrase. You can combine a single word for emphasis or a part of the phrase to set it off. Make sure you have used all four proximity techniques, each for an entire word. Touch and overlap work best on short words. The colors behind the letters can be the things that touch or overlap.

Make sure it is readable and all of the letters are easy to see.

ADDITIONAL GESTALT OPTIONS The white paper in the Design Book will not act to unify the composition the same way a colored background will. A colored background will act as a combining device for the entire composition - especially important if more than one page is used. A border will do the same thing. Choose a color that will work well with the rest of the image. Combine one or more significant words on top of the illustration. This will set those words off and relate them to the picture. Be careful with the backgrounds of the letters and where they are placed on the picture. The potential for visual confusion is great and extra care must be taken to make the word(s) readable. Similarity can be used to spotlight certain words. Make a word like "fire" all reds for instance. Use different sizes and shapes to control variety. Choose an especially large, visible letter for the first letter in the phrase. This composition is probably going to look very confusing and it is a good idea to help the viewer find a place to start looking. PRESENTATION If the composition will fit on one page make sure there is room for the label. If not, put the label on the facing page. The image can use either a vertical or horizontal format. If more space is needed a fold out is recommended. To do this: Take a page out of the back of the book and trim off the rough edge where the spiral binding went. Carefully fold 1/2 inch along the edge you want to join to the page in your book. Put glue on the folded edge and glue the new page addition onto the page in the book that you are going to mount your project on. The new addition can be trimmed if less than a full page is required. It is possible to make a project that is 2, 3, 4 or more times as large as your design book page. The problems start when you glue the collage onto the new page. Try to avoid putting anything over the crease. The

flexing of the paper will make the glue fail unless you are very careful. Label this project GESTALT. It will be worth 20 points. During the critique for this project you will have to show the class which words in your composition use each of the four required proximity techniques. ALIGNMENT A variation of proximity that is very often used in graphics is alignment. This concept works when visual elements align along edges or vertically through their centers.

MINI LESSON: ALIGNMENT

Alignment is an extension of proximity. It has to do with placing items so that they line up. Alignment is a concept that produces both grouping and organizes information to create order. In this lesson you will: Learn the two basic types of alignment Explore some of the more subtle alignment techniques.
ALIGNMENT Alignment is one of those obvious design concepts that hardly seem worth making a big deal about. It is something you see and use every day. There are, however, many more opportunities to use this system for organizing materials than are obvious without a thorough understanding of the principles involved. Items can line up either along their edges or on their centers. Alignment is used extensively to organize all graphic arts. Almost all text uses alignment to organize lines of type. The letters align along their bases and the lines begin (and/or end) along a line. You probably discovered the importance of this in the last project. Alignment works best with items that have straight edges,

The root word for alignment is "line"- to line up.

Graphic art refers to art that is printed.

especially rectangles. Rectangles are the most economical shapes to trim pictures into so pictures are most often seen in that format. Text is made of letters of varying shapes that form lines and blocks that act as rectangles. Most formats are also rectangles. There are two major types of alignment: edge and center. EDGE ALIGNMENT Any object with flat edge(s) can be used for edge alignment. Rectangles are especially well suited for this since they have four flat edges to align. Their right angels also give a sense of order to a composition using them (similarity). Note in the example below how it is possible to align one or more edges of a rectangle. When more edges are aligned the rectangle seems to be in a stronger gestalt with the surrounding shapes. Also note how the distance between shapes is a factor in how strong the gestalt seems. The repetition of right angles adds a similarity gestalt to the composition, which increases the sense of unity. Place your cursor over the illustration to the right to see the alignment lines.

It is possible to set up other angles of alignment with shapes other than rectangles. The critical factor is that the objects do align along their edge(s) in a way that is clear. Objects that are on opposite sides of a composition may align but it is unlikely that the alignment will be noticed.

Place your cursor over the illustration to the right to see

the alignment lines.

An obvious kind of edge alignment takes place around the outside of a group of shapes when they align to provide a simple overall shape (format) -- especially when that shape is a rectangle.

Place your cursor over the illustration to the right to see the alignment lines.

Can you see where alignments are used in the interior of the example above? CENTER ALIGNMENT Any shaped items can be organized using center alignment. Simple shapes work best because it is easier to judge their centers so the alignment is easier to notice. Center alignment will work to some extent on any axis but it works best with a vertical axis (see the example to the left). This is because the vertical axis relates best to our sense of balance and symmetry (see symmetrical balance).

Centered on a vertical axis

Centered on a horizontal axis

Objects that are not rectangles should be center aligned on a

vertical axis or enclosed in a rectangular background and edge aligned. With diagonals you just take your chances. As you are looking through magazines for materials to use for this project take time to notice that almost every item on every page is organized using either edge or vertical center alignment.

FINE POINTS There are a number of subtle variations on alignment that can add to the effectiveness of this concept. The outside edges of pictures usually show up well and make for obvious alignments. The edges of information within a picture can also align with other edges in a composition. This technique can add subtle touches to a composition.

Notice how the back of the cat aligns with the top of the buildings.

Place information where you think it will look best then look for ways you can achieve alignments with a minimal amount of moving and/or trimming. You need to look carefully for opportunities to use alignment since they will help create order. Centering in a negative space is a kind of alignment. This works best when there is some other alignment to back up the

Gutters are used in

graphic images to separate type and pictures from one another. They also provide a repetitious visual element that can create a rhythm in the composition.

centering. One positive side effect of this technique is that there is a uniform space around the centered item. Narrow strips of background between pictures and text blocks are called gutters. If they are used throughout a composition they look like lines that go around the information in the design and help achieve unity. When a colored background is used the gutters become colored lines.

In the above example the centered items are marked with dashed blue lines. Note the white gutters that run throughout the composition. Inserts are words or images that overlap other images. They can partially overlap or be completely inside. They make a compact package of two or more sets of information and can conserve space or hide unwanted areas in an image. An insert will show up best if there is a contrasting border around the inset. Text can be inserted effectively if it has a background that allows all of the information to be seen.

This partial insert has a white border to The smaller pictures is make the edge of the inserted picture completely inserted. There is easier to see. enough contrast that no border is necessary.

In the examples above there are only subtle alignments for the inserts. In the first example the right side of the background picture aligns with the left edge of the tower in the insert. In the second example the bottom of the boat picture aligns with the line under the clock on Big Ben. See how many other alignments you can find. WISH BOOK Previously an assignment was given to make a catalog with one or more pages that illustrate what you wish for. This project is no longer required.