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.
 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
 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.
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
 #1. Balance: Optical Center
O To understand the concept of Balance we must
understand the term Optical Center

Geometrically Centered Optically Centered

#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.
 #1. Balance: Symmetry
O Examples of Symmetrical Balance:

Web Design
Traditional Art
7
 #1. Balance: Asymmetry
O Examples of Asymmetrical Balance:

Web Design Photography

8
 #1. Balance: Radial Symmetry
O Examples of Radial Balance:

Architecture Photography

9
 #1. Balance
O Identify the types of Balance in the following designs:
 #1. Balance
O Identify the types of Balance in the following designs:
#1. Balance: Rule of Thirds
#1. Balance: Rule of Thirds

Photography
#1. Balance: Rule of Thirds

Magazine Cover Design

 #1. Balance: Whitespace
O Whitespace or Negative Space is the space between elements in a
composition.

Macro whitespace Micro whitespace

 #1. Balance: Whitespace

No whitespace

Active Whitespace

Passive Whitespace
 #1. Balance: Whitespace
O Not all Whitespace has to be white

Elegance & Sophistication Not-so-elegant!

#1. Balance: Whitespace

Less Whitespace = Cheap More Whitespace = Luxury

 #1. Balance: Whitespace
O Using Whitespace to communicate more Can you identify what the Whitespace
communicates through the following logos?
 #1. Balance: Whitespace
O Examples of good web design using Whitespace
#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.
 #2. Emphasis / Dominance
O Examples of Emphasis in Advertising
 #2. Emphasis / Dominance
O Identify the Dominant, Sub-dominant & Subordinate elements in
this Advertisement
 #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 wellFor 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.
 #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
 #3. Contrast
O Contrast aids organization of information
 #3. Contrast
O Contrast creates a focus
 #3. Contrast: Using Colors

Light colors appear larger than The same color looks clearer against
dark colors on the same a dark background than it does
background. 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

 #3. Contrast
O What is trying to be conveyed through the use of Contrast in the
following designs?
 #4. Proximity
O Proximity in design simply means
that objects near each other are
seen as a unit.

Ad for a Sea-food Festival

 #4. Proximity
O On your web page or your business card, related
information is placed closely together and it forms a
visual unit.
#4. Proximity
 #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.
 #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.
 #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
 #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
 #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
 #5. Rhythm, Repetition & Movement
O How would you identify Rhythm, Repetition & Movement in
the painting below?

Starry Night by
Vincent Van Gogh
 #6. Proportion
O Proportion is the relationship of one part to another or to the
whole with respect to size and weight.
#6. Proportion
Wine Bottle and Cheese
by John Zacchea
 #6. Proportion

Exaggerated Proportions can be used

to convey a message / sentiment
 #7. Harmony
O Harmony is the visually satisfying effect of combining similar or related elements.

O Adjacent colors

O Similar shapes

O Related textures
 #7. Harmony
O What are the elements that are giving the following designs a
sense of Harmony?
 #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.
#8. Unity & Variety

CSS Stylesheets are a good

example of how the principle
of Unity & Variety dictates
Web Design
 #8. Unity & Variety
O Identify in what way the following Design represents the
principle of Unity & Variety?

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

Package Design: Tea Package Design: Energy Drink

#8. Unity & Variety

Glass Sculpture

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

Budweiser Beer Ad Campaign

 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 31 st of March 2013