Lesson Plan in TLE
I. OBJECTIVES:
At the end of the lesson, the student should be able to:
a. Identify the different basic principles of graphics and layout;
b. Appreciate the basic principles of graphics and layout; and
c. Create a logo design for the centennial celebration applying the principles of design.
II. SUBJECT MATTER
Topic: Image and design for online environment
Subtopic: The three types of World Wide Web
Materials: PowerPoint Presentation, Projector, Laptop
Reference: Grade 11 Empowerment Technology Module
Method: Lecture- Discussion
III. PROCEDURE:
A. Preliminary activities
Prayer
Greetings
Checking of Attendance
Setting Standard
Motivation “MATH OF LAYOUT.”
B. Motivation
Direction: This activity is a like a decoding activity. The teacher will use number that will as
the code for each letter of the alphabet, starting from 1. Then, the teacher will flash number
codes that the students need to add to decode the word that they represent. The words that
they need to form are given below.
1. 3 + 15 + 14 + 20 + 18 + 1 + 19 + 20 =
2. 2 + 1 + 12 + 1 + 14 + 3 + 5 =
3. 18 + 8 + 25 + 20 + 8 + 13 =
4. 16 + 1 + 20 + 20 + 5 + 18 + 14 =
5. 7 + 18 + 1 + 16 + 8 + 9 + 3 + 19 =
Possible answer:
1. Contrast 4. Pattern
2. Balance 5. Graphics
3. Rhythm
C. Presenting of the lesson
Activity: JOIN ME TOGETHER
Direction: The teacher will divide the class into 3 then arrange the jigsaw puzzle
to reveal the picture. The first group able to post the picture on the board will be
declared winner. Discuss with your group about the picture by answering the
guide questions. Select a representative to share your ideas in one to two minutes.
Analysis:
Guide questions:
1. What do you think makes the picture creative?
2. What things are being used in the graphics design?
D. ABSTRACTION:
Imaging and Design for Online Environment
What is an Image
A physical likeness or representation of a person, animal, or thing, photographed, painted,
sculptured or otherwise made visible.
Definition of Graphic Design and Layout
Graphic design involves a combination of images and text used to
communicate information and messages to an audience. Graphic design is used to
produce billboards, brochures, logos, magazines, newspapers,
packaging, and websites.
Layout plays a significant role in a graphic design. Layout refers to the arrangement
of elements on a page usually referring to specific placement of image, text and style.
Understanding the layout of design is very important.
What is an Image
A physical likeness or
representation of
a person, animal, or thing,
photographed,
painted, sculptured or
otherwise made visible.
Definition of Graphic Design
and Layout
Graphic design involves a
combination of images
and text used to
communicate information
and messages to an
audience. Graphic design
is
used to produce
billboards, brochures,
logos, magazines,
newspapers,
packaging, and websites.
Layout plays a
significant role in a graphic
design. Layout refers to the
arrangement of elements on
a page usually referring to
specific placement
of image, text and style.
Understanding the layout of
design is very important.
The 6 Basic Principles of Graphic Design
1. Balance- The visual weight of objects, texture, colors, and space is evenly distributed
on the screen.
Two kind of Balance
a. Symmetrical Balance- occurs when equal weights are on equal sides of a composition,
balanced around a fulcrum or axis in the center.
b. Asymmetrical Balance-results from unequal visual weight on each side of the
composition. One side of the composition might contain a dominant element, which could
be balanced by a couple or more lesser focal points on the other side.
2. Emphasis- An area in the design that may appear different in size, texture, shape or
color to attract the viewer's attention.
3. Movement - visual elements guide the viewer’s eyes around the screen.
4. Pattern, Repetition, and Rhythm. These are the repeating visual element on an image
or layout to create unity in the layout or image. Rhythm is achieved when visual elements
create a sense of organized movement.
5. Proportion- Visual elements create a sense of unity where they relate well with one
another.
6. Variety – This uses several design elements to draw a viewer’s attention.
INFOGRAPHICS
INFOGRAPHICS
It also known as Information Graphics, these are used to represent information,
statistical data or knowledge in a graphical manner usually done in a creative way to attract
the viewer’s attention.
5 Principles in Making an Effective Infographic Design
1. Be Unique- Create an original and unique design to get the viewer’s
attention. The use of the colors, fonts, images, ad text the design should
be unique.
2. Make it Simple- Colors, layout, design should be used consistently.
3. Be Creative and Bold- be creative by the use of your imagination to create
something unique.
4. Less is More- minimizes the information that the viewers need to do to
understand the main idea of your infographics
5. The Importance of Getting It Across- Make sure you’re creating an
infographic that the content must be related to the title and understand
the message so that the viewers can easily navigate the information
without being confused.
E. APPLICATION:
Direction: The Teacher will divide the class into 3groups. Let them follow the
Directions. Based from the video presented, identify and explain the principles of design
which is/are manifested in the picture assigned to your group. Select a
representative to share youranswer in 1-2 minutes by performing either Reporting,
Acting and Jingle. Your presentation will be rated based on the criteria
provided.
F. EVALUATION:
Directions: Read each sentence carefully and circle the correct answer.
1. What do you call the graphical representation of information, data or
knowledge intended to present information quickly and clearly?
A. Informatics B. Information C. Infographics D. Informal
2. What principle of graphics and layout deals with the visual weight of
objects, texture, colors, and space is evenly distributed on the screen?
A. Balance B. Emphasis C. Movement D. Variety
3. Which among these is a free online app that allows you to create own
infographics and produce better information and graphics?
A. PiktoArt B. Piktograph C. Piktochart D. Pikto editor
4. Which among these occurs when equal weights to an output in graphics
design and layout were found to have equal sides of a composition and
showed balance around an axis in the center?
A. Symmetrical Balance C. Equal Balance
B. Asymmetrical Balance D. Fulcrum
5. What Piktochart app feature allows you to modify the color scheme of
your infographic?
A. Styles B. Tools C. Graphics D. Uploads
G. ASSIGNMENT:
Give the different types of online platform?
Prepared by: Checked By:
Melvin G. Sumalinog ANTONIO M. JAVIER
Adviser PRINCIPAL
