Le G11 Week-7-Emtech
Le G11 Week-7-Emtech
Le G11 Week-7-Emtech
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
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.
4. ______________ 5. ______________
_ _
Explore!
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
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
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.
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.
✓ Graphics
✓ Reference icons
Content Elements
✓ Time frames
✓ Statistics
✓ References
Knowledge Elements
✓ Facts
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.
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.
COLOR BALANCE. The ambience and the tone of light of the picture
(ex. Warm or cool light)
BRIGHTNESS AND CONTRAST. One of the most basic techniques in image editing, making
the image darker or lighter.
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.
CHANGING THE BACKGROUND. Adding background to make your image stand out.
REMOVING THE COLOR. Removing certain colors in your image or desaturating the color
of the image.
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
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
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
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?