11

Empowerment
Technologies
Quarter 1–Module 6:
Principles of layout, graphic, and visual message design

Development Team of the Module

Writer: Lanie B. Pangilinan

Editor: Rolylyn H. Dado
Reviewer: Ann Marjorie V. Pico
Illustrator: Froilan G. Isip
Layout Artist: Froilan G. Isip

Management Team Zenia G. Mostoles EdD, CESO V, SDS

Leonardo C. Canlas EdD CESE, ASDS
Rowena T. Quiambao CESE, ASDS
Celia R. Lacanlale PhD, CID Chief
Arceli S. Lopez PhD, SGOD Chief
June D. Cunanan EPS- English
Ruby M. Jimenez PhD, EPS-LRMDS

Published by the Department of Education, Schools Division of Pampanga

Office Address: High School Boulevard, Brgy. Lourdes,
City of San Fernando, Pampanga
Telephone No: (045) 435-2728
E-mail Address: [email protected]
Introductory Message
For the Facilitator:

Welcome to the Empowerment Technologies for Grade 11 Alternative Delivery Mode (ADM)
Module on the Principles of layout, graphic, and visual message design.

This module was collaboratively designed, developed and reviewed by educators from public
institutions to assist you, the teacher or facilitator in helping the learners meet the standards set
by the K to 12 Curriculum while overcoming their personal, social, and economic constraints in
schooling.

This learning resource hopes to engage the learners into guided and independent learning
activities at their own pace and time. Furthermore, this also aims to help learners acquire the
needed 21st century skills while taking into consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of the module:

As a facilitator you are expected to orient the learners on how to use this module. You also need
to keep track of the learners' progress while allowing them to manage their own learning.
Furthermore, you are expected to encourage and assist the learners as they do the tasks
included in the module.

For the Learner:

Welcome to the Empowerment Technologies for Grade 12 Alternative Delivery Mode (ADM)
Module on the Principles of layout, graphic, and visual message design.

The design of a webpage can make or break its impact on its audience. It plays a big role on
whether or not the audience will be encouraged to visit your site.

Learning the principles of good design is very important to create an effective composition or
design. They are rules to help guide a designer how to arrange the various elements of a
composition in relation to each other and the overall design.

The difference between a weak design and a strong one is completely dependent upon the
artist’s knowledge of the design principles and how well he/she applies them. All art, whether it
is Web design, industrial design, fine art, sculpture, commercial art, or graphic art, is subject to
the same principles of good design.

This module was designed to provide you with fun and meaningful opportunities for guided and
independent learning at your own pace and time. You will be enabled to process the contents of
the learning resource while being an active learner.

What I Need to Know

This module will assist you to evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
For the learner

Understanding the basic principles of graphics design will help you to make better decisions
with the graphics that you choose to convey your messages in the online environment. The
design of a webpage can make or break its impact on its audience. It plays a big role on
whether or not the audience will be encouraged to visit your site.

Learning the principles of good design is very important to create an effective composition or
design. They are rules to help guide a designer how to arrange the various elements of a
composition in relation to each other and the overall design.

At the end of this module, you are expected to:

1. identify the principles of graphics, layout and visual message design
2. evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design;
3. describe the importance of the principles of graphics, layout and visual message design
in creating online resources.

What I Know

Copy the format on a separate sheet of paper and encircle the word that is listed in the word
search box.

ALIGNMENT BALANCE COLOR

CONTRAST GRAPHIC LAYOUT
PROXIMITY REPETITION VISUAL HIERARCHY

WORD SEARCH
 Evaluating existing websites and online
Lesson
resources based on the principles of
6 layout, graphic, and visual message
design.
A beautiful design is not a product of great imagination or a result of an idea. Rather, it is a
product of carefully plotted design elements chosen to create a visual representation of the idea
and the imagination. Design is not about pictures placed together and arranged in a way that
creates a story. Design is about creating harmony among the elements and having them come
together in a final product that is clearly outstanding.

What’s In

Match the words in Column A to its definition in Column B. Write the letter of the correct answer
on a separate sheet of paper.
A B
1. Website A. A representation of the external form of a person or thing in art.
2. Layout B. It is a collection of web pages and related content that is identified by a
3. Images common domain name and published on a web server.
C. Collection of imagery, charts, and minimal text that gives a clear
4. Infographics
understanding overview about the topic
5. Uploading D. An item displayed on a screen or stored as data.
6. Graphic E. The way in which text or pictures are set out on a page.
F. The act of transferring something from one device to another, typically to
one that is larger or remote from the user or functioning as a server.

What’s New

MIXED UP: Arrange the letters to form the correct word being described. Write your answers
in your journal.
Arrange the jumbled letters below to reveal the different principle of graphics and layout.
1. E A B N C A L - lends stability and structure to an overall design of a layout or graphic
2. P T X O M Y R I I - this helps in creating a relationship between similar or related elements.
3. I T L G N E A N M - gives an ordered appearance to images, shapes and texts.
4. U V A S L I C R Y A I R H E H - this is formed when extra visual weight is given to the
most important element in your design
5. N I E P E T I R T O - creates a rhythm and strengthens the overall design by trying to be
consistent with the elements such as the color palette or the theme of the design.
6. T R C S A N T O - happens when there is a difference between the opposing elements in
your design.
7. L C O O R - this dictates the overall mood of your design.
8. T E N V G A I E P E C A S - the space that is left blank to create a shape or to highlight
the important components of the layout.
9. Y H T A P R Y P G O - it speaks out volumes about the work.

What is It

Fill in the blank. Select the answers from the box below.

BOLDNESS CREATIVE MINIMAL UNIQUENESS SIMPLICITY

1. __________ is a principle of visual message design that makes you stand out from all the
rest.
2. ______________ is a principle of visual message design that means not hesitating or fearful
in the face of actual or possible danger.
3. _________________ is the quality or condition of your design that is easy to understand.
4. ____________ is a principle of visual message design that turns new and imaginative ideas
into reality.
5. Keeping your text _____________ to produce more impact to your design.

Discussion of Activity 1
Evaluate the image and answer the questions given. Write your answer in your notebook.

Image source: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-

learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

Describe the image given above in terms of:

a. color b. Repetition c. Typography d. Simplicity e. Uniqueness

 What’s More

Independent Activity 1

Observe the given

website picture below.
Check the basic principle
of a website layout that
you can observe in the
picture. Write your answer
in your notebook.
Image source:
https://beautymnl.com/

Independent Assessment 1
Based from the website shown in Independent Activity 1, how does the basic principle of layout
affect the impact of the website to its audience?

Independent Activity 2
Compare and observe the sample infographics below. Explain how the principles of graphics
are applied in both pictures.

Image source: https://www.doh.gov.ph/2019-nCov/infographics

Independent Assessment 2
If you are going to create an infographic, what style and design are you planning to put in your
layout to make your infographic attractive and effective?

List down all the principles and elements that you plan to include and provide at least two
sentences to explain the reason why you decided to include that element and principle.

Independent Activity 3
Compare the images in terms of the principles of design in the table given below.

1.

https://www.mockplus.com/blog/post/bad-web-design
2.

https://www.mockplus.com/blog/post/bad-web-design

Principles Image 1 Image 2

Balance
Emphasis
Color
Repetition
Contrast
Alignment
Independent Assessment 3
Based on your answers in Activity 3, answer the following questions:

1. What makes a good design?

2. What is the importance of good design in attracting viewers and conveying your
message to them?

What I Have Learned

Copy this illustration in your journal. Complete the following conversations below by answering
the questions being asked.

What are the principles of

graphics and layout that
you have learned in this
lesson?

On the other hand, why is

it important to know these
principles in creating your
online resources?
 What I Can Do

Imagine that you have a business and you want to build a website about it. Considering the
basic principles of layout and visual message, draw and create your desired design of your
layout on a bond paper.

Assessment

Choose the letter of the correct answer and write on a separate sheet of paper.

1. 1. It can be seen in the internet that contains information or data that can visit via link or
URL.
A. Graphic B. Layout C. Website D. YouTube
2. The visual weight of objects, texture, colors, and space is evenly distributed on the
screen.
A. Alignment B. Balance C. Color D. Repetition
3. It refers to the arrangement of elements on a page usually referring to specific
placement of image, text and style.
A. Alignment B. Balance C. Design D. Layout
4. JM designed his infographic with limited text and filled it up with pictures. What principle
of visual message he followed?
A. Boldness B. Creativeness C. Minimal D. Uniqueness
5. Paula decided to create a web page and considered the pastel colors as the overall
theme of the design. What principle of layout did Paula follow?
A. Balance B. Boldness C. Color D. Repetition

Enumerate the following:

A. Principles of Layout and Graphic B. Principles of Visual Message

Additional Activities

Evaluate the image below. What can you suggest to improve its appearance considering the
principles of graphics and layout? Recreate the image on a short bond paper.

https://www.interaction-
design.org/literature/article/bad-design-vs-
good-design-5-examples-we-can-learn-
frombad-design-vs-good-design-5-
examples-we-can-learn-from-130706
 Answer Key

Minimal
Creative
Simplicity
Minimal
Boldness
Creative
B. Uniqueness
Simplicity
Boldness
Typography Uniqueness
Negative space ANSWERS MAY VARY What Is It
Color What I can Do
Contrast
Repetition D
Visual Hierarchy Typography F
Alignment Negative space C
Proximity Color A
A. Balance Contrast E
C Repetition B
D Visual Hierarchy What's In
C Alignment
A Proximity
C Balance ANSWERS MAY VARY
Assessment What’s New What I Know

References
1. https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-
frombad-design-vs-good-design-5-examples-we-can-learn-from-130706
2. https://beautymnl.com/
3. https://www.doh.gov.ph/2019-nCov/infographics
4. https://www.mockplus.com/blog/post/bad-web-design
5. https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-
frombad-design-vs-good-design-5-examples-we-can-learn-from-130706