of

Must to Know for All Designers

www.admecindia.co.in

A Workshop by Ravi Bhadauria at ADMEC Multimedia Institute

 of
A Presentation by: Ravi Bhadauria

ADMEC MULTIMEDIA INSTITUTE

Leader in Animation & Digital Media Education
ISO 9001 : 2015 CERTIFIED
www.admecindia.co.in | www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
Preface & Acknowledgment
Dear Reader,

ADMEC Multimedia Institute is a growing institute which provides industry oriented training to
the world at large. Being a multimedia institute we offer training for designing content for the
advertising and publishing on various medias also.

This presentation is one of the best presentations from our study material for our weekly
workshops which ADMEC conducts every week at the center. We want to share this with the
world so that everyone can take benefits from our efforts.

This presentation contains all the points helpful in my lecture on “Design Principles for All the
Designers” in the classroom whether they are graphic, web, animation, video editor, multimedia
designer or from any other design discipline e.g. fashion, interior, architectural designing.

We express thanks to many books and websites, specially Google for making it one of the best
presentations of all the time.

Thanks
Ravi Bhadauria, Instructor (Web and Visual Designing)
Director ADMEC Multimedia Institute
www.admecindia.co.in
What are you going to learn today?

 Why principles of design are very important?

 Essential design elements
 Common design principles
 Gestalt design principles of visual perception
 Space and the figure-ground relationship
 Use of Contrast and Similarity in designs
 Visual weight and visual direction
 Projects

www.admecindia.co.in
The Design Principles
are proven concepts
useful to arrange the
structural elements of
a design.

www.admecindia.co.in
1. Elements of Design

Design elements are the basic units of a painting, drawing,

design or other visual piece and include:
 Line

 Shape

 Direction

 Size

 Texture

 Value

 Space

 Text

www.admecindia.co.in
Elements of Design
Elements of Design
Elements of Design
2. Principles of Design

The most intrinsic principles are:

 Balance

 Gradation

 Proportion

 Rhythm

 Emphasis

 Unity or Proximity

 Repetition

 Contrast

 Alignment
www.admecindia.co.in
Principles of Design

The descriptive principles of how we

visually perceive objects begins with the
principles of gestalt, because many of the
design principles we follow arise out of
gestalt theory.

www.admecindia.co.in
Principles of Design
Gestalt psychology is a school of thought that believes all
objects and scenes can be observed in their simplest forms.
Sometimes referred to as the 'Law of Simplicity’, the theory
proposes that the whole of an object or scene is more
important than its individual parts.
Gestalt psychology proposes a unique perspective on
human perception.
According to Gestalt psychologists, we don't just see the
world, we actively interpret what we see, depending on what
we are expecting to see.

www.admecindia.co.in
Principles of Design
A famous French author, Anaïs Nin, who was not a
psychologist, framed that idea in an interesting way:
'We do not see the world as it is; we see it as we are.'
Gestalt psychology encourages people to 'think outside of
the box' and ‘look for patterns’.

www.admecindia.co.in
The gestalt principles
are about perception
and what is visually
communicated by
objects.

www.admecindia.co.in
3. Gestalt Theory

The Key Ideas Behind Gestalt Theory

“The whole is other than

the sum of the parts.”
There are several key ideas behind gestalt.
 Emergence (the whole is identified before the parts)
 Reification (our mind fills in the gaps)
 Multi-stability (the mind seeks to avoid uncertainty)
 Invariance (we’re good at recognizing similarities and differences)
Gestalt Theory

Emergence (the whole is

identified before the parts)
Emergence is the process of forming
complex patterns from simple rules.
When designing, keep in mind that
people will identify elements first by
their general form. A simple well
defined object will communicate
more quickly than a detailed object
with a hard to recognize contour.

www.admecindia.co.in
Gestalt Theory

Emergence (the whole is identified before the parts)

www.admecindia.co.in
Gestalt Theory

Reification (our mind fills in the gaps)

Reification is an aspect of perception in which the object as
perceived contains more spatial information than what is
actually present.

www.admecindia.co.in
Gestalt Theory

Multi-stability (the mind seeks to

avoid uncertainty)
Multi-stability is the tendency of
ambiguous perceptual experiences
to move unstably back and forth
between alternative interpretations.

www.admecindia.co.in
Gestalt Theory

Invariance (we’re good at recognizing similarities and differences)

Invariance is a property of perception in which simple objects are recognized
independent of their rotation, translation and scale.

www.admecindia.co.in
Gestalt Theory

Invariance
4. Gestalt Principles

1. Law of Simplicity 8. Continuation

(Law of Prägnanz) 9. Common Fate
2. Closure 10. Parallelism
3. Symmetry and order 11. Similarity
4. Figure/Ground 12. Focal Point
5. Uniform Connectedness 13. Past Experiences
6. Common Regions
7. Proximity
Gestalt Principles

Law of Prägnanz
(Good Figure, Law of Simplicity)

“People will perceive and

interpret ambiguous or
complex images as the
simplest form(s) possible.”
Gestalt Principles

Law of Prägnanz
Gestalt Principles

Law of Prägnanz
Gestalt Principles

Closure
“When seeing a complex arrangement of elements, we tend
to look for a single, recognizable pattern.”
Gestalt Principles

Symmetry and Order

“People tend to perceive objects as symmetrical shapes that
form around their center.”
Gestalt Principles

Figure/ Ground
“Elements are perceived as either figure (the element in
focus) or ground (the background on which the figure rests).”
Gestalt Principles

Uniform Connectedness
“Elements that are visually connected are perceived as more
related than elements with no connection.”
Gestalt Principles

Common Regions
“Elements are perceived as part of a group if they are located
within the same closed region.”
Gestalt Principles

Proximity
“Objects that are closer together are perceived as more
related than objects that are further apart.”
Gestalt Principles

Continuation
“Elements arranged on a line or curve are perceived as more
related than elements not on the line or curve.”
Gestalt Principles

Common Fate (Synchrony)

“Elements that move in the same direction are perceived as
more related than elements that are stationary or that move
in different directions.”
Gestalt Principles

Parallelism
“Elements that are parallel to each other are seen as more
related than elements not parallel to each other.”
Gestalt Principles

Similarity
“Elements that are visually connected are perceived as more
related than elements with no connection.”
Gestalt Principles

Focal Points
“Elements with a point of interest, emphasis or difference will
capture and hold the viewer’s attention.”
Gestalt Principles

Past Experiences
“Elements tend to be perceived according to an observer’s
past experience.”
5. Space and Figure-Ground Relationship

If you see graphic design as a process of arranging shapes on a canvas,

then you’re only seeing half of what you work with. The negative space
of the canvas is just as important as the positive elements that we
place on the canvas.
Design is an arrangement of both shapes and space. To work more
effectively with space, you must first become aware of it and learn to
see it — learn to see the shapes that space forms and how space
communicates.
“White space is to be regarded as an active element, not a passive
background.”
Space and Figure-Ground Relationship
Space and Figure-Ground Relationship

What is the depth?

Space and Figure-Ground Relationship

What is the depth?

Space and Figure-Ground Relationship

There are three types of figure-ground relationships:

 Stable (down left)
 Reversible (down center)
 Ambiguous (down right)
Space and Figure-Ground Relationship

Figure-ground is not the only gestalt principle in which space plays a

prominent role. Two others are these:
 Proximity
 Closure
7. Space As A Design Element

Space can do the following:

 establish contrast, emphasis, and hierarchy;
 generate drama and tension;
 provide visual rest between groups of elements.

One of the more important functions of space is to improve readability

and legibility. Macro-space makes text more inviting. Micro-space
makes it more legible.
 Micro-space
 Macro-space
Space As A Design Element

Space can also convey attributes other than quality, such as:
 sophistication
 simplicity
 luxury
 cleanliness
 solitude
 Openness

Don’t be afraid to use space. View it as an important design element

under your control.
8. Connecting and Separating Elements
Through Contrast & Similarity
A few characteristics, however, are most often used to show similarity
and contrast. In no particular order, these are:
 size
 shape
 color
 value
 texture
 position
 orientation
 Connecting and Separating Elements
Through Contrast & Similarity
Contrast and Gestalt
 Figure-ground
 Focal points
 Connecting and Separating Elements
Through Contrast & Similarity
Similarity and Gestalt
 Closure
 symmetry and order
 uniform connectedness
 common regions
 Proximity
 Continuation
 common fate
 parallelism
9. Visual Weight and Direction

Every element in design have a visual force that attracts the attention
of the readers. The greater the force, the more the user is attracted.
These forces also appear to act on other elements, imparting a visual
direction to their potential movement and suggesting where you should
look next.
We refer to this force as visual weight and to the perceived direction of
visual forces as visual direction. Both are important concepts to
understand if you want to create hierarchy, flow, rhythm and balance in
your composition.
Visual Weight and Direction

Visual Weight
Visual Weight and Direction

Visual Direction
Visual Weight and Direction

How Do You Measure Visual Weight?

Although there is no device to measure it yet you can use your experice to manage
and judge it. Followings are few feature to manage it.
 Size
 Color
 Value
 Position
 Texture
 Shape
 Orientation
Visual Weight and Direction

How Do You Measure Visual Weight?

You don’t have to limit yourself to the primitive features above. You can use
additional characteristics to control visual weight.
 Density
 Local white space
 Intrinsic interest
 Depth
 Saturation
 Perceived physical weight
Visual Weight and Direction

Visual Weight and Gestalt

 Figure-ground
 Proximity
 Similarity and contrast
 Focal point
 Past experience
Visual Weight and Direction

Visual Direction
You can think of direction as real or imaginary lines that point from
one element to another or that connect different elements. The lines
don’t need to be visible.
If visual weight is about attracting the eye to a particular location,
then visual direction is about leading the eye to the next location.
Some useful characteristics to manage the visual direction.
 Shape of elements  Movement
 Location of elements  Structural skeleton
 Subject matter of elements
Visual Weight and Direction

Visual Direction and Gestalt

 Uniform connectedness
 Continuation
 Common fate
 Parallelism
Visual Weight and Direction

The Overall Direction of a Composition

One more concept of visual direction is that every composition will be
seen to have a dominant direction, whether horizontal, vertical or
diagonal.
 A horizontal direction makes the composition appear calm and
stable.
 A vertical direction adds a sense of formality, alertness and balance.
 A diagonal direction suggests movement and action.
Projects

Write your views on the following topics (Minimum 600 Words)

• Design Elements – Types and Uses in Designing
• Gestalt Theory – The Key Ideas for a Better Design
• Gestalt Principles – Must to Know for Every Designer
• Visual Weight and Direction – Role in Designing
• Negative Space – Smart Designers Use it as an Active Element

Thanks
ADMEC Multimedia Institute
www.admecindia.co.in
Phones: +91-9811-8181-22, 9911-7823-50
 R

ADMEC MULTIMEDIA
Helpline 1: +91 9811-8181-22
Helpline 2: +91 9911-7823-50
Web: www.admecindia.co.in

Click to Read More on Visual Designing:

www.admecindia.co.in/blog-tags/graphic-design
www.graphic-design-institute.com/blog