MIL PPT 03

Revised: June 10, 2017

MEDIA AND INFORMATION

LITERACY (MIL)
Introduction to MIL (Part 3):
Design Elements and Principles
Performance Task: Project
 LEARNING COMPETENCIES

Learners will be able to…

• Identify and explain basic design elements and
principles (SSHS);
• discuss how design elements and principles are
applied in posters (SSHS);
 LEARNING COMPETENCIES

Learners will be able to…

• create a text and visual digital poster which will be
a campaign for high school students to be a
responsible user and competent producer of media
information (SSHS); and
• produce and evaluate a creative text and visual
based presentation using design principle and
elements (MIL11/12TIM-IVb-6/ MIL11/12VIM-IVc-10)
 TOPIC OUTLINE

I- Introduction to Media and Information

Literacy
A. Design Elements and Principle
B. Performance Task: Project
1. Cooperative Learning - Digital Poster
Making
DESIGN ELEMENTS AND
PRINCIPLES
TYPOGRAPHY
 one of the
biggest
foundations of
design
 Type says a lot
and the way
you choose to
execute your
type says even
more.
TYPOGRAPHY

http://www.leffcommunications.com/2015/01/16/which-font/
Photo Credit:
http://www.pri
ntaholic.com/
how-to-
minimize-text-
on-posters/
Photo
Credit:
http://gr
aphicdes
ignjuncti
on.com/
2012/11/
41-
remarka
ble-
typograp
hy-
posters/
Photo Credit:
 http://www
.printaholi
c.com/11-
text-only-
posters/
 billandrusd
esign.com
Photo Credit: Magazine spread design by Benjamin Bours
Photo Credit: Magazine spread design by Benjamin Bours
Photo Credit: Magazine spread design by Benjamin Bours
 TYPOGRAPHY TIPS
 Kern your titles
 Make sure your body copy isn’t too
big or too small for the medium
you are printing onto
 Try to avoid using too many
typefaces at once
 TYPOGRAPHY TIPS
 Left-alignment is easiest to read
for large bodies of type
 If in doubt, print it out (you can
often pick up on awkward
typesetting much easier when it’s
on page)
LINE
 defined as
any linear
marks
 can
channel
certain
ideas too
Photo Credit:
Poster design by
Design By Day
A technique applied a lot in
photography is the use of ‘leading
lines’.

Photo Credit:
Photograph by
Anne
McKinnell
Source:
http://digital-
photography-
school.com/ho
w-to-use-
leading-lines-
Photo Credit:
Photograph by
Anne McKinnell
Source:
http://digital-
photography-
school.com/how-to-
use-leading-lines-
SCALE
 deliberate
sizing of
individual
elements
 help us
make
sense of
designs
 Scale
doesn’t
always
have to be
based on
realism.

Poster by Gabz Grzegorz

Domaradzki for the movie
Drive.
COLOR
 creates specific
moods,
atmospheres,
 channels
emotions and
each shade has
certain specific
connotations
associated with
it
 These chosen
colors
complement each
other gently to
create a calm,
elegant and
feminine design.
 Design by Smack
Bang Designs for
women’s skin
rejuvenation
 This branding
has chosen a
color palette
that sharply
contrasts,
creating a
much more
vibrant,
energetic and
playful
Photo Credit:
design.
Branding for juice brand
Frooti by Sagmeister &
Walsh.
REPETITION
 crucial
element
when it
comes to
branding
design
 keeps your
branding
consistent
 Repetition
can also
make
beautiful
one-off
designs.

Photo Credit:
Packaging design by
Nastya Chamkina that
uses repetition to
create a beautiful
pattern.
Photo Credit: Xoclad by Anagrama
NEGATIVE SPACE
 is the
‘space in-
between’,
the area
between
or around
other
elements
that form
Photo
Credit:
Animal
Graphics
by George
Bokhua
SYMMETRY
 We find
symmetrical
faces,
patterns and
designs
generally
more
attractive,
effective and
beautiful.
 This wedding
invitation
uses a high
degree of
symmetry,
but it it’s not
perfectly
mirrored.
Photo Credit:
Jarrid & Laura Wedding
Invitation by Nate Koehler
FRAMING
 can
enhance
or draw
attentio
n to
specific
element
s of your
design
Photo Credit:
Joe’s Coffee by Trevor
Finnegan
Photo Credit:
Poster Design via MyDesy
CONTRAST  is the
degree of
difference
between
two
elements of
your design
 It has a
great effect
on
readability
 This design
ensures
there’s
adequate
contrast
against the
type and
image.

Photo Credit:
Poster by
Jonathan
Correira
Photo
Credit:
Audible’s
landing
page
(website)
COMPOSITION
 refers to
the overall
arrangeme
nt of
elements
in your
design
Photo Credit:
email
newsletter for
Photo Credit:
Poster by Lab
B Design Office
DESIGN ELEMENTS AND
PRINCIPLES
 Evaluate the following
posters:
 AGREEMENT

Research “Design Elements and Principles” to

learn more about it.
Suggested website pages
https
://designschool.canva.com/design-elements-pri
nciples
/
https://designschool.canva.com/blog/visual-des
 PERFORMANCE TASK NO. 2 - 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
COOPERATIVE LEARNING
 Group of 3 students
 PERFORMANCE TASK NO. 2 - 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.digitalrabbitcellular.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.facebook.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-bo
oks_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.
 RUBRIC

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
 RUBRIC

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 and topic. Two the topic
make it easier most make it borrowed and/or three
to easier to graphics or more
understand. understand. have no borrowed
All borrowed One source graphics do
graphics borrowed citation. not have a
have a source graphics   source
citation. have no   citation.
source
citation.  
10 2
8 5
 RUBRIC

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
 RUBRIC

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
 TOPICS

 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
http://www.technologyrocksseriously.com/2014/10/before-you-post-think.html#.WSPui6kaaGI
http://www.classroomcapers.co.uk/online-safety-school-poster.html
Photo Credit:
https://store.accutrain.com/products/sfs002-pos-eng-1000
http
://www.hcpss.org/news-posts/2016/04/boe-reviews-policy-on-responsible-
use-of-technology-and-social-media
/
References
• Media and Information Literacy Curriculum Guide
by DepEd
• Media and Information Literacy by Boots C.
Liquigan, Diwa Learning Systems Inc.
• https
://designschool.canva.com/design-elements-prin
ciples
/
• http://rubistar.4teachers.org/index.php?screen=
ShowRubric&rubric_id=1125149
&
• http://
References
• https://designschool.canva.com/design-element
s-principles
/
• https://designschool.canva.com/blog/visual-desi
gn-composition
/
• http://digital-photography-school.com/how-to-u
se-leading-lines-for-better-compositions
/
• https://designshack.net/articles/typography/ser
if-vs-sans-serif-fonts-is-one-really-better-than-th
e-other