Principle of Design2

8/9/2019 Principle of Design2

1/49

Principles of Design


2/49

The Elements of design refer to what

are used.

The Principles ofdesign refer to how

they are used.



3/49


How you apply those principles determines how effective your

design is in conveying the desired message and how attractive it

appears.

There is seldom only one correct way to apply each principle.

Generally, all the principles of design apply to any piece you may create.


4/49


Principles of design is based upon the

psychological studies on human perception

of visual elements.


5/49

Gestalt theory of visual perception

It states that humans inherently look for order

or a relationship between various elements.

They observe and analyze individual parts of

an image as separate components and havethe tendency to group these parts into a

larger, greater image that may be very

different from the components.


6/49

Gestalt theory of visual perception


7/49

Unity or Harmony

Unity expresses the idea that things belongtogether.


8/49


9/49

Unity & Placement using Line

Leading:Space between each line of type.


10/49

Unity & Placement using Line

Flush : Vertically lined up to one side.

Justified:Vertically lined up on both sides.


11/49

Unity & Placement using Shape

In visual design, distance is equal to time.


12/49

Repetition Using Line


13/49


Repeated line width creating unity.


14/49


Repeated line direction and unity.


15/49

Repetition Using Shape Two different types of shapes: Rectilinear and Curvilinear.

Designs that consist of the same or similar types of shapes areusually harmonious.


16/49

Repetition Using Shape

If both types used together one should be allowed to dominate.


17/49

Rythm

Creates unity by repeating exact or slightly different element in a

predictable manner.

Rhythm uses repetition to produce feelings of predictability and

pacing.


18/49

Rythm

Two types of rhythm: Alternating rhythmandProgressive rhythm.

Alternating rhythm :Two contrasting elements are created. These two

elements are repeated over and over, one right after

the other.

Progressive rhythm : Relies on a progressive change in a series of

elements that are repeated. These elements

change from one element to the next in increasing

or diminishing size or weight.


19/49


20/49

Rythm

Rhythm examples.


21/49

Unity Using Value

Similar values create unity between these shapes in the middle design.With placement and line direction these shapes would have an even

greater sense of harmony


22/49

Unity Using Value

Lighter Values and Darker Values

Similar values creating unity.


23/49

Unity and ContinuityContinuity uses the idea that something is carried over or

connected to another element.


24/49

Unity and Continuity

Continuity can apply to any series of art or design projects. Continuity is created in similar fashions by the theme, style,

color, values, and basic composition.


25/49

Variety-(Contrast)

That's contrast. In design, big and small elements, black and white

text, squares and circles, can all create contrast in design.

On the basketball court, one pro team

looks much like another.

But send a few of those players for a stroll down most any major city

street and something becomes apparent those players are much

taller than your average guy on the street.

Variety introduces interest through Contrast.


26/49

Variety-(Contrast)

Too much variety causes chaos. Too much unity is boring.


27/49

Variety and Line

Contrasting thick and thin lines, as well as different line

directions, creates interest and adds more variety to

overly unified designs.


28/49

Variety and Visual Weight

Visual weight is the feeling that a design element is

heavy orlight, depending on the attention that element

is given.


29/49

Variety and Contrasting Types of Shapes

Contrasting different types of shapes, such as thick and

thin shapes, tall and short shapes, rectilinear and

curvilinear shapes creates variety.


30/49

Variety and Contrasting Types of Shapes

Variety must be used with unity to create a successful design.

There must be similarity, harmony, and variety to add interest.


31/49

FOCAL POINT AND VISUAL HIERARCHY

An element that is given emphasis so it will attract attention.

It is a way to catch the viewers attention and make the

viewer look deeper into a design.


32/49


Contrast is one way to create a focal point by making an elementdifferent from its surroundings.


33/49


Another way of creating a focal point is by thepositioning

of an element.

If a shape, value, or coloris isolated and positioned away

from the majority of the other elements, it will receive more attention and

become a focal point.


34/49


Visu

alHierarc

hy:

To organize each area of emphasis so that it does not

conflict or take away attention from another area of

emphasis.


35/49


Areas of lesser emphasis are called accents.

The careful staging of focal points and areas of emphasis

will lead the viewer from one part of a design to the next.


36/49

Compositions with no specific focal point


37/49

Balance

Visual balance comes from arranging elements on the page so that no

one section is heavier than the other. Or, a designer may intentionallythrow elements out of balance to create tension or a certain mood.

After awhile you'll be wanting to shift your load around, putting a few

marbles in the rock bag to balance your load, make it easier to walk.

This is how balance works in design.

Try walking a long distance with a 2 pound bag of

rocks in one hand and a 10 pound bag of marbles

in the other.

The visual principle that a design is weighted equally is

called balance.


38/49

Balance

When one side of a design is exactly the same as the other

side, it is called symmetrical balance.

Symmetrical designs give the feeling of stability and permanence.


39/49

Balance

Balanced designs, which use elements that are verydifferent from each other, are referred to as

asymmetrically balanced.


40/49

Balance

Both symmetrical and asymmetrical designs use a

fulcrum, or center balancingpoint, to achieve balance.


41/49

Balance

Radialbalance :Balance that radiates out from a central focal point.

It can be either symmetrical or asymmetrical depending on the

location of its focal point.


42/49

White Space

Did you ever participate in that crazy

college past-time ofVW Beetle

stuffing?

Were you ever the guy on the bottom struggling for a breath of fresh air orthe last one in trying to find a place to stick your left elbow so the door will

close? It wasn't comfortable, was it?

Imagine trying to drive the car under those conditions. Designs that try

to cram too much text and graphics onto the page are uncomfortableand may be impossible to read. White space gives your design

breathing room.


43/49

Examples - BalanceYou can create balance with the

three elements (text block, graphic,

vertical text) here but in the firstexample they appear to be just

random elements with no unity or

balance. In the second "Balance"

example the text block and graphic

are resized to bring them closer

together and better balance each

other.

To tie the elements together, move them

closer together (resizing helps accomplish

this). Notice that the graphic (one of the

marbles) slightly overlaps the box enclosing

the vertical text, unifying the two elements.

Reversing the word "balance" out of the bluebox also adds more contrast to the

composition. The increased leading in the

text block redistributes the white space in a

more balanced manner.


44/49

Examples Proximity and Unity

The graphic anchors the bottom of the page, but the four text elements

all float on the page with no apparent connection to each other

(proximity/unity). The change in the headline (font change, reversed out

of blue box) along with the subheading pulled in closer provides balance

with the graphic on the bottom. The spacing between the two paragraphs

of text is reduced slightly as well.


45/49

There is nothing inherently wrong with centered

headlines, text, and graphics. They lend a formal tone

to a layout. But, for this series of layouts something abit more informal is called for.Also, large blocks of

centered text are usually harder to read.

In the second "Alignment" example, text alignment is

left-aligned, ragged right, wrapped around the bottom

graphic which is aligned more to the right, opposite an

added graphic that is aligned to the right to help

balance the overall design.

Examples Alignment


46/49

Within the second "Repetition" example, the headline is repeated three times using

graphics that tie in with the copy in the text blocks. The repetition of the colors in the

shapes and headline text that are in the copy help to reinforce the theme.Overlapping the graphic and text elements unifies the elements of the design.

Examples Repetition and Consistency


47/49

There's isn't enough contrast between the headline and

text due in part to size but also because the two

different serif faces used or too similiar (not obvious

from the small graphic, trust me, they are different

typefaces).

That oversized graphic provides real contrast and reinforces

the copy (tall basketball players). Dropping the text down to the

bottom portion of the page also reinforces the 'towering' aspect

of the graphic. The reversed text in the blue box,the blue

border, and the drop cap carries through the overall unifyingelements found throughout the series. Additionally, the round

shape of the drop cap and its color echo the shape and color

of the basketball in the graphic. The drop cap and the reversed

text on the left side plus the left-aligned text help to balance

the large graphic element.

Examples Contrast


48/49

Examples White Space

White space doesn't have to be white. The large block of black created by the graphic of people

adds a large block of black white space. Multiplying the number of people and reducing the size of

the car in the second "White Space" example provides additional contrast and reinforces thetheme of the copy. Additional leading, larger margins, deeper paragraph indents all add white

space or breathing room to the design.

The oversized drop cap is another element of contrast and also helps to balance the page with the

large, dark elements at the bottom of the page. The drop cap style, reversed title, and blue box

are consistent with the rest of the series.


49/49

Repeat the slide show

Principle of Design2

Documents

Transcript of Principle of Design2