Principle of design

1. Compiled by: Dr. Arpita Sharma
Assistant Professor,
Dept. of Agricultural Communication,
College of Agriculture,
GBPUA&T, Pantnagar

2. 1. Balance
2. Contrast
3. Unity
4. Variety
5. Proportion
6. Emphasis

3.  Balance in design is very much like balance in
life.
 An often used example of real life balance is the
see-saw.
 A see-saw is not much fun when only one person
sits on it.
 Balance is achieved when two people of equal
weight sit on each side.
 Balance can also be achieved when one heavier
person sits on one side and two lighter people
site on the other side.
 And balance can be achieved if a heavier person
slides closer to the center of see saw, while a
lighter person sits on the end of the other side.

4.  As humans we’re balanced physically.
 We have an arm and a leg on each side of our
spine and head that balances top center of
that spine.
 We’re able to stand and move despite being
different sizes and weights.
 In design we try to achieve a balance
between elements because it is pleasing on
the eye.
 But balance isn’t always achieved through
symmetry.

6.  Symmetrical balance is mirror image
balance.
 If you draw a line through the centre of the
page, the elements on one side of the line
are mirrored on the other side.
 We can achieve it by placing elements fairly
evenly in the design.

7.  A typical example of this occurs on the web,
where blocks of text mirror each other in
buckets or columns.
 Symmetry can also be achieved using colors
and typography.

8. Mobile Web Book – on this web site, the mobile phone image
divides the page in two, with the blocks of text on either
side balancing each other out.

9.  On the poster for the
movie The Day I
Became A Woman,
the block of large
white text in the top
right corner is
mirrored in the
bottom left corner
both in terms of
colour and shape.

10.  The very colorful
Florida Flourish site
could be almost be
cut in half down the
center.
 It has a very strong
sense of symmetrical
balance.

11.  The Havoc poster
below is balanced left
and right using similar
shapes (and body
parts).
 The red text above and
below the title is
balanced in color and
size above and below
the title.

12.  Asymmetrically balanced layouts have elements
that don’t mirror each other across a centerline.
These layouts can be more difficult to design but
can be appealing to viewers.
 We can create an asymmetrically balanced
layout by placing several small items on one
side, and one large item on the other side.
 If you have one dark item on one side, you may
place several light colored items on the other
side.
 An asymmetrical balanced design can create
tension, drawing the viewer in.

13.  MattWeb has a large
graphic filling the
left side of the
homepage.
 A sense of
asymmetrical
balance is achieved
here using matching
colors and a sans-
serif font which is in
keeping with the
spirals in the
graphic.

14.  Dann Whitaker’s site
has several elements
that don’t reflect
each other
symmetrically, but do
balance each other in
terms of color,
texture and content.

15.  Contrast can be defined as “the difference in
visual properties that makes an object (or
its representation in an image)
distinguishable from other objects and the
background.”
 In plain English that could be described at its
most basic level as “things which look
different from one another.”

16.  Obvious examples of contrast are black and white, big and
small, fast and slow, thick and thin.
 Opposites are the easiest way to grasp what contrast is,
but when applying contrast to design work it’s never quite
as black and white.
 If you were wondering, If you were wondering, that’s
where the saying about a situation being “black and white”
comes from, which also leads to the saying of something
being a “gray area”.

17. The most common
example of all, this is
pretty much where it all
starts.
If two colors are
different to each other
(say, black and white)
they have high contrast,
whereas if they are very
similar (red and orange)
then they have low
contrast.

18.  TekRoc use very
obvious color
contrast here by
overlaying bright
and vibrant image
on top of a very dark
background.
 The bright orange
and blue clearly
stand out and the
eye is immediately
drawn to them
above all other
things on the page.

19.  Unity is the relationship among
the elements of a visual that
helps all the elements function
together.
 Unity gives a sense of oneness to
a visual image.
 In other words, the words and
the images work together to
create meaning.
 Unity helps organize a visual
image, facilitating interpretation
and understanding.

20.  This visual is confusing. It is hard to see the
relationships between the various parts.

21.  With better unity, the visual is now
organized and easier to understand.

22.  Unity can be achieved through the use of
similar shapes.

23.  Unity can be achieved through the use of a
common pattern.

24.  Unity can be achieved through the use of
space.

25.  Unity can be achieved through the use of a
common background.

26.  Variety means "to change the character" of
an element, to make it different.
 Variety is the complement to unity and is
needed to create visual interest.
 Without unity, an image is chaotic and
"unreadable;" without variety it is dull and
uninteresting.
 Good design is achieved through the balance
of unity and variety; the elements need to be
alike enough so we perceive them as
belonging together and different enough to
be interesting.

27.  Varying the elements creates variety.
 Ways to vary elements include: Line - thinness,
thickness, value, color, angle, length
 Shape - size, color, orientation and texture, type
 Color - hue, value, saturation
 Value - darkness, lightness, high-key, low-key,
value contrast
 Texture - rough, smooth
 An effective way to integrate unity and variety is
by creating variations on a theme.
 Just as a composer can repeat and vary a
musical theme throughout a composition, a
designer can repeat and vary an element
throughout a design.

28.  Proportion is a word often used
interchangeably with scale.
 While the word scale implies the comparison
of objects where the actual size of one
object is known, proportion relates to the
general size of two objects without
information regarding their actual sizes (or
scales).

30.  In most cases designers aim to achieve proportion
within the spaces they design; however, there are
times when the design goals call for disproportion.
 One way to create emphasis in a space is to introduce
oversized items in a way that is disproportionate for
the space.
 For instance, large pendant lights over a cash counter
or boardroom table could call attention to that area.
 Design requires an awareness of every element and
principal (check back for future blog posts about the
various principals of design). It must be said that
Interior design is complicated; there are so many
interactions between all the elements of design and
these interactions, as a whole, have an effect on the
feel of a space.

31.  Motion or movement in a visual image occurs
when objects seem to be moving in a visual
image.

32.  Movement in a visual image comes from the
kinds of shapes, forms, lines, and curves that
are used.

33.  Diagonal lines tend to create the illusion of
movement or motion.
 Similar shapes connected with each other or
overlapping each other can imply movement
or restlessness.

34.  Emphasis creates a focal point in a design; it is how we
bring attention to what is most important.
 Emphasis is what catches the eye and makes the viewer
stop and look at the image.
 Without emphasis, without getting the viewer to look at
the image, communication cannot occur.
 Emphasis can be created by contrast.
 An element in contrast with something else is more easily
seen and understood; something different attracts the eye.
 Any of the elements can be contrasted: line (a curve in
the midst of straight lines), shape (a circle in a field of
squares), color (one red dot on a background of grays and
blacks), value (a light or dark area in the middle of its
opposite) and texture (rough vs. smooth).
 Contrast can also be created by contrasting orientation in
space (horizontal, vertical, diagonal), style (a geometric
shape in an otherwise naturalistic image) and size.

35.  An anomaly, or something that departs from the
norm, will also stand out and grab our attention, for
example a person wearing a snowsuit on a tropical
beach.
 Emphasis can also be created by placement.
 Implied lines all directed toward the same place can
create a focal point there.
 Isolating an element from the others by its position
in space will also create emphasis.
 An important thing to remember about emphasis is
that if everything is emphasized (all text is large and
bold, all images are animated or flashing, everything
is in bright colors) then nothing will stand out,
nothing will be emphasized, nothing will grab the
viewer’s attention.

36. Thanks