Republic of the Philippines

Department of Education

Name: ____________________________ Grade & Section: ___________________ Score: ____________

School: Teacher: ____________________________
Subject: Empowerment Technology
Sem/Quarter/Week: SEM 1/Quarter 2/Week 2
Lesson Topic: Evaluate existing websites and online resources based on the principles of
layout, graphic, and visual message design.

CS_ICT11/12-ICTPT-Ie-f-6

Reference/s: Empowerment Technology Modules

____________________________________________________________________________________________________________________
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 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 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.

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com
 Republic of the Philippines
Department of Education

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.

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.

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com
 Republic of the Philippines
Department of Education

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.

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.

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

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com
 Republic of the Philippines
Department of Education

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.

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.

ACTIVITY 2: 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 C. Change the hue of the artwork or every
B. Adjust the saturation and value 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. It gives consistency. C. To add beauty to the design.
B. It adds visual weight. D. 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. Graphic
B. Layout D. Message

4. Which principle of design is when a designer arranges the elements or

text according to its context?
A. Balance C. Emphasis
B. Harmony D. Hierarchy

5. Which type of balance gives a mirror-like design that is proportionally equal

to the other side?
A. Asymmetrical C. Symmetrical
B. Semi-Balance D. Semi-Proportion

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com
 Republic of the Philippines
Department of Education

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?

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. Emphasis
B. Pattern, Repetition and Rhythm 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. Contrast
B. Hierarchy 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 C. By adding illustrations or images
B. By making the text bold or italic 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. Size
B. Statement D. Word

REFLECTION: 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.

_______________________________________________________________________________________________
_______________________________________________________________________________________________
_______________________________________________________________________________________________

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com
 Republic of the Philippines
Department of Education

ADDITIONAL ACTIVITIES: Browse the given websites listed below and evaluate the layout and design of their pages
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. Grab and paste a screenshot of your
every page to be evaluated. Do it in a separate sheet. (40 points)

Write your answer in a separate sheet of paper. You are expected to submit 5 Website Design Assessment Checklists.

1. https://www.deped.gov.ph
2. https://education.minecraft.net
3. https://teachforthephilippines.org
4. https://arvr.google.com/ar
5. https://www.canva.com

You will be rated according to this rubric:

Address: Octavio Vill., Brgy. Cannery Site, Polomolok, South Cotabato

Facebook Account: Aura Lee
Contact Number: 09076916691
Email Address: miletech304560@gmail.com