Imaging and Design for the

Online Environment
After going through this module, you are
expected to:

 identify and explain the Basic Principles of Graphics and Layout;

 explainthe vital use of the Basic Principles of Graphics and
Layout in communication and industry;
 assess
the effectiveness of the graphic design in a given layout
example; and
 evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
Basic Principles of Graphics
and Layout
Communication is critical for people to
share thoughts, feelings, and emotions.
With the use of different media, people
can express their views in many ways,
including adding artistic designs.
Basic Principles of Graphics
and Layout
The purpose of the combined images
and texts also gives influence to people
not just understand the sent idea or
message, but it also adds emotion to
what is being seen.
What’s In
This lesson provides information about the Basic
Principles of Graphics and Layout that should
be applied in a design.
It involves the proper use and combination of
principles, texts, colors, and images as it applies
in a variety of media in graphic designing for
effective visual communication.
What’s New
Directions: In this activity, you need to observe
the given the picture below and identify which
principle of graphics and layout BEST applies in
each design.
Choose your answer inside the box located on
the bottom page then write your answer on a
separate sheet.
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Patternand
Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Patternand
Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 Balance
 Contrast
 Emphasis
 Hierarchy
 Alignment
 Pattern and Repetition
 UNDERSTANDIN
What is It G GRAPHIC
DESIGN AND
LAYOUT
What’s New

What makes a good and effective

website?
How do users interact with the
websites they visit?
What’s New

A good website must know its

target audience, determine its
needs, and communicate
effectively using the basic
principles of graphics and layout.
What’s New
Users or visitors may have different interests
and needs:
Browsing
Researching
Streaming
Online Shopping
Dating and many others.
What’s New

Usability is important for the

users as it satisfies their experience
on the website, but a good design
will drag the audience’s attention
to stay on the page.
What’s New

Always remember that first

impressions last and web design
has an impact on the users on how
they perceive the brand or
message.
What’s New

Graphic design is an artistic way

of communicating ideas and
messages through visual
expressions using texts, images,
and symbols.
 What’s New
Graphic designers  Websites

work on the quality  Advertisements

of the output they  Posters

serve for the  Flyers

audience or clients  Logos

like:  videos, and
 any other multimedia form.
Graphic Design vs. Layout

Graphic design is a plan of

creating an idea through a
combination of texts, images, and
other elements that are placed
together artistically,
Graphic Design vs. Layout

whereas, the Layout is a term used

as the process of organizing and
arranging these elements in a
design as you plot it in a paper.
Basic Principles of
Design and Layout
Basic Principles of Design and
Layout
Balance - proper arrangement
of the elements, which gives a
visual weight for the design.
Basic Principles of Design and
Layout
Two types of balance
Symmetrical - where the elements
are equally distributed on both sides
Asymmetrical - free layout where the
elements can be placed in any order
Symmetrical
Asymmetrical
Basic Principles of Design and
Layout
Emphasis - something
that needs to stand-out or
emphasize.
 Basic Principles of Design and
Layout
Pattern, Repetition and Rhythm - repetitive
elements such as lines, shapes, forms,
textures, space, colors, font, style, and the
like to create texture, movement, continuity,
and consistency of the design
Basic Principles of Design and
Layout
Alignment - proper placement of an
element to your design, just like
invisibly placing or aligning your texts
or images diagonally, vertically, and
horizontally
Basic Principles of Design and
Layout
Hierarchy - proper arrangement
of the details such as text,
characters, numbers, and symbols
Basic Principles of Design and
Layout
Changing its character size,
thickness, spaces, or even font
type to stand out is its most
critical features.
Basic Principles of Design and
Layout
Contrast - use of different or
opposite elements such as sizes
(large or small), shapes (geometric or
organic), spaces (negative or positive),
 Basic Principles of Design and
Layout
form (real or abstract), colors
(monochromatic, complementary, triadic,
tetradic), texture (smooth or rough), and
values (light or dark).
Basic Principles of Design and
Layout
The contrast gives
visual weight to an
object or design.
Basic Principles of Design and
Layout
Unity and Harmony -
relationship of the elements or
the contents when you place
them together.
Basic Principles of Design and
Layout
The elements of the design
must work together and agree
to its meaning, theme, feeling,
or mood.
What’s More
Using your computer or mobile device,
access an existing website and evaluate
its effectiveness based on the applied
principles of layout, graphic and visual
message design.
What’s More
Directions: Navigate and observe your
visited website. Using the Web Design
Assessment Checklist, place a checkmark
(/) on the Yes or No column that
corresponds to each question.
What’s More

Add comments or suggestions for a

detailed description in each number.
Write your answer in a separate sheet
of paper.
What I Have Learned
In the given websites listed below, evaluate the layout and
design of their pages and explain the principles of design
and layout applied.
1. https://www.deped.gov.ph
2. https://education.minecraft.net
3. https://teachforthephilippines.org
4. https://arvr.google.com/ar
5. https://www.canva.com
https://www.deped.gov.ph
https://education.minecraft.net
https://teachforthephilippines.org
https://arvr.google.com/ar
https://www.canva.com
What I Can Do
Knowing the basic principles of graphic and
layout is a guide and a must for every web
designer, illustrator, and even layout artist.
Having a good web design can engage the
audience to stay on the page and this also
promotes the website’s brand.
What I Can Do
Directions: Write an insight on how you
feel when you visit a good and a bad web
page design? Write at least one paragraph
in each side as you evaluate its
effectiveness.
Use a separate sheet to answer. (10 points)
GOOD WEBSITE VS BAD
WEBSITE
Thank You and God
Bless!