2 7

1|P age
EMPOWERMENT TECHNOLOGIES (ICT for the Strands) 12

Quarter 2 - Module 7: Basic Principles and Graphics and Layout

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

Regional Director: Gilbert T. Sadsad

Assistant Regional Director: Jessie L. Amin

Development Team of the Module

Writers: Mary Jean B. Barde, Pauline Edna B. Blanza, Alyza B. Duran

Editors: Diana Rose Bermillo, Joan S. Barallas

Reviewer: Danilo P. Alano

Support Team:

Illustrators: Froilhan V. Salgado

Layout Artist:

2|P age
 EMPOWERMENT TECHNOLOGIES 12
MODULE 7: Basic Principles of Graphics and Layout

I. INTRODUCTION:

In this module, you will learn the basic principle of graphics and layout and their
different functions. This will also help you know the message of these graphics and
layout. This will also serve as your guide in identifying the good quality of infographics.

II. A. LEARNING COMPETENCY:

Upon completion of this module, you MUST 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-f-6
 Create an original or derivative ICT content to effectivity communicate a visual message in
an online environment related to specific professional tracks. CS_ICT11/12-ICTPT-Ie-f-8

B. WHAT YOU ARE EXPECTED TO LEARN:

At the end of this module, you should be able to:

 Independently apply the techniques of images manipulation and graphic design.

 Appreciate and create a simple infographic using web tool.
 Use image manipulation techniques on existing images to change or enhance their
current sate to communicate a message for a specific purpose.
 Utilize several file formats used on the web.

3|P age
 III. VOCABULARY LIST:

 Balance - is the distribution of the visual weight of objects, colors, texture, and space. If the
design was a scale, these elements should be balanced to make the design stable. Such
movement can be directed along lines, edges, shape, and color within the work of art.
(dummies.com)

 Download - is the act or process of copying programs or information into a computer’s

memory, especially from the internet or a larger computer. (www.dictionary.cambridge.org)

 Bandwidth - is the maximum amount of data transmitted over the internet connection at a
given time. (https://www.verizon.com)

 Infographics – are simply described as visual representations of information and data by

combining the elements of text image, chart, diagram, and video. An infographic is an
effective tool to present data and explain complex issues in a way that can quickly lead to
insight and better understanding.
 (https//: www.infogram.com)

 Graphics - are images or visual representation of an object. They are images displayed on a
computer screen contrasted with texts, which are comprised of characters, such as numbers
and letters, rather than images. (https://techterms.com/definition/graphics).

 Piktochart – is a web-based infographic application that allows users without designers to

easily create professional–grade infographics using theme templates. An important feature
of Piktochart is its HTML publishing capability, which generates graphics that are viewable
online with clickable elements for users. The program provides tools to add interactive maps,
charts, video, and hyperlinks. (https://findwords.info/term/piktochart)

 Template – is a file that is created with overall layout to be used with one or more
documents. (https://www.computerhope.com)

4|P age
 IV. PRETEST
Basic Principles of Graphics and Layout
---------------------------------------------------------------------------------------------------------------------

Name: ______________________________________________ Score: __________________

Section: _____________________________________________ Date: ___________________

Instructions: Read and understand the following questions or statements very carefully. From
the choices given, identify what is being referred to in each question/statement. Write the letter
only that corresponds to your answer on the space provided before each item.

1. These are sources of images for any project that you may want to embark. They
are original and something which many would like to work on.

a. Personal and Professional Photos c. Online Stock Photos

b. Scanned Images d. Stock Photo Library

2. These refer to those images that you transfer from printed photos and graphics to
your computer using scanning devices.

a. Online Stock Photos c. Stock Photo Library

b. Scanned Images d. Personal and Professional Photos

3. A free image manipulation tool that contains many features such as Photo Editor
and Animated GIF to help you in creating images for websites.

a. Piktochart c. SketchUp
b. Photoscape d. Trello

4. It makes the complex data become more visually appealing to the average user.

a. Tables c. Infographics
b. Piktocharts d. Slideshows

5. It uses several design elements to draw the viewer’s attention.

a. Style c. Variety
b. Proportion d. Emphasis

5|P age
 V. LEARNING EXPERIENCE:

INFORMATION SHEET 7.1

Basic Principles of Graphics and Layout
---------------------------------------------------------------------------------------------------------------------

LESSON 7.1 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

As a regular user of different websites and applications online, you must know
and consider the principles of layout and techniques in text, graphic, and image
manipulation to have an effective and appropriate file formats to use.

SOURCES OF PHOTOS AND GRAPHICS

There are many possible sources of photos and graphics. They can come directly
from your camera, from old pictures and can also be taken freely from internet sources
or can be purchased from the internet stores.

1. Personal and Professional Graphics

These are photos taken by amateur or professional photograhers. Using a digital
camera, these images are downloaded and are stored in computers. They are sources
of images for any project that you may want to embark.
2. Scanned Images
These refer to those images that you transfer from printed photos and graphics
to your computer using scanning devices for more improvement and modification
through editing tools.
3. Stock Photo Library
These refer to several photographs and created images that are available for
sale. They come in CD or in DVD format and many of these images are royalty free,
which means that they can be used without any additional fee.
4. Online Stock Photos
These are photos found in the World Wide Web. The WWW is now the dominant
source of photos and graphics around the globe because of the widely available
choices and reasonable prices.

ELEMENTS OF VISUAL DESIGN

1. Balance – is the visual weight of an object, texture, colors, and space that is evenly
distributed on the screen. When visiting a website, check the image, photo or graphic
if one side of it has the same amount of weight with the other side. The color should
also have similar visual weight.
Reference: http://graphicdesignschols.blogspot.com/2015/11/the-basic-principles-of-graphic- design.html

6|P age
 Figure 1. An example of Balance in Web Design, similarity in distribution of weight.

2. Emphasis – refers to a part or an area in the design that may appear different with
prominence in size, texture, shape, or color to attract the viewer’s attention.
Reference: https://www.interaction-design.org/literature/article/emphasis-setting-up-the-focal-point-of-your-design,
Author/Copyright holder: Mya Jamila. Copyright terms and license: CC BY-NC-SA 2.0

Figure 2. An example of Emphasis setting up the focal point of interaction – design.

3. Movement – is a visual element that guides the viewers around the screen. The goal
of creating movement is to lead the viewer’s eye all around the photo and land on
the focal point.

Figure 3. An example of Movement

Source: https://www.trentsizemore.com/2012/08/16/principles/
7|P age
4. Pattern, Repetition, and Rhythm – are
the repeating visual elements in an
image or layout to create unity in the
layout of an image. Rhythm is achieved
when the visual elements create a sense
of organization in movement.
https://mcescher.com/

Figure 4. This image uses Pattern and Repetition that

creates harmony for the entire image.

5. Proportion – is a visual element that creates a sense of unity where they relate well
with one another.
http://teresabernardart.com/principles-of-good-design-proportion/

Figure 5. An Illustration of Bad and Good Proportion

6. Variety – uses several elements to draw the viewer’s attention.

Reference: https://www.bing.com/

Figure 6. Bing.com in April 2018 uses combination of text and images to make the site
more appealing but not distracting from the site’s purpose.
8|P age
INFORMATION SHEET 7.2
Basic Principles of Graphics and Layout
---------------------------------------------------------------------------------------------------------------------
LESSON 7.2 HOW TO CREATE INFOGRAPHIC USING PIKTOCHART

Information graphics or infographics are used to represent information, statistical

data or knowledge in a graphical manner that is usually done in a creative way to
attract the viewer’s attention. Infographics make complex data become more visually
appealing to an average user.

CREATING INFOGRAPHIC USING PIKTOCHART

Piktochart is a free online app that allows you to create your own infographic. It offers
an easy-to-use editor, created just for you. From background colors and images to
inserting texts and banners, the Piktochart editor will empower you to do it within
seconds.

Steps to Create Infographic using Piktochart

1. Log in and select a theme.
First, begin by logging into create.piktochart.com. You will see the Piktochart
dashboard. This is where you can choose from three different visual formats:
infographics, presentations and printables. Select Infographic.

2. Configure your Canvas.

First, create a title of your infographic at the top of the editor. You will notice that canvas
is set up with multiple blocks. You can arrange each block depending on your needs.
 To add a new block, select Add Block ( + ).
 To delete a block, select Delete Block ( x ).
 To duplicate a block, select Clone Block ( = ).
 To change the order of the blocks, click Move Up or Move Down
(arrows) accordingly.
9|P age
 To set the size of a block, select the Settings and change the sizes accordingly.

3. Edit your Content.

Edit the text of your content by double-clicking it into a text box.

10 | P a g e
To change the font type, size, alignment, and color, use the editing tool bar.

To add more text boxes, click on the Text on the left panel and select the desired type.

4. Add Graphics via Drag and Drop.

You can add shapes, lines, icons, or photos to your content. Select Graphics on the
left panel.

11 | P a g e
Then, choose a category and browse for the icon or photo you would like to add.

You may also search for icons using the search toolbar.

Once you find an icon, drag, and drop it into the chosen canvas block. Use the tools on
the toolbar to configure your icon size and color.
5. Insert Data Visualization –Charts, Maps or Videos.
To Insert data visualization tools, select the Tools on the left panel. Familiarize
yourself with data visualization.

12 | P a g e
TO INSERT A CHART

1. Select Charts. Then select the chart type on the left panel as indicated below.
2. To add data, you can:
a. manually input data on the spreadsheet,
b. import data from a locally saved spreadsheet, or
c. insert complex data via a Google Spreadsheet link.
3. Then, go to the Settings tab to configure the format, legend, and colors.
4. Finally, click the Insert Chart to add the chart to your canvas.

TO INSERT A MAP

1. Select Maps. Then select the type of map — countries, or regions — on the left
panel as indicated below.
2. Click on the Edit Map to start configuring your map.
3. Add your data to the spreadsheet.

13 | P a g e
 4. To change the color of the map, select the Map and Border Color buttons.
5. Finally, click the Insert Map to add the map to your canvas.

TO INSERT A VIDEO

1. Select Videos. Insert a Youtube or Vimeo

URL in the text box. Then, click Insert.

2. Save and Export

 To save your infographic, click Save at the

top of the editor.
 To download your infographic into your local
drive as a PDF or image, click Download.
 To publish your infographic to the Web, click Share.

14 | P a g e
 3. Once you have published your infographic, you can set it to public, password-
protected, or private.
4. To directly share your infographic with friends or on social circles, either copy the
listed URL or click on the social media share icons. You can also share via direct
email, an export to other apps, or embed via HTML.
5. You can even present your infographic as slides via Presentation Mode!

15 | P a g e
 SAMPLE OF GOOD INFOGRAPHICS

16 | P a g e
 SAMPLE OF BAD INFOGRAPHICS

17 | P a g e
 IV. PRACTICE TASKS
ACTIVITY SHEET 7.1
Basic Principles of Graphics and Layout
--------------------------------------------------------------------------------------------------------------------------------
Procedure:
1. Go outside your house or school and bring with you any device that has a camera and take
pictures of any scene or image that shows and reflects the following principles:
a. Balance
b. Emphasis
c. Movement
d. Pattern, Repetition, and Rhythm
e. Proportion
f. Variety
2. Insert these images in a document with brief discussion or explanation in each photo
explaining how and in what way those principles were observed or reflected. Make sure that
you have saved the photos or images for future activities.

CRITERIA:

 Content and Relevance of Pictures to the Principles - 10 points

 Organization - 5 points

 Creativity and Originality - 5 points

 Safe Use of Equipment or Camera - 5 points
 Timeliness - 5 points
30 points

Note: Rate yourself about your safe use of media and equipment. Submit the rating to your
teacher.

18 | P a g e
ACTIVITY SHEET 7.2
Basic Principles of Graphics and Layout
--------------------------------------------------------------------------------------------------------------------------------
Procedure:
1. Show your creativity and strategy in creating an infographic using online and offline tool by
choosing from the following topics:
a. Rules of Netiquette f. Tips to Maintain a Healthy Body
b. Concepts about Love g. How to Save Money
c. Benefits of Drinking Water h. Ways to Boost your Immune
d. Stress Management System Against COVID-19
e. Time Management i. Good Study Habits
Note: You may choose another topic or issue aside from the suggestions above.
2. You may download mobile applications that is possible for designing or creating infographic
or you may use the following sites:
Sites for Creating Infographics
 https://www.canva.com/create/infographics/
 https://vizualize.me/
 https://www.easel.ly/
 https://piktochart.com/
 https://infogr.am/
 https://venngage.com/
3. Submit a printed and digital infographic to your teacher.

Your teacher will rate your work using the rubric below:
CATEGORY EXEMPLARY ACCOMPLISHED DEVELOPING BEGINNING
4 3 2 1
The use of The use of The use of The use of graphics
APPRO- graphics to graphics to graphics to is incomplete and
PRIATENESS present the present the present the contains 7 or more
message is message is message is unfinished elements.
suitable and on satisfactorily acceptably
purpose. suitable. suitable.
Major points are Major points Major points are Topic is
CONTENT presented and are presented. presented. oversimplified or
fully supported However, some However, most of fails to present
with convincing of them are not them are not major points.
arguments, supported with supported with
ideas, and data. convincing convincing
arguments, arguments, ideas,
ideas, and and data.
data.

19 | P a g e
 All graphics are All graphics are Some (up to 59%) Most (60 %+) of the
GRAPHICS related to related to of the graphics graphics are
AND LAYOUT content and content and are unrelated to unrelated to content
follow the follow the the content. Only and does not follow
principle of principle of some of the the principle of
graphics and graphics and content follows graphics and layout
layout layout the principle of (balance, emphasis,
(balance, (balance, graphics and proportion, variety,
emphasis, emphasis, layout (balance, and movement).
proportion,
proportion, emphasis, Too many graphics
variety, and
variety, and proportion, on one page. Most
movement). All
movement). All variety, and of the graphics are
graphics are in
appropriate graphics are in movement). Too distracting. Images
size and good appropriate size many graphics on are of poor quality.
quality. and good one page. Some They are either too
Graphics quality. of the graphics large or too small.
create an Graphics do are distracting.
overall theme not create an Images are of
and make overall theme poor quality. They
connections but show a are either too
that help the general flow of large or too small.
audience the topics.
understand the
concepts.
Some words Words are chosen Words are chosen
MECHANICS Most words are are carefully with less care; with less care;
carefully chosen; chosen; writing writing is writing is sometimes
writing is clear is clear and sometimes unclear; some words
and legible. legible. Most unclear; most are spelled
Most words are words are words are spelled incorrectly, and the
spelled correctly, spelled correctly and is proper punctuation
and the proper correctly, and grammatically is not employed.
punctuation is the proper correct.
employed. punctuation is
employed.
The infographic The infographic The infographic was
TIMELINESS The infographic was submitted was submitted 2 submitted 3 days
was submitted 1 day after the days after the after the deadline.
on time. deadline. deadline.
TOTAL

20 | P a g e
 VI. POST TEST
Basic Principles of Graphics and Layout
--------------------------------------------------------------------------------------------------------------------------------
Name: ______________________________________________ Score: __________________
Section: _____________________________________________ Date: ___________________
Instructions: Read and analyze the following questions or statements carefully. Identify what is
asked and is being referred to and encircle the letter of the correct answer from the given
choices.
1. Examine the layout of the cover page of the magazine
on the right page. What can you say about its design?
a. The layout is great in terms of balance and
proportion.
b. There is an emphasis on the picture of the girl in
the middle of the image which makes it
interesting.
c. The layout is poorly done – no order, no variation
on text justification, no respect on the image.
d. The overall look of the design is fine, maybe the
layout artist was just tired when he made it.

2. If you were the graphic designer of that magazine cover, what do you think you could
have done?
a. Kept the layout and submitted it to the boss at once.
b. Improved the layout by observing balance and proportion as well as by
minimizing the texts.
c. Looked for a different model and re-shot the photo.
d. Just ignored it, anyway it will still go through a critique of the bosses.

3. It is a free online app that allows you to create your own infographic.
a. Piktochart c. Pie Graph
b. Weebly d.Picschart

4. It makes a complex data become more visually appealing to the average user.
a. Tables c. Infographics
b. Piktocharts d. Slideshows

5. What is the principle applied when the visual weight of the object, texture, colors, and
space are distributed on the screen?
a. Balance c. Variety
b. Movement d. Proportion

21 | P a g e
 6. Examine the layout on the right side and tell what
makes it a bad infographic.
a. The layout used the right image size.
b. There is too much information added on the
layout that makes some of them irrelevant.
c. There is no balance on the layout because the
coffee was placed at the middle.
d. The use of PNG format of pictures is not
appropriate when making infographic.

7. These are the visual elements creating a sense of unity when they relate well with one
another.
a. Style c. Variety
b. Proportion d. Emphasis

8. In the basic principles of Graphics and Layout, Movement is the visual element that
guides the viewers on the screen, while Rhythm is another element that creates______.
a. Attraction c. Visual
b. Organization d. Unity

9. This allows you to create charts, maps, and video.

a. Tools c. Design
b. Uploads d. Color Scheme
10. These are photos found in the World Wide Web.
a. Stock Photo Library c. Personal and Professional Graphics

b. Online Stock Photos d. Scanned Images

22 | P a g e
 VII. ASSIGNMENT
Basic Principles of Graphics and Layout
--------------------------------------------------------------------------------------------------------------------------------
 What can you say about the design and the layout of the picture below? Describe if it is
a bad or a good infographic. Why? Write your answer on a piece of paper.

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

23 | P a g e
ANSWER KEY

PRETEST
1. a. Personal and Professional Photos
2. b. Scanned Images
3. b. PhotoScape
4. c. Infographics
5. c. Variety

POST TEST
1. c. The layout is poorly done – no order, no variation on text justification, no respect on
the image.
2. b. Improved the layout by observing balance and proportion as well as by minimizing the
texts.
3. a. Piktochart
4. c. Infographics
5. a. Balance
6. c. There is too much information added on the layout that makes some of them
irrelevant.

7. b. Variety
8. b. Organization
9. d. Tools
10. b. Online Stock Photos

24 | P a g e
REFERENCES:

 Empowerment Technologies by Innovative Training Works, Inc, 2016, Second Edition,

REX Book Store, pages 101-108
 regisjoyce. Empowerment Technology. http://www.ictcom444251764.wordpress.com.
June 2020
 Empowerment Technologies by Innovative Training Works, Inc, 2019, Second Edition,
REX Book Store, pages 93 -101
 Empowerment Technology by Jemma, Inc. 7 Berkshire St. Cor. Pasadena St.Cainta
Rizal
 Empowerment Technologies by Joel C. Yuvencio, C & E Publishing Inc., 2017.
 Cameron Chapman. Color for Web Design and The Smashing Idea Book.
 https://www.slideshare.net/MariaEloisaBlanza/sources-of-photos-and-graphics
 2020 Piktochart. All Rights Reserved. Malaysia Incorporated Company
 2020 Piktochart. All Rights Reserved. Malaysia Incorporated Company.
 (Emphasis in Web Design)

25 | P a g e