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.
Perhaps the best known example of a gestalt is the vase/face profile (to the left).Depending on
how 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 |
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 |
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
|
| Continuance (Alignment) |
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?
|
| 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. 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:

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
process 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:
- Start a color palette clippings file
- Become familiar with the color wheel and make deliberate color choices, based on color harmonics
- Include color echo as a part of the design process
Some other ways to experiment with color
- Think of creating your design with no color; experiment with minimal color: try one color, then a duotone color combination
- Think of colors in terms of proportion. Select a base color which will cover a large area,then pick supporting colors.
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 is the color itself—red, green, blue, yellow. When you work in PhotoShop, the color are arranged as if on the color wheel. When you adjust the hue, you are altering the color by pushing the color X degrees around the color wheel

- Lightness or Lumininance refers to the relative brightness or darkness of the same hue, without neutralizing or graying of the color.

- Saturation is the intensity of the color; with no saturation, the color is gray. Experience saturation firsthand as you play with the Flickr color tool: http://www.krazydad.com/colrpickr/ se the slider bar to control. The example below demonstrates saturation from desaturated to super-saturated. As the saturation increases the colors become more vivid until they no longer look real.

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:
red
- yellow-red
- yellow
- green-yellow
- green
- blue-green
- blue
- purple-blue
- purple
- red-purple
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: ![]()
- Tar Heels Deep Blue: Pantone 282
- Tar Heels Silver: Pantone 877
- Tar Heels Metallic Silver: Pantone 429
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.
There 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
- Gestalt principles of form perception by Mads Soegaard
- Universal Principles of Design (textbook):
- Aesthetic - Usability Effect p. 18-19
- Alignment - p. 22-23
- Closure – p. 34-35
- Aesthetic Color - p. 38-39
- Figure – ground – p.40-41 and 80-81
- Entry Point - p 64 -65
- Fibonacci Sequence - p. 78-79
- Golden Section - p.96-97
- Continuation p – 98-99
- Law of Pragnanz - p. 120-121
- Proximity - p 160-161
- Rule of Thirds - p 168-169
- Similarity p. 184 - 185
- Symmetry - p. 190-191
- Repetition (uniform connectedness) – p. 200-201
- Graphic Design - The New Basics
- The Rules of The Gestalt Theory And How To Apply It to Your Graphic Design Layouts by Lois Knight
Recommended Readings and Resources
- Balance (three linked pages - be sure to read all three)
- Symmetry and Asymmetry - excerpts from chapters 2 & 6 of The Elements of Graphic Design by Alex W. White
- From Golden Mean to "Rule of Thirds" Part 1 and Part 2 by Garr Reynolds
- Color in Mind by Bruce Fraser
- Color Marketing Group Predicts Hot Color Trends For 2008
- Writing Lessons: Modern Design Theory by Ellen Lupton
- Wally Wood's 22 Panels That Always Work (an explanation: "Once shrouded in secrecy, Wally Wood would selectively give assistants and those close to him three 8x10 photocopies of comic panels that bore the absolute essence of drawing comic book panels. 22 images in total, they held the secret to a comic book illustrator's success, and those who learned from them benefited from the master's wisdom.") These panels each use several of the design principles!
- Basic Landscape Composition by L Diane Johnson
- Language, thought, and color: Recent developments by Paul Kay and Terry Regier
- How Do We See Red? - NY Times article
- Virtual Colour Museum - an enormous set of resources on the history, theory and use of color
- Color Theory set of tutorial pages from a digital artist
- Color Forecasting: Read how the CMG forecasts the season's colors
- Color in Motion. Interactive Flash movies; a fun look at color and some of our cultural associations
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:
- Which Gestalt principle(s) are illustrated?
- Which readings in our text are illustrated? Most designs will use multiple principles.
- How do your eyes move through the image and/or how does the grouping (or figure ground relationship) affect the image?
- Is the design effective?
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:

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:
- Which design principle(s) are illustrated?
- Which readings in our text are illustrated? Most designs will use multiple principles.
- How is color used?
- Does this use of color seems to follow any trends or cultural expectations?
- Layout is important in web design. This week's readings covers three elements of layout design: rule of thirds, Fibonacci Sequence and Golden Section. How are you seeing those elements applied in your design peeping?
- How do your eyes move through the image and/or how does the grouping (or figure ground relationship) affect the image?
- Is the design effective?
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:
- One design demonstrates understanding of symmetry
- One design demonstrates understanding of asymmetry
- One design demonstrates variations in size/scale
- One design demonstrates variations in color or value.
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:
- This image should contain a single element, such as a dot, diamond, squiggle, or square. Try making your element really large.
- This image should contain a simple pattern. Copy and repeat the element in columns or rows to make an overall pattern.
- This image should be a variation on image #2. Vary the spacing of the elements in the rows to create variation.
- 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.
Group objects by relative distance or closeness. Viewer tends to group objects that are close together into larger units.
Group 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).
The image to the left is from a
(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.



