Learning Objective

•Evaluate existing websites and online

resources based on the principles of layout,
graphic, and visual message design
 GRAPHICS

•A graphics is an image or visual

representation of an object
•Therefore, computer graphics are
simply images displayed on a computer
screen
•Graphics are often contrasted
with text, which is comprised
of characters, such as
numbers and letters, rather
than images
Example of Graphics
•Photographs
•Drawings
•Line Arts
•Graphs
•Diagrams
•Topography
 Graphic Design

❑Is the process and art of combining text and

graphics to communicate an effective
message in the design of websites, logos,
graphics, brochures, newsletters, posters,
signs, and any other type of visual
communication.
 Layout
It is the process of planning and arranging
graphics or text in a page or book.
In layout one needs to understand the message and
for whom it is intended
A good layout should have a balanced make
up and alignment of elements
Part of graphic design
that deals in the
arrangement of visual
elements on a page.
It generally involves
organizational
principles of
composition to
achieve specific
communication
objectives.
 Basic Principles
of Graphics
and Layout Design
 Alignment
•refers to placing text and
other design elements on a
page so they line up.
•It helps to create order,
organize your elements,
create visual connections,
and improve the readability
of your design.
Alignment
Which of the following alignment is appropriate fro an D to use? Why?
Contrast refers to the arrangement of
opposite elements
Which of the two options has the proper
application of color using contrast?

A B
Background - Dark
Text - light
 Hierarchy
• is the control of visual
information in an
arrangement or
presentation to imply
importance.
• It is used to help a
viewer navigate and
digest information easily.
Which of the following design uses a
hierarchy?
How will the viewer
recognize the
highlight of the
details instantly?
Balance

•in design is the

distribution of elements
of the design.
osymmetrical balance
o asymmetrical balance
Types of balance
1.Symmetrical
There should be equal
weights or elements on both
sides of the page
Symmetry can create a sense of
calmness and formality, but
sometimes it can be
visually boring.
2. Asymmetrical
there is an artistic and different
intensity on one side of the page.
Asymmetrical balance can be both subtle
and exciting
 Emphasis

•Emphasis refers to the importance of the

elements on your design, and what order
they should have on it.
How to emphasize one of the six illustrations?
How to emphasize one of the six illustrations?
 Repetition
•is simply the process of
repeating elements
throughout a design, or
several pieces of design
collateral to give a unified
look.
Repetition
• Elements that can be repeated to create movement,
continuity and consistency of the design
Which of the two options has a good design?
with repetition of elements such as color, background and font type
•Why is it important to create
a repetition of elements in a
design?
Unity and Harmony.
It refers to the
relationship of the
elements or the
contents when you
place them together.
The elements of design must
worked together and agreed to
its meaning, feeling or mood
Text - The text type should be:

✓ Legible
✓ Appropriate font face
✓ Left justified, Right justified, or centered
✓ The flow of text should be easy to read.
Legible?
Appropriate?
Flow of Text
Image - The image should be:

✓ Proportionate
✓ Sharp in color
✓ With high resolution
✓ With appropriate captions
Which one is….
2

3
1
PROPORTIONATE?
Which one is….

3
1 2
PROPORTIONATE?
1.What are the basic principles of layout and
graphic design?
2.Why is it important to apply the principles
of layout and graphic design to your
projects?
 Analyze the
given images
Which of the following cover magazine has a good design and layout?
 Why do you think Google
ranks number one despite
the countless search
engines and websites in the
Internet?
 Individual Activity
• Do the following:
1. Look around your home. Find some labels of the products
you use like shampoo, condiments, food wrappers or even
the cover of your old notebook.
2. Paste the label to a short size bond paper and evaluate its
design.
3. List down the principles of design applied in the label.