Design Principles

Proximity “ Proximity, or closeness, implies a relationship.”

Proximity The Principle of Proximity states: “Group related items together”

When You Group Items together: The page becomes more organized The page becomes more organized You know where to start and where to stop You know where to start and where to stop White space becomes more organized White space becomes more organized

Proximity means that elements are intellectually connected; that they have some sort of communication relationship and should also be visually connected Proximity means that elements are intellectually connected; that they have some sort of communication relationship and should also be visually connected

Proximity Problem: Everything is close to everything else Everything is close to everything else

Proximity Solution: Contents are grouped Contents are grouped Contrast is added with headlines/rules Contrast is added with headlines/rules

Proximity Problem: Reader’s eye must bounce all around card to obtain information

Proximity Solution: Solution: Group together related elements Group together related elements

Proximity Problems: The two items in top left are in close proximity but not related The two items in top left are in close proximity but not related Gaps separate related items Gaps separate related items

Proximity Sol ut ion: Regroup information Regroup information Change to caps/lowercase Change to caps/lowercase Use squared edges Use squared edges Let image break out of box Let image break out of box

Alignment “Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” When items are aligned on the page, it creates a stronger cohesive unit.

The Purpose of Alignment is to unify and organize the page. Four types of alignment: Four types of alignment: Left alignment Left alignment Right alignment Right alignment Centered Centered Justified Justified Avoid using more than one text alignment on a page Avoid using more than one text alignment on a page

Choosing Page Alignment Center alignment creates a safe, comfortable, formal and sedate look Center alignment creates a safe, comfortable, formal and sedate look Center alignment should be reserved for the most formal occasions. Center alignment should be reserved for the most formal occasions. Justify means both the left and right sides of the paragraph are even. Justify means both the left and right sides of the paragraph are even.

Alignment No element has any connection to the others. No element has any connection to the others.  Elements aligned

Alignment Trapped white space pushes elements apart Trapped white space pushes elements apart Does the text go with the cartoon, or are they independent chunks of information? The ragged right type seems to separate the elements.

Alignment “Find a strong line and use it.” Flush right type makes use of image’s border. “Find a strong line and use it.” Flush right type makes use of image’s border. Change the alignment, and it becomes obvious that they go together. Note the strong lines Robin Williams uses in this example to get alignment. Flush right type, strong vertical line on the cartoon.

Repetition Repeat some aspect of the design throughout the entire piece.”

Elements that can be repeated: Fonts (color and or style) Fonts (color and or style) Thick Lines Thick Lines Bullet color Bullet color A design element (such as clip art) A design element (such as clip art) A particular format A particular format Spatial relationships Spatial relationships

Repetition: Helps organize the information Helps organize the information Helps guide the reader through the pages Helps guide the reader through the pages Helps unify disparate parts of the design Helps unify disparate parts of the design Establishes a sophisticated continuity Establishes a sophisticated continuity Headlines and subheads are a good place to start for creating repetitive elements

Repetition When you get to the end of the information, does your eye just wander off the card? When you get to the end of the information, does your eye just wander off the card? Here we go with the band again. Not a bad card, right? But note the question here: Now look at the change...

Repetition Repeated bold type encourages reader to “bounce” between the two dominant typefaces Repeated bold type encourages reader to “bounce” between the two dominant typefaces Boldfacing that number, so it pairs with the headline, really makes it jump, and it hold your eye on the information.

Contrast Contrast is one of the most effective ways to add visual interest to your page Contrast is created when two elements are different. For contrast to be effective, the elements must be very different.

The Purpose of Contrast To create an interest on the page– if a page is interesting to look at it is more likely to be read. To create an interest on the page– if a page is interesting to look at it is more likely to be read. To aid in the organization of the information. To aid in the organization of the information.

Contrast “ The difference in brightness between the light and dark areas of a picture, such as a photograph or video image ” “ The use of opposing elements, such as colors, forms, or lines, in proximity to produce an intensified effect in a work of art “

Contrast Contrast in art and design occurs when two related elements are different. Contrast in art and design occurs when two related elements are different. The greater the difference the greater the contrast. Contrast adds variety to the total design and creates unity. The greater the difference the greater the contrast. Contrast adds variety to the total design and creates unity. It is what draws the viewer's eye into the painting and helps to guide the viewer around the art piece. It is what draws the viewer's eye into the painting and helps to guide the viewer around the art piece.

Contrast Contrast in art also adds visual interest. Most designs require a certain amount of contrast. Too much similarity of the components in any design becomes monotonous. Contrast in art also adds visual interest. Most designs require a certain amount of contrast. Too much similarity of the components in any design becomes monotonous. In other words the use of too little contrast can cause a design to be bland and uninteresting. In other words the use of too little contrast can cause a design to be bland and uninteresting. On the other hand too much contract can be confusing. Just the right amount of contrast engages the viewer's participation in comparing various components of the work. On the other hand too much contract can be confusing. Just the right amount of contrast engages the viewer's participation in comparing various components of the work.

Contrast is created when two elements are different. For contrast to be effective, the elements must be very different. If two items are not the same, they cannot be similar!! Make differences obvious!

Contrast The most common ways of creating contrast are by creating differences in: The most common ways of creating contrast are by creating differences in: size value color type texture size value color type texture shape alignment direction movement shape alignment direction movement

Example of Nature Contrast

Contrast Above a contrast exists between the lights and darks. Also notice the contrast of the roundness of the objects in the foreground against the flatness of the background. The contrast in the illustration below is quite obvious. Notice the contrast of the light background (wall) with dark foreground (table cloth) and the contrast of the dark shadows on the tea pot and cup against the wall and with the lights of the same objects against a dark window. There is also a contrast of thin and thick lines in the napkin, straight and curved lines, and don't miss the dark steam as contrasted with the light clouds off in the distance

Proportion Proportion describes the size, location or amount of one thing compared to another.

Proportion Proportion in art is the comparative harmonious relationship between two or more elements in a composition with respect to size, color, quantity, degree, setting, etc.; i.e. ratio. Proportion in art is the comparative harmonious relationship between two or more elements in a composition with respect to size, color, quantity, degree, setting, etc.; i.e. ratio. A relationship is created when two or more elements are put together in a painting. A relationship is created when two or more elements are put together in a painting.

Proportion This relationship is said to be harmonious when a correct or desirable relationship exists between the elements. This relationship is said to be harmonious when a correct or desirable relationship exists between the elements. This refers to the correct sizing and distribution of an element or object which creates good proportion. This refers to the correct sizing and distribution of an element or object which creates good proportion. Good proportion adds harmony and symmetry or balance among the parts of a design as a whole. Good proportion adds harmony and symmetry or balance among the parts of a design as a whole.

Good Proportion There are several ways for achieving good proportion: There are several ways for achieving good proportion: Place together elements which are similar in character or have some feature in common. Place together elements which are similar in character or have some feature in common. Create major and minor areas in the design, as equal parts can quickly become monotonous and boring. However, the differences in size must not be so great as to make the parts appear unrelated and therefore, out of harmony with each other. Create major and minor areas in the design, as equal parts can quickly become monotonous and boring. However, the differences in size must not be so great as to make the parts appear unrelated and therefore, out of harmony with each other.

Good Proportion Arrangement of space should be in such a way that the eye does not perceive a standard mathematical relationship. Dividing up the composition in halves, quarters and thirds should be avoided. A subtle relationship creates a more dynamic design. Arrangement of space should be in such a way that the eye does not perceive a standard mathematical relationship. Dividing up the composition in halves, quarters and thirds should be avoided. A subtle relationship creates a more dynamic design. Create harmony in the art work. Harmony is an agreement between the shapes that stresses the similarities of all parts. In other words, the shape of one part should "fit" the shape of the adjoining elements. Shapes should "fit" properly in their positions and spaces. Create harmony in the art work. Harmony is an agreement between the shapes that stresses the similarities of all parts. In other words, the shape of one part should "fit" the shape of the adjoining elements. Shapes should "fit" properly in their positions and spaces.