11

Empowerment
Technologies
Quarter 1 – Module 10
Web Design Principles and Elements

Development Team of the Module

Writer: Aineil P. Conmigo

Editor: Rolylyn H. Dado
Reviewer: Ann Marjorie V. Pico
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 Alternative Delivery Mode (ADM) Module on Web
Design Principles and Elements.

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.

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 Alternative Delivery Mode (ADM) Module on Web
Design Principles and Elements.

Empowerment is giving students skills, funds, expertise, chance, inspiration, as well holding
them answerable and liable for outcomes of their actions that will contribute to their capability
and competence. On the other hand, because of empowerment technologies, ways of living of
people have improved so much. Everything that people wants right now, may it be in school,
hobbies or gaming, food ordering or shopping and a lot more are just at the tips of the fingers. In
just a click or a tap everything that people want is already in their doorsteps in just a few
minutes.

Your academic success lies in your own hands!

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 Know

This module was designed and written with you in mind. It is here to help you master the
introduction to Empowerment Technologies.

For the learner

The scope of this module permits it to be used in many different learning situations. The
language used recognizes the diverse vocabulary level of students. The lessons are arranged to
follow the standard sequence of the course. But the order in which you read them can be
changed to correspond with the textbook you are now using.

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

1. create a web page using Microsoft Word;
2. create your own website using a free host;
3. design a website using an online WYSIWYG platform; and
4. edit and insert elements for their website.
 What I Know

True or False: Write T if the statement is correct and F if incorrect. Write answers in
your notebook.

1. HTML stands for Hypertext Markup Language.

2. Social Media Platform websites like Facebook, allow you to create not only personal
accounts but also pages and groups where you can share content.
3. Cloud typically looks like a newsletter where you are given options to change the design
to your liking.
4. CMS is used in blogs, news websites, and shopping.
5. Facebook has billions of users.

Apply web design principles and elements

Lesson using online creation tools, platforms and

10 applications to communicate a message for a

specific purpose in specific professional
tracks
While it's actually easy to build a web page, it's really tough to make it look exact. If all you want
is plain text, everything is really pretty upfront. The complicated part is when you want
something extra. Most bad web pages are corrupt because of their design rather than their
content so take extra care: Keep it simple. The more material on the page the scrappier it gets
and the less likely you are to keep the attention of the guest.

What’s In

Rearrange the following steps in chronological order by numbering them from 1 to the last
number of the steps. Write X if the step does not belong.

SETTING UP A FREE BLOG USING WORDPRESS.

______ Click on Change Your Blog Description or Permissions.

______ Create a free Word Press account.
______ Choose a free theme then click Customize.
______ Edit the page theme to your liking.
______ Delete another existing blog.
______ Choose the option Create a New Blog or Register Another Blog.
______ Pick a blog address and name.
______ Change the general settings including the site title, tagline and time zone.
______ On the left menu, choose Appearance>Themes.
 What’s New

Below is a group of pictures representing the mystery words in their respective boxes. Using the
pictures as clues, guess the hidden phrase related to the lesson in this module. Happy
guessing!

What is It

Online Platforms for ICT Content Development

1. Social Media Platforms –

a. Blogging Platforms
b. Content Management System (CMS)
c. Cloud computing

Basic Web Page Creation

1. WYSIWYG (pronounced "wiz-ee-wig") is the
acronym for What You See is What You Get. The
first true WYSIWYG editor was a word processing
program called Bravo was invented by Charles
Simonyi.

Basic Web Design Elements Basic Web Design Principle

1. Line 1. Balance
2. Shape 2. Emphasis
3. Texture 3. Rhythm
4. Space 4. Unity
5. Size 5. Contrast
6. Value
Below are famous logos that you may be familiar with. Identify them and classify if they are
under the social media platform (write A), blogging platforms (write B), and content
management system (write C).
_____ 1.
F_C_BO_K

_____ 2.
T_K_OK

_____ 3.
B__G_ER

_____ 4.
I_ST __R A_

_____ 5.
W_RD__E_S

Discussion Activity 2: Bane or Boon?

Read the following statements that are related to cloud computing. Identify if the statement
illustrates an advantage of cloud computing (write BOON) or a disadvantage of cloud computing
(write BANE).

1. It saves you money from buying software licenses and additional hard disk space.
2. Cloud computing saves hard disk space.
3. It is more prone to hacking.
4. You save money from buying software licenses and additional hard disk space.
5. It may still require compatible software like a browser.
6. There is a limited control over infrastructure itself.
7. There is no need to update because it updates automatically.
8. There is a security risk of doing things over the Internet as opposed to your personal
computer alone.
9. Cloud computing can be hampered down by slow internet speed, no connection, or no
cloud computing.
10. There is a minimum system requirement.

Discussion Activity 3: Elements of Design Creation

Below are images that show the different Elements of Design Creation. Identify them.
1. 4.

L__E T_XT__E
2. 5.

S_Z_ SP__E
3. 6.

S_AP_ V_L_E

Discussion Activity 4: What’s Your Insights?

Using your own words and insights, define the different basic web design principles.

Balance

Emphasis

Rhythm

Unity

What’s More

Independent Activity 1
Arrange the steps in making a website using Microsoft Word by writing 1 st – 6th on the space
provided before the item number.

1. Specify the file name ―Sample Web Page.‖

2. On the Save As dialog box, locate the local drive from which you will save the file.
3. Type anything on the page like ―Welcome to my Website.‖
4. On the Save As type, select ―Web Page (*.htm; *.html).‖
5. Open Microsoft Word.
6. Click on File > Save As > Browse.

Independent Assessment 1
Find the following words in the puzzle. Words are hidden and .

BALANCE CONTRAST EMPHASIS RHYTHM UNITY

Independent Activity 2
Flex your Empowered Mind: Find the term being described by filling-in the missing letters.
These business terms and concepts will be useful as you go through this module and explore
the lesson it offers.

A B
1. It allows you to create not only personal accounts but also pages A. S_C_A_ M_D_A
and groups where you can share content. PLATFORMS
2. It typically looks like a newsletter where you are given options to B. B_____NG
change the design to your liking. PLATFORMS
3. It is a computer application (sometimes online or browser-based) C. C_N_E_T
that allows you to publish, edit and manipulate, organize and delete M_N_G_M_NT
web content. SYSTEM
4. The practice of using a network of remote servers hosted on the D. C___D
Internet to store, manage, and process data, rather than a local COMPUTING
server or a personal computer.
E. C_A_L_S
5. The word processing program called Bravo was invented by _____. S_M_N_I

Independent Assessment 2
What are the Basic Web Design Elements? Describe each element.

L
S
T
S
S
V
Independent Assessment 3
Arrange the jumbled words below to find the terms being described by the clues provided below.
These basic design principles terms and concepts will be useful for you as you study the
lessons for this module.

1. NCEALAB = _______________
2. ISSAHPEM = _______________
3. THMYHR = _______________
4. TIYUN = _______________
5. SATRTNOC = _______________
Here are your clues:
1. It occurs when all the design elements are equally distributed through the design.
2. It indicates the most important element on the page based on the message. It's the
element that stands out and gets noticed first.
3. It is a pattern created by repeating elements. Rhythm denotes the movement in the way
that elements direct our gaze to scan the message for understanding the information.
4. It is achieved when all the design elements relate to one another and project a sense of
completeness.
5. It stresses the visual differences in size, shape, and colors between the elements to
enhance the perception of a message intended.
 What I Have Learned

What are the online platforms that you can use for ICT content development? What are
Cloud computing applications? What is WYSIWYG stands for? What does it allow? What
are the basic web design elements? What are the principles of design?

1. Online platforms that you can use for ICT content development are social media
platforms, like Facebook and Multiply, and blogging platforms, like WordPress, Tumblr,
and Blogger.
2. Cloud computing applications are those that do not need any installation and are readily
available over the internet.
3. WYSIWYG stands for What You See Is What You Get. It is an editor that allows you to
create and design web pages without any coding knowledge.
4. The basic web design elements are line, shape, texture, space, size, and value.
5. The principles of design— balance, emphasis, rhythm, unity, and contrast—define
the structural foundation of a design and determine how the various design elements are
organized within the web page.

What I Can Do

Based on what you have understood from the topic, define and describe the basic web design
principles. Use your own words and insights by writing at least 10-20 words in your notebook.

Balance

Emphasis

Rhythm

Unity
Contrast

Assessment

Write the CAPITAL LETTER of your answer. Write your answers in your notebook.

1. It is the application of scientific knowledge for practical purposes especially in industry.

A. Facebook
B. Internet
C. Social Media
D. Technology
2. What is WYSIWYG?
A. What you see is what you get
B. When you saw it you get
C. When you see is where you get
D. Who you see, when you get
 3. What is the element of length as a mark connecting any two points?
A. Line B. Shape C. Space D. Text
4. Who invented the first true WYSIWYG editor and it was a word processing program
called Bravo?
A. Aristotle
B. Charles Simonyi
C. Plato
D. Galileo
5. It stresses the visual differences in size, shape, and color between the elements to
enhance the perception of a message intended.
A. Balance B. Contrast C. Emphasis D. Value
6. It is a pattern created by repeating elements.
A. Balance B. Contrast C. Emphasis D. Rhythm
7. It does not indicate the most important element on the page based on the message.
A. Balance B. Emphasis C. Rhythm D. Unity
8. It refers to the external outline of a form or anything that has height and width.
A. Rhythm B. Shape C. Unity D. Value
9. Adds dimension by creating the illusion of depth in a design.
A. Contrast B. Size C. Space D. Value
10. What is the application that do not need any installation and are readily available over
the internet?
A. Blogger
B. Cloud Computing
C. Tumbler
D. Wordpress

Additional Activities

Assuming that you are going to create a website about your life as a student, what would it look
like? Considering the basic web design elements and the principles of design, draw the home
page of your website.

Your website should include the follow:

1. Name of your website with logo

2. A space wherein you are describing your life a student
3. Drawings related to you and your life as a student
4. Draw your website on the blank webpage below:
January 28, 2017 from the World Wide Web: http://learn.daveharperdesign.com/design/
Resnick, E. (n.d.). Design for Communication, Conceptual Graphic Design Basics. Retrieved on 4.
World Wide Web: http://whatis.techtarget.com/definition/WYSIWYG-what-you-see-is-what-you-get
Rouse, M. (n.d.). WYSIWYG (what you see is what you get). Retrieved on January 28, 2017 from the 3.
Philippines.
Innovative Training Works, Inc. (2016). Empowerment technologies. Rex Bookstore Inc. Manila, 2.
http:/billconner.com/techie/webpages.html 1.
References
INDEPENDENT ASSESSMENT INDEPENDENT ASSESSMENT
3 2
1. BALANCE LINE
2. EMPHASIS SHAPE
3. RHYTHM TEXTURE
4. UNITY SIZE
5. CONTRAST SPACE
VALUE
What’s More: DISCUSSION ACTIVITY 1: What I Know/Pre-Assessment
INDEPENDENT 1 NAME THE LOGO T
5 FACEBOOK T
4 TIKTOK T
2 BLOGER T
6 INSTAGRAM T
1 WORDPRESS What’s In
3 DISCUSSION ACTIVITY 2: 4 5. X
INDEPENDENT ACTIVITY 2 BANE OR BOON 1 6. 2
SOCIAL MEDIA BOON 6. 6 7. 3
PLATFORMS BANE 7 8. X
BLOGGING BOON 7. What’s New:
PLATFORMS BOON W – HAT
BLOGGING BANE 8. Y - OU
PLATFORMS BANE S – EE
CONTENT BOON 9. I– S
MANAGEMENT BANE W – HAT
SYSTEM 5. BANE 10. Y – OU
CLOUD BOON G - ET
COMPUTING DISCUSSION ACTIVTY 3:
CHARLES SIMONYI ELEMENTS OF DESIGN
CREATION
LINE 4.
TEXTURE
SIZE 5.
SPACE
SHAPE 6.
Answer Key