Elements and Principles of

Visual Design
Errol John A. Cadelina
Instructor 1/ Science Research Specialist I
Isabela State University
 Design
• Design is defined as an arrangement of lines or shapes created to form
a pattern or decoration (Oxfod Languages, n.d.).

• “Design is a plan for arranging elements in such a way as best to

accomplish a particular purpose.” ― Charles Eames, American designer,
architect, and filmmaker
Design Elements and Principles

The right combination of design elements used according to

design principles can effectively communicate your visual
instructional message.

Learning about design elements and principles will help you

create and evaluate visual images for instruction.
 Design
• Design has an impact on how a piece of work is perceived,
executed, and used—and are present in design regardless of skill,
taste, or style.
• In his book, Art As Experience, American philosopher and
psychologist John Dewey concluded that everything artists and
designers create has massive implications on people’s everyday
experiences.
“In order to understand the aesthetic in its ultimate and
approved forms, one must begin with it in the raw; in the events
and scenes that hold the eye and ear.” – John Dewey
Elements vs. Principles of Design

Elements of design - basic building blocks of any composition

Principles of design - how the elements are used. These are a set
of cardinal rules and techniques for composing the various
elements of design.
 Design Elements
Design elements are the building blocks or basic
units in the construction of a visual image.
Design elements include:

• Point
• Line
• Shape
• Value
• Texture
• Color
 Point .
• The point is the first and simplest element of visual design.
• The point serves as the focus of a visual, highlighting or
drawing attention to important information.
• Several points in combination may represent an object or
idea.
• A series of points can attract attention, especially as they
move closer together.
• Direct the learner's attention
 Line
• A line can be thought of
as points so close
together that they lose
their individual identity
and form a new entity.
 Line
• Vertical lines can stop eye • They also equate to power and
movement. strength.
 Line
• Horizontal lines symbolize rest and relaxation.
 Line
• Diagonal lines are dynamic and action-oriented.
 Line
• Lines, like points, can direct attention to a specific location in a
visual image.
 Line
• Thick lines are more powerful than thin lines.
 Line
• Lines act as a borders between ideas, concepts, or steps in a
sequence.
 Line
• Lines allow you to quickly visualize an object or idea with a
minimum of time and material.
 Line
• By emphasizing basic
structure, objects
depicted through line
drawings are easy to
recognize and can be
effective for learning.
 Shapes
• A shape is defined as an area
that stands out from the space
next to or around it due to a
defined or implied boundary,
or because of differences of
value, color, or texture.
 Shapes
•
 Shapes
• Shapes can vary endlessly and can suggest physical form
and direct eye movement.
 Shapes
• Shapes define figure/ground relationships.

Figure + Ground = Figure/Ground

 Value
• Value is the relative degree of lightness and darkness in a
design element.
 Value
• Value is used to describe objects, shapes, and space.
• Line, color, texture, and shape all need value contrast in order
to be seen.
 Value
• Dark areas tend to denote
• gloom
• mystery
• drama
• menace
 Value
Light areas tend to
denote
• happiness
• fun
• gaiety
• warmth
• closeness
 Texture
• Texture is defined as the surface
characteristics of a material that can be
experienced through the sense of touch
or the illusion of touch.
• In visual images, actual textures can be
used, such as cloth, boxes, small objects,
and natural items.
 Texture
• Texture can be used to accent an area so that
it becomes more dominant than another.
Which box is
more
dominant?
What makes
one box stand
out from the
others?
 Color
• Color is the part of light that is reflected by the object we
see.
• Color appeals to children as well as adults.
• The primary colors are red, yellow, and blue. They are called
primary because they are not mixtures of other colors.
• Mixing any two primary colors results in a secondary color.
• The color wheel is created when the primary and secondary
colors are placed in a circle.
 Color
• Colors directly across from each other on
the color wheel are called
complementary colors.

✓ Orange and blue are

complementary colors.
✓ Yellow and violet are
complementary colors .
✓ Red and green are
complementary colors .
 Color
• Complementary colors used together provide extreme
contrast.
 Color
• Less contrast is achieved by using every other color on the
color wheel, such as:

• blue, red, and yellow

• orange, green, and violet.

 Color
• More harmonious effects can be achieved by using colors
that are close together on the color wheel.
 Color
• Another way to organize color is by color "temperature.“
• Colors are either "warm" or "cool."
 Color
• Red, orange, and yellow are considered warm colors.
 Color
• Blue, green, and violet are considered cool colors.
 Space
• The proper use of space can help others view your
design as you intended.
• White space or negative space is the space between
or around the focal point of an image.
• Positive space is the space that your subject matter
takes up in your composition.
• The spacing of your design is important because a
layout that’s too crowded can overwhelm the
viewer’s eye.
 Design Principles
Design principles help make visual images pleasing and
interesting to look at. Design principles include:
• Balance
• Perspective
• Harmony
• Unity
• Movement
• Variety
 Balance
• Balance is a psychological
sense of equilibrium.
• As a design principle, balance
places the parts of a visual in
an aesthetically pleasing
arrangement.
 Balance
• Objects in design carry weight just like in the physical world, but it’s called visual
weight. The visual weight of a design needs to have balance.

• It’s like putting two objects on a seesaw: If one side is too heavy, the viewer’s eye
goes directly to the heavy part. If it’s weighted with all things equal, the seesaw is
perfectly suspended without either side touching the ground.

• Balance can be implied by size, shape, or even contrast.

• While it can utilize symmetry or equality, balance can also be achieved through
asymmetry.
– Think of asymmetry as the opposite of mirroring: Instead of seeing the reflection, you
see something that evenly distributes the elements.
 Perspective
• Perspective is created through the arrangement of objects in
two-dimensional space to look like they appear in real life.
• Perspective is a learned meaning of the relationship
between different objects seen in space.
• Perspective adds realism to a visual image.
 Perspective
• Perception can be achieved through the use of:

Relative
sizes of
objects
 Perspective
• and blurring or sharpening objects.
 Unity
• 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.
• It gives a feeling of harmony and completeness
 Unity
• Unity can be achieved through the use of similar shapes.
 Unity
• Unity can be achieved through
the use of a common pattern.
• Unity can be achieved through
the use of space.
• Unity can be achieved through
the use of a common
background.
 Contrast
• The difference between two or more objects in a design is referred to as contrast.

• The difference in objects could be light and dark, thin and thick, small and large, bright
and dull, etc.

• Contrast is most commonly associated with readability, legibility, and accessibility.

• The most important element in a design should have the most contrast. A bright blue
button on a stark white background with a lot of white space is considered high contrast. If
the button was almost the same color as the background or was a 1px stroke versus a fill,
it would have less contrast.
a|DcS UI ad D qS U I
tSDJtU 0 tSDJSUOP

tSDJtUO@
 Movement
• Motion or movement in a visual image occurs when objects
seem to be moving in a visual image.
 Movement
• Movement in a visual
image comes from the
kinds of shapes, forms,
lines, and curves that
are used.

• Diagonal lines tend to

create the illusion of
movement or motion.
 Movement
Changes in direction
or change in the
darkness or lightness
of an image can also
create a sense of
motion.
 Emphasis
• Emphasis can be created by size, weight, position, color, shape, and style. Sometimes
referred to as dominance, emphasis might seem similar to contrast, but it’s not quite the
same.

• Contrast deals with the difference between two objects, and emphasis deals with the
impact of an object.

• Adding emphasis to an object creates a focal point, which grabs an audience’s attention.

• It’s where you want the viewer to look first, but doesn’t overpower the rest of the
design (or it would be out of balance).

• Emphasis can be achieved by giving the focal point a different size, color, shape, etc.
 Emphasis

Creating a FOOOI POiOt

 Hierarchy of Information
• The arrangement of elements or content on a page/screen in such a way that it
reveals an order of importance (either ascending or descending).

• One of the most important principles in design, hierarchy is a way to visually

rank your design elements.

• Hierarchy is not based on a design styles, but rather the order of importance.

• A good design leads the eye through each area in priority order.

• A good rule of thumb for hierarchy is that your most important elements should
be the most prominent.
 Hierarchy

No Hierarchy Hierarchy
• With the hierarchy principle, a designer can ‘shout out’ what he thinks is
most important on the page/screen before the viewer gets bored and moves
on.

• If the hierarchy is done well, then the content should naturally become an
easy read.

• It creates a path for the viewer’s eye to follow through the page/screen.

• The viewer should be able to scan through the document and still get the
picture. When it comes to designing layout this principle is functional and
very effective.
'fr- W 6 isu.edu.ph/#

GOVPH Home About Us Administration Academics Research Extension Global Campuses

“ ISABELA STATE UNIVERSITY

ILAGANCAMPUS

TO P PERFORMI NG SCHOOL
APR IL 2022 MIDWIF ERY LIC ENSU RE EXAMINATION

UNIVERSITY NEWS AND EVENTS

Instruction
Teachers’ Day 2022: Making the Celebration
Extra Special- the ISU way!