Republic of the Philippines

Department of Education
National Capital Region
DIVISION OF CITY SCHOOLS – MANILA
Manila Education Center Arroceros Forest Park
Antonio J. Villegas St. Ermita, Manila

Information and Communications

Technology (ICT)

Grade 10 Webpage Design

Special Science Course

Quarter 1 Week 3
Module 3

PLANNING FOR WEB DEVELOPMENT

HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will disturb
you while enjoying the lessons. Read the simple instruction below to successfully
enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on this
module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

 Expectations - These are what you will be able to know after completing
the lessons in the module.
 Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
 Looking Back - This section will measure what learnings and skills that you
understand from the previous lesson.
 Brief Introduction-This section will give you an overview of the lesson.
 Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
 Remember - This section summarizes the concepts and applications of the
lessons.
 Checking your Understanding - It will verify how you learned from the
lesson.
 Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: APPLYING BASIC DESIGN PRINCIPLES, QUALITY IN WEB
CONTENTS, AND PROPER PLANNING IN WEB DEVELOPMENT

EXPECTATIONS
Upon completion of the module, learners should be able to:
 identify the basic web design principles;
 discuss characteristics of quality web contents; and
 follow the plan for web development.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Which web design principle refers to placement of related and unrelated
contents in a webpage?
a. balance b. contrast c. proximity d. unity
____ 2. Which web design principle refers to the application of different colors, shapes,
and sizes to draw viewer’s attention?
a. contrast b. proximity c. unity d. white spaces
____ 3. Balance refers to the symmetrical and asymmetrical arrangements of the text
and objects of a webpage. What type of design contains elements that do not
create mirror image?
a. asymmetrical b. symmetrical c. a & b d. none of the above
____ 4. Which characteristic of web contents refers to the reliability and correctness of
the content
a. accurate b. easy to understand c. readable d. useful
____ 5. Which characteristic of web content is important to avoid any legal trouble?
a. accurate b. easy to understand c. original d. useful
____ 6. Which characteristic refers to the use of least possible words to convey
message on the internet?
a. accurate b. concise c. original d. useful
____ 7. Which characteristic of web content makes visitors interested in reading the
contents of the website?
a. accurate b. readable c. original d. useful
____ 8. In planning a website, gathering team members is important. Which of the
following should not be a basis in choosing team members?
a. experience b. examples of work c. references d. school
____ 9. In planning a website, what will give web designers a clear view of the website
information structure?
a. content b. goals c. sitemap d. wireframe
____ 10. To attract target audience of a website, contents should be clear and of high
quality to make sure visitors will return. Which of the following is not an example
of content material?
a. blog posts b. links to other sites c. pictures d. video

3
LOOKING BACK TO YOUR LESSON

Directions: Look at each web browser logo. Then read and follow the
directions below.

1. Encircle the logo of Internet Explorer.

2. Draw a square around the logo of Safari.
3. Draw a heart around the logo of Opera.
4. Draw a line under the logo of Google Chrome.
5. Draw a triangle around the logo of Firefox.

BRIEF INTRODUCTION

An effective website design should be able to fulfill its purpose by conveying its
message while engaging the visitors at the same time. When designing a website there are
many essential factors that will contribute to how visitors will perceive it. A well-designed
website can help establish trust and guide visitors to stay and browse. Below are the basic
web principles that can help in presenting a website’s message in a professional and creative
way.

Web Design Principles

1. Balance –refers to the symmetrical and asymmetrical arrangements of the text and
objects of a webpage. Symmetrical design creates a style with mirroring sides. It happens
when the composition of design is distributed evenly around a central point which can be
horizontal, vertical, or radial form. Asymmetrical design contains elements that do not
create mirror image. Most of the time, these asymmetrical designs are actually balanced,
but just not through perfectly similar sides.
2. Proximity – refers to placement of contents in a webpage. Related contents should be
grouped visually to avoid creating clutter and for a more organized layout. Unrelated
contents should be placed further apart, to emphasize their lack of relationship.
3. White spaces – refers to the blank spaces placed around webpage elements. This allows
visitors to read important texts easily. It also gets their attention to images in the website
and give emphasis to major topics over details.
4. Contrast – refers to the application of different colors, shapes, and sizes that will draw
the viewers’ attention. Color schemes should be light and dark shades. Use a variety of
fonts for title and captions in order to create visual contrast in texts. Take note that too
much contrast can cause distraction to viewers. Stick to two (2) or three (3) different
design elements to the layout unified.
5. Unity – refers to the agreement and harmony of all the elements of the website. Some
key themes in the design should be repeated so that viewers can easily identify the

4
 company or person the website represents. It can be achieved by using the same
company logo, shapes, and fonts used.
6. Alignment – refers to the positioning of the elements of the website. Images and texts
should be aligned with the same invisible line to create logical flow for a more consistent
and organized look. The rule here is that edges of the images should line up with the
margins of the text. This principle results to a clean and plenty of white space that appeals
to viewers.

Characteristics of Quality Web Contents

Web content refers to the textual, aural, or visual content published on a website.
Content means any creative element such as text, applications, images, data, audio, video
files, etc. Web contents should be engaging and organized into various categories for fast and
easy navigation. It should also be optimized for search engines so it can respond to the
keywords used when searching.

The characteristics of high-quality contents are the following:

1. Useful – refers to the usefulness of the content to readers. Content must be

something people are interested in. It should be able to help or be of service to the
people reading it. It should have value.
2. Accurate – refers to the reliability and correctness of the content. Including obsolete
information may indicate perception of inaccuracy and may discourage readers to
return. Spelling and grammar should also be checked carefully because it plays a
vital role in sustaining credibility of information in the website.
3. Easy to understand – refers to the way how contents are presented. It should be
in a way the readers will easily comprehend. Shorter words and sentences are
easier to understand. Conclusions must also be placed at the beginning, followed
by some short details and then the full story. It is called an inverted pyramid style of
writing.
4. Readable – refers to the design and composition of the contents of the website that
makes them more accessible and readable. Headings, subheadings, tables, lists,
and emphasized words can be used to make contents clearer. Applying colors on
texts background can also help making the contents more visible.
5. Concise – refers to using the least words to convey message on the internet.
Readers prefer to read short yet concise information that tells the whole message.
Bulleted and numbered lists can be used to shorten information and to avoid using
paragraphs.
6. Original – refers to the authenticity of the website’s contents. Words, pictures, and
videos should be original works or make sure to get written permission from the
original creator of the work to avoid any legal trouble. Likewise, original contents
can be protected by using the copyright logo with the year and name of author. to
Establish an ethical website, respect the rights, feelings, beliefs, and opinions of
others.

5
Planning a Website

Step 1: Set purpose and goals

Identify the website’s purpose as well as the target audience. Set measurable, specific goals
for the website. Do you want to sell a product, educate your audience, and entertain them
or all of the above? Creating a list of the objectives to be accomplished will help in the total
design of the website.

Step 2: Create a budget

This includes the funds for web design, programming, and web hosting. Compare prices in
the market and consult professionals. Choose team members based on experience,
insightfulness, references, and examples of work.

Step 3: Assign roles

Make sure everyone on the team knows their role and what is expected from them. They
should always be updated of deadlines and new developments. The roles include:
 Company stakeholders (owner,  Web developer
marketing manager, or whoever else  Content writer and/or editor
represents a primary function of the  HTML/CSS professional
business) Web and graphic designer

Step 4: Create content strategy

After identifying the goals and target audience, the kind of materials the site will contain is
now clear. Content is anything that gives the visitors information. If the website’s objective
is to educate, and the target audience are high school students, then decide on what
resources should be shared to them. At this point, the best contents to attract the target
audience of the website should be clear. Materials of the website should be of high quality
to make sure visitors will return. Some examples of material are:
 Blog posts  Pictures
 Documents  Slideshows
 Video  Embedded social media feeds

Step 5: Create sitemap and wireframe

The sitemap serves as the foundation of a website. It helps give web designers a clear view
of the website’s information structure and explains the relationships among the web pages
and content elements. Wireframes provide framework for storing the site’s visual design and
content elements. It acts as a guide for the how the site will look.

Step 6: Design
A good web design is very important. It includes both usability and aesthetics. A poorly
designed and hard to navigate website will drive away visitors. They should be able to
navigate and go anywhere in the website. They should also be able to search using the
hyperlinks to easily move from the different topics within the website.

Step 7: Test
Testing is important in debugging and finding faults in the website. The website should
show up the way it was designed in all browsers including Chrome, Firefox, Internet

6
Explorer, Edge, and mobile browsers like Safari and Opera Mini. The website should be
tested in a cell phone, tablet, laptop, and desktop. It should have consistent appearance
no matter what device is used. All links should be working, images must be properly sized,
and all forms and other input fields properly working.

Step 8: Maintain
Work doesn’t end in launching the website. A website is an entity that continuously
promotes and represents a person or company that’s why maintenance is very important.
Monitor the website’s number of unique visitors, bounce rate, and which pages are most
popular. Assign who is responsible in posting new contents or monitoring site security.
Feedbacks from users are also valuable tool for improvement.

7
ACTIVITY: Sequencing

Directions: Read the following steps in planning a website. Arrange them in their proper
sequence by using numbers 1-8. Write the number on the space provided.

______ A. Create budget

______ B. Design
______ C. Test
______ D. Assign roles
______ E. Maintain
______ F. Set purpose and goals
______ G. Create sitemap and wireframe
______ H. Create content strategy

REMEMBER

An effective website design should be able to fulfill its purpose by conveying its
message while engaging the visitors at the same time. When designing a website there are
many essential factors that will contribute to how visitors will perceive it. The basic web
principles that can help in presenting a website’s message in a professional and creative way
includes balance, proximity, white spaces, contrast, unity, and alignment.

Web content refers to the textual, aural, or visual content published on a website.
Content means any creative element such as text, applications, images, data, audio, video
files, etc. Quality web contents should have the following characteristics: a) useful, b) accurate,
c) easy to understand, d) readable, e) concise, and f) original.

When planning a website, there are 8 steps to follow. Each step is important to the
success of the website being developed. It should be carefully carried out without missing any
essential part.

8
 CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Hope is designing a website for her online business. She is using key themes
repeatedly so viewers can identify the company easily. Which web design
principle is she applying?
a. alignment b. balance c. unity d. white spaces
____ 2. Aside from using key themes, Hope also made sure that the contents of her
company’s website, such as images and texts, are aligned with the same invisible
line. Which web design principle is she applying?
a. alignment b. balance c. proximity d. white spaces
____ 3. Rhian’s school project is to develop a website. Writing the contents of is
consumed a lot of her time because she made sure that all of the contents of her
website were her own creation. Which characteristic of high-quality web contents
did she apply?
a. accurate b. easy to understand c. proximity d. original
____ 4. Aside from creating her own contents for her project website, Rhian also made
use of headings, subheadings, tables, lists, and emphasis on important words.
Which characteristic of high-quality web contents did she apply?
a. concise b. easy to understand c. readable d. white space
____ 5. Hope and Rhian finally finished their respective websites after a lot of hard
work. Which step in planning a website, will check if the website will have
consistent appearance no matter what web browser and device is used?
a. create content strategy c. maintain
b. create sitemap & wireframe d. test

9
 POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Which web design principle refers to placement of related and unrelated
contents in a webpage?
a. balance b. contrast c. proximity d. unity
____ 2. Which web design principle refers to the application of different colors, shapes,
and sizes to draw viewer’s attention?
a. contrast b. proximity c. unity d. white spaces
____ 3. Balance refers to the symmetrical and asymmetrical arrangements of the text
and objects of a webpage. What type of design contains elements that do not
create mirror image?
a. asymmetrical b. symmetrical c. a & b d. none of the above
____ 4. Which characteristic of web contents refers to the reliability and correctness of
the content
a. accurate b. easy to understand c. readable d. useful
____ 5. Which characteristic of web content is important to avoid any legal trouble?
a. accurate b. easy to understand c. original d. useful
____ 6. Which characteristic refers to the use of least possible words to convey
message on the internet?
a. accurate b. concise c. original d. useful
____ 7. Which characteristic of web content makes visitors interested in reading the
contents of the website?
a. accurate b. readable c. original d. useful
____ 8. In planning a website, gathering team members is important. Which of the
following should not be a basis in choosing team members?
a. experience b. examples of work c. references d. school
____ 9. In planning a website, what will give web designers a clear view of the website
information structure?
a. content b. goals c. sitemap d. wireframe
____ 10. To attract target audience of a website, contents should be clear and of high
quality to make sure visitors will return. Which of the following is not an example
of content material?
a. blog posts b. links to other sites c. pictures d. video

10
ANSWER KEY

Pre-test
1. C 3. A 5. C 7. D 9. C
2. A 4. A 6. B 8. D 10. B

Looking Back To Your Lesson

Activity
A. 2 C. 7 E. 8 G. 5
B. 6 D. 3 F. 1 H. 4

Checking Your Understanding

1. C 3. D 5. D
2. A 4. C

Post-test
1. A 3. A 5. B 7. C 9. B
2. C 4. D 6. A 8. C 10. D

REFERENCES

Books:
Web Design 3rd Edition by Jemma Development Group

Online Sources:
https://www.feelingpeaky.com/9-principles-of-good-web-design/
https://tympanus.net/codrops/2012/09/04/perfectly-paired-using-symmetry-in-web-
design/#:~:text=Symmetrical%20design%20relies%20on%20principles,vertical%20or%20ra
dial%20in%20form.
https://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-
design/#:~:text=of%20disparate%20elements.-
,When,elements%20that%20do%20not%20create
https://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/
https://www.flottmanco.com/4-basic-design-principles-every-business-owner-should-know/
https://www.techopedia.com/definition/23885/web-content
https://www.writingthoughts.com/high-quality-content/
https://www.hostgator.com/blog/9-practical-steps-planning-website/
https://webflow.com/blog/the-web-design-process-in-7-simple-steps

Photo Credits:
Google Chrome logo by Google Wikimedia Commons
Firefox logo by Sean Martell for Mozilla Wikimedia Commons
Opera logo by Opera / Anti Wikimedia Commons
Safari logo by Apple Inc. Wikimedia Commons
Internet Explorer logo by Microsoft Wikimedia Commons

11
 Acknowledgement
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: Jessica Frances B. Dominguez, MTE

Teacher, Manuel G. Araullo High School

Editor: Ariel D. Tosio

Education Program Supervisor – TLE-TE/Voc

Reviewer/Validator: Anthony H. Ducta

Head Teacher, Manila Science High School

Management Team: Malcolm S. Garma, Regional Director

Genia V. Santos, CLMD Chief
Dennis M. Mendoza, Regional EPS in Charge of LRMS
and Regional ADM Coordinator
Maria Magdalena M. Lim, CESO V
Schools Division Superintendent
Aida H. Rondilla, Chief-CID
Lucky S. Carpio, Division EPS in Charge of LRMS and
Division ADM Coordinator

12