Lesson 101

Principles of layout,
graphic, and visual
message design
Empowerment Technologies
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
ü in creating online resources.
 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 or
Uploading
Graphic thing in art.
Website It is a collection of web
Layout pages and related
Images content that is identified
Infographics by a common domain
Uploading name and published on a
Graphic web server.
Website Collection of imagery,
Layout charts, and minimal
Images text that gives a clear
Infographics understanding
Uploading overview about the
Graphic topic
Website
Layout
An item displayed on a
Images screen or stored as
Infographics data.
Uploading
Graphic
Website
Layout
The way in which text
Images or pictures are set out
Infographics 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 message
CREATIVE
design that
MINIMAL makes you stand
UNIQUENESS out from all the
SIMPLICITY 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 actual or
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 visual message
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
design that
UNIQUENESS
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 actual or
possible danger.
Principles of Visual Message Design
Guess Me!
Choices

It is the quality
SIMPLICITY or condition of
your design
that is easy to
understand.
Principles of Visual Message Design
Guess Me!
Choices

It is a principle of
visual message
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