School: CITI GLOBAL COLLEGE - CABUYAO Grade Level: ELEVEN

Grades Applied –
11 to 12 Empowerment
Technologies
Lesson for
Exemplar Learning Professional
Teacher: KIMBERLY P. LOPEZ Area: Purposes
Strand:
Teaching Dates Semester: 1ST SEM
and Time: WEEK 7 Quarter: FIRST

Monday
I. OBJECTIVES

A. Content The learners demonstrate an understanding of:

Standards how to manipulate text, graphics, and images to create ICT content intended for an online environment
B. Performance The learners shall be able to:
Standards at the end of the 2-week period independently apply the techniques of image manipulation and graphic
design to create original or derivative ICT content from existing images, text and graphic elements for use in
specific professional tracks.
These may be in the form of, but not limited to:
1. Team/ athlete/ league recruitment posters (Sports)
2. Logo or crest for a community, school organization or barkada (Arts)
3. Labeling and manual of operation for tools and equipment (Tech-Voc)
4. Presentation of cafeteria patronage data (Business/ Academic)
C. Learning CS_ICT11/12-ICTPT-Ie-f-6
Competencies
The learners evaluate existing websites and online resources based on the principles of
and LC Code
layout, graphic, and visual message design.
D. Enabling
Competencies
E. Specific At the end of the lesson, learners are expected to:
Objectives
a. identify the basic principles of layout, graphics and visual message through
understanding the elements of creating infographics;
b. create a simple infographic using web tools; and
c. adapt the importance of creating infographic in the life of 21st century learners.

II. CONTENT
Basic principles of graphics and layout
Principles of visual message design using infographics
Online file formats for images and text
Principles and basic techniques of image manipulation
Basic image manipulation using offline or open-source software
Combining text, graphics, and images
Uploading, sharing, and image hosting platforms
III. LEARNING
RESOURCES
A. References
1. Teacher’s
Guide Pages K to 12 Senior High School Applied Track Subject – Empowerment Technologies (for the Strand)
May 2016 p.1
Innovative Training Works Inc.-Empowerment Technologies First Edition
2. Learner’s
Materials
Pages
3. Textbook
Pages
4. Additional
Materials Empowerment Technologies for Professional Tracks
from Learning Module 1
Resources
B. Other Laptop, Power point presentation, visual aids, Microsoft Word, HDMI
Learning
Resources and
Materials for
Development &
DLL Template: CGC_IMS
 Engagement
Activities

IV.
PROCEDURES
Introduction Preliminary Activity
Classroom Management
Classroom Routines
At the end of the lesson, learners are expected to:

a. identify the basic principles of layout, graphics and visual message through
understanding the elements of creating infographics;
b. create a simple infographic using web tools; and
c. adapt the importance of creating infographic in the life of 21st century learners.

Development Activity I. 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 paste your answer below the given
picture.

1. ______________ 2. ______________ 3. ______________

_ _ _

4. ______________ 5. ______________
_ _

Let’s Balance Contrast Emphasis

Hierarchy Alignment Pattern and Repetition

Explore!

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 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

DLL Template: CGC_IMS

 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

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.

DLL Template: CGC_IMS

 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.

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.

DLL Template: CGC_IMS

 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.

Infographics communicate complex data quickly and clearly, and they are considered to be
effective worldwide.

DLL Template: CGC_IMS

 INFOGRAPHICS
- Suitable for complex piece of information
that needs to be described quickly, precisely
and clearly.

- Infographics are used for signs, maps and

data presentations.

- Scientists, technical writers,

mathematicians, educators and statisticians
use infographics most of the time.

Infographics are used for the following reasons:

• to communicate a message;

• to present a lot of data or information in a way

that is compact and easy to comprehend; and

• to analyze data in order to discover cause-and

effect relationships.

Infographics are composed of three important

elements:
Visual Elements
✓ Color coding

✓ Graphics

✓ Reference icons

Content Elements
✓ Time frames

✓ Statistics

✓ References

Knowledge Elements
✓ Facts

GRAPHICS AND LAYOUT

Images
An image is a representation of the external form of a person or thing in art. Images
may be 2-dimensional, such as a photograph or screen display, or 3dimensional, such as a
statue or hologram. They may be captured by optical devices such as cameras, mirrors,
lenses, telescopes, microscopes, and natural objects and phenomena, such as the human
eye or water.
Graphics
Graphics are visual images or designs on some surface, such as a wall, canvas,
screen, paper, or stone to inform, illustrate, or entertain. It can be a photograph, a drawing, a
line art, graphical representations, and typography.
Basic Principles of Graphic Design
Principles of graphic design are set of guidelines that help a design achieve effective
composition. These basic principles aid in creating balance and stability for the piece of work.

DLL Template: CGC_IMS

 Image source: https://graphicdesign.stackexchange.com/questions/20044/is-there-a-worldwide-
applicable-color-emotion-chart

BALANCE means the equal distribution of weight. In layout, visual weight is determined by
the darkness or lightness, thickness of lines, and size. Balance is crucial to the success of
design. There are two kinds of balance:
Symmetrical Balance. The visual weight is
distributed evenly, either vertically or horizontally. You
can draw a line straight through the middle of the design,
and the visual balance would be evenly distributed.
Asymmetrical Balance. There is an artistic and different
intensity on one side of the page.

PROXIMITY is simply the process of ensuring related design elements are placed together.
Any unrelated items should be spaced apart. Close proximity indicates that items are
connected or have a relationship to each other and become one visual unit which helps to
organize or give structure to a layout (Smith, 2017).
White Space is the art of nothing. It is also known
as the negative space. It is the portion of a page left
unmarked: margins, gutters, and space between columns,
lines of type, graphics, figures, or objects drawn or
depicted.

Image source:
http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg

ALIGNMENT is simply the way visual elements are arranged so that they line up in some
way. There are two basic kinds of alignment; edge and center.
Edge alignment determines the placement of elements in relation to the edge of the
page or canvas. This can mean the elements are aligned to the left side or right side, but it
can also mean they are aligned to the top or bottom of the page, so long as it uses an edge
to organize everything.
Center alignment aligns all the elements so that an invisible, central line on the page
will always be in the center of the elements.

DLL Template: CGC_IMS

 REPETITION. The process of repeating elements throughout
a design to give a unified look. Repetition goes with
consistency of your design on font, font size, patterns, and
colors.
Image source:

https://www.pinterest.ph/pin/500

532946059674099/
CONTRAST is the divergence of opposing elements (opposite colors on the color wheel, or
value light / dark, or direction – horizontal / vertical). Contrast allows us to emphasize or
highlight key elements in your design.

Image Manipulation refers to a process of bringing changes to a digitized image for

transforming it to a desired image. The changes are made possible by resorting to image
processing. Image manipulation is utilized to create magazine covers and albums from
photographs. A single photograph may be modified to suit the requirement, or several
photographs can be combined to form a collage. Currently, there are numerous software
applications ranging from professional applications to basic imaging software
(https://www.yundle.com/termsdefinitions/i/image-manipulation).
Principles and Basic Techniques of Image Manipulation
CROPPING. Cutting parts away to remove distracting or irrelevant elements

Image source: https://photo-works.net/photo-cropping-techniques.php

COLOR BALANCE. The ambience and the tone of light of the picture
(ex. Warm or cool light)

Image source: https://dragon-roost-island.weebly.com/photo-vocabulary.html

BRIGHTNESS AND CONTRAST. One of the most basic techniques in image editing, making
the image darker or lighter.

Image source: https://pippin.gimp.org/image-processing/chap_point.html

FILTERS. Making the image look sketched, grainy, classic black and white or even let it have
neon colors. This gives your image a twist from its original look.

DLL Template: CGC_IMS

 Image source: https://www.cosmo.ph/entertainment/how-to-choose-the-best-instagram-filter

CHANGING THE BACKGROUND. Adding background to make your image stand out.

Image source: http://photoshopcctutorial.com/adobe-photoshop-7-0-tutorial-how-to-change-

orremovebackground/

REMOVING THE COLOR. Removing certain colors in your image or desaturating the color
of the image.

COMBINING TEXT, GRAPHICS AND IMAGE. Adding multiple in your layout.

Image source: https://apkhubs.com/en/phonto-texct-on-photos-

apk
Sample Image Manipulation

Engagement Activity II.

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

DLL Template: CGC_IMS

 question. Add comments or suggestions for a detailed description in each number. Write
your answer in a separate sheet of paper.

Website URL: www.citiglobalcollege.edu.ph

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?

DLL Template: CGC_IMS

 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?
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

Assimilation Quiz Time!

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

DLL Template: CGC_IMS

 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?
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

Assignment: Using Canva, create your own infographics by applying the basic principles of
graphic and layout. Print it and pass it to your teacher. You can choose from the topic below.
(20 points)
Topics:
1) Evolution of the selfie obsessed generation
2) Services offered by CITI Global College Senior High School
3) How to love yourself
4) Benefits of ICT to 21st Century Learners
5) Developing knowledge about ICT

Criteria 4 3 2 1
Creativity The work The work The work The work
and demonstrates demonstrates good demonstrates demonstrates
Originality superior creativity and use of creativity and average use of little evidence of
Weight: (x2) originality in the originality in the creativity and creativity and
selection of the selection of the originality in the originality in the
visuals. visuals. selection of the selection of the
visuals. visuals.
Composition Artwork exhibits Artwork exhibits Composition Ideas are
and Design masterful execution of good composition demonstrates limited expressed with no
Weight: (x1) balance, emphasis, and knowledge of design unity in
pattern, unity, color, design elements. elements. composition.
and contrast.
DLL Template: CGC_IMS
 Required All required elements 4 of the requirements Only 2 of the Only 1 of the
elements are present are met. requirements is met. requirements is
Weight: (x2) met. Project is
unacceptable.
V. REFLECTION
A. No. of learners
who earned 75% on
the formative
assessment
B. No. of Learners
who require
additional activities
for remediation
C. No. of learners
who have caught up
with the lesson.
D. No. of learners
who continue to
require remediation
E. Which of my
teaching strategies
worked well? Why
did these work?
F. What difficulties
did I encounter which
my principal or
supervisor can help
me solve?

Prepared by: Checked by: Noted by:

Kimberly P. Lopez ____________________________ ______________________

Subject Teacher Department Head Principal

DLL Template: CGC_IMS