Lesson 4: Imaging and Design for the Online Environment PDF

LESSON 4: LESSON 4: Imaging and Design for the Online Environment  Objectives At the end of the lesson, you are expected to; Identify and explain the Basic 01 Principles of Graphics and Layout; Assess the effectiveness of the graphic 02 de...

LESSON 4: LESSON 4: Imaging and Design for the Online Environment  Objectives At the end of the lesson, you are expected to; Identify and explain the Basic 01 Principles of Graphics and Layout; Assess the effectiveness of the graphic 02 design in a given layout example; Evaluate existing websites and online 03 resources based on the principles of layout, graphic, and visual message design.  Objectives At the end of the lesson, you are expected to; Assess the effectiveness of the 02 graphic design in a given layout example; Identify and explain the Basic 01 Principles of Graphics and Layout; Evaluate existing websites and online 03 resources based on the rinciples of layout, graphic, and visual message design.  Objectives At the end of the lesson, you are expected to; Evaluate existing websites and online 03 resources based on the rinciples of layout, graphic, and visual message design. Assess the effectiveness of the 02 graphic design in a given layout example; 01 Identify and explain the Basic Principles of Graphics and Layout;  Objectives At the end of the lesson, you are expected to; Identify and explain the Basic Principles of 01 Graphics and Layout; Evaluate existing websites and online resources based on the 03 rinciples of layout, graphic, and visual message design. Assess th effectiveness of the graphic 02 design in a given layout example;  01 PLAY time Guess the word by looking at the pictures 01 Guess the word by looking at the pictures 01 BALANCE Guess the word by looking at the pictures 02 Guess the word by looking at the pictures 02 PATTERN Guess the word by looking at the pictures 03 S Guess the word by looking at the pictures 03 S CONTRAST Understanding Graphic Design and Layout  Understanding Graphic Design and Layout What makes a good and effective website? How do users interact with the websites they visit? Audience/Users/Visitors Usability is important for the users as it browsing satisfies their experience on the website. researching streaming Good design will drag the audience’s online shopping dating, etc. attention to stay on the page. Graphic Design Vs. Layout 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. Graphic Design Vs. Layout Graphic Design Vs. Layout 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  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.  Basic Principles of Design and Layout 1. Balance Symmetrical balance is where the elements are equally distributed on both sides of your design, technically a mirror-based design.  Basic Principles of Design and Layout 1. Balance Asymmetrical balance is a free layout where the elements can be placed in any order or the opposite of symmetrical. Basic Principles of Design and Layout 14:3 0 2. Emphasis Basic Principles of Design and Layout 2. ItEmphasis refers to something that needs to stand-out or emphasize. When working on emphasis, you can 14:3 change the color, size, or even the element itself to 0 lead the eye to the focal interest. Basic Principles of Design and Layout 3. Pattern, Repetition and Rhythm  Basic Principles of Design and Layout 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.  Basic Principles of Design and Layout 3. Pattern, Repetition and Rhythm Basic Principles of Design and Layout 4. Alignment Basic Principles of Design and Layout 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. Basic Principles of Design and Layout 4. Alignment Basic Principles of Design and Layout 5. Hierarchy  Basic Principles of Design and Layout 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  Basic Principles of Design and Layout 5. Hierarchy Basic Principles of Design and Layout 6. Contrast  Basic Principles of Design and Layout 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  Basic Principles of Design and Layout 6. Contrast 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  Basic Principles of Design and Layout 6. Contrast  Basic Principles of Design and Layout 7. Unity and Harmony  Basic Principles of Design and Layout 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.  Basic Principles of Design and Layout 7. Unity and Harmony  TASK Output: Campaign Poster Assumingly, you are running as an SK Chairman or SK Councilor in the upcoming barangay elections. Using Canva, create your own campaign poster following the basic principles of design and layout.  RUBRIC FOR GRADING Content – 5 Format (Balance, Hierarchy, Emphasis, Alignment, Pattern) – 10 Harmony of Elements used – 10 Color Contrast - 5 TOTAL = 30 points DEADLINE OF SUBMISSION OF HARD COPY (A4 size) : OCTOBER 14, MONDAY