MIL PPT 03

Revised: October 5, 2017

MED IA AN D
IN FO RMATIO N
I n t r oLITERACY
d u c t i o n (MIL)
to M
IL (Part 3):
Design Elements andPri
nciples
PerformanceTask: Proje
ct
Mr. Arniel Ping
St. Stephen’s High School
Manila, Philippines
 LEARNING
COMPETENCIES
Learners will be able to…
• discuss basic text and visual design
elements and principles (SSHS);
• identify design elements and principles
used in different text and visual media
(SSHS);
 LEARNING
COMPETENCIES
Learners will be able to…
• produce and evaluate a creative text based
presentation using design principle and
elements (MIL11/12TIM-IVb-6);
• produce and evaluate a creative visual based
presentation using design principle and
elements (MIL11/12VIM-IVc-10); and
 LEARNING
COMPETENCIES
Learners will be able to…
• create a text and visual digital poster which
will campaign for high school students to
be a responsible user and competent
producer of media and information (SSHS);
 TOPIC
OUTLINE
I- Introduction to Media and Information
Literacy
A. Design Elements and Principles
B. Performance Task: Project
1. Cooperative Learning - Digital Poster
Making
TEXT DESIGN PRINCIPLES
AND ELEMENTS
1.EMPHASIS
• importance or value given to a
part of the text-based content
1. EMPHASIS

• make the text bold

• Italicized
• have a heavier weight
• darkened or lightened
• enlarged
1. EMPHASIS

Source: https://tympanus.net/codrops/2011/10/08/25-examples-of-emphasis-applied-in-web-design/
1. EMPHASIS

Source: https://twitter.com/philredcross/status/706041623839244288
2. APPROPRIATENESS
• how fitting or suitable the text is
used for a specific audience,
purpose or event
2. APPRORIATENESS

THIS IS SERIF “Times New Roman”

THIS IS SAN SERIF “Arial”
THIS IS SCRIPT “Edwardian Script”
THIS IS DECORATIVE “Giddyup
Std”
2. APPRORIATENESS

Sources: http://bonfx.com/bad-typography/
2. APPRORIATENESS

Source: http://bonfx.com/bad-typography/
3. PROXIMITY
• how near or how far the text
elements from each other
• when two things are closely related,
bring them close together
3. PROXIMITY
4. ALIGNMENT
• how the text is positioned in the page
• left, center, right, or justified
4.
ALIGNMENT

Source: http://www.printwand.com/blog/basic-alignment-principles-in-graphic-design-with-examples
5. ORGANIZATION
• conscious effort to organize the different
text elements in a page
• ensures that while some text elements
are separated from each other, they are
still somehow connected with the rest
of the elements in the page
5. ORGANIZATION

Source:
MIL TG by CHED
5. ORGANIZATION

Source:
https://doc

ontent.wor
dpress.co

m/2015/04
/08/want-
a-good-
design-
remember
-to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
6. REPETITION
•consistency of elements
•unity of the entire design
•repeating some typefaces
within the page
6. REPETITION

Source:
https://doc

ontent.wor
dpress.co

m/2015/04
/08/want-
a-good-
design-
remember
-to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
7. CONTRAST
•creates visual interest
•two elements are different from
each other
CONTRAST: TWO ELEMENTS ARE DIFFERENT

 white text on a dark background

 large font with a small font
 serif and sans serif
 thin elements with wide elements
 cool color and warm color
7. CONTRAST

Source:
https://doc

ontent.wor
dpress.co

m/2015/04
/08/want-
a-good-
design-
remember
-to-c-r-a-p-
contrast-
repetition-
alignment-
proximity/
VISUAL DESIGN
ELEMENTS AND
PRINCIPLES
1.
CONSISTENCY
• Consistency of margins, typeface,
typestyle, and colors is necessary,
especially in slide presentations or
documents that are more than
one page.
1. CONSISTENCY

Source: https://www.pinterest.com/pin/28077197647114171/
1. CONSISTENCY

Source: https://gofishdigital.com/guide-design-consistency/
1. CONSISTENCY

Source: http://www.loopassociates.com/projects/brand-consistency-leading-to-millions-in-cost-reduction/
2. CENTER OF INTEREST
• an area that first attracts attention in a
composition
• important objects or elements in a
composition
• can be achieved by contrast of values,
more colors, and placement
2. CENTER OF INTEREST

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
2. CENTER OF INTEREST

Source: https://iactivedesign.wordpress.com/tag/graphic-design/
3. BALANCE
• visual equality in shape, form, value,
color, etc.
• can be symmetrical and evenly
balanced, or asymmetrical
and unevenly balanced
3. BALANCE

Source: http://operationwritehome.org/all-things-being-equal-balance-in-design/
3. BALANCE

Source:
http://en.koreaportal.com
/articles/7525/20160102/
one-punch-man-
anime.htm
3. BALANCE

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
4. HARMONY
• brings together a composition with
similar units
• notice how similar harmony is to
unity (some sources list both terms)
4. HARMONY

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
4. HARMONY

Source: https://www.johnlovett.com/design-overview
5. CONTRAST
• offers some change in value creating a visual
discord in a composition
• shows the difference between shapes and
can be used as a background to bring
objects out and forward in a design
• can also be used to create an area of
emphasis
5. CONTRAST

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
5. CONTRAST

Source:
https://www.desig
n
contest.com/blog/c
ontrast-in-design/
6. DIRECTIONAL MOVEMENT
• a visual flow through the composition
• can be the suggestion of motion in a
design as you move from object to
object by way of placement and
position
6. DIRECTIONAL MOVEMENT

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
6. DIRECTIONAL MOVEMENT

Source: https://webdesign.tutsplus.com/articles/visual-direction-in-web-design--webdesign-2545
6. DIRECTIONAL MOVEMENT

Source: https://webdesign.tutsplus.com/articles/visual-direction-in-web-design--webdesign-2545
7. RHYTHM
• a movement in which some
elements recur regularly
• like a dance, it will have a flow of
objects that will seem to be like
the beat of music
7. RHYTHM

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
7. RHYTHM

Source: https://www.hatchdesign.ca/principles-of-design-part-2-rhythm/
8. PERSPECTIVE
• created through the arrangement of
objects in two dimensional space
to
look like they appear in real life
• learned meaning of the relationship
between different objects seen in
space
8. PERSPECTIVE

Source: https://www.youtube.com/watch?v=phWtQ2odZh0
8. PERSPECTIVE

Source: http://www.studentartguide.com/articles/one-point-perspective-drawing
8. PERSPECTIVE

Source: https://tomadondesign.wordpress.com/two-point-perspective-drawing/
8. PERSPECTIVE

Source: https://piaart.wordpress.com/two-point-perspective/
8. PERSPECTIVE

Source: https://en.wikipedia.org/wiki/Taj_Mahal
8. PERSPECTIVE

Photo Credit: Christian Dascalu

Source: https://www.cyprus-photo.com/2015/02/model-photo-shoot-at-saint-raphael-beach/g
9. DOMINANCE
• gives interest, counteracting
confusion and monotony
• can be applied to one or more of
the elements to give emphasis
9. DOMINANCE

Source: https://oss.adm.ntu.edu.sg/wheng004/tag/design/
 FORMATIVE ASSESSMENT

DISCUSS TEXT AND VISUAL

DESIGN ELEMENTS AND
PRINCIPLES APPLIED IN THE
FOLLOWING MEDIA:
Source:
https://cscro6.wordpr
ess.com/arta-
corner/#jp-carousel-
2112
Source:
https://cscro6.wordpr
ess.com/arta-
corner/#jp-carousel-
2108
Source: http://opinion.inquirer.net/106642/editorial-cartoon-august-26-2017
Source: http:
//news.abs-
cbn.com/focus/multimedia/infographic/09/04/17/what-is-
japanese-encephalitis
Source:
http://cnnphilippines.
com/news/2017/02/01/
HIV-cases-increase-
2016-DOH.html
Source: https://www.tes.com/lessons/tmup-FOeYTHX1A/two-point-perspective-drawing
Source: http://www.pinoyexchange.com/forums/showthread.php?t=313065&page=7
Photo Credit: HUF MAGAZINE
Source: https://
www.pinterest.co.uk/pin/32
3625923206850410/
Source:
http://mymovieworl
d-
coolman0304.blogs

pot.com/2017/07/bi
rdshot-trailer-and-
poster-pista-
ng.html
Source: http://ar.melinterest.com/?r=site/search&category=MLA114368/
Source: http://www.thephotoargus.com/35-superb-examples-of-still-life-photography/
Source:
http://www.marklobo.com.au/news/category/melbourne-photog
Source:
http://www.inquirer.net/page-

one-single
Source: https://cinemabravo.com/2017/05/11/sigrid-andrea-bernardos-kita-kita-to-have-ph-premiere-at-
up-cine-adarna-on-may-12/
Source: https://www.demandgenreport.com/industry-topics/rich-
media/2906-the-power-of-visual-content-infographic
 PERFORMANCE TASK

DIGITAL POSTER MAKING

 PERFORMANCE TASK- DIGITAL POSTER MAKING

OBJECTIVES
 Create a digital poster which will
be a campaign for high school
students to be a responsible user
and competent producer of
media information
 PERFORMANCE TASK- DIGITAL POSTER MAKING

MESSAGE
 Be a responsible user and competent producer of
media information.
MEDIUM
Digital poster which will be shared on Facebook.
AUDIENCE
 High School Students (JHS and SHS)
 PERFORMANCE TASK NO. 2 - DIGITAL
POSTER MAKING
MATERIALS / TOOLS
 Web tool : Canva (www.canva.com)
 Photo editing software or
applications
 Computer
 Smartphone Camera
Photo Credit : https://
www.canva.com/ http://www.digita
lrabbitcellular.com/
PLEASE KEEP IN MIND.

 The selected digital poster will be

shared on Edmodo and
Facebook.
 The digital poster must focus on
the issue and not attack or
mentioned personalities. Use of
foul words are not allowed.
Photo Credit:
www.Edmodo.com
www.face
book.com
PLEASE KEEP IN MIND.

Cite credit for

borrowed materials
(i.e. image, design,
etc.)

Photo Credit:
http://www.freepik.com/free-photo/young- man-
holding-many-books_857159.htm
 PERFORMANCE TASK NO. 3 - DIGITAL
POSTER MAKING
Time
Date Venue Procedure
Allotted
Day 1 Classroom 1 period • Conceptualize your poster.
(Message and Design)
• Take pictures to be used for
the poster.
Day 2 Computer 2 periods • Create your digital poster
Laboratory using Canva. You’re allowed
to use additional tools.
• Submit the digital poster
in our Edmodo group.
 RUBRI
C
Criteria Excellent Good Fair NI
Content Message Message Message Message
 Be a is clear, is clear is clear but is unclear
responsible accurate, and question- and/ or
user and and accurate. able. inaccurate.
producer of strong.
media
information.

10 8 5 2
 RUBRI
C
Criteria Excellent Good Fair NI
Graphic All graphics All graphics All graphics Graphics do
 Relevance and are related to are related to relate to the not relate to
Citation the topic and the topic topic. Two the topic
make it easier and most borrowed and/or three
to make it graphics have or more
understand. easier to no source borrowed
All borrowed understand. citation. graphics do
graphics have One not have a
a source borrowed source
citation. graphics have citation.
no source
citation.
10 5 2
8
 RUBRI
C
Criteria Excellent Good Fair NI
Design and The poster The poster The poster The poster
Layout is excep- is is is poorly
tionally attractive acceptably designed
attractive in terms of attractive and the
in terms of design, though layout is
design, layout, and layout is cluttered.
layout, and neatness. cluttered.
neatness.

10 8 5 2
 RUBRI
C
Criteria Excellent Good Fair NI
Work Ethics Every Group Group Group
 Cooperation individual work is work is members
in the done done are not
group mostly by mostly by working
contributed two one during the
to the individuals. individual. designated
creation of time.
the digital
poster.
10 8 5 2
 TOPIC
S
Campaign Against Cyberbullying
Be Safe in Cyberspace
Media Message Analysis (Critical Thinking)
Think Before You Click
No to Plagiarism
Proper Behavior on the Internet (Netiquette)
(Note: Students may proposed a related topic
which will be approved by the teacher.)
 SAMPLE

DIGITAL POSTERS
Image Credit:
http://www.technology

rocksseriously.com/2
0 14/10/before-you-
post-
think.html#.WSPui6ka
aGI
Image Credit:
http://www.cl

assroomcape

rs.co.uk/onlin
e-safety-
school-
Photo Credit:
http://www.hcpss.org/news-posts/2016/04/boe-reviews-policy-on-responsible-use-of-
technology-and-social-media/
Photo Credit:
https://store.accutrain.
com/products/sfs002-
pos-eng-1000
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
• https://designschool.canva.com/design-
elements-principles/
• https://designschool.canva.com/blog/visual-
design-composition/
• http://digital-photography-school.com/how-to-

use-leading-lines-for-better-compositions/
• https://designshack.net/articles/typography/ser
if-vs-sans-serif-fonts-is-one-really-better-than-
the-other/
References
• http://www.tvdsb.ca/webpages/baxterc/res

ources.cfm?subpage=143055
• http://rubistar.4teachers.org/index.php?sc

reen=ShowRubric&rubric_id=1125149&
• http://teacherweb.com/ME/JALeonardMidd

leSchoolOldTown/Ecologywebquest/page