Design PrinciplesDesign Principles

ProximityProximity

““Proximity, or Proximity, or closeness, implies a closeness, implies a

relationship.”relationship.”

ProximityProximity

The Principle of Proximity states:

“Group related items together”

When You Group Items When You Group Items together:together:

The page becomes more organizedThe page becomes more organized You know where to start and where You know where to start and where

to stopto stop White space becomes more White space becomes more

organizedorganized

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

ProximityProximity

Problem:Problem:

Everything is close to Everything is close to everything elseeverything else

ProximityProximity

Solution:Solution: Contents are Contents are

groupedgrouped Contrast is added Contrast is added

with with headlines/rulesheadlines/rules

ProximityProximity

Problem:

Reader’s eye Reader’s eye must bounce all must bounce all around card to around card to obtain informationobtain information

ProximityProximity

Solution:Solution:

Group Group together together related related elementselements

ProximityProximity

Problems:Problems:

The two items in top left are in The two items in top left are in close proximity but not relatedclose proximity but not related

Gaps separate related itemsGaps separate related items

ProximityProximity

SolSolutution:ion:

Regroup informationRegroup information Change to caps/lowercaseChange to caps/lowercase Use squared edgesUse squared edges Let image break out of boxLet image break out of box

AlignmentAlignment

““Nothing should be placed on the Nothing should be placed on the page arbitrarily. Every item should page arbitrarily. Every item should

have a visual connection with have a visual connection with something else on the page.”something else on the page.”

When items are aligned on the page, When items are aligned on the page, it creates a stronger cohesive unit.it creates a stronger cohesive unit.

The Purpose of Alignment is to The Purpose of Alignment is to unify and organize the page.unify and organize the page.

Four types of alignment:Four types of alignment: Left alignmentLeft alignment Right alignmentRight alignment CenteredCentered JustifiedJustified

Avoid using more than one text alignment Avoid using more than one text alignment on a pageon a page

Choosing Page AlignmentChoosing Page Alignment

Center alignment creates a safe, Center alignment creates a safe, comfortable, formal and sedate lookcomfortable, formal and sedate look

Center alignment should be reserved Center alignment should be reserved for the most formal occasions.for the most formal occasions.

Justify means both the left and right Justify means both the left and right sides of the paragraph are even.sides of the paragraph are even.

AlignmentAlignment

No element No element has any has any connection to connection to the others.the others.

Elements aligned

AlignmentAlignment

Trapped Trapped white space white space pushes pushes elements elements apartapart

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

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

AlignmentAlignment ““Find a Find a

strong line strong line and use and use it.” Flush it.” Flush right type right type makes use makes use of image’s of image’s border. 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.

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.

RepetitionRepetition

Repeat some aspect of the Repeat some aspect of the design throughout the entire design throughout the entire

piecepiece.”.”

Elements that can be Elements that can be repeated:repeated:

Fonts (color and or style)Fonts (color and or style) Thick LinesThick Lines Bullet colorBullet color A design element (such as clip art)A design element (such as clip art) A particular formatA particular format Spatial relationshipsSpatial relationships

Repetition:Repetition:

Helps organize the informationHelps organize the information Helps guide the reader through the Helps guide the reader through the

pagespages Helps unify disparate parts of the Helps unify disparate parts of the

designdesign Establishes a sophisticated continuityEstablishes a sophisticated continuityHeadlines and subheads are a good

place to start for creating repetitive elements

RepetitionRepetition

When you get When you get to the end of to the end of the the information, information, does your eye does your eye just wander just wander off the card?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 ...

Here we go with the band again. Not a bad card, right? But note the question here: Now look at the change ...

RepetitionRepetition

Repeated bold Repeated bold type type encourages encourages reader to reader to “bounce” “bounce” between the between the two dominant two dominant typefacestypefaces

Boldfacing that number, so it pairs with the headline, really makes it jump, and it hold your eye on the information.

Boldfacing that number, so it pairs with the headline, really makes it jump, and it hold your eye on the information.

ContrastContrast

ContrastContrast is one of the most is one of the most effective ways to add visual effective ways to add visual

interest to your pageinterest 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 The Purpose of Contrast

To create an interest on the page– if To create an interest on the page– if a page is interesting to look at it is a page is interesting to look at it is more likely to be read.more likely to be read.

To aid in the organization of the To aid in the organization of the information.information.

ContrastContrast“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 “

ContrastContrast Contrast Contrast in art and design occurs in art and design occurs

when two related elements are when two related elements are different. different.

The greater the difference the greater The greater the difference the greater the contrast. Contrast adds variety to the contrast. Contrast adds variety to the total design and creates unity. the total design and creates unity.

It is what draws the viewer's eye It is what draws the viewer's eye into the painting and helps to into the painting and helps to guide the viewer around the art guide the viewer around the art piece. piece.

ContrastContrast Contrast in artContrast in art also adds visual interest. also adds visual interest.

Most designs require a certain amount of Most designs require a certain amount of contrast. Too much similarity of the components contrast. Too much similarity of the components in any design becomes monotonous. in any design becomes monotonous.

In other words the use of too little contrast can In other words the use of too little contrast can cause a design to be bland and uninteresting. cause a design to be bland and uninteresting.

On the other hand too much contract can be On the other hand too much contract can be confusing. Just the right amount of contrast confusing. Just the right amount of contrast engages the viewer's participation in comparing engages the viewer's participation in comparing various components of the work. 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!

ContrastContrast The most common ways of creating The most common ways of creating

contrast are by creating differences in: contrast are by creating differences in: • • sizesize• value• value• color• color• type• type

• texture• texture• • shapeshape

• alignment• alignment• direction• direction

• movement• movement

Example of Nature ContrastExample of Nature Contrast

ContrastContrast

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

ProportionProportion

Proportion describes Proportion describes the size, location or the size, location or amount of one thing amount of one thing

compared to another.compared to another.

ProportionProportion

Proportion in artProportion in art is the comparative is the comparative harmonious relationship between two harmonious relationship between two or more elements in a composition or more elements in a composition with respect to size, color, quantity, with respect to size, color, quantity, degree, setting, etc.; i.e. ratio. degree, setting, etc.; i.e. ratio.

A relationship is created when two or A relationship is created when two or more elements are put together in a more elements are put together in a painting. painting.

ProportionProportion This relationship is said to be This relationship is said to be

harmonious when a correct or harmonious when a correct or desirable relationship exists between desirable relationship exists between the elements. the elements.

This refers to the correct sizing and This refers to the correct sizing and distribution of an element or object distribution of an element or object which creates good proportion. which creates good proportion.

Good proportion adds harmony and Good proportion adds harmony and symmetry or balance among the parts symmetry or balance among the parts of a design as a whole.of a design as a whole.

Good ProportionGood Proportion

There are several ways for achieving There are several ways for achieving good proportiongood proportion::

Place together elements which are similar in Place together elements which are similar in character or have some feature in common.character or have some feature in common.

Create major and minor areas in the design, as equal Create major and minor areas in the design, as equal parts can quickly become monotonous and boring. parts can quickly become monotonous and boring. However, the differences in size must not be so great However, the differences in size must not be so great as to make the parts appear unrelated and therefore, as to make the parts appear unrelated and therefore, out of harmony with each other.out of harmony with each other.

Good ProportionGood Proportion Arrangement of space should be in such a way Arrangement of space should be in such a way

that the eye does not perceive a standard that the eye does not perceive a standard mathematical relationship. Dividing up the mathematical relationship. Dividing up the composition in halves, quarters and thirds should composition in halves, quarters and thirds should be avoided. A subtle relationship creates a more be avoided. A subtle relationship creates a more dynamic design.dynamic design.

Create harmony in the art work. Harmony is an Create harmony in the art work. Harmony is an agreement between the shapes that stresses the agreement between the shapes that stresses the similarities of all parts. In other words, the shape similarities of all parts. In other words, the shape of one part should "fit" the shape of the adjoining of one part should "fit" the shape of the adjoining elements. Shapes should "fit" properly in their elements. Shapes should "fit" properly in their positions and spaces. positions and spaces.