Republic of the Philippines

Department of Education
Region VII, Central Visayas
Division of Cebu Province

SELF-LEARNING HOME TASK (SLHT)

Subject: ARTS Grade: SIX Quarter: 2 Week: 5

MELC: 1. Discusses the elements and principles applied in layouting.

Competency Code: A6PL-IIf

Name _________________________________ Section ___________ Date ________

School ________________________________ District __________________________

A. Readings/Discussions

Layout and composition are the foundations of good insight communication. If

the elements of graphic design (line, color, texture, shape) are the ingredients laid out in front
of her and the principles of design (movement, rhythm, proportion, etc) are the recipe she uses
to make the meal, then think of design layout and composition as the final plating. L ayout can
be one of the most effective ways of storytelling.

Basics of a Layout
1. Theme—Decide which important message do you want to
communicate to your viewers.

2. Title - The central theme of your poster is determined by the title. The title should be
the largest text and most readable ( from at least 5 ft. away ) and should be tied with
and supported by all the other elements on the poster design.

3.Colors—Use a solid color for the background not a pattern. Limit

the number of colors as well – too many of them is distracting. Use
bright colors to lead viewer’s eyes to the center of interest or for
emphasis. Avoid placing beside each other any color that clash or
that fade each other out. Choose colors that help communicate the
message and unify all the elements together.
 4.Words / Fonts—How would the words be placed? Which words
should be large? Which small? Should the words be set formally or
San-serif ( without projecting features at the end of the strokes )
carefree and fun types, bold or italicized? How they appear on a poster
contributes to the power and visual appeal of the design

5. White space—Give your layout space to breathe. White

space is a vacant area in a poster. There are no texts,
pictures or other graphic images covering the white space.
The viewer’s eye will be overwhelmed if you have too little
and wander if you have too much.

Principles of Layout Design

1.Proximity- Proximity in layout design is a technique to show relevance between
elements by consciously bringing those that are related to each other (like headings and
associated paragraphs) closer in distance.
2.Alignment and Repetition-
Properly aligning elements and
creating a uniformly repeating
visual language may help your
users easily identify what you are
trying to say. Alignment and
repetition are techniques that can
help you create the base of a page
layout. Arranging elements in rows
by how they are related can direct
the flow of information.
Intentionally include margins
between elements, and balance
the proximity between them,
thereby grouping related
https://www.google.com/search?q=alignment+and+repetition&source=lnms&tbm
information together. This is an
=isch&sa=X&ved=2ahUKEwia- effective technique - not only to
93IqJjuAhVDyosBHZ_CDoIQ_AUoAXoECAoQAw&biw=1366&bih=657#imgrc=UB5o
DjtS11vVGM
improve the aesthetic of the site,
but also to improve readability.
3. Contrast- Contrast helps emphasize the difference between elements on a website,
and it is used as a means to add a distinctiveness to the design of individual elements.
Contrasting elements are created by incorporating different colours and fonts. Taking it
one step further, you can also introduce contrast by using different shapes, hues, and
element sizes - to name a few.
B. Exercises

Exercise 1

Directions: Complete the puzzle. Use the clues below to help you fill the boxes with the
correct words.

Exercise 2
Study the different layouts below. Discuss your answer in 2 to 3 sentences on how the elements
and principles of layouting are being used and applied. Write your answers on the space
provided beside each picture.
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

C. Assessment/Application/Outputs (Please refer to DepEd Order No. 31, s. 2020)

Directions: Read the questions carefully and encircle the letter of the correct answer.

1. What is another name for white space?

a. Holy space b.Outer space c. Blank space d. Negative space

2. What is the purpose of white space?

a. To make the composition look bright c. To define and separate different sections
b. To make the composition look empty d. To hurt people’s eyes

3. What is a rule to follow when working with contrast?

a. Use contrast for emphasis by placing things that are different next to each other.
b. Do not use contrast- it is a bad idea.
c.Use objects that are somewhat similar to create contrast.
d.Use contrast to distract your audience.

4. Why is using proximity good in your output?

a. So the page is filled up with no empty space
 b. So you have to look throughout the whole image to find what you’re looking for.
c. So the image is symmetrical.
d. So you can find all related items in one area.
5. What is contrast?
a. When one item is different from another.
b. When a composition has negative space.
c. When two colors are the same.
d. The foundation of a work.
6. What is a rule to follow when working with alignment?
a. Use many different alignments throughout a web page or design.
b. Change alignment several times through a page.
c. Choose one alignment and stick with it.
d. Choose your alignment randomly, without a reason or consideration for your design.
7. What is a rule to follow when working with proximity?
a. Arrange like things near each other, and keep things that are not related apart from each
other.
b. Put items all over the design with no concept of relative items.
c. Place items in the corners and middle of the page.
d. Place things too close together so that material is not easy to read or understand.

8. What does this illustrate?

a. Contrast
b. Repetition
c. Alignment
d. Proximity

9. What is a rule to follow when working with repetition?

a. Don’t repeat anything.
b. Repeat things so often that you drive you audience crazy.
c. Repeat elements such as colors, fonts, and logos for consistency.
d. Repeat every single thing on your web page or design at least once.

10. What principle does the image on the right illustrate?

a. Contrast
b. Alignment
c. Repetition
d. Proximity

D. Suggested Enrichment/Reinforcement Activity/ies

Directions: Create your own layout design on a separate sheet of paper and apply the
elements and principles in layouting.
 Rubric for Layouting
Criteria Excellent Good Fair Needs Score
Improvement
(10) (8-9) (6-7)
(1-5)
Format/ Use Exceptional Good thought Acceptable Poor use or no
of Principles planning and given to the thought given thought given to
of Layout thought given to principles of to the design the principles of
Design the design layouting principles layouting
principles
Originality Original and Original and Original Not an original
and exceptionally interesting concept concept
Simplicity exciting concept concept
Simple, yet Conceptually Fair, but some Layouts are not
powerful; will good, but some aspect may clean; will not be
look good in a aspect may need suitable in other
variety of need adaptation adaptation for contexts or in
contexts and in for use in other use in other color or black
color or black contexts or in contexts or in and white.
and white. color or black color or black
and white and white
Time Handed in early Handed in on time Handed in late
Management

References:

n.d. Canva. Accessed January 4, 2021. https://www.canva.com/learn/visual-design-composition/ .

Emma Galvin, Nicholas Lee. 2020. GreenBook. October 15. Accessed January 4, 2021.
https://www.greenbook.org/mr/market-research-news/the-fundamentals-of-layout-design/ .

2019. Internet Academy. March 27. Accessed January 4, 2021.

https://www.internetacademy.co.in/it/design/basic-principles-of-layout-design.html .

Reid, Meg. 2018. 99designs. Accessed January 4, 2021. https://99designs.com/blog/tips/design-

composition-and-layout/ .

—. 2018. 99Designs. Accessed January 5, 2021. https://99designs.com/blog/tips/design-composition-

and-layout/.
Prepared by: Edited by:

MA.EVERLY P. ALQUIZOLA RAQUEL C. SOLIS

Teacher I Bolocboloc ES, Barili 1 District PSDS

Reviewed by:

NENITA G. JARALVE
EPS-MAPEH, Division of Cebu Province

GUIDE

For the Teacher: Advise the learners to read the reading and discussion portion before they
attempt to answer the practice exercises. Going through the parts sequentially will help them
easily understand the topic.

For the Learner: Read through the self-learning home task from the first part to the last part.
Doing so, will help you understand better the topic.

For the Parent/Home Tutor: Assist your child and make sure that he/she reads the self-learning
home task from beginning to end to ensure proper understanding of the concepts.