Page 1

MIL PPT 03 Revised: June 1, 2017

MEDIA AND INFORMATION LITERACY (MIL) Introduction to MIL (Part 3): Design Elements and Principles Performance Task: Project

Mr. Arniel Ping St. Stephen’s High School Manila, Philippines


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 influence 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- 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-tominimize-texton-posters/


Photo Credit: http://gr aphicdes ignjuncti on.com/ 2012/11/ 41remarka bletypograp hyposters/


Photo Credit: ď‚´ http://www .printaholic .com/11text-onlyposters/ ď‚´ 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://digitalphotographyschool.com/how -to-use-leadinglines-for-bettercompositions/


Photo Credit: Photograph by Anne McKinnell Source: http://digitalphotographyschool.com/how-touse-leading-lines-forbetter-compositions/


SCALE ď‚´deliberate sizing of individual elements ď‚´help us make sense of designs and images


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 service ‘Lite Luxe’.


ď‚´This branding has chosen a color palette that sharply contrasts, creating a much more vibrant, energetic and playful design. Photo Credit: Branding for juice brand Frooti by Sagmeister & Walsh.


REPETITION ď‚´crucial element when it comes to branding design ď‚´keeps your branding consistent and tie your items together


ď‚´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 its own shape


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 attention to specific elements 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 and legibility as well.


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 arrangement of elements in your design


Photo Credit: email newsletter for J. Crew


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-de


PERFORMANCE TASK NO. 2 - DIGITAL POSTER MAKING

OBJECTIVES  Create a digital poster which will influence 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 Content  Be a responsible user and producer of media information.

Excellent Message is clear, accurate, and strong.

10

Good Message is clear and accurate.

8

Fair Message is clear but questionable.

NI Message is unclear and/ or inaccurate.

5

2


RUBRIC Criteria Excellent All graphics Graphic  Relevance and are related to the topic and Citation make it easier to understand. All borrowed graphics have a source citation.

Good All graphics are related to the topic and most make it easier to understand. One borrowed graphics have no source citation.

Fair All graphics relate to the topic. Two borrowed graphics have no source citation.

10

NI Graphics do not relate to the topic and/or three or more borrowed graphics do not have a source citation. 2

8

5


RUBRIC Criteria Design and Layout

Excellent The poster is exceptionally attractive in terms of design, layout, and neatness.

Good The poster is attractive in terms of design, layout, and neatness.

Fair The poster is acceptably attractive though layout is cluttered.

NI The poster is poorly designed and the layout is cluttered.

10

8

5

2


RUBRIC Criteria Excellent Good Work Ethics Every Group  Cooperation individual work is in the done group mostly by contributed two to the individuals. creation of the digital poster. 10 8

Fair Group work is done mostly by one individual.

NI Group members are not working during the designated time.

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-u se-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. • http://wearesocial.com/sg/ • https://designschool.canva.com/design-elementsprinciples / • http://rubistar.4teachers.org/index.php?scree n=ShowRubric&rubric_id=1125149 & • http://


References • https://designschool.canva.com/design-elementsprinciples / • https://designschool.canva.com/blog/visual-des ign-composition / • http://digital-photography-school.com/how-to-us e-leading-lines-for-better-compositions / • https://designshack.net/articles/typography/serif -vs-sans-serif-fonts-is-one-really-better-than-th e-other

MIL  
MIL  
Advertisement