Importance of principles of design

The principles of design are made up of various mixes

of the elements of design all put together in one design,
making our design look better.
principles of design become very important for artists.
They are the devices that we need to use and will
unknowingly use, since they make our design look
nicer and become more visually appealing to people
who are looking at our work. That is why the principles
are important, too make our artwork look visually
appealing, catch peoples eyes and get good reviews.

Elements of design

Line

Shape

Size

Direction

Elements of design

Texture

Value

Space

Text

Elements of design
LINE The linear marks made with a pen or
brush or the edge created when two shapes
meet.
SHAPE A shape is a self contained defined
area of geometric (squares and circles), or
organic (free formed shapes or natural
shapes). A positive shape automatically creates
a negative shape.

Elements of design
DIRECTION All lines have direction
Horizontal, Vertical or Oblique. Horizontal
suggests calmness, stability and tranquillity.
Vertical gives a feeling of balance, formality and
alertness. Oblique suggests movement and
action.
SIZE Size is simply the relationship of the
area occupied by one shape to that of another.

Elements of design
TEXTURE Texture is the surface quality of a
shape rough, smooth, soft hard glossy etc.
COLOUR Colour is light reflected off
objects. Color has three main characteristics:
hue or its name (red, green, blue, etc.), value
(how light or dark it is), and intensity (how
bright or dull it is).

Principles of design
Balance
Gradation
Propotion

Rhythm

Principles of design
Unity of proximity
Repetition
Contrast

Emphasis
Alignment

Principles of design
BALANCE Balance in design is similar to
balance in physics. A large shape close to the
center can be balanced by a small shape close
to the edge. Balance provides stability and
structure to a design

PROXIMITY Proximity creates relationship

between elements. It provides a focal point.
Proximity doesnt mean that elements have to
be placed together, it means they should be
visually connected in someway.

Principles of design
ALIGNMENT Allows us to create order and
organisation. Aligning elements allows them to
create a visual connection with each other.
REPETITION Repetition strengthens a
design by tying together individual elements. It
helps to create association and consistency.
Repetition can create rhythm (a feeling of
organized movement).

Principles of design
CONTRAST Contrast is the juxtaposition of opposing
elements (opposite colours on the colour wheel, or
value light / dark, or direction horizontal / vertical).
Contrast allows us to emphasize or highlight key
elements in your design.
Proportion- refers to the relative size and scale of the
various elements in a design. The issue is
the relationship between objects, or parts, of a whole.
This means that it is necessary to discuss proportion in
terms of the context or standard used to determine
proportions.

Principles of design
Rhythm- can be described as timed movement
through space; an easy, connected path along
which the eye follows a regular arrangement of
motifs. The presence of rhythm creates
predictability and order in a composition. Visual
rhythm may be best understood by relating it to
rhythm in sound..

Principles of design
Emphasis- is also referred to as point of focus,
or interruption. It marks the locations in a
composition which most strongly draw the
viewers attention. Usually there is a primary, or
main, point of emphasis, with perhaps
secondary emphases in other parts of the
composition.

Principles of design
Gradation employs a series of motifs patterned
to relate to one another through a regular
progression of steps. This may be a gradation
of shape or color. Some shape gradations may
in fact create a sequence of events, not unlike
a series of images in a comic strip.

Gestalt Theory
Gestalt psychologists have come up with lists
to summarize basic principles of visual
perception, which have become invaluable
tools for design
This theory also helps the designer influence
the viewer by controlling how the design is
viewed.

The Key Ideas Behind Gestalt

Theory
EMERGENCE (THE WHOLE IS IDENTIFIED
BEFORE THE PARTS)

REIFICATION (OUR MIND FILLS IN THE GAPS)

MULTI-STABILITY (THE MIND SEEKS TO AVOID
UNCERTAINTY)

INVARIANCE (WERE GOOD AT RECOGNIZING

SIMILARITIES AND DIFFERENCES)

EMERGENCE (THE WHOLE IS

IDENTIFIED BEFORE THE PARTS)
Emergence is the process of forming
complex patterns from simple rules.
When attempting to identify an
object, we first seek to identify its
outline. We then match this outline
pattern against shapes and objects
we already know to find a match.

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. As we
attempt to match what we see to the
familiar patterns we have stored in
memory, there isnt always an exact
match.

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.
Some objects can be perceived in
more than one way.

INVARIANCE (WERE 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. Since
we often encounter objects from
different perspectives, weve
developed an ability to recognize
them despite their different
appearance.

Gestalt Principles
Law of simplicity
Closure
Symmetry and order
Figure/Ground
Uniform connectedness
Common regions
Proximity
Continuation

Gestalt Principles
Common fate
Parallelism
Similarity
Focal point
Past experiences

Proximity
The principle of proximity or
contiguity states that things
which are closer together
will be seen as belonging
together.

Similarity
Similarity means there is a
tendency to see groups which
have the same characteristics so
in this example, there are three
groups of black squares and three
groups of white squares arranged
in lines.
The principle of similarity states
that things which share visual
characteristics such as shape,
size, color, texture, value or
orientation will be seen as
belonging together.

Common Fate
Suppose both principles of
proximity and similarity are in
place - then a movement takes
place - the dots begin to move
down the page.
They appear to change
grouping

Good Continuation
The principle of
continuity predicts the
preference for
continuous figures. We
perceive the figure as
two crossed lines
instead of 4 lines
meeting at the center.

Closure
Related to principle of good
continuation, there is
a tendency to close simple
figures, independent of
continuity or similarity. This
results in a effect of filling in
missing information or
organising information
which is present to make a
whole

Area and Symmetry

The principle of area states
that the smaller of two
overlapping figures is
perceived as figure while
the larger is regarded as
ground.
The principle of the
symmetrical figure is that it
is seen as a closed figure.
Symmetrical contours thus
define a figure and isolate it
from its ground

FIGURE/GROUND
The figure/ground principle
is based upon the
relationship between an
object and the surrounding
space. Figure/ground is
also referred to as positive
and negative space, the
positive being the object
and the negative referring
to the space around it.

SIMPLICITY
The law of simplicity
indicates that our mind
perceives everything in its
simplest form. The image
below, for example, when
studied in depth is made
up of individual
components that have no
meaning when viewed
separately, yet our mind
automatically perceives
them in combination to
spell out the word logo.

Parallelism
Elements with the same or
very similar slopes are
associated as a single group.
When designing, we often
change the inclination of our
texts to match surrounding
arrows or curves because it
makes the entire figure look
more visually compact. In this
poster created to advertise
the font Futura, different text
areas are grouped using the
principle of parallelism.

Continuity
Elements are visually
associated if they are aligned
with each other. Lines are
perceived as a single figure
insofar as theyre continuous.
The smoother their segments
are, the more we see them as
a unified shape.

Common Region
When we find several
elements that are part of a
single region, we associate
them as a single group.
Consider a design for a badge
where there is a combination
of text, objects and a banner.
All three of those elements are
perceived as belonging to the
unified badge.

Element Connectedness
We perceive elements as being
united if they are connected by
other elements. An easy way to
think about this principle in
action is an infographic or
flowchart where arrows help
connect one figure (or text
block) to the next.

PAST EXPERIENCES
Elements tend to be
perceived according to an
observers past
experience.
Past experience is perhaps
the weakest gestalt
principle. In conjunction
with any of the other
principles, the other
principle will dominate over
the past experience
principle.

FOCAL POINTS
Elements with a point of
interest, emphasis or
difference will capture and
hold the viewers
attention.
This principle suggests
that our attention will be
drawn toward contrast,
toward the element that is
unlike the others in some
way. In the image below,
your eye should be drawn
to the square. Its a
different shape and color
from the other elements

Figure-Ground Relationship
Figure ground is a visual relationship
between foreground and background.
This is important to the perception of
images, as the edges form the image
that we see.

Three Distinct Types

Simple Figure Ground

Figure Ground Reversal

Figure Ground Ambiguity

Simple Figure Ground

A simple figure ground is the
composition (or diagram) of
what is perceived. A figure
ground can be anything with a
main focus, but a diagrammatic
figure ground simplifies
perception. In architecture, the
site plan is often simplified to
show the relationships
otherwise not perceived, such
as the building's mass in
comparison to its
surroundings.

Figure Ground Reversal

Figure ground reversal is the
inversion of background and
foreground. This is often used in
logo designs and can
often ground an image. In a simple
figure ground the borders are
perceived as limitless, whereas
the figure ground reversal bounds
the image.

Figure Ground Ambiguity

Figure ground ambiguity is the
visual illusion with two alternate
viewpoints. This is similar to
figure ground reversal, but the
alternate image creates a
totally different perception. In
this version of figure ground, a
pair of objects share a similar
edge.

Space as a Design Element

Space can be used to both separate and connect
elements in a design. Wider spaces separate elements
from each other and narrower spaces connect elements
to reveal relationships between them. Overlapping
elements maximizes their relationship.
By controlling and shaping space in our designs, we
create rhythm, direction, and motion. We create design
flow through our use of space.
Whitespace does three main things in a design.
Creates groupings of elements
Creates emphasis and hierarchy
Improves legibility

Space can be used to convey a variety of

meanings, some of which include
Quality wealth, luxury
Solitude abandonment, loneliness
Cleanliness bleached, washed
Purity unsullied, unadulterated
Spirituality sacredness, connection to something
greater
Openness distance, infinity
Calmness placidity, inaction

How to Use Space in Design

Space in web design can be divided into to types.
Micro whitespace is the space within elements,
such as the margins surrounding text and the leading
between lines of text or the spaces between the
individual characters.
Macro whitespace is the space between major
elements in your design. These spaces tend to be
larger and are usually immediately apparent

Micro Whitespace
Micro whitespace is concerned with spaces between
smaller elements. Its space between list items and
space between an image and its caption. It also
includes the space between elements inside a larger
element.

Macro Whitespace
Boxes (borders and backgrounds) are often used to
enclose and connect some elements while separating
them from other elements or groups of elements.
Boxes can be overkill.

Connecting and separating elements

through contrast and similarity
Size
Shape
Color
Value
Texture
Position
Orientation

CONTRAST AND GESTALT

Figure-ground
One of the first things we do when viewing a
composition is to determine whats the figure and
whats the background. This relationship helps to set
context for everything else in the composition. Figure
and ground need to contrast with each other or else
the viewer will have difficulty determining which is
which.

Focal points
These are elements of attraction and interest.
Theyre designed to look different from their
immediate surroundings. The contrast is what helps
them stand out and draw attention. The element that
stands out the most in the composition is the
dominant element. Elements that stand out in a
composition but to a lesser degree are focal points.
.

SIMILARITY AND GESTALT

closure
different elements that may be part of a similar whole
symmetry and order
mirrored elements that appear to belong together
uniform connectedness
similarity through visually connecting elements
common regions
similar items enclosed together

SIMILARITY AND GESTALT

proximity
similarity through enclosures in space
continuation
similarity through rhythms in space
common fate
similarity through movement
parallelism
similarity through orientation

Visual Weight
Physical weight is a measure of the force that gravity
exerts on an object, but two-dimensional objects (such
as elements on a web page) dont have mass and,
therefore, dont have any physical weight. Visual
weight is a measure of the force that an element exerts
to attract the eye. Two-dimensional objects can attract
attention. The more an element attracts the eye, the
greater its visual weight.

HOW DO YOU MEASURE VISUAL

WEIGHT?
Develop an eye and then trust it. The areas of a
composition that attract our eye are those that have
greater visual weight. Learn to trust our eye.

Lets start with the primitive features that I mentioned in the

last post: size, color, value, position, texture, shape and
orientation.
Size
Large elements have more visual weight than small elements.
Color
Warm colors advance into the foreground and tend to weigh
more than cool colors, which recede into the background. Red
is considered the heaviest color and yellow the lightest.
Value
Dark elements have more visual weight than light elements.
Position
Elements located higher in the composition are perceived to
weigh more than elements located lower in the composition.
The further from the center or dominant area of a composition,
the greater the visual weight an element will carry

Texture
Textured elements appear heavier than non-textured
objects. Texture makes an element appear threedimensional, which gives the appearance of mass and
physical weight.
Shape
Objects with a regular shape appear heavier than objects
with an irregular shape. The irregularity gives the
impression that mass has been removed from a regular
shape.

Orientation
Vertical objects appear heavier than horizontal objects.
Diagonal elements carry the most weight.

WE dont have to limit yourself to the primitive features above.

we can use additional characteristics to control visual weight.
Density
Packing more elements into a given space increases the visual
weight of the space. The viewer will perceive a larger or darker
combined element as opposed to several smaller and lighter
elements.
Local white space
White space appears to have no visual weight because its
seen as empty. Any object placed within that space will seem
heavier because of the space around it.
Intrinsic interest
Some things are more interesting than others. The more
complex or intricate an element, the more interest it will draw
and the more it will attract the eye.

Depth
A larger depth of field gives an element in focus increased
visual weight, likely due to the contrast between the focus
and unfocused areas.
Saturation
Saturated colors appear heavier than desaturated colors.

Perceived physical weight

We know that a house weighs more than a shoe. An
image of a house will weigh more visually than an image
of a shoe, because we expect the house to weigh more.

VISUAL WEIGHT AND GESTALT

Figure-ground
Visual weights can be used to separate the two by
giving the figure more weight than the background.
Proximity
The space between elements leads to different
amounts of local white space and different
densities of the objects within the space.

VISUAL WEIGHT AND GESTALT

Similarity and contrast
We can use visual weight to signal either. Contrast will lead
to greater visual weight in the contrasting element. Elements
with similar visual weight will naturally exhibit similarity.
Focal point
Points of attraction in a composition are focal points, and
they carry more visual weight than other elements.
Past experience
The viewers experience will contribute to how much intrinsic
interest they think an element holds.

Visual Direction
If visual weight is about attracting the eye to a
particular location, then visual direction is about
leading the eye to the next location. Visual
direction is the perceived direction of visual
forces. Think of it as the direction you would
expect an element to move if it were in motion.

Although fewer characteristics are at our disposal than

with weight.
Shape of element
An elements shape might create an axis through it and
this axis can suggest a direction. The prime axis is
typically seen as running parallel to an elements visual
direction.
Location of elements

Visual weight is a force that can appear to attract or repel

a neighboring element. This force will move in a direction
that connects both elements.

Subject matter of element

An arrow, a pointing finger, or the gaze of the eye all
suggest looking in a certain direction.
Movement
An element could literally move through our design, and
its movement will have a direction.
Structural skeleton
Every composition has a structural skeleton, with forces
that naturally run along and through different axes. This
probably needs a little more explanation.

VISUAL DIRECTION AND GESTALT

Uniform connectedness
The lines connecting elements have direction. An
eye gaze creates an imaginary line between the
eye and whatever the eye is gazing at.
Continuation

This principle relates to elements arranged along a

line or curve, as though they are moving in the
direction of the line or curve.

VISUAL DIRECTION AND GESTALT

Common fate
Elements seen as having a common fate are those
that move or appear to move in the same direction.
Parallelism

In order for elements to be seen as parallel, their

internal axes (the same ones that impart direction)
must be established.

Presented By:
Shruti Gupta
Web Master