Empowerment

Technologies
Quarter 1 – Module 5:
Imaging and Design for the
Online Environment

CO_Q1_Empowerment Technologies SHS

Module 5
 Lesson
Basic Principles of Graphics
1 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. 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.

Notes to the Teacher

Computer or mobile phone with an Internet connection is vital in
this activity to visit and evaluate the designs of a website, poster,
advertisement, and other online graphic applications.

5 CO_Q1_Empowerment Technologies SHS

Module 5
 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.

1. _______________ 2. _______________ 3. _______________

4. _______________ 5. _______________

Balance Contrast Emphasis

Hierarchy Alignment Pattern and Repetition

What is It

Understanding Graphic Design and Layout

What makes a good and effective website? How do users interact with the
websites they visit?

A good website must know its target audience, determine its needs, and
communicate effectively using the basic principles of graphics and layout. Users or
visitors may have different interests and needs like browsing, researching, streaming,
online shopping, dating, and many others. They even behave differently depending
on what they perceive on the website. Web design matters in every user, whether

6 CO_Q1_Empowerment Technologies SHS

Module 5
they can decide to stay or just leave. 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. Always remember that first impressions last and web design has
an impact on the users on how they perceive the brand or message.

Graphic design is an artistic way of communicating ideas and messages

through visual expressions using texts, images, and symbols. Graphic designers
work on the quality of the output they serve for the audience or clients like websites,
advertisements, posters, flyers, logos, videos, and any other multimedia form. A
practical graphic layout and design can easily catch the attention of the viewers and
allow them to understand the message conveniently.

Graphic Design vs. Layout

Design is a plan of creating an idea through a combination of texts, images,
and other elements that are placed together artistically, 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

1. Balance
It refers to the proper arrangement of the elements, which gives a visual
weight for the design. There are two types of balance, Symmetrical
or Asymmetrical. Symmetrical balance is where the elements are
equally distributed on both sides of your design, technically a mirror-based
design. In contrast, Asymmetrical balance is a free layout where the elements
can be placed in any order or the opposite of symmetrical.

vs.

Symmetrical Asymmetrical

2. Emphasis
It refers to something that needs to stand-out or emphasize. When working
on emphasis, you can change the color, size, or even the element itself to lead
the eye to the focal interest.

vs.

no emphasis
with emphasis

7 CO_Q1_Empowerment Technologies SHS

Module 5
3. Pattern, Repetition and Rhythm
The use of 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. It also makes the design formal and more
comfortable to read because of its uniformity.

Slides A

No repetition
of elements

Slides B
with repetition
of elements
such as color,
background
and font type

4. Alignment
It refers to the proper placement of an element to your design, just like
invisibly placing or aligning your texts or images diagonally, vertically, and
horizontally. The standard texts or paragraph alignment we apply are center,
right, left, and justified.

vs.

all text boxes are invisibly aligned all textboxes have different
and placed with each other angles positioning diagonally

5. Hierarchy
It refers to the proper arrangement of the details such as text, characters,
numbers, and symbols. Changing its character size, thickness, spaces, or
even font type to stand out is its most critical features. By applying this
principle, it can help the viewer to recognize and navigate the highlight of the
event smoothly.

vs.

8 CO_Q1_Empowerment Technologies SHS

Module 5
 6. Contrast
It refers to the use of different or opposite elements such as sizes (large
or small), shapes (geometric or organic), spaces (negative or positive), form (real
or abstract), colors (monochromatic, complementary, triadic, tetradic), texture
(smooth or rough), and values (light or dark). The contrast gives visual weight
to an object or design. You must consider and limit the use of different
elements, color, style, and typography to avoid cluttered design. When
creating contrast in color and text, it is advised to choose a color from the
background to create consistency of your design. Always remember that the
details must be readable by having a dark-light value of either text and
background or vice-versa.

a poster and a packaging showing contrast with the use of a dark-colored

background and a light-colored text to make the details readable.

7. Unity and Harmony

It refers to the relationship of the elements or the contents when you place
them together. The elements of the design must work together and agree to its
meaning, theme, feeling, or mood.
The web page shows the
consistent use of font
style, font color,
contrasting with the dark
background, the
hierarchy is according to
its importance, proper
text alignment and
repetition of the design in
every menu.

What’s More

Let’s Assess!
Using your computer or mobile device, you need access one existing website
and evaluate its effectiveness based on the applied principles of layout, graphic and
visual message design.

9 CO_Q1_Empowerment Technologies SHS

Module 5
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. Add comments or suggestions for a detailed
description in each number. Write your answer in a separate sheet of paper.

Website URL:
Principles Yes No Comments/
Suggestions
1. Balance
Is the page shows the proper distribution of elements in
page composition, whether Symmetrical or
Asymmetrical?
Do you feel that the elements are compressed only on
one side of the page?
2. Emphasis
Is there an element of focal point to the design that leads
in getting your attention on that page?
Does the page have emphasized any of the texts,
graphics, illustrations, or animations in a design?
Is the element emphasized by a different color, texture,
size, or space?
3. Pattern, Repetition, and Rhythm
Are there any repeated elements in the web design?
Is the logo of the website repeated on every page of the
design?
Are all pages have the same transition effects?
Are the font type and color used consistently on every
page?
4. Alignment
Are the graphics and texts visibly aligned which makes
it readable?
Is the placement of individual or grouped images have
the same scale or size and is evenly distributed in space?
5. Hierarchy
Are the important elements stand out and are arranged
properly depending on its organization?
Are the headings, titles, and subtitles emphasized than
the body?
6. Contrast
Does the background and font color contrast each
other? (light to dark value or vice versa)
Are there any applications of contrast in font sizes with
the same type?
Are the header and footer of the page darker than the
content area?

10 CO_Q1_Empowerment Technologies SHS

Module 5
 7. Unity and Harmony
Principles Yes No Comments/
Suggestions
Does the page look disorganize?
Are all the principles applied properly with consistency
in the design as a whole?
Does the use of combined elements relate to the purpose
of the website and creates harmony in the design?
Does the website meet its purpose of providing a clear
message in all the pages of web design?
TOTAL 20 points

What I Have Learned

In this activity you need to gain access on the internet using your computer or
mobile phone. Browse the given websites listed below and evaluate the layout and
design of their pages. Grab and paste a screenshot of your chosen page and explain
the principles of design and layout applied. Do it in a separate sheet. (40 points)

1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. [Link]

Use this rubric for the evaluation of output.

Criteria Excellent Very Satisfactory Needs
(4) Satisfactory (2) Improvement
(3) (1)
1. Identification Principles There is 1 There are 2 There are 3 or
of Principles were principle not principles not more principles
applied correctly identified or identified or not identified
identified or shown on the shown on the or shown on
shown design but is design but is the design but
based on the obvious on the obvious on the is obvious on
printed or page. page. the page.
chosen page
2. Page Design Have chosen Have chosen a Have chosen a Have chosen
an excellent very satisfactory an example of
example of a satisfactory example of a a page where
page where example of a page where just a few of
all the page where only some of the principles
principles most of the the principles are observed.
are principles are are observed.
observed. observed.
TOTAL 8 points

11 CO_Q1_Empowerment Technologies SHS

Module 5
 Assessment

Directions: Choose the letter of the best answer. Write the chosen letter on a separate
sheet of paper.

1. Monochromatic uses one color in a design. Its advantage is to create balance

and to match the color in an artwork. However, this may lack energy and may
look monotonous. How will you use the monochromatic scheme to create
variations?
A. Use complementary colors
B. Adjust the saturation and value
C. Change the hue of the artwork or every element
D. Choose a design that is more suitable for the color scheme used

2. What is the purpose of creating a hierarchy in your design?

A. It gives consistency.
B. It adds visual weight.
C. To add beauty to the design.
D. Make the detail to stand out.

3. Which of the following refers to the plan of creating an idea through a

combination of texts, images, and other elements that are placed together
artistically?
A. Design C. Layout
B. Graphic D. Message

4. Which principle of design is when a designer arranges the elements or

text according to its context?
A. Balance C. Harmony
B. Emphasis D. Hierarchy

5. Which type of balance gives a mirror-like design that is proportionally equal

to the other side?
A. Asymmetrical C. Semi-Balance
B. Symmetrical D. Semi-Proportion

6. Contrast refers to the use of different or opposite elements such as sizes,

shapes, spaces, forms, colors, and values in design. Which of the designs
below show the least application of contrast in a design?

13 CO_Q1_Empowerment Technologies SHS

Module 5
 A. C.

B. D.

7. Which of the principles of graphics and layout refers to the proper

arrangement of elements, which gives a visual weight for the design?
A. Balance C. Pattern, Repetition and Rhythm
B. Emphasis D. Unity and Harmony

8. As a layout artist, we must know the details in arranging and accentuating

the most important terms by changing its size, thickness, and spaces so the
reader can navigate the highlight of the event easily. Which of the following
principles best describe the statement above?
A. Alignment C. Hierarchy
B. Contrast D. Pattern, Repetition and Rhythm

9. The following are the ways where you can emphasize the text if you are
working on a magazine except:
A. By changing the font color
B. By making the text bold or italic
C. By adding illustrations or images
D. By changing the font size, either bigger or smaller

10. What other elements of design can be repeated aside from color, header style,
and fonts?
A. Paper C. Statement
B. Size D. Word

11. Which font color is best to use if the background on your valentine card is
red?
A. Blue C. Violet
B. Green D. White

14 CO_Q1_Empowerment Technologies SHS

Module 5
 12. Every element of your design must show the correct placement of texts,
paragraphs, or images to make it formal and readable. Which of the following
alignment is not recommended in designing?
A. Center C. Left
B. Diagonal D. Right
13. Elements of design must work together and agree to its meaning, theme,
feeling, or mood. Which of the examples below show unity and harmony of
design?

A. B. C. D.

14. Refer to the illustration below. What is the best text alignment to use if your
background design covers an art on edge?
A. Center
B. Left
C. Justified
D. Right

15. The picture below shows an example of ________.

A. Balance
B. Emphasis
C. Hierarchy
D. Repetition

Additional Activities

The layout is the 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. Write a reflection based
on what you have learned on this topic. You may do any of the following methods to
express your thoughts. Choose any method of writing your reflection from the box
and write it on a piece of paper.

Acrostics Poem Slogan Spoken Poetry

15 CO_Q1_Empowerment Technologies SHS

Module 5
 Module 5
CO_Q1_Empowerment Technologies SHS 16
What I Know What's New Assessment
1. D 1. Pattern and 1. B
2. B Repetition 2. D
3. D 2. Balance 3. A
4. B 3. Contrast 4. D
5. B 4. Emphasis 5. B
6. D 5. Alignment 6. C
7. C 7. A
8. B 8. C
9. B 9. C
10.A 10.B
11.B 11.D
12.A 12.B
13.C 13.D
14.C 14.B
15.A 15.B
Answer Key