This presentation discusses the key principles of design including balance, emphasis, contrast, proximity, rhythm and movement, proportion, harmony, and unity and variety. It provides examples and explanations of each principle using illustrations from various design disciplines like graphic, web, and product design. The presentation concludes with an assignment asking students to create an artwork applying at least 5 of the principles discussed.

1. Design Principles
- Kabir Malkani
* This presentation has been compiled from references available from the Internet. This is meant purely
for educational purposes and the presenter does not claim to hold any ownership whatsoever; of the
content (textual or graphical) included in this presentation. The ownership and copyrights of the following
content belong to the respective brands /agencies / artists showcased in this presentation.

2. Topics Covered
O Through this presentation we will learn about the:
O Elements of Design
O The 8 Principles of Design
O Balance
O Optical Center
O Types of Balance
O Rule of Thirds
O Whitespace
O Emphasis / Dominance
O Contrast
O Proximity
O Rhythm, Repetition & Movement
O Proportion
O Harmony
O Unity & Variety

3. The Elements of Design
Line
Direction
Shape
Size
Color
Value / Tone
Texture
A combination of these elements of Design results in what we call a “Composition” in traditional
art.
For graphic design there are additional elements such as “Type” & “Graphic” which is needed
to create a “Composition” or “Artwork” – whether you are designing for Print, Web or Mobile.

4. The 8 Principles of Design
1. Balance
2. Emphasis / Dominance
3. Contrast
4. Proximity
5. Rhythm, Repetition & Movement
6. Proportion
7. Harmony
8. Unity & Variety

5. #1. Balance: Optical Center
O To understand the concept of Balance we must
understand the term “Optical Center”
Geometrically Centered Optically Centered

6. #1. Balance: Types of Balance
"Balance" can be achieved through either:
O Symmetric balance - Equal weights in all directions
from optical center. It produces a stable, calming
effect
O Asymmetric balance - Heavier elements near the
center are balanced by lighter elements farther away
O Radial Balance - where all elements radiate out from
a center point in a circular fashion. It is very easy to
maintain a focal point in radial balance, since all the
elements lead your eye toward the center.

7. #1. Balance: Symmetry
O Examples of “Symmetrical Balance”:
Web Design
Traditional Art
7

8. #1. Balance: Asymmetry
O Examples of “Asymmetrical Balance”:
Web Design Photography
8

9. #1. Balance: Radial Symmetry
O Examples of “Radial Balance”:
Architecture Photography
9

10. #1. Balance
O Identify the types of “Balance” in the following
designs:

11. #1. Balance
O Identify the types of “Balance” in the following
designs:

12. #1. Balance: Rule of Thirds

13. #1. Balance: Rule of Thirds
Photography

14. #1. Balance: Rule of Thirds
Magazine Cover Design

15. #1. Balance: Whitespace
O “Whitespace” or “Negative Space” is the space between elements
in a composition.
Macro whitespace Micro whitespace

16. #1. Balance: Whitespace
No whitespace
Active Whitespace
Passive Whitespace

17. #1. Balance: Whitespace
O Not all “Whitespace” has to be white
Elegance & Sophistication Not-so-elegant!

18. #1. Balance: Whitespace
Less Whitespace = Cheap More Whitespace = Luxury

19. #1. Balance: Whitespace
O Using “Whitespace” to communicate more… Can you identify what the “Whitespace”
communicates through the following logos?

20. #1. Balance: Whitespace
O Examples of good web design using
“Whitespace”

21. #2. Emphasis / Dominance
O “Emphasis / Dominance” resolves where the eye goes
first when looking at a design.
O There are three stages of “Emphasis / Dominance” within
a composition:
O Dominant: The object given the most visual weight, the
element of primary emphasis that advances to the
foreground in the composition.
O Sub-dominant: The element of secondary emphasis, the elements
in the middle ground of the composition.
O Subordinate: The object given the least visual weight, the element of tertiary
emphasis that recedes to the background of the composition.

22. #2. Emphasis / Dominance
O Examples of “Emphasis” in Advertising

23. #2. Emphasis / Dominance
O Identify the “Dominant”, “Sub-dominant” & “Subordinate”
elements in this Advertisement

24. #3. Contrast
O “Contrast” occurs when two elements in a composition are different.
O “Contrast” is NOT ONLY brought about using a stark difference in Color but
other methods as well…For example:
O it could be different colors between the text and the background color.
O It could be a heading set in a big, bold, grungy font combined with a sans-serif
font for the body text.
O It could be a difference between a large graphic and a small graphic or
O it could be a rough texture combined with a smooth texture.
O Our eyes like contrast.
O The important thing about “Contrast” is that the elements should be
completely different. Not just a little bit different.

25. #3. Contrast
O If used well, Contrast is attractive to the eye. One of the main reasons to use
contrast in your designs, whether for print or web, is to grab attention

26. #3. Contrast
O Contrast aids organization of information

27. #3. Contrast
O Contrast creates a focus

28. #3. Contrast: Using Colors
Light colors appear larger than The same color looks clearer
dark colors on the same against a dark background than it
background. does against a light background.
Any color appears more dynamic
when it is displayed against a
background of gray.
* More details on idiosyncrasies of colors in Color Theory

29. #3. Contrast
O What is trying to be conveyed through the use of “Contrast” in
the following designs?

30. #4. Proximity
O Proximity in design simply means
that objects near each other are
seen as a unit.
Ad for a Sea-food Festival

31. #4. Proximity
O On your web page or your business card, related
information is placed closely together and it forms a
visual unit.

32. #4. Proximity

33. #4. Proximity: Beware of the “Gestalt”
O When human beings look at a painting or a web page or any complex
combination of elements, we see the whole before we see the individual parts
that make up that whole. This idea of seeing the whole before the parts and
even more the whole becoming more than the sum of its parts is Gestalt.

34. #5. Rhythm, Repetition & Movement
O The recurrence of a design element coupled with a certain
order to the repetition provides continuity, flow and can be
used to provide a sense of movement.
Regular Rhythm Flowing Rhythm Progressive Rhythm
occurs when the intervals gives a sense of shows a sequence of
between the elements, movement, and is often forms through a
and often the elements more organic in nature. progression of steps
themselves, are similar in
size or length.

35. #5. Rhythm, Repetition & Movement
O Repetition
The design of these samples is unified because they repeat a branding
element throughout the layout. This not only reinforces the brand, it also
unifies the design layout.
Product Design

36. #5. Rhythm, Repetition & Movement
O Rhythm
helps move the viewer's eye through a layout, directly or subtly. Rhythm is
usually created by repeating an element and possibly changing it slightly.
Rhythm helps deliver the message by controlling the viewer's eye
movement. It can also add "life" and interaction to an otherwise inanimate
page layout.
Print
Advertisement

37. #5. Rhythm, Repetition & Movement
O Movement
is created by using flow and direction. It is used to denote emotions such as
restlessness, anger or happiness. The image below has a strong focus on
dynamics though the use of line and light to bring a free spirited and energetic
feel to the image of a dancer. The dynamics of the illustration makes it very
easy to imagine the dancer springing to life and moving across the page.
Illustration

38. #5. Rhythm, Repetition & Movement
O How would you identify “Rhythm, Repetition & Movement”
in the painting below?
Starry Night by
Vincent Van
Gogh

39. #6. Proportion
O “Proportion” is the relationship of one part to another or to
the whole with respect to size and weight.

40. #6. Proportion
Wine Bottle and
Cheese by John
Zacchea

41. #6. Proportion
Exaggerated Proportions can be
used to convey a message /
sentiment

42. #7. Harmony
O “Harmony” is the visually satisfying effect of combining similar or related elements.
O Adjacent colors
O Similar shapes
O Related textures

43. #7. Harmony
O What are the elements that are giving the following designs
a sense of “Harmony”?

44. #8. Unity & Variety
O “Unity” and “Variety” are complementary concerns.
O “Unity” is the appearance or condition of oneness. In design, unity
describes the feeling that all the elements in a work belong together and
make up a coherent and harmonious whole. When a work of art has unity,
we feel that any change would diminish its quality.
O “Variety”, on the other hand, provides diversity. Variety acts to counter
unity. The sameness of too much unity is boring, and the diversity of
uncontrolled variety is chaotic, but a balance between unity and variety
creates life.

45. #8. Unity & Variety
CSS Stylesheets are a good
example of how the
principle of “Unity & Variety”
dictates Web Design

46. #8. Unity & Variety
O Identify in what way the following Design represents the
principle of “Unity & Variety”?
Book Cover

47. #8. Unity & Variety
O Identify in what way the following Design represents the
principle of “Unity & Variety”?
Package Design: Package Design: Energy
Tea Drink

48. #8. Unity & Variety
Glass Sculpture
Ad Campaign

49. #8. Unity & Variety
O Identify in what way the following Design represents the
principle of “Unity & Variety”?
Budweiser Beer Ad
Campaign

50. Assignment
O Create an artwork which represents at least 5
principles of Design discussed in this
presentation
O Choose from projects listed below:
O Ad campaign (series of 3 or more Print Ads)
O Package Design (at least a series of 3 different
packaging samples)
O Brochure Design (for a luxury or consumer brand)
O Web Design (for a luxury or consumer brand)
* Final Date for submitting this assignment is the 31st of
March 2013