Empowerment

Technologies
Quarter 1 – Module 6:
Principles of Layout, Graphic,
and Visual Message Design
Empowerment Technologies – Grade 11
Alternative Delivery Mode
Quarter 1 – Module 6: Principles of Layout, Graphic and Visual Message Design
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

Writer: Cherryl D. Cordova

Editor: Geraldine A. Pinoy
Reviewer: Paulo F. De Guzman
Illustrator: -
Layout Artist: Cherryl D. Cordova
Cover Design: -

Management Team:
Schools Division Superintendent : Romeo M. Alip, PhD, CESO V
Asst. Schools Division Superintendent : Rolando M. Fronda, EdD, CESE
Chief Education Supervisor, CID : Milagros M. Peñaflor, PhD
Education Program Supervisor, LRMDS : Edgar E. Garcia, MITE
Education Program Supervisor, AP/ADM : Romeo M. Layug
Education Program Supervisor, Learning Area: -
District Supervisor, Assigned Subject : -
District LRMDS Coordinator, Assigned Subject: Pepito B. Hernandez
School LRMDS Coordinator, Assigned Subject: Cherryl D. Cordova
School Principal, Assigned Subject : Edgardo Jesus S. Basa II
Lead Layout Artist, Assigned Subject : -
Lead Illustrator, Assigned Subject : -
Lead Evaluator, Assigned Subject : -

Printed in the Philippines by Department of Education – Schools Division of Bataan

Office Address: Provincial Capitol Compound, Balanga City, Bataan
Telefax: (047) 237-2102
E-mail Address: bataan@deped.gov.ph
 Empowerment
Technologies
Quarter 1 – Module 6:
Principles of Layout, Graphic
and Visual Message Design
Introductory Message
For the facilitator:

Welcome to the Empowerment Technologies – Grade 11 Alternative Delivery Mode

(ADM) Module on Principles of Layout, Graphic and Visual Message Design.

This module was collaboratively designed, developed and reviewed by educators

both from public and private 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:

Notes to the Teacher

This contains helpful tips or strategies
that will help you in guiding the learners.

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.

1
For the learner:

Welcome to the Empowerment Technologies – Grade 11 Alternative Delivery Mode

(ADM) Module on Principles of Layout, Graphic and Visual Message Design.

This module deals with knowing the different principles of graphic and layout as
well as the visual message design. It will help and guide you in designing whatever
document you plan to do like poster, infographic, brochure, flyer, logo, or your
website. Though there are a lot of applications that you can use in order to do this
but it is still necessary to know the principles behind stunning and elegant graphic.

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.

This module has the following parts and corresponding icons:

What I Need to Know This will give you an idea of the skills or
competencies you are expected to learn in
the module.

What I Know This part includes an activity that aims to

check what you already know about the
lesson to take. If you get all the answers
correct (100%), you may decide to skip this
module.

What’s In This is a brief drill or review to help you link

the current lesson with the previous one.

What’s New In this portion, the new lesson will be

introduced to you in various ways such as a
story, a song, a poem, a problem opener, an
activity or a situation.

What is It This section provides a brief discussion of

the lesson. This aims to help you discover
and understand new concepts and skills.

What’s More This comprises activities for independent

practice to solidify your understanding and
skills of the topic. You may check the
answers to the exercises using the Answer
Key at the end of the module.

What I Have Learned This includes questions or blank

sentence/paragraph to be filled in to
process what you learned from the lesson.

What I Can Do This section provides an activity which will

help you transfer your new knowledge or
skill into real life situations or concerns.

2
 Assessment This is a task which aims to evaluate your
level of mastery in achieving the learning
competency.

Additional Activities In this portion, another activity will be given

to you to enrich your knowledge or skill of
the lesson learned. This also tends retention
of learned concepts.

Answer Key This contains answers to all activities in the

module.

At the end of this module you will also find:

References This is a list of all sources used in

developing this module.

The following are some reminders in using this module:

1. Use the module with care. Do not put unnecessary mark/s on any part of
the module. Use a separate sheet of paper in answering the exercises.
2. Don’t forget to answer What I Know before moving on to the other activities
included in the module.
3. Read the instruction carefully before doing each task.
4. Observe honesty and integrity in doing the tasks and checking your
answers.
5. Finish the task at hand before proceeding to the next.
6. Return this module to your teacher/facilitator once you are through with it.
If you encounter any difficulty in answering the tasks in this module, do not
hesitate to consult your teacher or facilitator. Always bear in mind that you are
not alone.

We hope that through this material, you will experience meaningful learning
and gain deep understanding of the relevant competencies. You can do it!

3
 What I Need to Know

This module was designed and written for you to be able to evaluate existing
websites and online resources based on the principles of layout, graphic, and visual
message design (CS_ICT11/12-ICTPT-Ie-f6).

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

1. Identify the different principles applied in the design and layout of websites
and graphics.
2. Evaluate the given websites and online resources based on the principles of
layout, graphic, and visual message design.
3. Make evaluation to websites and online resources a way to improve your
graphics designing and lay outing.

4
What I Know

5
 What’s In

A. Take a look at the figure below. Check its design and layout. Do you think the
basic principles of graphics design are applied?

B. What basic principles of graphics and layout are applied?

Notes to the Teacher

This module aims to prepare the students in graphics
designing and lay outing by simply knowing the principles of
layout, graphic and visual message design. It is essential to
learn and be able to apply the principles to get a quality
output.
6
 What’s New

Examine the sample website below. Check all the corresponding principles of
graphics and layout that are applied. How will you evaluate it?

7
 What is It

In a digital age, professional graphic designers with desktop publishing have made
it possible for nearly anyone to produce well-designed online and paper documents,
such as newsletters, business cards, websites, posters, letterheads, PowerPoint and
Keynote presentations, etc. Being in a digital age, it is beneficial to have knowledge
of basic design principles (Chavanu 2010).

BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

Font Styles

There are usually no more than three

different fonts used in a document or
design piece. It use the same one or
two fonts, but will change the size and
style of the font for different parts the
document. Many newsletters, for
example, make use of the classic and
readable Helvetica or Helvetica Neue
font. Regular Helvetica Neue font style
may be used for the body text, while a
slightly larger size of the same font, in
bold style, will be used for sub-titles
and pull-out quotes.

Proximity

The next element you will want to notice

is how items and information are
grouped together. As Williams points
out, “When several items are in close
proximity to each other, they become
one visual unit rather than several
separate units.” For example, in this
business card, information is separated
into groups, instead of scattered all over
the card. This makes the information
easier to read.

8
Repetition

Well-designed documents also use a

repetition of elements, as you can see in
this newsletter where three images are
cropped and aligned together for effective
repetition. Again, as Williams points out,
“You can repeat colors, shapes, textures,
spatial relationships, line thickness, fonts,
sizes, graphic concepts, etc.” The effective
use of repetition is pleasing to eye and it
can communicate important content in a
design.

Contrast

Notice how the designers use contrast to

make layouts graphically appealing. The
large PortagoITC TT font used for the
nameplate of the newsletter beside is in
near stark contrast with the Helvetica
Neue used for the body font. The designer
used a strong red graphic fill to make the
nameplate stand out. The idea behind
contrast as Williams explains, “is to avoid
elements on the page that are merely
similar. If the elements (type, color, size,
line thickness, shape, space, etc.) are not
the same, then make them very different.”

9
Alignment

The easiest basic principle of

design is alignment. Body text of
course is usually always aligned to
the left. But notice how other
elements (images, boxes, titles,
and information) are aligned with
one another. “Nothing should be
placed on the page arbitrarily,”
writes Williams. In the postcard
beside, the alignment of elements
is very evident. The image of the
house is aligned with the green
box. The street name and price of
the house are both centered, and the contact information is grouped together
under the photo of the real estate agent. The arrangement of these elements helps
the reader move his eyes from one element to the next.

15 GOLDEN PRINCIPLES OF VISUAL HIERARCHY

Visuals are everywhere and the commandments of visual communication serve as

the complete guide to the art of designing. Visual hierarchy on the other hand,
adds beauty and order to your design. It offers to your eyes visual assistance,
suggesting to them, what information to linger on to, as your vision glides through
it. It lays down a path for the data to flow in, to get absorbed into the brain
smoothly. It guides the human eye from one element of the data to the next, like an
invisible pointer moving through the data, to keep the reader free of any visual
fatigue. Adding hierarchy to your design will not let your readers get intimidated by
all the noise and clutter of the data. It can be applied in the construction of web
design, logo, or infographic (Brown 2014). Information graphics or infographics are
graphic visual representations of information, data or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing
graphics to enhance the human visual system's ability to see patterns and trends.

10
11
10 TIPS ON EVALUATING GRAPHICS OR VISUAL MESSAGE DESIGN

It is easy to get lost in the world of visual communication, where almost everything
seems to be original, unique and subjective. Luckily, it turns out that there is a
number of rather clear criteria, which can be extremely helpful in constructing
respectful and honest feedback (Pan 2016).

1. Use proper words and expressions. When discussing design, it is important to

use the right words and expressions that define and describe the visuals. Lines,
colors, letters and shapes are called design elements.

2. Search for C.R.A.P. C.R.A.P is a set of basic design principles that stands for
contrast, repetition, alignment and proximity. Look at design elements and ask
yourself these four questions:

 Is there enough contrast between design elements?

 Do design elements create a certain visual flow supported by the repetition of
forms?
 Are design elements aligned to each other in a clear, readable way?
 What is the distance between design elements and what type of visual
message does it create?

3. Pay attention to colour. Colour is an essential design element that should not
be underestimated in any project. Colour choices can entirely change the way of
reading a design.

4. Find emphasis. In a design, there is often an element that is much stronger

than everything else. It is called an emphasis. If you decide that a particular design
element needs attention, simply emphasize it by changing its size, shape or colour.

5. Analyze typography. Typography carries a message about a design. Take a look

at typefaces and fonts chosen for a project and ask yourself following questions:

 How many typefaces/fonts are used in this design?

 Do they create a clear message or maybe a feeling of chaos?
 Is there enough contrast between titles, tag lines and other types of text?
 Are pieces of text grouped in a clear, readable way?
 Is the text aligned well?

6. Take a look at images. If there are photographs, icons or other images used in
a design, it is important to analyze them. Do they support the project? Are they
properly used and fit the general design aesthetics? How would you estimate their
quality? Can you see pixels? Are they used accordingly to the copyright policy?
Using well-exposed good quality photographs is probably the best idea. However,

12
icons and symbols are not necessarily welcome – especially when downloaded from
internet.

7. Ask about target group. What is a purpose of the evaluated design? Is it a flyer
advertising art classes for kids or a poster inviting for a jazz concert? Maybe it is an
informative website about yoga practice or a layout of a cooking blog? The target
group is essential and it will determinate the usage of colours, fonts and any other
design elements.

8. Define clear messages. Take a look at a visual project, whatever it is, and ask
yourself about the message that it conveys. What type of a message is it exactly?
Does it support the chosen business, event, or activity? Is it encouraging and
entertaining? If the message is misleading, think of a better visual solution for the
evaluated design. There is always a space to improve!

9. Maximize impact. Is the design impactful, legible and meaningful? Could an

average viewer read and understand it well? Does it stand out and catch your eye?
Does it support defined goals and objectives? In the visual communication, things
are designed to make impact. What can you improve to make a project stronger?

10. Ask questions. While evaluating a visual project, you should ask questions
and make sure that you understand the creative process behind it. It will not be
always possible, but using the opportunity of communicating with a designer can
give you a chance to give a more constructive feedback. Sharpen your eye and truly
study the project – at some point it will become much easier! A trained eye has a
capability of analyzing the tiniest and the most subtle relations between design
elements to detect what could be improved.

13
 What’s More

Below is a sample infographic about child abuse. Evaluate it based on the ten (10)
tips on evaluating visual message design. Write your answer in your notebook or in
a piece of paper.

14
 What I Have Learned

The different principles of graphic and layout as well as the visual message design
really help and guide you in designing whatever document you plan to do like
poster, infographic, brochure, flyer, logo, or your website. Though there are a lot of
applications that you can use in order to do this but it is still necessary to know
the principles behind stunning and elegant graphic.

The basic principles of graphics design include fonts, _______________, alignment,

__________________, and ____________________. Fonts or types should not be more
than _____________ but the size and _____________ of the font can be changed in
different parts of the document. Several items can be grouped together or be in
close ________________ to each other to form as one unit. When it comes to
repetition, you can repeat the _______________, shapes, __________________,
spatial relationships, line thickness, _______________, _________________, graphic
concepts, etc. And to make your layouts graphically appealing, use
__________________. These basic principles are used in evaluating the graphics.
Another, when you evaluate, you need to find emphasis too in the use of size,
______________, or color. Other things to consider are __________________ or fonts,
________________, or ______________ group.

15
 What I Can Do

1. Make an evaluation checklist of layout, graphic and visual message design,

in a tabular form, based on the ten (10) tips on evaluating visual message
design.
2. Evaluate the infographic below.

16
Assessment

17
 Additional Activities

Do the following based on the ten (10) tips on Evaluating Visual Message
Design.
1. Look for an educational website that you can evaluate. Take note of the
URL.
2. Look for an infographic about fake news that you can evaluate. Take note of
the image link.

18
 19
Assessment: What I can Do: What I Have Learned:
1. Movement Depends on the output of 1. Repetition
2. Focal point the student 2. Proximity
3. Repetition 3. Contrast
4. Texture 4. Three
5. Rules 5. Style
6. Alignment 6. Proximity
7. Contrast 7. Colors
8. Lines 8. Txture
9. Rule of thirds 9. Fonts
10. Random 10. Size
11. Types 11. Contrast
12. Visual triangle 12. Shape
13. Balance 13. Typography
14. Whitespace 14. Images
15. Golden ratio 15. Target
What’s More: What’s New: WhaT’s In: What I Know:
Depends on the Depends on the Depends on 1. Movement
output of the student answer of the the answer of 2. Focal point
student the student 3. Repetition
4. Texture
5. Rules
6. Alignment
7. Contrast
8. Lines
9. Rule of thirds
10. Random
11. Types
12. Visual triangle
13. Balance
14. Whitespace
15. Golden ratio
Answer Key
References
Caligagan, Jemary. 2017. "Lesson 03 – Advanced Word Processing Skills."
jempizzicato. January 24. Accessed August 24, 2019.
https://jempizzicato.wordpress.com/2017/01/24/lesson-03-advanced-
word-processing-skills/.

Klein, Matt. 2019. "Working with Pictures, Shapes, and Graphics." Howtogeek.
April 30. Accessed August 24, 2019.
https://www.howtogeek.com/school/microsoft-word-document-formatting-
essentials/lesson4/.

Rosario, MM Del. 2018. "Short Biography of Jose Rizal: National Hero of the
Philippines." owlcation. June 12. Accessed August 26, 2019.
https://owlcation.com/humanities/jose-rizal.

Images

https://dynamic.websimages.com/s/themes/classy/v1.28/screenshots/thumb-
paisley.png

https://www2.sunybroome.edu/marcom/wp-
content/uploads/sites/10/2017/01/samplesite.png

https://4.bp.blogspot.com/-
5rBqlT_lWi8/WbYiXKKDvgI/AAAAAAAAAAM/62TzoOFUBYcIr_xXkBLDJ_4wEEYng
7gjgCLcBGAs/s1600/Yssa.jpg

https://www.doh.gov.ph/sites/default/files/basic-page/2019-
nCoVHealthAdvisory.jpg

20
For inquiries or feedback, please write or call:

Department of Education – Region III,

Schools Division of Bataan - Curriculum Implementation Division
Learning Resources Management and Development Section (LRMDS)

Provincial Capitol Compound, Balanga City, Bataan

Telefax: (047) 237-2102

Email Address: bataan@deped.gov.ph

21