Page 1 :
Empowerment, Technologies, Quarter 1 – Module 5:, Imaging and Design for the, Online Environment, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 2 :
Empowerment Technologies, Alternative Delivery Mode, Quarter 1 – Module 5: Imaging and Design for the Online Environment, First Edition, 2020, Republic Act 8293, section 176 states that: No copyright shall subsist in any work of, the Government of the Philippines. However, prior approval of the government agency or office, wherein the work is created shall be necessary for exploitation of such work for profit. Such, agency or office may, among other things, impose as a condition the payment of royalties., Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names,, trademarks, etc.) included in this module are owned by their respective copyright holders., Every effort has been exerted to locate and seek permission to use these materials from their, respective copyright owners. The publisher and authors do not represent nor claim ownership, over them., Published by the Department of Education, Secretary: Leonor Magtolis Briones, Undersecretary: Diosdado M. San Antonio, Development Team of the Module, Writers: Jasmin Roxanne A. Sobremesana, Editors: Grace T. Balverde, Reviewers: Grace R. Nieves, Illustrator: Jasmin Roxanne A. Sobremesana, Layout Artist: Jasmin Roxanne A. Sobremesana, Management Team: Malcom S. Garma, Director IV, Genia V. Santos, CLMD Chief, Dennis M. Mendoza,Regional EPS In Charge of LRMS, Micah S. Pacheco, Regional ADM Coordinator, Loida O. Balasa, CID Chief, Grace R. Nieves, Division EPS In Charge of LRMS, Lorena J. Mutas, ADM Coordinator, , Printed in the Philippines by ________________________, Department of Education – National Capital Region, Office Address:, Telefax:, E-mail Address:, , Misamis St., Bago Bantay, Quezon City ____________, ____________________________________________, 02-929-0153 _________________________________, [email protected]________________________

Page 3 :
Empowerment, Technologies, Quarter 1 – Module 5:, Imaging and Design for the, Online Environment

Page 4 :
Introductory Message, This Self-Learning Module (SLM) is prepared so that you, our dear learners,, can continue your studies and learn while at home. Activities, questions, directions,, exercises, and discussions are carefully stated for you to understand each lesson., Each SLM is composed of different parts. Each part shall guide you step-bystep as you discover and understand the lesson prepared for you., Pre-tests are provided to measure your prior knowledge on lessons in each, SLM. This will tell you if you need to proceed on completing this module or if you, need to ask your facilitator or your teacher’s assistance for better understanding of, the lesson. At the end of each module, you need to answer the post-test to self-check, your learning. Answer keys are provided for each activity and test. We trust that you, will be honest in using these., In addition to the material in the main text, Notes to the Teacher are also, provided to our facilitators and parents for strategies and reminders on how they can, best help you on your home-based learning., Please use this module with care. Do not put unnecessary marks on any part, of this SLM. Use a separate sheet of paper in answering the exercises and tests. And, read the instructions carefully before performing each task., If you have any questions in using this SLM or any difficulty in answering the, tasks in this module, do not hesitate to consult your teacher or facilitator., Thank you.

Page 5 :
What I Need to Know, This module will help you more understand, appreciate, and unveil your creativity, on the use of the proper graphic and layout designing for more effective, communication. You will also learn the core components of graphic design., The module mainly focuses on one lesson:, •, , Lesson 1 – Basic Principles of Graphics and Layout, , Learning Competencies and Codes, Evaluate existing websites and online resources based on the principles of, layout, graphic, and visual message design., CS_ICT11/12-ICTPT-Ie-f-6, , After going through this module, you are expected to:, 1. identify and explain the Basic Principles of Graphics and Layout;, 2. explain the vital use of the Basic Principles of Graphics and, Layout in communication and industry;, 3. assess the effectiveness of the graphic design in a given layout example; and, 4. evaluate existing websites and online resources based on the principles of, layout, graphic, and visual message design., , 1, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 6 :
What I Know, Directions: Choose the letter of the best answer. Write the chosen letter on a separate, sheet of paper., 1. Which principle of design is when a designer arranges the elements or text, according to its context?, A. Balance, C. Harmony, B. Emphasis, D. Hierarchy, 2. Which type of balance gives a mirror-like design that is proportionally equal, to the other side?, A. Asymmetrical, C. Semi-Balance, B. Symmetrical, D. Semi-Proportion, 3. Which font color is best to use if the background on your valentine card is, red?, A. Blue, C. Violet, B. Green, D. White, 4. What other elements of design can be repeated aside from color, header style,, and fonts?, A. Paper, C. Statement, B. Size, D. Word, 5. Monochromatic uses one color in a design. Its advantage is to create balance, and to match the color in an artwork. However, this may lack energy and may, look monotonous. How will you use the monochromatic scheme to create, variations?, A. Use complementary colors, B. Adjust the saturation and value, C. Change the hue of the artwork or every element, D. Choose a design that is more suitable for the color scheme used, 6. What is the purpose of creating a hierarchy in your design?, A. It gives consistency., B. It adds visual weight., C. To add beauty to the design., D. Make the detail to stand out., , 2, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 7 :
7. The following are the ways where you can emphasize the text if you are, working on a magazine except:, A. By changing the font color, B. By making the text bold or italic, C. By adding illustrations or images, D. By changing the font size, either bigger or smaller, 8. Refer to the illustration below. What is the best text alignment to use if your, background design covers an art on edge?, A. Center, B. Left, C. Justified, D. Right, 9. The picture below shows an example of ________., A. Balance, B. Emphasis, C. Hierarchy, D. Repetition, 10. Which of the principles of graphics and layout refers to the proper, arrangement of elements, which gives a visual weight for the design?, A. Balance, C. Pattern, Repetition and Rhythm, B. Emphasis, D. Unity and Harmony, 11. Every element of your design must show the correct placement of texts,, paragraphs, or images to make it formal and readable. Which of the following, alignment is not recommended in designing?, A. Center, C. Left, B. Diagonal, D. Right, 12. Which of the following refers to the plan of creating an idea through a, combination of texts, images, and other elements that are placed together, artistically?, A. Design, C. Layout, B. Graphic, D. Message, 13. As a layout artist, we must know the details in arranging and accentuating, the most important terms by changing its size, thickness, and spaces so the, reader can navigate the highlight of the event easily. Which of the following, principles best describe the statement above?, A. Alignment, C. Hierarchy, B. Contrast, D. Pattern, Repetition and Rhythm, , 3, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 8 :
14. Contrast refers to the use of different or opposite elements such as sizes,, shapes, spaces, forms, colors, and values in design. Which of the designs, below show the least application of contrast in a design?, , A., , C., , B., , D., , 15. Elements of design must work together and agree to its meaning, theme,, feeling, or mood. Which of the examples below show unity and harmony of, design?, , A., , C., , B., , D., , 4, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 9 :
Lesson, , 1, , Basic Principles of Graphics, and Layout, , Communication is critical for people to share thoughts, feelings, and, emotions. With the use of different media, people can express their views in many, ways, including adding artistic designs. The purpose of the combined images and, texts also gives influence to people not just understand the sent idea or message,, but it also adds emotion to what is being seen., , What’s In, This lesson provides information about the Basic Principles of Graphics and Layout, that should be applied in a design. It involves the proper use and combination of, principles, texts, colors, and images as it applies in a variety of media in graphic, designing for effective visual communication., , Notes to the Teacher, Computer or mobile phone with an Internet connection is vital in, this activity to visit and evaluate the designs of a website, poster,, advertisement, and other online graphic applications., , 5, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 10 :
What’s New, Directions: In this activity, you need to observe the given the picture below and, identify which principle of graphics and layout BEST applies in each design., Choose your answer inside the box located on the bottom page then write your, answer on a separate sheet., , 1. _______________, , 2. _______________, , 4. _______________, , 3. _______________, , 5. _______________, , Balance, , Contrast, , Emphasis, , Hierarchy, , Alignment, , Pattern and Repetition, , What is It, Understanding Graphic Design and Layout, What makes a good and effective website? How do users interact with the, websites they visit?, A good website must know its target audience, determine its needs, and, communicate effectively using the basic principles of graphics and layout. Users or, visitors may have different interests and needs like browsing, researching, streaming,, online shopping, dating, and many others. They even behave differently depending, on what they perceive on the website. Web design matters in every user, whether, , 6, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 11 :
they can decide to stay or just leave. Usability is important for the users as it satisfies, their experience on the website, but a good design will drag the audience’s attention, to stay on the page. Always remember that first impressions last and web design has, an impact on the users on how they perceive the brand or message., Graphic design is an artistic way of communicating ideas and messages, through visual expressions using texts, images, and symbols. Graphic designers, work on the quality of the output they serve for the audience or clients like websites,, advertisements, posters, flyers, logos, videos, and any other multimedia form. A, practical graphic layout and design can easily catch the attention of the viewers and, allow them to understand the message conveniently., , Graphic Design vs. Layout, Design is a plan of creating an idea through a combination of texts, images,, and other elements that are placed together artistically, whereas, the layout is a term, used as the process of organizing and arranging these elements in a design as you, plot it in a paper., , Basic Principles of Design and Layout, 1. Balance, It refers to the proper arrangement of the elements, which gives a visual, weight for the design. There are two types of balance, Symmetrical, or Asymmetrical. Symmetrical balance is where the elements are, equally distributed on both sides of your design, technically a mirror-based, design. In contrast, Asymmetrical balance is a free layout where the elements, can be placed in any order or the opposite of symmetrical., , vs., , Asymmetrical, , Symmetrical, , 2. Emphasis, It refers to something that needs to stand-out or emphasize. When working, on emphasis, you can change the color, size, or even the element itself to lead, the eye to the focal interest., vs., no emphasis, , with emphasis, , 7, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 12 :
3. Pattern, Repetition and Rhythm, The use of repetitive elements such as lines, shapes, forms, textures, space,, colors, font, style, and the like to create texture, movement, continuity, and, consistency of the design. It also makes the design formal and more, comfortable to read because of its uniformity., Slides A, No repetition, of elements, , Slides B, with repetition, of, elements, such as color,, background, and font type, , 4. Alignment, It refers to the proper placement of an element to your design, just like, invisibly placing or aligning your texts or images diagonally, vertically, and, horizontally. The standard texts or paragraph alignment we apply are center,, right, left, and justified., , vs., , all text boxes are invisibly aligned, and placed with each other, , all textboxes have different, angles positioning diagonally, , 5. Hierarchy, It refers to the proper arrangement of the details such as text, characters,, numbers, and symbols. Changing its character size, thickness, spaces, or, even font type to stand out is its most critical features. By applying this, principle, it can help the viewer to recognize and navigate the highlight of the, event smoothly., , vs., , 8, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 13 :
6. Contrast, It refers to the use of different or opposite elements such as sizes (large, or small), shapes (geometric or organic), spaces (negative or positive), form (real, or abstract), colors (monochromatic, complementary, triadic, tetradic), texture, (smooth or rough), and values (light or dark). The contrast gives visual weight, to an object or design. You must consider and limit the use of different, elements, color, style, and typography to avoid cluttered design. When, creating contrast in color and text, it is advised to choose a color from the, background to create consistency of your design. Always remember that the, details must be readable by having a dark-light value of either text and, background or vice-versa., , a poster and a packaging showing contrast with the use of a dark-colored, background and a light-colored text to make the details readable., , 7. Unity and Harmony, It refers to the relationship of the elements or the contents when you place, them together. The elements of the design must work together and agree to its, meaning, theme, feeling, or mood., The web page shows the, consistent use of font, style,, font, color,, contrasting with the dark, background,, the, hierarchy is according to, its importance, proper, text, alignment, and, repetition of the design in, every menu., , What’s More, Let’s Assess!, Using your computer or mobile device, you need access one existing website, and evaluate its effectiveness based on the applied principles of layout, graphic and, visual message design., , 9, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 14 :
Directions: Navigate and observe your visited website. Using the Web Design, Assessment Checklist, place a checkmark (/) on the Yes or No column that, corresponds to each question. Add comments or suggestions for a detailed, description in each number. Write your answer in a separate sheet of paper., , Website URL:, Principles, , Yes, , No, , Comments/, Suggestions, , 1. Balance, Is the page shows the proper distribution of elements in, page, composition,, whether, Symmetrical, or, Asymmetrical?, Do you feel that the elements are compressed only on, one side of the page?, 2. Emphasis, Is there an element of focal point to the design that leads, in getting your attention on that page?, Does the page have emphasized any of the texts,, graphics, illustrations, or animations in a design?, Is the element emphasized by a different color, texture,, size, or space?, 3. Pattern, Repetition, and Rhythm, Are there any repeated elements in the web design?, Is the logo of the website repeated on every page of the, design?, Are all pages have the same transition effects?, Are the font type and color used consistently on every, page?, 4. Alignment, Are the graphics and texts visibly aligned which makes, it readable?, Is the placement of individual or grouped images have, the same scale or size and is evenly distributed in space?, 5. Hierarchy, Are the important elements stand out and are arranged, properly depending on its organization?, Are the headings, titles, and subtitles emphasized than, the body?, 6. Contrast, Does the background and font color contrast each, other? (light to dark value or vice versa), Are there any applications of contrast in font sizes with, the same type?, Are the header and footer of the page darker than the, content area?, , 10, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 15 :
7. Unity and Harmony, Principles, , Yes, , No, , Does the page look disorganize?, Are all the principles applied properly with consistency, in the design as a whole?, Does the use of combined elements relate to the purpose, of the website and creates harmony in the design?, Does the website meet its purpose of providing a clear, message in all the pages of web design?, TOTAL, , Comments/, Suggestions, , 20 points, , What I Have Learned, , In this activity you need to gain access on the internet using your computer or, mobile phone. Browse the given websites listed below and evaluate the layout and, design of their pages. Grab and paste a screenshot of your chosen page and explain, the principles of design and layout applied. Do it in a separate sheet. (40 points), 1., 2., 3., 4., 5., , https://www.deped.gov.ph, https://education.minecraft.net, https://teachforthephilippines.org, https://arvr.google.com/ar, https://www.canva.com, , Use this rubric for the evaluation of output., Criteria, , Excellent, (4), , 1. Identification Principles, of Principles were, applied, correctly, identified or, shown, based on the, printed or, chosen page, 2. Page Design Have chosen, an excellent, example of a, page where, all the, principles, are, observed., TOTAL, , Very, Satisfactory, (3), There is 1, principle not, identified or, shown on the, design but is, obvious on the, page., , Satisfactory, (2), , Needs, Improvement, (1), There are 2, There are 3 or, principles not more principles, identified or, not identified, shown on the, or shown on, design but is, the design but, obvious on the is obvious on, page., the page., , Have chosen a Have chosen a, very, satisfactory, satisfactory, example of a, example of a, page where, page where, only some of, most of the, the principles, principles are, are observed., observed., 8 points, 11, , Have chosen, an example of, a page where, just a few of, the principles, are observed., , CO_Q1_Empowerment Technologies SHS, Module 5

Page 16 :
What I Can Do, , Knowing the basic principles of graphic and layout is a guide and a must for, every web designer, illustrator, and even layout artist. Having a good web design can, engage the audience to stay on the page and this also promotes the website’s brand., Directions: Write an insight on how you feel when you visit a good and a bad web, page design? Write at least one paragraph in each side as you evaluate its, effectiveness. Use a separate sheet to answer. (10 points), , vs., , Use this rubric for the evaluation of output., Criteria, , Excellent, , Satisfactory, , (5), , (3), , Needs, Improvement, (1), , 1. Content, , Content is relevant Content is correct Content, is, and complete with with, good incomplete, and, comprehensive, observation., lacks observation., observation., , 2. Organization Thoughts are very Thoughts, are Thoughts, of Thoughts clear with coherent simple, with inconsistent, statements., organized, illogical., statements., Total Score, , are, or, , 10 points, , 12, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 17 :
Assessment, Directions: Choose the letter of the best answer. Write the chosen letter on a separate, sheet of paper., 1. Monochromatic uses one color in a design. Its advantage is to create balance, and to match the color in an artwork. However, this may lack energy and may, look monotonous. How will you use the monochromatic scheme to create, variations?, A. Use complementary colors, B. Adjust the saturation and value, C. Change the hue of the artwork or every element, D. Choose a design that is more suitable for the color scheme used, , 2. What is the purpose of creating a hierarchy in your design?, A., B., C., D., , It gives consistency., , It adds visual weight., To add beauty to the design., Make the detail to stand out., , 3. Which of the following refers to the plan of creating an idea through a, combination of texts, images, and other elements that are placed together, artistically?, A. Design, C. Layout, B. Graphic, D. Message, , 4. Which principle of design is when a designer arranges the elements or, text according to its context?, A. Balance, B. Emphasis, , C. Harmony, D. Hierarchy, , 5. Which type of balance gives a mirror-like design that is proportionally equal, to the other side?, A. Asymmetrical, C. Semi-Balance, B. Symmetrical, D. Semi-Proportion, , 6. Contrast refers to the use of different or opposite elements such as sizes,, shapes, spaces, forms, colors, and values in design. Which of the designs, below show the least application of contrast in a design?, , 13, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 18 :
A., , C., , B., , D., , 7. Which of the principles of graphics and layout refers to the proper, arrangement of elements, which gives a visual weight for the design?, A. Balance, C. Pattern, Repetition and Rhythm, B. Emphasis, D. Unity and Harmony, 8. As a layout artist, we must know the details in arranging and accentuating, the most important terms by changing its size, thickness, and spaces so the, reader can navigate the highlight of the event easily. Which of the following, principles best describe the statement above?, A. Alignment, C. Hierarchy, B. Contrast, D. Pattern, Repetition and Rhythm, 9. The following are the ways where you can emphasize the text if you are, working on a magazine except:, A. By changing the font color, B. By making the text bold or italic, C. By adding illustrations or images, D. By changing the font size, either bigger or smaller, 10. What other elements of design can be repeated aside from color, header style,, and fonts?, A. Paper, C. Statement, B. Size, D. Word, 11. Which font color is best to use if the background on your valentine card is, red?, A. Blue, C. Violet, B. Green, D. White, , 14, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 19 :
12. Every element of your design must show the correct placement of texts,, paragraphs, or images to make it formal and readable. Which of the following, alignment is not recommended in designing?, A. Center, C. Left, B. Diagonal, D. Right, 13. Elements of design must work together and agree to its meaning, theme,, feeling, or mood. Which of the examples below show unity and harmony of, design?, , A., , B., , C., , D., , 14. Refer to the illustration below. What is the best text alignment to use if your, background design covers an art on edge?, A. Center, B. Left, C. Justified, D. Right, 15. The picture below shows an example of ________., A. Balance, B. Emphasis, C. Hierarchy, D. Repetition, , Additional Activities, The layout is the part of graphic design that deals in the arrangement of, visual elements on a page. It generally involves organizational principles of, composition to achieve specific communication objectives. Write a reflection based, on what you have learned on this topic. You may do any of the following methods to, express your thoughts. Choose any method of writing your reflection from the box, and write it on a piece of paper., Acrostics, , Poem, , Slogan, , 15, , Spoken Poetry, , CO_Q1_Empowerment Technologies SHS, Module 5

Page 20 :
CO_Q1_Empowerment Technologies SHS, Module 5, , What I Know, 1. D, 2. B, 3. D, 4. B, 5. B, 6. D, 7. C, 8. B, 9. B, 10.A, 11.B, 12.A, 13.C, 14.C, 15.A, , 16, , What's New, 1. Pattern and, Repetition, Balance, Contrast, Emphasis, Alignment, 2., 3., 4., 5., , Assessment, 1. B, 2. D, 3. A, 4. D, 5. B, 6. C, 7. A, 8. C, 9. C, 10.B, 11.D, 12.B, 13.D, 14.B, 15.B, , Answer Key