PRINCIPLES OF
LAYOUT, GRAPHIC,
AND VISUAL
MESSAGE DESIGN
Empowerment Technologies
Most Essential Learning Competency
Evaluate existing websites and
online resources based on the
principles of layout, graphic,
and visual message design
Learning Objectives
✔ identify the principles of graphics,
layout and visual message design
✔ evaluate existing websites and online
resources based on the principles of
layout,
✔ graphic, and visual message design;
✔ describe the importance of the principles
of graphics, layout and visual message
design
Lesson For The Day
• A beautiful design is not a product of
great imagination or a result of an idea.
• Rather, it is a product of carefully
plotted design elements chosen to
create a visual representation of the
idea and the imagination.
• Design is about creating harmony among the
elements and having them come together in
a final product that is clearly outstanding.
Website
Layout A representation
Images of the external
Infographics form of a person
Uploading
Graphic or thing in art.
Website It is a collection of web
Layout pages and related
Images content that is
Infographics identified by a common
Uploading domain name and
Graphic published on a web
server.
Website Collection of
Layout imagery, charts, and
Images minimal text that
Infographics gives a clear
Uploading understanding
Graphic overview about the
topic
Website
An item displayed on a
Layout
Images screen or stored as
Infographics data.
Uploading
Graphic
Website
Layout
The way in which
Images text or pictures are
Infographics set out on a page.
Uploading
Graphic
The act of transferring
Website
something from one
Layout
device to another,
Images
typically to one that is
Infographics
larger or remote from the
Uploading
user or functioning as a
Graphic
server.
Image - A
representation
of the external
form of a person
or thing in art.
Website -
It is a collection of web
pages and related
content that is identified
by a common domain
name and published on a
web server.
Infographics –
Collection of
imagery, charts, and
minimal text that
gives a clear
understanding
overview about the
topic
Graphics –
An item displayed on a
screen or stored as
data.
Layout –
The way in which
text or pictures are
set out on a page.
Uploading –
The act of transferring
something from one
device to another,
typically to one that is
larger or remote from the
user or functioning as a
server.
EABNCAL-
lends stability and
structure to an
overall design of
a layout or
graphic
BALANCE - lends
stability and
structure to an
overall design of
a layout or
graphic
PTXOMYRII-
this helps in creating
a relationship
between similar or
related elements.
PROXIMITY - this
helps in creating a
relationship between
similar or related
elements.
ITLGNEANM-
gives an ordered
appearance to
images, shapes and
texts.
ALIGNMENT - gives
an ordered
appearance to
images, shapes and
texts.
UVASLI CRYAIRHEH
– this is formed when
extra visual weight is
given to the most
important element in your
design
VISUAL HIERARCHY
– this is formed when
extra visual weight is
given to the most
important element in your
design
NIEPETIRTO –
creates a rhythm and
strengthens the overall design
by trying to be consistent with
the elements such as the color
palette or the theme of the
design.
REPETITION –
creates a rhythm and
strengthens the overall design
by trying to be consistent with
the elements such as the color
palette or the theme of the
design.
TRCSANTO–
happens when there is a
difference between the
opposing elements in
your design.
CONTRAST
happens when there is a
difference between the
opposing elements in
your design.
LCOOR–
this dictates the
overall mood of
your design.
COLOR
this dictates the
overall mood of
your design.
TENVGAIE PECAS –
the space that is left blank to
create a shape or to
highlight
the important components of
the layout.
NEGATIVE SPACE
the space that is left blank to
create a shape or to
highlight the important
components of the layout.
YHTAPRYPGO
–
it speaks out volumes
about the work.
TYPOGRAPHY
–
it speaks out volumes
about the work.
Principles of Visual Message Design
Guess Me!
Choices
It is a principle of
BOLDNESS
visual
CREATIVE
message
MINIMAL design that
UNIQUENESS makes you stand
SIMPLICITY out from all the
rest.
Principles of Visual Message Design
Guess Me!
Choices
It is a principle of
BOLDNESS visual message
CREATIVE design that means
MINIMAL not hesitating or
UNIQUENESS fearful in the
face of actualor
SIMPLICITY possible danger.
Principles of Visual Message Design
Guess Me!
Choices
BOLDNESS It is the quality
CREATIVE or condition of
MINIMAL your design
UNIQUENESS that is easy to
understand.
SIMPLICITY
Principles of Visual Message Design
Guess Me!
Choices
BOLDNESS It is a principle of
CREATIVE visualmessage
design that turns
MINIMAL
new and
UNIQUENESS imaginative ideas
SIMPLICITY into reality.
Principles of Visual Message Design
Guess Me!
Choices
BOLDNESS Keeping your
CREATIVE text
MINIMAL to produce more
UNIQUENESS
impact to your
SIMPLICITY
design.
Principles of Visual Message Design
Guess Me!
Choices
It is a principle of
visual
message
UNIQUENESS
design that
makes you stand
out from all the
rest.
Principles of Visual Message Design
Guess Me!
Choices
It is a principle of
visual message
design that means
BOLDNESS not hesitating or
fearful in the
face of actualor
possible danger.
Principles of Visual Message Design
Guess Me!
Choices
It is the quality
or condition of
SIMPLICITY
your design
that is easy to
understand.
Principles of Visual Message Design
Guess Me!
Choices
It is a principle of
visualmessage
CREATIVITY design that turns
new and
imaginative ideas
into reality.
Principles of Visual Message Design
Guess Me!
Choices
Keeping your
text
MINIMAL to produce more
impact to your
design.
Thank
You!
