Recommended
Recommended
More Related Content
Similar to 1.MIL 1. Introduction to MIL (Part 3)- Performance Task (Project)- Digital Poster.pptx
Similar to 1.MIL 1. Introduction to MIL (Part 3)- Performance Task (Project)- Digital Poster.pptx (20)
More from JemeloSipsip1
More from JemeloSipsip1 (6)
Recently uploaded
Recently uploaded (20)
1.MIL 1. Introduction to MIL (Part 3)- Performance Task (Project)- Digital Poster.pptx
- 1. MEDIA AND INFORMATION LITERACY (MIL) Introduction to MIL (Part 3): Design Elements and Principles Performance Task: Project MIL PPT 03 Revised: June 1, 2017
- 2. 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);
- 3. 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)
- 4. TOPIC OUTLINE I- Media and Information Literacy A. Design Elements and Principle B. Performance Task: Project 1. Cooperative Learning - Digital Poster Making
- 6. TYPOGRAPHY one of the biggest foundations of design Type says a lot and the way you choose to execute your type says even more.
- 10. Photo Credit: http://www.p rintaholic.co m/11-text- only- posters/ billandrusde sign.com
- 11. Photo Credit: Magazine spread design by Benjamin Bours
- 12. Photo Credit: Magazine spread design by Benjamin Bours
- 13. Photo Credit: Magazine spread design by Benjamin Bours
- 15. 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
- 16. 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)
- 17. LINE defined as any linear marks can channel certain ideas too
- 18. Photo Credit: Poster design by Design By Day
- 19. 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/how- to-use-leading- lines-for-better- compositions/
- 20. Photo Credit: Photograph by Anne McKinnell Source: http://digital- photography- school.com/how-to- use-leading-lines-for- better-compositions/
- 21. SCALE deliberate sizing of individual elements help us make sense of designs and images
- 22. Scale doesn’t always have to be based on realism. Poster by Gabz Grzegorz Domaradzki for the movie Drive.
- 23. COLOR creates specific moods, atmospheres, channels emotions and each shade has certain specific connotations associated with it
- 24. 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’.
- 25. 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.
- 26. REPETITION crucial element when it comes to branding design keeps your branding consistent and tie your items together
- 27. Repetition can also make beautiful one-off designs. Photo Credit: Packaging design by Nastya Chamkina that uses repetition to create a beautiful pattern.
- 28. Photo Credit: Xoclad by Anagrama
- 29. NEGATIVE SPACE is the ‘space in-between’, the area between or around other elements that form its own shape
- 31. SYMMETRY We find symmetrical faces, patterns and designs generally more attractive, effective and beautiful.
- 33. 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
- 34. FRAMING can enhance or draw attention to specific elements of your design
- 35. Photo Credit: Joe’s Coffee by Trevor Finnegan
- 36. Photo Credit: Poster Design via MyDesy
- 37. CONTRAST is the degree of difference between two elements of your design It has a great effect on readability and legibility as well.
- 38. This design ensures there’s adequate contrast against the type and image. Photo Credit: Poster by Jonathan Correira
- 40. COMPOSITION refers to the overall arrangement of elements in your design
- 41. Photo Credit: email newsletter for J. Crew
- 42. Photo Credit: Poster by Lab B Design
- 43. DESIGN ELEMENTS AND PRINCIPLES Evaluate the following posters:
- 51. AGREEMENT Research “Design Elements and Principles” to learn more about it. Suggested website pages https://designschool.canva.com/design- elements-principles/ https://designschool.canva.com/blog/visual- design-composition/
- 52. 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
- 53. 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
- 54. 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/
- 55. 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
- 56. 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
- 57. 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
- 58. 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
- 59. 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
- 60. 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
- 61. 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
- 62. 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.)
- 68. 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- elements-principles/ • http://rubistar.4teachers.org/index.php?screen= ShowRubric&rubric_id=1125149& • http://teacherweb.com/ME/JALeonardMiddleSch oolOldTown/Ecologywebquest/page3.htm
- 69. 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/ • http://www.tvdsb.ca/webpages/baxterc/resourc es.cfm?subpage=143055
Editor's Notes
- Typography is arguably one of the biggest foundations of design. Type says a lot (sometimes literally) and the way you choose to execute your type, whether a heading or some body copy says even more.
- You might want to check this out https://designshack.net/articles/typography/serif-vs-sans-serif-fonts-is-one-really-better-than-the-other/
- You may also include this tips from this site: http://www.printaholic.com/how-to-minimize-text-on-posters/
- For a thorough rundown of all things typography and font-related, be sure to check out this cheat-sheet full of tips, tricks and links to help you master the written word! Let’s look at an example of display typography. For those of you not familiar, display type basically refers to the fancier, more stylistic typographical designs. Think of movie poster titles, magazine headings, etc. Check out these magazine spread designs by Benjamin Bours, each which have had their titles custom designed intricately and effectively. This showy and detailed typography is display type at work.
- Check out these magazine spread designs by Benjamin Bours, each which have had their titles custom designed intricately and effectively. This showy and detailed typography is display type at work.
- Check out these magazine spread designs by Benjamin Bours, each which have had their titles custom designed intricately and effectively. This showy and detailed typography is display type at work.
- I’m sure we’re all aware of what lines are, but just to be sure, lines can be defined as any linear marks. So, when you think about it, lines make up just about everything. Even these words and letters you’re reading now are made up of thousands of curved, angled and straight lines. Lines can channel certain ideas too. Straight ones can evoke order and neatness, wavy lines can create movement, and zig-zagged lines can imply tension or excitement. A technique applied a lot in photography is the use of ‘leading lines’ which do just what they claim – they lead the eye. Finding and emphasising strong leading lines in your piece can allow you to direct the eye through the entire piece or to certain focal points. Lets look at an example of leading lines in web design. This webpage has a cool diagonal grid with very strong leading lines that take you down the page, from section to section, in a swift zig zag shape.
- For example, check out this poster design by Design By Day that uses strong leading lines to first guide the eye toward the main focal point (the title), and then to various rungs of information.
- I’m sure we’re all aware of what lines are, but just to be sure, lines can be defined as any linear marks. So, when you think about it, lines make up just about everything. Even these words and letters you’re reading now are made up of thousands of curved, angled and straight lines. Lines can channel certain ideas too. Straight ones can evoke order and neatness, wavy lines can create movement, and zig-zagged lines can imply tension or excitement. A technique applied a lot in photography is the use of ‘leading lines’ which do just what they claim – they lead the eye. Finding and emphasising strong leading lines in your piece can allow you to direct the eye through the entire piece or to certain focal points. Lets look at an example of leading lines in web design. This webpage has a cool diagonal grid with very strong leading lines that take you down the page, from section to section, in a swift zig zag shape.
- I’m sure we’re all aware of what lines are, but just to be sure, lines can be defined as any linear marks. So, when you think about it, lines make up just about everything. Even these words and letters you’re reading now are made up of thousands of curved, angled and straight lines. Lines can channel certain ideas too. Straight ones can evoke order and neatness, wavy lines can create movement, and zig-zagged lines can imply tension or excitement. A technique applied a lot in photography is the use of ‘leading lines’ which do just what they claim – they lead the eye. Finding and emphasising strong leading lines in your piece can allow you to direct the eye through the entire piece or to certain focal points. Lets look at an example of leading lines in web design. This webpage has a cool diagonal grid with very strong leading lines that take you down the page, from section to section, in a swift zig zag shape.
- Scale is a large part of design, sometimes literally. In a very basic definition, scale is the deliberate sizing of individual elements. Scale can help us make sense of designs and images. Think about if you were to draw a mouse next to an elephant, you’d probably draw the mouse much smaller than the elephant, which would help viewers instantly understand your drawing. In this way, scale helps us make sense of things. But, scale doesn’t always have to be based on realism. You can size your elements dramatically large or small to create stunning effects and to signal which parts of your design are more important and which are less. For example, check out this poster by Gabz Grzegorz Domaradzki for the movie Drive. In this poster, the lead character has been scaled up dramatically, drawing attention to him first, and the other faces second.
- Scale doesn’t always have to be based on realism. You can size your elements dramatically large or small to create stunning effects and to signal which parts of your design are more important and which are less. For example, check out this poster by Gabz Grzegorz Domaradzki for the movie Drive. In this poster, the lead character has been scaled up dramatically, drawing attention to him first, and the other faces second.
- I know I don’t really need to preach about how important colour is to designs, but I’m going to anyway. Colour is paramount. Colour creates specific moods, atmospheres, channels emotions and each shade has certain specific connotations associated with it. In short, colour can make or break your design. Lets look at two branding examples. First up, we have a design by Smack Bang Designs for women’s skin rejuvenation service ‘Lite Luxe’. This design has opted for light, soft and pastel colours. Whites, light greys, soft blush tones and a copper/gold foiling, these chosen colours complement each other gently to create a calm, elegant and feminine design.
- First up, we have a design by Smack Bang Designs for women’s skin rejuvenation service ‘Lite Luxe’. This design has opted for light, soft and pastel colours. Whites, light greys, soft blush tones and a copper/gold foiling, these chosen colours complement each other gently to create a calm, elegant and feminine design.
- On the other hand, we have this branding for juice brand Frooti by Sagmeister & Walsh. Unlike the previous example which chose a palette that gently complemented itself, this branding has chosen a colour palette that sharply contrasts, creating a much more vibrant, energetic and playful design.
- Think about any big name brand, Coca-Cola, Google, Apple, Nike, I’m sure you can all think of their logo, their general tone of voice and their general colour schemes used. Why are these things so memorable at the drop of a hat? Yep, you guessed it – repetition. Repetition is a crucial element when it comes to branding design, both in terms of keeping your branding consistent and in terms of tying your items together. Lets have a look at a branding example by Michelle Wang. As you can see, this identity uses a consistent colour palette and consistent logo application, right down to consistent margin spacing.
- Repetition is a key element when it comes to branding, but it can also make for beautiful one-off designs. For example, repetition is a key ingredient when it comes to creating patterns and textures. Check out this packaging design by Nastya Chamkina that uses repetition to create a beautiful pattern. Patterns don’t have to be dull and floral like dusty old curtains, they can be fun and effective. So, why not implement repetitive patterns into your next design?
- Repetition is a key element when it comes to branding, but it can also make for beautiful one-off designs. For example, repetition is a key ingredient when it comes to creating patterns and textures. Check out this packaging design by Nastya Chamkina that uses repetition to create a beautiful pattern. Patterns don’t have to be dull and floral like dusty old curtains, they can be fun and effective. So, why not implement repetitive patterns into your next design?
- To put it bluntly, negative space is the ‘space inbetween’, the area between or around other elements that form its own shape
- To put it bluntly, negative space is the ‘space inbetween’, the area between or around other elements that form its own shape
- As species, human beings are scientifically proven to be drawn to symmetry. We find symmetrical faces, patterns and designs generally more attractive, effective and beautiful. Symmetry is used a lot in logos in order to create a harmonious and balanced design. Some examples of large brands with symmetrical logos are Target, McDonald’s, Chanel, Starbucks, etc.
- As species, human beings are scientifically proven to be drawn to symmetry. We find symmetrical faces, Symmetry is used a lot in logos in order to create a harmonious and balanced design. Some examples of large brands with symmetrical logos are Target, McDonald’s, Chanel, Starbucks, etc.
- Of course, symmetry is not always an option for every design, and nor should it be. There’s a fine line between a design looking balanced and symmetrical, and looking like one side was copied, flipped and pasted to the left. So instead of trying to achieve perfect symmetry, instead try to introduce subtle elements of symmetry into your design. For example, this wedding invitation uses a high degree of symmetry, but it it’s not perfectly mirrored. Instead, the designer has chosen to adjust the illustrations to fit the type and the message in subtle ways that keep the design symmetrically balanced and ordered, but not too blatantly mirrored, creating a delicate, romantic and balanced design.
- Just like you do with your photographs and pieces of art, framing your designs correctly is an important aspect. We usually think of framing in terms of photography – what you include, what you don’t, etc. But, framing is equally as important in design. Physical frames such as box outlines or graphic elements can enhance or draw attention to specific elements of your design.
- Frames don’t have to be graphic either. If you’re working with photographic elements, why not consider using them to frame your designs? Check out this poster that uses random objects to create a frame for the superimposed type. This way, you draw attention to the piece by the frame, and direct the eye to the really important bits.
- Contrast is often the magical key ingredient to making your designs ‘pop’, which is a (sometimes frustrating) demand from many design clients. In a very basic definition, contrast is the degree of difference between two elements of your design. Some common forms of contrast are dark vs. light, thick vs. thin, large vs. small, etc. Contrast has a great effect on readability and legibility as well, it’s a big reason why you see novels and many other publications printing in black text on a white background. Imagine if they printed using light grey on a white background. The contrast would be very low and the type hard to read. So, if you’re using type, make sure you bump up that contrast.
- For example, check out this poster by Jonathan Correira and the way it ensures there’s adequate contrast against the type and image. Since this image is split in half, one side being dominantly green and the other dark grey, the type colour has been adjusted accordingly to ensure each side is legible. Imagine if the “New York” was executed in the same colour as “Bike Expo”, the contrast would be lowered greatly and it would be much harder to read.
- Contrast isn’t just a stylistic element or a legibility-enhancer, it can also act to draw the eye to certain elements of your design. This technique is used a lot in website design, let’s look at an example from Audible’s landing page. See how this landing page design has darkened and muted the image to allow for the bright red box to contrast sharply against the background. This deliberate contrast helps to draw instant attention to the main call of action (which links directly to a signup page). So, use contrast to make your designs visually ‘pop’, draw attention to certain elements of your design.
- Composition is a nice point to end on as it is the bringing together of every other principle we’ve discussed. ‘Composition’ refers to the overall arrangement of elements in your design, which sounds a bit dull when explained that way, I know, but it’s actually one of the more fun elements of design. This is where you can play, experiment and make a good design look great. As mentioned, composition is basically where all the previous 19 elements we’ve discussed come together. You can use scale, repetition, typography, line, randomness, etc. to create unique, effective and suitable layouts. Let’s look at some designs and pick apart their composition. First, we have this email newsletter for J.Crew. This design puts the focus on the “30” by using scale and depth to highlight it. It also draws attention to the title by using hierarchy and placing it at the top centre of the page, making it larger than the other type, and framing it.
- First, we have this email newsletter for J.Crew. This design puts the focus on the “30” by using scale and depth to highlight it. It also draws attention to the title by using hierarchy and placing it at the top centre of the page, making it larger than the other type, and framing it.
- Here’s another random example – this time, a poster by Lab B Design Office. This design uses similar techniques and design principles as the previous one, but producing a very different result. This piece uses scale and depth by varying the scaling of the blocks of type and positioning them around and behind the photograph to create depth. It also uses hierarchy heavily, and frames the type in boxes and the image with the type.
- Suggestions In your first meeting with your class, instruct them to start exploring this web tool Canva https://www.canva.com Discuss in your class selected concepts in the Design Elements and Principles. Instruct students to research about design elements and principles to learn more. https://designschool.canva.com/design-elements-principles/
- 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.