LESSON 6:

Imaging and Designing for Online Environment

LIKE to Engage

I. Motivation/Pre-Assessment
Pre-Test:
Multiple Choice: Write the letter of the correct answer on your answer sheet.
1. Balance is to even distribution; emphasis is to
a. Attracting c. design
b. Colors d. weight

2. Movement is to guiding the eye; rhythm is to create

a. Attraction c. visuals
b. Organization d. unity

3. These are-visual elements creating a sense of unity where they relate well with
one another.
a. Style c. variety
b. Proportion d. emphasis

4. It uses several design elements to draw a viewer's attention.

a. Style c. variety
b. Proportion d. emphasis

5. It makes complex data become more visually appealing to the average.

a. Tables c. infographics
b. Piktocharts d. slideshows

6. The following are common image file formats used in the Internet EXCEPT:
a. JPEG c. PNG
b. GIF d. BMP

7. A free image manipulation tool that has batch edit, viewer, and paper print
features
a. Picasa c. GIMP
b. PhotoScape d. IrfanView
 8. It is the process of editing multiple pictures at once using one setting.
a. batch editing c. paper printing
b. animation d. collage making

9. The file extension JPEG stands for

a. Joint Photographic Experts Group c. Jotter Prime Element Garnish
b. Japan Photo Excellence Guild d. None of the above

10. A file format typically used for screenshots.

a. PNG c. RAW
b. GIF d. JPEG

PIN the AIM

II. Objectives
At the end of the lesson, you should be able to :
 understand the basic principles of graphics and layout;
 create simple infographic using web tools;
 create simple infographic using web tools;
 easily manipulate images using simple image editor.

SUBSCRIBE to Acquire
III. Lesson Proper
Key terms Scan me to view
 Point, line and space Lesson 6 in PDF form.
 Shape
 Color
 Size
 Texture
 Principles of graphics and layout
 Infographics

What is the most visited website in the world?

No, it’s not Facebook nor Twitter.
Mission Statement:
“To organize the world’s information and make it
universally accessible and useful.”

On December 2014, Alexa.com, a renowned website for ranking web page

popularity, ranks this website number one in the world.
Why do you think Google ranks number one despite the countless search
engines and websites in the Internet?
POINT, LINE AND SPACE

 Point – simply a dot. It established position and acts

as a visual focus.

 Line – connecting two or more point. It begins by

extending one point towards a specific direction.

 Space – or area, refers to the surface that

act as a visual container, drawing
attention to other visual elements in a
layout.
SHAPE

It is an element of design which is a combination of lines, points, and space. It

helps to define the mood of the graphic design.

 Circle - Infinity, harmony and perfection. The inside suggests protection and
endurance.
 Square - Security and stability. It illustrates strong character, firmness and
protection.

 Triangle - Aggression and energy. It illustrates progression and direction.

Three basic types of shapes:

 Geometric – triangle, square, rectangle and circle
 Natural – animals and plants
 Abstract – icons, stylized figures and graphic illustrations

COLOR
All colors come from pure light. A color is produced by an object that reflects light.
Color can produce dramatic changes in a design when it is used to emphasize
things or create images.

Primary Colors: RGB (Red, Green and Blue)

SIZE
It refers to how large or small something is in a document. It helps to create layout
more attractive and organized.

TEXTURE
The look or feel of a surface. Printed patterns are a
type of visual texture.

Basic Principles of Graphics and Layout

1. Balance – the visual weight of

objects, texture, colors, and
space is evenly distributed on the
screen. Balance can be symmetric
and asymmetrical.

2. Emphasis – an area in the design

that may appear in different 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 or 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
Information graphics or infographics are
used to represent information, statistical data,
or knowledge in a graphical manner usually
in a creative way to attract the viewer’s
attention.
It makes complex data become more
visually appealing to an average user.

Elements of Infographics:
 Data - reliable, timely content
 Design - theme, color, font, readable
 Story - problem, clever, solution, message
 Shareability - virality, SEO, location, social
 Sample Infographics

Online Image File Formats

Name File Extension Use Supports Supports

Transparency animation
1. Joint .jpeg or .jpg Real-life No No
Photographics photographs,
Experts Group high
compression
2. Joint .gif Computer- Yes Yes
Photographics generated
Experts Group graphics

3. Portable .png Screenshots, Yes No

Network high
Graphics compatibility
Inserting, Uploading, and Sharing Photos over the Internet

In this case you need an image host. Image

hosts are websites specializing in storing
photographs.
These photographs can easily be embedded to a
web page or website.

Bandwidth Limits hinders an access to your

image once a certain bandwidth quota is reached
(measured in mb and gb).
This quota is reached when a lot of people
have loaded the image using their own computers on
a certain amount of time (usually by a monthly basis).

INSTA-practice

IV. Practice/Drills
Choose three examples (preferably online platform) of a well-designed page and
copy and paste on a word document. Likewise, choose three examples of a bad layout.
Be ready to explain your choices. Show a visual message (a combination of text and
image) such as a poster, an infographic, or a presentation.
After analyzing the visual image, improve it by manipulating the image and text.

Guide Questions:
1. Which examples would you consider as having a good layout? Explain your answer.
2. Which examples do not have a good layout? Why do you say so? What improvements
can be made to the layout?
3. Who do you think should be the target audience of such materials? Justify how the
objects, images, or text used in the layout cater or do not cater to the target audience.
 Assess your STATUS
V. Written Work
Situational Analysis
Direction: Read the following news items online. Identify the following: (a) the challenge
or problem, (b) the technology used to address the challenge, and (c) how the
technology empowered the individuals involved.

1. US News (Health)
“How Technology Helps Patients and Other Visitors Navigate Hospitals” by Ruben Castaneda
A B C

https://health.usnews.com/wellness/articles/2017-01-18/how-technology-helps-patients-and-other-visitors-
navigate-hospitals

https://www.forbes.com/sites/quickerbettertech/2017/01/22/google-maps-can-now-help-you-park-and-
other-small-business-tech-news-this-week/?sh=152ac32fe9d5

3. Times of Israel
“Israel tech helps US speed up passport procedures” by Shoshanna Solomon
A B C

https://www.timesofisrael.com/israel-tech-helps-us-speed-up-passport-procedures/
 4. Rappler.com
“Carpooling app helps Manila commuters create transport fixes” by Katerina Francisco
A B C

https://www.rappler.com/business/carpooling-wunder-metro-manila-transportation

5. Inquirer.net
“Facebook brings Digital Halo-Halo Hackathon to the Philippines” by Karl Angelica Ocampo
A B C

https://technology.inquirer.net/56108/facebook-brings-digital-halo-halo-hackathon-philippines

Rubric:
Criteria Exemplary Satisfactory Developing Beginning SCORE
9 – 10 6–8 4–5 1–3
The content for The content for The content for The content for
the research the research the research the research
work is work is fairly work is work was
thorough and written. adequately poorly written.
Content and well written. written.
Organization It is logically It is fairly It is somewhat It is
organized and organized and organized and unorganized
ideas are most ideas are some ideas and no ideas
developed. developed. are were
developed. developed.
9 – 10 6–8 4–5 1–3
All Most of the Few of the Only one
Completeness components components components component is
are present are are present and
and complete. present and present and complete.
complete. complete.
TOTAL _ / 20
 REDDIT to Demonstrate

VI. Performance Task

Create an infographic poster using www.piktochart.com or www.canva.com on
how to cope up with stress during the pandemic. Export your output as an image format
(.jpeg or .png)

Sample:
Rubric:

Criteria Exemplary Satisfactory Developing Beginning Score

9 – 10 6–8 4–5 1–3
The
The The
The infographic infographic is
infographic infographic is
includes all of missing several
includes the missing some
the required pieces of the
Content required of the required
information as required
information as information as
outlined on the information as
outlined on the outlined on the
given outlined on the
given given
assignment. given
assignment. assignment.
assignment.
9 – 10 6–8 4–5 1–3
Infographic is
Infographic is somewhat
Infographic is
formatted to formatted to
formatted to Infographic is
enhance the enhance
enhance the not formatted
maximum readability and
readability and to enhance
readability and audience
Presentation/ understanding. readability and
audience understanding.
Formatting Appropriate audience
understanding. Semi-
typeface, text understanding.
Exceptional use appropriate
effects, type Consistency in
of typeface, text typeface, text
size, and formatting is
effects, type effects, type
assigned color not evident.
size, and size and
are used.
assigned color. assigned color
are used.
5 4 2–3 1
The
The The
infographics The
infographics infographics
incorporates infographics
Design somewhat does not
principles of incorporates
incorporates incorporate
design in an principles of
principles of principles of
exceptional design.
design. design.
manner.
5 4 2–3 1
Graphic
Graphic
elements Graphic Graphic
elements
support and elements elements do
somewhat
Graphics enhance the support and not support
support and
message in an enhance the and enhance
enhance the
exceptional message. the message.
message.
manner.
Total: ____/30
 BOOKMARKS for the Soul

VII. Quotations/Bible Verses

“Creativity is allowing yourself to make mistakes,

Design is knowing which ones to keep”
– Scott Adams

SNAP of Key Points

VIII. Lesson Summary

The basic principles of graphics and layout include balance, emphasis, movement,
pattern, repetition and rhythm, proportion and variety.
Infographics is used to represent information, statistical data, or knowledge in a
graphical manner.

References:
Manila DepEd. (2020). K-12 Most Essential Learning Competencies with
Corresponding Codes [ebook]. Manila. Retrieved from https://lrmds.deped.gov.ph/
Rex publishing. (2019). Empowerment Technologies (2 nd ed.).