Ähnlich wie Media and Information Literacy (MIL) 1. Introduction to Media and Information Literacy (Part 3) Performance Task (Project)- Digital Poster (20)
Media and Information Literacy (MIL) 1. Introduction to Media and Information Literacy (Part 3) Performance Task (Project)- Digital Poster
1. MEDIA AND INFORMATION
LITERACY (MIL)
Mr. Arniel Ping
St. Stephen’s High School
Manila, Philippines
Introduction to MIL (Part 3):
Design Elements and Principles
Performance Task: Project
MIL PPT 03
Revised: October 5, 2017
2. 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);
3. 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
4. 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);
5. TOPIC OUTLINE
I- Introduction to Media and Information
Literacy
A. Design Elements and Principles
B. Performance Task: Project
1. Cooperative Learning - Digital Poster
Making
19. 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
25. 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
CONTRAST: TWO ELEMENTS ARE DIFFERENT
28. 1.CONSISTENCY
• Consistency of margins, typeface,
typestyle, and colors is necessary,
especially in slide presentations or
documents that are more than one
page.
32. 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
42. 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
45. 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
49. 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
52. 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
90. 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- DIGITAL POSTER MAKING
91. 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- DIGITAL POSTER MAKING
92. MATERIALS / TOOLS
Web tool : Canva (www.canva.com)
Photo editing software or applications
Computer
Smartphone Camera
PERFORMANCE TASK NO. 2 - DIGITAL POSTER
MAKING
Photo Credit :
https://www.canva.com/
http://www.digitalrabbitcellular.com/
93. 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
94. 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
95. Date Venue
Time
Allotted
Procedure
Day 1 Classroom 1 period • Conceptualize your poster.
(Message and Design)
• Take pictures to be used for
the poster.
Day 2 Computer
Laboratory
2 periods • Create your digital poster
using Canva. You’re allowed
to use additional tools.
• Submit the digital poster in
our Edmodo group.
PERFORMANCE TASK NO. 3 - DIGITAL POSTER
MAKING
96. RUBRIC
Criteria Excellent Good Fair NI
Content
Be a
responsible
user and
producer of
media
information.
Message
is clear,
accurate,
and
strong.
10
Message
is clear
and
accurate.
8
Message
is clear but
question-
able.
5
Message
is unclear
and/ or
inaccurate.
2
97. RUBRIC
Criteria Excellent Good Fair NI
Graphic
Relevance and
Citation
All graphics
are related to
the topic and
make it easier
to
understand.
All borrowed
graphics have
a source
citation.
10
All graphics
are related to
the topic and
most make it
easier to
understand.
One
borrowed
graphics have
no source
citation.
8
All graphics
relate to the
topic. Two
borrowed
graphics have
no source
citation.
5
Graphics do
not relate to
the topic
and/or three
or more
borrowed
graphics do
not have a
source
citation.
2
98. RUBRIC
Criteria Excellent Good Fair NI
Design and
Layout
The poster
is excep-
tionally
attractive
in terms of
design,
layout, and
neatness.
10
The poster
is
attractive
in terms of
design,
layout, and
neatness.
8
The poster
is
acceptably
attractive
though
layout is
cluttered.
5
The poster
is poorly
designed
and the
layout is
cluttered.
2
99. RUBRIC
Criteria Excellent Good Fair NI
Work Ethics
Cooperation
Every
individual
in the
group
contributed
to the
creation of
the digital
poster.
10
Group
work is
done
mostly by
two
individuals.
8
Group
work is
done
mostly by
one
individual.
5
Group
members
are not
working
during the
designated
time.
2
100. 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.)
110. 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
This lesson is designed for 4 meetings with 1 hour per meeting, Including the actual project making.
1. Emphasis - refers to the importance or value given to a part of the text-based content. When trying to make a point or highlighting a
message, you can make the text bold, italicized, have a heavier weight, darkened or lightened (depending on your background color) or
enlarged.
1. Emphasis - refers to the importance or value given to a part of the text-based content. When trying to make a point or highlighting a
message, you can make the text bold, italicized, have a heavier weight, darkened or lightened (depending on your background color) or
enlarged.
Beautiful emphasis created by nice proportions that get our attention to what the site is about and also to the donate button.
What texts were given emphasis in this poster?
How was emphasis achieved in this poster?
2. Appropriateness - refers to how fitting or suitable the text is used for a specific audience, purpose or event. In the creation of text-based
content, make sure that the selection criteria (tone, style, purpose, clarity) is followed. As for the choice of typefaces to be used, refer to the
discussion of the characteristics of the fonts. When it comes to large body text, the font should be clear enough to read.
Which font is used in formal letter or documents?
Why is Jokerman not advised to be used in a formal letter?
Which font is commonly used in printed documents like books and test paper?
Which font is used in most websites?
Which font is similar to the font in your text messages or Facebook post or comments?
Why is this font a wrong choice for a gravestone? What font do you think is more fitting?
Would you trust Dr. Brown if this is the font used in his calling card? Why?
3. Proximity - refers to how near or how far are the text elements from each other. When two things are closely related, we bring them close
together. Otherwise, we put text elements far from each other. For example, the main title and subtitle are usually placed close to each
other.
Which one shows text proximity? Why?
4. Alignment - refers to how the text is positioned in the page. This can be left, right,
center or justified.
4. Alignment - refers to how the text is positioned in the page. This can be left, right,
center or justified.
5. Organization - refers to a conscious effort to organize the different text elements in a page. Organization ensures that while some text elements are separated from each other (based on the principle of proximity), they are still somehow connected with the rest of the elements in the page. When there are many elements needed to fit in a page, start by creating a framework or a compartment for the elements. Divide the space by creating lines across the page, making it look like a cabinet with various space sizes. Once you are done compartmentalizing, you can place the different text elements on the boxes.
5. Organization - refers to a conscious effort to organize the different text elements in a page. Organization ensures that while some text elements are separated from each other (based on the principle of proximity), they are still somehow connected with the rest of the elements in the page. When there are many elements needed to fit in a page, start by creating a framework or a compartment for the elements. Divide the space by creating lines across the page, making it look like a cabinet with various space sizes. Once you are done compartmentalizing, you can place the different text elements on the boxes.
How is organization achieved in this design?
6. Repetition- concerns consistency of elements and the unity of the entire design. Repetition encourages the use of repeating some typefaces within the page. When several typefaces are used on a page, it might distract the audience and fail to communicate what you want them to get from the content. To strike a balance, do not also use just a single typeface for a visual design product.
How is contrast achieved in this design?
7. Contrast- creates visual interest to text elements. Contrast is achieved when two
elements are different from each other. When you place a white text on a very light yellow background, contrast is not achieved and the text will be difficult to read, but when you put a white text on a dark brown background, contrast is created. Contrast can be achieved in various ways, by joining the following elements: large font with a small font, serif and sans serif, thin elements with wide elements, cool color and warm color.
7. Contrast- creates visual interest to text elements. Contrast is achieved when two
elements are different from each other. When you place a white text on a very light yellow background, contrast is not achieved and the text will be difficult to read, but when you put a white text on a dark brown background, contrast is created. Contrast can be achieved in various ways, by joining the following elements: large font with a small font, serif and sans serif, thin elements with wide elements, cool color and warm color.
How is contrast achieved in this design?
p. 130, MIL TG by CHED
Visual Design Principles are:
Consistency of margins, typeface, typestyle, and colors is necessary, especially in slide presentations or documents that are more than one page.
Center of interest – an area that first attracts attention in a composition. This area is more important when compared to the other objects or elements in a composition. This can be by contrast of values, more colors, and placement in the format.
Balance – a feeling of visual equality in shape, form, value, color, etc. Balance can be symmetrical and evenly balanced, or asymmetrical and unevenly balanced. Objects, values, colors, textures, shapes, forms, etc. can be used in creating balance in a composition.
Harmony – brings together a composition with similar units. If for example your composition was using wavy lines and organic shapes, you would stay with those types of lines and not put in just one geometric shape. (Notice how similar Harmony is to Unity - some sources list both terms).
Contrast – offers some change in value creating a visual discord in a composition. Contrast shows the difference between shapes and can be used as a background to bring objects out and forward in a design. It can also be used to create an area of emphasis.
Directional Movement – a visual flow through the composition. It can be the suggestion of motion in a design as you move from object to object by way of placement and position. Directional movement can be created with a value pattern. It is with the placement of dark and light areas that you can move your attention through the format.
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.
Perspective – created through the arrangement of objects in two dimensional space to look like they appear in real life. Perspective is a learned meaning of the relationship between different objects seen in space.
p. 130, MIL TG by CHED
Visual Design Principles are:
1. Consistency of margins, typeface, typestyle, and colors is necessary, especially in slide presentations or documents that are more than one page.
How is consistency achieved in this infographics?
How is consistency of design achieved in the website in web application and desktop application?
How is consistency of design achieved in these soft drink products?
p. 130, MIL TG by CHED
Visual Design Principles are:
2. Center of interest – an area that first attracts attention in a composition. This area is more important when compared to the other objects or elements in a composition. This can be by contrast of values, more colors, and placement in the format.
How is center of interest applied in this photo?
How is center of interest applied in this photo?
p. 130, MIL TG by CHED
Visual Design Principles are:
3. Balance – a feeling of visual equality in shape, form, value, color, etc. Balance can be symmetrical and evenly balanced, or asymmetrical and unevenly balanced. Objects, values, colors, textures, shapes, forms, etc. can be used in creating balance in a composition.
How is balance achieved in this composition?
Large object in the middle, balanced by small object near the edge.
p. 130, MIL TG by CHED
Visual Design Principles are:
4. Harmony – brings together a composition with similar units. If for example your composition was using wavy lines and organic shapes, you would stay with those types of lines and not put in just one geometric shape. (Notice how similar Harmony is to Unity - some sources list both terms).
How is harmony achieved in this photo?
How is unity achieved in this illustration?
p. 130, MIL TG by CHED
Visual Design Principles are:
5. Contrast – offers some change in value creating a visual discord in a composition. Contrast shows the difference between shapes and can be used as a background to bring objects out and forward in a design. It can also be used to create an area of emphasis.
How is contrast achieved in this photo?
Contrast of colors.
How is contrast achieved in this photo?
Contrast of colors.
p. 130, MIL TG by CHED
Visual Design Principles are:
6. Directional Movement – a visual flow through the composition. It can be the suggestion of motion in a design as you move from object to object by way of placement and position. Directional movement can be created with a value pattern. It is with the placement of dark and light areas that you can move your attention through the format.
How was directional movement achieved in this picture?
Gradual change in size causing movement.
How was directional movement achieved in this picture?
How was directional movement achieved in this picture?
p. 130, MIL TG by CHED
Visual Design Principles are:
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.
How was rhythm achieved in this picture?
Repeated wavy movement of colour pencils forms a rhythm.
How was rhythm achieved in this picture?
p. 130, MIL TG by CHED
Visual Design Principles are:
8. Perspective – created through the arrangement of objects in two dimensional space to look like they appear in real life. Perspective is a learned meaning of the relationship between different objects seen in space.
How is perspective achieved in this drawing?
How is perspective achieved in this drawing?
How is perspective achieved in this drawing?
How is perspective achieved in this drawing?
How is perspective achieved in this photo?
How is perspective achieved in this photo?
Wilson’s Portfolio
PRINCIPLES OF DESIGN
https://oss.adm.ntu.edu.sg/wheng004/tag/design/
Dominance gives a painting interest, counteracting confusion and monotony. Dominance can be applied to one or more of the elements to give emphasis
How was dominance achieved in this photo?
What visual design principles were evident in this poster?
What visual design principles were evident in this poster?
What visual design principles were evident in this political cartoon?
What visual design principles were evident in this infographic?
What visual design principles were evident in this poster?
What visual design principles were evident in this photo?
What visual design principles were evident in this advertisement?
How is perspective achieved in this photo?
What visual elements are evident in this movie poster?
What visual design principles were evident in this basketball uniform?
What visual design principles were evident in this still life photography?
Still life photography is a genre of photography used for the depiction of inanimate subject matter, typically a small group of objects. It is the application of photography to the still life artistic style. An example is food photography.
What visual design principles were evident in this still life photography?
Still life photography is a genre of photography used for the depiction of inanimate subject matter, typically a small group of objects. It is the application of photography to the still life artistic style. An example is food photography.
What do you think should have done in this poster in terms of emphasis to avoid what happened in their event where chaos and stampede occurred (luckily nobody was seriously hurt).
Answer: In terms of poster design, applying emphasis on the text “Strictly for first 80 Customers” could have help in avoiding chaos or stampede.
Each group will select from the listed topics. Duplication of topic is allowed but limited to 2 groups only per topic. Each group will research on the selected topic.