Senior High School

Empowerment Technology
Learning Activity Sheet 6
Quarter 1 – MELC 6
Imaging and Design for the Online
Environment
Part I

REGION VI – WESTERN VISAYAS

Empowerment Technology
Activity Sheet No. 6
First Edition, 2021

Published in the Philippines.

By the Department of Education
Region 6 – Western Visayas

Republic Act 8293, section 176 states that: No copyright shall subsist in any
work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for the
exploitation of such work for a profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

This Learning Activity Sheet is developed by DepEd Region 6 – Western

Visayas.

ALL RIGHTS RESERVED. No part of this learning resource may be

reproduced or transmitted in any form or by any means electronic or mechanical
without written permission from the DepEd Regional Office 6 – Western Visayas.

Development Team of Empowerment Technology Activity Sheet

Writer: Mansueto Jorge P. Medina

Illustrators: Anthony M. Cordilla
Editors: Vincent J. Castro
Lorgin G. Nuniala
Roslyn Q. Maceda
Sol Grace O. Timola
Layout Artist: Annamor M. Eleccion, Llaine Grace B. Coronel,
Jose Karrlo G. Barro
Schools Division Quality Assurance Team:
Edna T. Arbon
Julie Ann G. Vegilio
Sol Grace O. Timola
Division of Sipalay City Management Team:
Renato T. Ballesteros
Ma. Teresa P. Geroso
Ronie T. Tababa
Annamor M. Eleccion
Sol Grace O. Timola
Regional Management Team:
Ramir B. Uytico
Pedro T. Escobarte
Elena P. Gonzaga
Donald T. Genine
April C. Velez
Gorgonio A. Batilaran, Jr.

2
Introductory Message
Welcome to Empowerment Technology!

The Learning Activity Sheet is a product of the collaborative efforts of the

Schools Division of Sipalay City and DepEd Regional Office VI - Western Visayas
through the Curriculum and Learning Management Division (CLMD). This is
developed to guide the learning facilitators (teachers, parents, and responsible
adults) in helping the learners meet the standards set by the K to 12 Basic Education
Curriculum.

The Learning Activity Sheet is self-directed instructional material aimed to

guide the learners in accomplishing activities at their own pace and time using the
contextualized resources in the community. This will also assist the learners in
acquiring lifelong learning skills, knowledge, and attitudes for productivity and
employment.

For learning facilitator:

The Empowerment Technology Activity Sheet will help you facilitate the
teaching-learning activities specified in each Most Essential Learning Competency
(MELC) with minimal or no face-to-face encounter between you and the learner. This
will be made available to the learners with references/links to ease the independent
learning.

For the learner:

The Empowerment Technology Activity Sheet is developed to help you

continue learning even if you are not in school. This learning material provides you
with meaningful and engaging activities for independent learning. Being an active
learner, carefully read and understand the instructions then perform the activities and
answer the assessments. This will be returned to your facilitator on the agreed
schedule.

3
 Quarter 1, Week 5

Learning Activity Sheet (LAS) No. 6

Name of Learner:
__________________________________________________________ Grade and
Section: ___________________________Date: _________________________

EMPOWERMENT TECHNOLOGY ACTIVITY SHEET

Imaging and Design for the Online Environment Part I

I. Learning Competency (MELC)

Evaluate existing websites and online resources based on the principles of

layout, graphic, and visual message design. (CS_ICT11/12-ICTPT-Ie-f-6)

II. Background Information for Learners

Visual representations of data made on a computer and are being displayed

on a computer screen or monitor are called Computer Graphics. They can be a
single image or series of images called video or anything on computers such as
photographs, drawings, or movies that do not involve sound.

The layout is the arrangement of graphic elements on a page. The efficiency

of a website is being affected by effective graphics and layout. Thus, you must
begin learning the basic principles of graphics and layout before creating your
graphic design which you can integrate into the online environment.

Principles of Graphics and Layout

Across disciplines, the following principles are followed to standardized image

creation and manipulation using any graphics software. It will help you create
layouts and design web pages compliant with protocols.

1. Balance – It describes the placement of elements of equal weight on the

page. The three types of balance are symmetrical, asymmetrical, and radial.
2. Movement – It describes the flow of elements on the page. Visual elements
guide the viewers’ eyes around the page.
3. Unity – the sense of oneness of the elements that create balance and
harmony.
4. Repetition – It describes the consistent and balanced repetition of a design
or element.
5. Proximity – It describes the organization and relationship of the elements
included in the design.

4
 6. Contrast – it is the combination of the opposing characteristics of an element
like color, size, thickness, and among others. It allows emphasis on key
elements.

7. Emphasis - An area in the design that catches the viewer’s attention. The
area may appear different in size, color, texture, or shape.

Infographics

Information graphics or popularly known as infographics are used to represent

information, statistical data, or knowledge in a graphical manner. It is usually
done creatively and uniquely to attract the viewer’s attention. Infographics make
complex or difficult data more visually appealing and user-friendly to an average
user.

An infographic should have the following characteristics:

1. Thesis/Story.
The subject and the main idea of your infographic must be clear.
2. Data.
Data must be well-organized and supports the main idea.
3. Simplicity.
(color, style, and illustrations). You must be able to create your palette; your style
must be able to attract readers so as not to make your infographic full of text. Do
not use stock photos.
4. Sources.
You must cite your sources to give credibility to your data.
5. Branding/Shareability.
Your infographic must be creative and innovative.

Image File Formats

File formats also became an important aspect in the design stage when
graphics was introduced on the web. The most common file formats which are an
important aspect in designing are JPEG, GIF, BMP, TIFF, and PNG.

1. JPEG – Joint Photographic Experts Group. JPEG is the most popular

image format used on the web. It is a very ‘lossy’ file where much of the
information about the image is lost from the original state to keep the image file
size small. JPEG files are used mostly by photographers, artists, graphic
designers, medical imaging specialists, art historians, and other groups because
image quality and color fidelity are important in the field.

5
 2. GIF – Graphics Interchange Format. It is limited to the 8-bit palette with
only 256 colors. GIF is best used for diagrams, cartoons, and logos which use few
colors and is the chosen format for animation effects.
3. PNG – Portable Network Graphic. This file format is best with line art, text,
and logo. It is capable to display transparency.
4. TIFF – Tagged Image File Format. It is considered a high-quality image
format, where all color and data information are stored. However, it produces a
very large file size and takes huge disk consumption.

III. Accompanying DepEd Textbook and Educational Sites

Callo, E. R. 2018. "Imaging and Design for the Online Environment." In Empowerment
Technologies, by E. R. Callo, 35-40. Quezon City, Philippines: Sibs Publishing House.

Yuvienco, Joel C. and Santos, Mika Ira L. 2016. Empowerment Technologies for the Technical-
Vocational-Livelihood Track. Ground Floor Bonifacio Building, DepEd Complex.

IV. Activity Proper

Activity 1: Infographics

Directions: Promote your specific track/strand by making an infographic. In

making your infographic you must log on to www.piktockart.com. Print your
infographic in a short-size bond paper or you may send it to your teacher thru
messenger. You may use your Facebook or Gmail account or create your own
Piktochart account. For those with no internet connection, you may use any offline
editor.

Activity 2: True or False

Directions: Write true if the statement is correct and false if it is incorrect. Use a
separate sheet of paper for your answer.
__________________1. For image composition to be effective, it must have its
elements in equal weight across the frame.

__________________2. You can use any color combination when composing

your design.

__________________3. Any sources can be included in your infographic.

6
__________________4. JPEG is considered to produce a high-quality image
and does not remove any information from the image.

__________________5. It is best to use GIF format for cartoonish images.

__________________6. Asymmetrical is a type of visual balance in which two

sides of a composition are different yet balanced.

__________________7. GIF is best to use when working with full color

photographic images.

__________________8. If you want to insert animation effects on your

presentation, you will look for a PNG format of an image.

__________________9. Balance is to even distribution; emphasis is to be

attracting.

__________________10. Piktochart makes a complex data become more

visually appealing to the average user.

__________________11. Symmetrical, asymmetrical, and radial are types of

contrast.

__________________12. An infographic should be simple.

__________________13. Colors are said to be contrasting when there is a

large difference in lightness and darkness.

__________________14. A focal point is another way of saying center of

interest. The center of interest is usually the most
important part of a work of art.

__________________15. The term emphasis may be used for an area that has
contrasting sizes, shapes, colors, or another distinctive
feature to catch the viewer's attention.

7
 V. Reflection

1. In what ways can this activity help you in evaluating existing websites and online
resources based on the principles of layout, graphic, and visual message
design? _____________________________________________________________________
_______________________________________________________________
_______________________________________________________________

2. What part of the activity did you find easy/difficult?

_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

3. How will your Teacher / Learning Facilitator help in improving your task?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

VI. Answer Key

Activity 1:
Answer may vary

Activity 2:

15. True
14.True
13.True
12.True
1 .False
10.False
9.True
8.False
7.False
6.True
5.True
4.False
3.False
2.False
1.True