Name: ____________________________Week: (FINAL- Week 3 and 4) Dates: Feb.

22 –March 5, 2021

Subject: EMPOWERMENT TECHNOLOGY 12 Grade and Section: _____________

Topic: Imaging and Design for the Online Environment

Competency:

➢ Evaluate existing websites and online resources based on the principles of lay out,
graphic, and visual message design.
OBJECTIVES:
1. Identify the basic principles of graphics and lay out.

2. Create simple infographic using web tools

3. Evaluate existing websites and online resources based on the principles of layout, graphic, and visual
message design.
VALUES INTEGRATION:

This module was designed to provide you with fun and meaningful opportunities for guided and
independent learning at your own pace and time. You will be able to process the contents of the learning
resource while being an active learner, creative and critical thinker as well as responsible user and
competent producer of information and communication technology.

Discovery Activity:

Identify the correct answer of each statement.

________________1. This is achieved when all parts of a composition appear to have equal weight and
is stable.
________________2. It is obtained by repeating colors and shapes—all parts of a design.
________________3. It creates the center of interest in a design.
________________4. It is when lines, colors, or shapes are repeated over and over in a planned way.
________________5. It is when it catches the viewer’s attention. Usually the artist will make one area
stand out by contrasting it with other areas. The area could be different in size, color, texture, shape,
etc.

Brief Discussions:

This module will help you to master the Imaging and Design for the Online Environment. The scope of this
module permits it to be used in many different learning situations. The language used recognizes the
diverse vocabulary level of students. The lessons are arranged to follow the standard sequence of the
course. But the order in which you read them can be changed to correspond with the textbook you are
now using.

What is an Image?
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 3-dimensional, such as a statue or hologram. They may be
captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural
objects and phenomena, such as the human eye or water.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
1
Computer graphics are visual representations of data
made on a computer and is displayed on a computer
screen or monitor. They can be a single image or
series of images called video. They can be anything
on computers such as photographs, drawings or
movies that does not involve sound.

Layout is the arrangement of graphic elements on a page. An effective graphics

and layout contribute to the efficiency of website. Hence, you must begin
learning the basic principles of graphics and layout before creating your own
graphic design which you can integrate on 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 – The visual weight of objects, texture, colors, and space is evenly distributed on the screen. 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. Visual elements guide the viewer’s eyes around the screen.
3. Unity – the sense of oneness of the elements that creates balance and harmony. 4. Repetition – It
describes the consistent and balanced repetition of a design or element.
• An example is
infographics that
applied repetition to
the design. It
repeatedly used
callouts with identical
font size of inside
texts.

5. Proximity – It describes the organization and relationship of the elements included in the design.
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 may appear different in size, texture, shape or color to attract the
viewer’s attention. An area in the design that catches viewer’s attention. The area may appear different
in size, color, texture or shape.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
2
Infographics
Information graphics or infographics 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. Infographics make
complex data become more visually appealing 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 own 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 so as to give credibility to your data.
5. Branding/Shareability. Your infographic must be creative and innovative.
The following websites will help you create infographic:
1. http://piktochart.com/
2. https://www.canva.com/create/infographics
3. https://venggage.com
4. https://infogr.am/
5.www.canva.com

Image File Formats

Since the introduction of graphics on the web., file formats also became an important aspect in the design
stage. The most common file formats are JPEG, GIF, BMP, TIFF, and PNG.
1. JPEG – Joint Photographic Experts Group. It is the most popular image format used on the web. JPEG
are very ‘lossy’ files where much of the information about the image is lost from 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 is important
in the field.
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 transparencies.
4. TIFF – Tagged Image File Format. It is considered as a high-quality image format, where all color and
data information are stored. However, it produces a very large file size and take huge disk consumption.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
3
Developmental Activities:

Activity 1: EVALUATING GRAPHICS

Evaluate the following graphics based on the principles of graphics and layout. Write your answer inside
the box.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
4
 Activity 2: INFOGRAPHIC

Instruction: Promote your specific track/strand by making an infographic. In making your infographic you
must log on to www.canva.com or download the app to your mobile phone. Print your infographic in a
short size bond paper and paste it inside the box, or you may send it to [email protected]

PASTE YOUR INFOGRAPHIC HERE

Activity 3: WEBSITE DESIGNING

Instruction: In the first module, you started creating your website which is related to your Work
Immersion Experience by setting up your HOMEPAGE. In this module, continue to develop your website
by adding a content in the About US page. Don’t forget to apply the principles of web and elements when
creating your website as mentioned in the first module. Refer to this example website by Chastineath
Matas : www.Humanistadiarybychacha.weebly.com
Website Link:_____________________________________________________________________
RUBRICS:
CONTENT The site has a well-stated clear purpose and theme that is carried out 10%
throughout the site.

LAY OUT The Web site has an exceptionally attractive and usable layout. It is easy to 10%
locate all important elements. White space, graphic elements and/or
alignment are used effectively to organize material.

NAVIGATION Links for navigation are clearly labeled, consistently placed, allow the readers 5%
to easily move from a page to related pages (forward and back), and take the
reader
where s/he expects to go. A user does not become lost.

INTEREST The author has made an exceptional attempt to make the content of this Web 5%
site interesting to the people for whom it is intended.

TOTAL 30%

Assessment:

I. True or False: 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.
_________4. JPEG is considered to produce a high-quality image and does not remove any information
from the image.
_________5. GIF is best to use when working with full color photographic images.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
5
_________6. If you want to insert animation effects on your presentation, you will look for a PNG format
of an image.
_________7. Piktochart makes a complex data become more visually appealing to the average user.
_________8. Colors are said to be contrasting when there is a large difference in lightness and darkness.
_________9. 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.
_________10. 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.

II. ESSAY: Answer the following questions below.

11. What are the different principles of graphics and layout?

12. How is infographic beneficial in presenting data?

13. What are the different image file formats and when is the best time to use them?

14. Having explored the different examples of infographic over the internet, what do you think are the
limitations of using infographic to disseminate information?

15. Since most digital photos are publicly shared online, what do you think are the ways to protect your
images from unauthorized copying?

RESOURCES

Callo, E. R. (2018). Imaging and Design for the Online

Environment. In Empowerment Technologies (pp. 35-40). Quezon
City, Philippines: Sibs Publishing House.
Empowerment Technologies First Edition.(2016).Sampaloc
Manila:Rex Bookstore, Inc.
Tarun, I. M. (2016). Empowerment Technologies. Plaridel,
Bulacan: St. Andres Publishing House.

EMPOWERMENT TECHNOLOGY 12
Prepared By: Mr. Kevin M. Alibong
6