principle of design2
TRANSCRIPT
-
8/9/2019 Principle of Design2
1/49
Principles of Design
-
8/9/2019 Principle of Design2
2/49
The Elements of design refer to what
are used.
The Principles ofdesign refer to how
they are used.
Principles of Design
-
8/9/2019 Principle of Design2
3/49
Principles of Design
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.
-
8/9/2019 Principle of Design2
4/49
Principles of Design
Principles of design is based upon the
psychological studies on human perception
of visual elements.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
6/49
Gestalt theory of visual perception
-
8/9/2019 Principle of Design2
7/49
Unity or Harmony
Unity expresses the idea that things belongtogether.
-
8/9/2019 Principle of Design2
8/49
-
8/9/2019 Principle of Design2
9/49
Unity & Placement using Line
Leading:Space between each line of type.
-
8/9/2019 Principle of Design2
10/49
Unity & Placement using Line
Flush : Vertically lined up to one side.
Justified:Vertically lined up on both sides.
-
8/9/2019 Principle of Design2
11/49
Unity & Placement using Shape
In visual design, distance is equal to time.
-
8/9/2019 Principle of Design2
12/49
Repetition Using Line
-
8/9/2019 Principle of Design2
13/49
Repetition Using Line
Repeated line width creating unity.
-
8/9/2019 Principle of Design2
14/49
Repetition Using Line
Repeated line direction and unity.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
16/49
Repetition Using Shape
If both types used together one should be allowed to dominate.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
19/49
-
8/9/2019 Principle of Design2
20/49
Rythm
Rhythm examples.
-
8/9/2019 Principle of Design2
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
-
8/9/2019 Principle of Design2
22/49
Unity Using Value
Lighter Values and Darker Values
Similar values creating unity.
-
8/9/2019 Principle of Design2
23/49
Unity and ContinuityContinuity uses the idea that something is carried over or
connected to another element.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
26/49
Variety-(Contrast)
Too much variety causes chaos. Too much unity is boring.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
32/49
FOCAL POINT AND VISUAL HIERARCHY
Contrast is one way to create a focal point by making an elementdifferent from its surroundings.
-
8/9/2019 Principle of Design2
33/49
FOCAL POINT AND VISUAL HIERARCHY
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.
-
8/9/2019 Principle of Design2
34/49
FOCAL POINT AND VISUAL HIERARCHY
Visu
alHierarc
hy:
To organize each area of emphasis so that it does not
conflict or take away attention from another area of
emphasis.
-
8/9/2019 Principle of Design2
35/49
FOCAL POINT AND VISUAL HIERARCHY
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.
-
8/9/2019 Principle of Design2
36/49
Compositions with no specific focal point
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
39/49
Balance
Balanced designs, which use elements that are verydifferent from each other, are referred to as
asymmetrically balanced.
-
8/9/2019 Principle of Design2
40/49
Balance
Both symmetrical and asymmetrical designs use a
fulcrum, or center balancingpoint, to achieve balance.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
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
-
8/9/2019 Principle of Design2
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
-
8/9/2019 Principle of Design2
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
-
8/9/2019 Principle of Design2
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.
-
8/9/2019 Principle of Design2
49/49
Repeat the slide show