Empowerment

Technologies 12
3rd Quarter
Week 4

Development and Quality Assurance Team

Developer: Mark Rolyn P. Piedad, RPm

Team Leader: Rosalinda Urbiztondo
Asst Team Leader: Mirasol Taray
Learning Area Supervisor: Edna Trinidad

Illustration Credits:
Title Page: Marieto Cleben V. Lozada
Visual Cues: Ivin Mae M. Ambos
Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 Competency:

1. Evaluate existing websites and online resources based on the

principles of lay out, graphic, and visual message design
(CS_ICT11/12-ICTPT-Ie-f-6)
2. Use image manipulation techniques on existing images to change
or enhance their current state to communicate a message for a
specific purpose (CS_ICT11/12-ICTPT-Ie-f-7)
3. Create an original or derivative ICT content to effectively
communicate a visual message in an online environment related to
specific professional tracks (CS_ICT11/12-ICTPT-Ie-f-8)

Objectives: At the end of the week, you shall have

o determined the basic principles of layout, graphic, and visual

design;
o applied the basic principles of layout, graphic, and visual design;
and
o expressed the importance of good designs for effective
communication

Learner’s Tasks

Lesson Overview

Producing a high-quality design project, making a website, designing a

tarpaulin, and creating banners or logos, one must know and follow the basic
principles and design elements because people are particular about the visual
image. You see in the magazine how images are well-photographed to sell its
content. In the digital age, where people are always online, the products and
services that appeared in social media are visually appealing, which entice us
to like, follow, and subscribe.

BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

The elements and principles of design are components of a successful, beautiful

design. The design elements are the things or tools that make up a design, while
the design principles are what we do to those elements.

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
THE ELEMENTS OF DESIGNS

Lines are defined as any linear marks. It can channel

specific ideas too. Straight lines can elicit order and
neatness, wavy lines can make movements, and zig-
zagged lines can imply tension or excitement.

Scale is the calculated sizing of individual elements. It

helps make sense of designs and images. For example, if
you were to draw a dog next to a carabao, you would
probably draw a carabao bigger than the dog, which
would instantly help your viewers realize your drawing.

Color generates specific moods, atmospheres, channels

emotions, and each shade has specific particular
meanings correspond with it. In other words, color can
make or break your design.

Texture can be clean, sharp, rough, and sleek graphic

designs. It adds tactility, depth, and some pretty
impressive effects to your design.

Directions refer to the logical sequence and emphasize

how paying attention to how our eyes move over the
page.

Images Source: https://www.canva.com/learn/design-elements-principles/

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
THE PRINCIPLES OF DESIGN

Here are the guides in organizing and placing the materials to make art or
designs.

Balance is the equal distribution of objects' visual weight,

texture, colors, and space on the screen.

Repetition is a critical element in keeping the brand's

consistency and tying the items together. Think of Coca-
Cola, Google, and Apple's logo and the color scheme
used. Why is it easy to recall their brands? Because of
repetition.

Transparency or 'opacity' refers to how 'see-through' an

element is. The higher the opacity, the more noticeable
the element is, and the lower it is, the less visible the
element is.

Negative space is the space in-between,' the area

between or around other elements that form its shape.
The parts of the area left blank, whether that's white or
some different color, help create an overall image.

Hierarchy in design is a lot like hierarchy in culture. On

top of a hierarchical scale, we have the most important
things, the kings. These elements are to be 'dressed' the
most lavish and command the most attention.

Contrast refers to the level of difference between two

design elements of your design, such as black and white
or thick and thin. It also has a significant effect on
readability and legibility.

Images Source: https://www.canva.com/learn/design-elements-principles

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
INFOGRAPHICS

 Visual presentations of
information that use the
design element to show
content.
 Express complex
messages to improve the
viewers' understanding.
 Pictures, objects, and
images are utilized to
understand the message
you want to convey.
Image Source:
https://coolinfographics.com/blog/2011/5/11/student-bullying-
infographic.html
3 Elements of Infographics:

1. Visual Elements such as color-coding, graphics, and reference icons.

2. Content Elements such as time frames, statistics, and references; and
3. Knowledge Elements compose factual data.

Types of Infographics:

 Cause and Effect Infographics – infographics that display the cause and
effects of a particular topic.
 Chronological Infographics – typically used to express a topic in a step-by-
step manner.
 Quantitative Infographics – used to present statistics like bar graphs,
charts, among others.
 Directional Infographics – used arrows to direct the viewers' attention to
other parts of the infographic.
 Product Infographics – used to promote or market the products and
services.

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 MANIPULATING TEXT, GRAPHICS, AND IMAGES TO CREATE ICT CONTENT
INTENDED FOR AN ONLINE ENVIRONMENT
(Pages 27 - 31 of Learner’s Material)

As a matter of practice, you will be using the GIMP as free application software
to build publication-related materials.

While the GIMP29 is the tool of choice in this course, certain principles,
techniques, and skills can be demonstrated with similar devices (online or offline)
using the corresponding references below:

Topic Related Reference

Basic principles of graphics
http://www.makeuseof.com/tag/learn-principles-
and layout
design-preinstalled-templates/
Principles of visual
message design using http://www.designmantic.com/blog/infographics/15-
infographics golden-principles-of-visual-hierarchy/

Online file formats for

http://www.makeuseof.com/tag/know-when-to-use-
images and text
which-file-format-png-vs-jpg-doc-vs-pdf-mp3-vs-flac/
Principles and basic
techniques of image https://designschool.canva.com/blog/image-
manipulation enhancement/

Basic image manipulation

using offline or open
https://www.gimp.org/tutorials/GIMP_Quickies/
source software

Combining text, graphics,

and images https://www.gimp.org/tutorials/Floating_Logo/

Uploading, sharing, and

http://lifehacker.com/5808625/five-best-web-sites-for-
image hosting platforms
image-hosting-and-photo-sharing/

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 The following are sample publicity materials, the corresponding use-cases, and
related resources. They will be used as part of your course activities for this
section of the lesson:

Publicity
Use Case Related Reference
Materials
1.
http://www.gimp.org/tutorials/GIMP_Quickies/
Announcements 30
1. Poster
or flyers
2. https://docs.gimp.org/en/gimp-template-
dialog.html
For design of
http://www.wikihow.com/Make-Business-Cards-
2. Logo stationery, e.g.
with-GIMP
business card
To help organize
office supplies
or collection of
3. Labels http://registry.gimp.org/node/132
materials or for
return address in
envelopes
Visualizing
combination of http://www.grtuts.com/djourney/the-
4. Infographic
data and orangutan-infographic-project
narratives

TIPS: GRAPHIC EDITING TOOLS

1. Canva.com - An online tool that allows users to create designs for Web or
print: blog graphics, presentations, Facebook covers, flyers, posters,
invitations, etc.

2. GIMP or GNU Image Manipulation Program) is a free and open-source

raster graphics editor used for image retouching and editing, free-form
drawing, resizing, cropping, photomontages, converting between
different image formats, and more specialized tasks.

3. Piktochart – infographic design application that requires minimal effort to

produce beautiful, high-quality graphics.

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 Activity 1.
Direction: Match the pictures in Column A with the corresponding definitions in Column
B. Write the correct letter on another sheet of paper.

Column A Column B

1. The design element that creates emphasis/drama. A.

2. The element that gives depth to designs. B.

3. The principle that emphasizes adjustment of designs’ C.

balance via scale and composition.

4. The principle that makes create emphasis and makes D.

designs ‘pop.’

5. The principle that helps create clever images. E.

Activity 2.

Direction: Apply your knowledge of the basic principles of layout, graphic, and
visual design by making an infographic with the theme COVID-19 pandemic. Be
guided with the rubrics below (10 points).

Needs
Excellent (5) Very Good (4) Average (3) Improvement (2)
Presentation is neat
Presentation neat Presentation is Presentation is
and clear; color and
Visual and clean; color somewhat messy; color and
creative
Presentation and creative neat; some color and graphics are
graphics are used
and graphics are used; creative graphics are lacking; captions
exceptionally well;
Creativity captions are used; captions are are omitted or
captions are
readable. included. unreadable.
readable.
Infographic clearly Infographic Infographic conveys Infographic
conveys an conveys a conveys little
understanding of the understanding limited understanding or no
Content
issue; excellent use of of the issue; uses of the issue; attempts understanding of
appropriate appropriate to the issue; does not
symbolism; title is symbolism; title is use symbolism; title is use symbolism; title
Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 clear, clever, and clear and relevant unclear or irrelevant is missing.
relevant to topic. to topic. to
topic.

Activity 3.
Direction: Yale University School of Art's website is one of the 50 bad websites in
the year 2020, according to Rank by Seo. As a learner who knows the different
design elements and principles, what advice can you give to the website's
creator to improve its design?

RUBRICS FOR SCORING

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 Formative Test

Multiple Choice
Direction: Write only the letter of the correct answer on your answer sheet.

1. Which of the following elements of design generates specific moods,

atmospheres, channels emotions, and each shade has specific meanings?
A. Color C. Line
B. Direction D. Scale

2. Which idea explains about Balance?

A. equal distribution of objects' visual weight, texture, colors, and space
on the screen
B. difference between two design elements of your design
C. refers to how 'see-through' an element is
D. the area between or around other elements that form its shape

3. The following are elements of infographics except one;

A. Content C. Skill
B. Knowledge V. Visual

4. If you are to create a project design, what are the things that you need most
to consider?
A. Content C. Text message
B. Lay-out D. Visual Appearance

5 4 3 2 1
Present ideas Present ideas Present ideas that Present Present vague
that are that are are controlling recognizable ideas and little
showing showing strong and shows ideas and awareness on the
complex awareness on awareness on the some topic. It provides
awareness on the topic and it topic and it has awareness on little or no support
the topic and it has specific support with the topic. It on the lesson.
has substantial, and ample appropriate supports
specific and support. examples. limited and
meaningful related
support. examples.

5. Why is it important to produce a high-quality project design?

A. People are particular about the visual image.
B. To easily attract consumers
C. Uplift image of certain project
Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
 d. To pursue consumers on purpose

Answer Key

Activity 1.

1. B
2. A
3. D
4. E
5. C

Activity 2. Answers may vary

Activity 3. Answers may vary

References

Krum, R. (n.d.). Student Bullying infographic. Cool Infographics. Retrieved

February 19, 2021, from
https://coolinfographics.com/blog/2011/5/11/student-bullying-
infographic.html

Stribley, M. (n.d.). Design elements and principles. Canva. Retrieved February 19,
2021, from https://www.canva.com/learn/design-elements-principles/

Taheri, M. (2020, February 10). 10 Basic Elements of Design. Creative Market.

https://creativemarket.com/blog/10-basic-elements-of-design

Yuvienco, J. (2017). Empowerment Technologies Student Reader [E-book].

Department of Education-Bureau of Learning Resources (DepEd-BLR).
https://lrmds.deped.gov.ph/detail/12691

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.
Formative key answer (for teacher’s copy only)
1. A
2. A
3. C
4. D
5. A

Disclaimer: This Learning Activity Sheet (LAS) is based from the Self-Learning Modules, Learner’s Materials, Textbooks and Teaching Guides
released by DepEd Central Office. Furthermore, utilization of duly acknowledged external resources is purely of non-profit, for educational use
and constitutes fair use. All Rights Reserved.