MEDIA AND

INFORMATIO
N LITERACY

VISUAL
INFORMATION AND
MEDIA
Definition (PART 1)
Purpose and
Importance Types and Mr. Arniel V. Ping
Formats Visual Design St. Stephen’s High
Elements School Manila,
Philippines
LEARNERS WILL BE ABLE
TO…
define visual information and visual
media (SSHS);
discuss the purpose and importance of
visual media (SSHS);
describe the different dimensions of visual
information and media (MIL-11/12VIM-IVc-
7);

LEARNING COMPETENCIES
LEARNERS WILL BE ABLE
TO…
discuss the elements of visual design (SSHS);

comprehend how visual information and

media is/are formally and informally produced,
organized and disseminated (MIL11/12-VIM-
IVc- 8); and

LEARNING
COMPETENCIES
LEARNERS WILL BE ABLE
TO…
evaluate the reliability and validity of visual
information and media and its/ their
sources using selection criteria (MIL11/12-
VIM-IVc-9).

LEARNING
COMPETENCIES
I- VISUAL INFORMATION AND
MEDIA
A. Definition
B. Purposeand
Importance
C. Types and Formats
D. Visual Design Elements
Visual
Storytelling
THE HYBRID GRAPHIC
NOVEL
SOURCES:
 https://
www.dtelepathy.com/blog/inspiration/30-compelling-examples-of-visual-
storytelling-on-the-web
 http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
Source: http://graphicnovel-hybrid4.peugeot.com/start.html
CLASS
ACTIVITY
1. Write the story of the graphic novel in
your notebook. You are not allowed
to talk to your classmates. (5
minutes)

FORMATIVE
ASSESSMENT
CLASS
DISCUSSION
1. What is the story in this graphic
novel?
2. Who is the main character in the
story? How did you know?
3. Whatdo you know about the
main character? How did you
know it?
 EXAMPLES OF VISUAL
VISUAL •MEDIA
Photography
INFORMATIO • Video
N • Screenshots
• Infographics
• Data Visualization
(charts and graphs)
VISUAL • Comic Strips/Cartoons
• Memes
MEDIA
• Visual Note-Taking
PURPOSE OF VISUAL
INFORMATION

gain
attention
create meaning
facilitate
retention
PURPOSE OF VISUAL
INFORMATION

Source:
http://www.comoxvalleyrd.ca/EN/meta/whats-new/news-archives/2015/pra
ctice-how-to-drop-
cover-and-hold-on-during-shakeout-bc-day.html
The Power Of Visual Content BY DemandGen Report
(2014)
Source: https://
Source:
https://postcro

n.com/en/blo
g
/visual-
content-
strategies-
for- social-
networks/
THE POWER OF VISUAL CONTENT
MARKETING
COMMON VISUAL MEDIA FILE
TYPES

KNOW YOUR IMAGE FORMAT

HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-FORMATS-MEGA-
CHEAT-SHEETS/
KNOW YOUR IMAGE
FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-
FORMATS-MEGA-CHEAT-SHEETS/
KNOW YOUR IMAGE
FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-
FORMATS-MEGA-CHEAT-SHEETS/
KNOW YOUR IMAGE
FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-
FORMATS-MEGA-CHEAT-SHEETS/
KNOW YOUR IMAGE
FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-
FORMATS-MEGA-CHEAT-SHEETS/
KNOW YOUR IMAGE
FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-
FORMATS-MEGA-CHEAT-SHEETS/
ELEMENTS OF VISUAL
DESIGN
VISUAL DESIGN ELEMENTS
 P.123 MIL TEACHING GUIDE BY CHED

THE BUILDING BLOCKS OF VISUAL DESIGN BY TEO SIANG

 https://www
.interaction-design.org/literature/article/the-building-blocks-of-visual-design
LIN
E
describes a shape or
outline
create texture and can be thick or
thin
may be actual, implied, vertical,
horizontal, diagonal, or contour
lines DESIGN
VISUAL
ELEMENTS
LIN
E

Source:
https://www.interaction-
design.org/literature/arti
cle
/the-building-blocks-of-
visual-design
LIN
E
Author/Copyright
holder: Teo Yu Siang
and Interaction Design
Foundation.
Copyright terms and
licence: CC BY-NC-SA
3.0

Source:
https://www.interaction-
design.org/literature/arti
cle/the-building-
blocks- of-visual-
design
SHAP
E
a geometric or organic area that
stands out from the space next to or
around it, or because of differences in
value, color, or texture

VISUAL DESIGN
ELEMENTS
SHAP
E

Source: https://
www.tes.com/lessons/AML9tkm0rSdgfA/organic-versus-geometric
SHAP
E

Source: http://vanseodesign.com/web-design/form-surface-volume/
VALU
E
the degree of light and dark in a
design
contrast between black and white and
all the tones in between

VISUAL DESIGN
ELEMENTS
VALU
E

Source: https://
www.sitepoint.com/principles-of-design-value/
TEXTUR
E
way a surface feels or is perceived to
feel
illusion of the surfaces peaks and
valleys, resulting in a feeling of
smoothness or roughness in objects
VISUAL DESIGN
ELEMENTS
TEXTUR
E

No
Texture

With
Texture
TEXTUR
E

Source: https://ww
w.pinterest.co
m/pin/43185305175390
09
79/
TEXTUR
E

Source:
http://www.sibleyfineart.c

om/glyscreen_oe.htm?
gly
/b23--bearded-collie.htm
TEXTUR
E

Source: http://opinion.inquirer.net/105207/editorial-cartoon-june-29-2017
COLO
R
determined by its hue (name of
color), intensity (purity of the hue),
and value (lightness or darkness of
hue)
used for emphasis, or may
elicit emotions from viewers
VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED
Source:
https://www.
creativeboom
.com/resourc
es/essential-
colour-
guide-for-
designers-
understandin
g-colour-
theory/
Source:
http://www.d
ailyinfographi
c.com/logos-
a-look-at-
the-meaning-
in-colors-
infographic
FOR
M
 a figure having volume and thickness
an illusion of a 3-dimensional object can be
implied with the use of light and shading
can be viewed from many angles

VISUAL DESIGN
ELEMENTS
FOR
M

Source:
http://visu
ala
SHAP FOR rtspdsf.blogs

E M pot.com/201
2/04/form-
or-
volume.html
FORM IS A SHAPE IN THREE
DIMENSIONS
FOR
M

Source:
http://visual
artspdsf.blo
gspot.com/
2012/04/for
m-or-
volume.htm
l
FORMATIVE
ASSESSMENT
RECITATION
Source: http://www.gmanetwork.com/news/newstv/content/281695/news-tv-fan-favorite-i-juander-moves-
to-wednesdays-8-pm/story/
Source:
http://www.
gmanetwork
.com/news/
newstv/cont
ent/511650/
infographic-
ligtas-
lindol-
tips/story/
Source:
http://entertai

nment.abs-
cbn.com/tv/sh

ows/angprobi

nsyano/photo
s/albums/764
2516-ligtas-
tips-paalala-
Source:
http://portal.d

oh.gov.ph/con
tent/how-
wash-hands-
properly.html
Source: https://thebeatdfw.com/2940220/bruno-mars-24k-magic-world-tour-2017-enter-to-win/
Source: http://opinion.inquirer.net/106769/editorial-cartoon-august-31-2017
Source:
http:/ /ww
w.
sshs.edu.ph
/
REFERENCES
 Media and Information Literacy
Curriculum Guide by DepEd
 Media and Information Literacy
Teaching Guide by CHED
 Media and Information Literacy by Boots
C. Liquigan, Diwa Learning Systems Inc.
REFERENCES
The Building Blocks of Visual Design by TEO
SIANG
 https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design

Digital Image File Types Explained

 http://users.wfu.edu/matthews/misc/graphics/formats/formats.html

Know Your Image Format

 https://makeawebsitehub.com/image-formats-mega-cheat-sheets/