Empowerment

Technologies
Quarter 1 – Module 9:
Web Design Principles and Elements
Physical Education – Grade 11
Alternative Delivery Mode
Quarter 1 – Module 9: Web Design Principles and Elements
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: Jaycee B. Barcelona

Editor: Geraldine A. Pinoy
Reviewer: Paulo F. De Guzman
Illustrator: Jaycee B. Barcelona
Layout Artist: Jaycee B. Barcelona
Cover Design: LRMDS-Bataan

Management Team:
Schools Division Superintendent : Romeo M. Alip, PhD, CESO V
OIC-Asst. Schools Division Superintendent: William Roderick R. Fallorin
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 : -
District Supervisor, Dinalupihan : Rodger R. De Padua
Division Lead Book Designer : Jenelyn D. Rivero
District LRMDS Coordinator : Pepito B. Hernandez
School LRMDS Coordinator : Jaycee B. Barcelona
School Principal : Edgardo Jesus S. Basa II
District Lead Layout Artist, Empowerment Tech.: - District Lead
Illustrator, Empowerment Tech. : - District Lead Evaluator,
Empowerment Tech. : -
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 9:
Web Design Principles and
Elements
Introductory Message
For the facilitator:

Welcome to the Empowerment Technologies: ICT for Professional – Grade 11 Alternative Delivery
Mode (ADM) Module on Web Design Principle and Elements!

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:

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: ICT for Professional – Grade 11 Alternative Delivery
Mode (ADM) Module on Web Design Principles and Elements!

1
The hand is one of the most symbolized part of the human body. It is often used to depict skill, action
and purpose. Through our hands we may learn, create and accomplish. Hence, the hand in this learning
resource signifies that you as a learner is capable and empowered to successfully achieve the relevant
competencies and skills at your own pace and time. 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.

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

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:

2
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!

What I Need to Know

This module provides the basic concept of web design principles, elements and its essential parts. This
will also help you to develop a visually good website based on its purpose. Moreover, it will prepare
you to create a website of your own according to your chosen track. Therefore, you must make sure that
you will not skip any parts of this module.

Upon successful completion of this module, you are expected to:

1. evaluate web design principles and elements using online creation tools, platforms and
application;
2. identify the different parts of a website based on their purpose; and
3. apply web design principle and elements by illustrating a draft concept of your website
according to your chosen track.

Learning Competencies

3
Apply web design principles and elements using online creation tools, platforms, and app locations to
communicate a message for a specific purpose in specific professional tracks. (CS_ICT11/12-ICTPT-
Ig-h-10)

What I Know

Read the following questions carefully and choose the letter that best describes the answer. Write your
answer in a separate sheet of paper.

1. These are general rules for the design of a website that include basic guidelines for the design
layout and interaction design.
a. Web Design
b. Web Design Elements
c. Web Design Principles
d. All of the above
2. This is the starting point of building a website that provides clear intention on your website.
a. Communication
b. Load time
c. Purpose
d. Simplicity
3. It is considered as the backbone of your website, because this is the main reason why people
are seeking your website in the first place.
a. Aesthetic
b. Content
c. Usability
d. Visibility
4. This web design elements can help you improve the functionality of your website based on the
comment and suggestion of the users.
a. Aesthetic
b. Interaction
c. Usability
d. Visibility
5. Which of the following is the basic elements of web designing?
a. Content
b. Usability
c. Visibility
d. All of the above
6. What design principle allows your website to work on mobile devices.
a. Communication
b. Load Time
c. Responsive
d. Simplicity
7. Which of the following is the basic principle of web designing?
a. Communication
b. Purpose
c. Simplicity

4
 d. All of the above
8. Which web design elements requires you to have a marketing plan to attract more visitors on
your website?
a. Visibility
b. Aesthetic
c. Usability
d. Interaction
9. What web design principle direct you to formulate a straight forward and easy-to-digest
information in order to establish connection with the user?
a. Communication
b. Purpose
c. Responsive
d. Simplicity
10. Which of the following web design elements contributes to the visual appeal of your website?
a. Aesthetic
b. Visibility
c. Usability
d. Content
11. This element allows the user to navigate your website easily even with a little thought they
have.
a. Interaction
b. Simplicity
c. Usability
d. Visibility
12. Which of the following web design principles refers to the speed and performance of your
website?
a. Communication
b. Load time
c. Purpose
d. Simplicity
13. This is the overall appearance of your website that contributes to the complete user experience.
a. Web Design
b. Web Design Elements
c. Web Design Principles
d. All of the above
14. Which of the following content must your website should have?
a. High-definition videos
b. High-resolution imagery
c. Up-to-date information
d. All of the above
15. Which among the following design principle limits the design to avoid distraction?
a. Simplicity
b. Load time
c. Communication
d. Purpose

5
 Lesson
Web Design Principles and
1 Elements
Having a website become a common requirement in attracting a potential customer. Various sector such
as education, businesses, entertainment and other service provider adopt on this kind of global trend
that lead to a faster delivery of information and other transaction online. Today, websites have grown
out to be more than just digital presence and creating one become an evolving art. For this reason, it is
important to consider the different web design principles and elements so that your website can grab
the customer attention and help to incisor more users.

What’s In

Before we proceed to the new lesson, let us have a short review about the principles of layout, graphic,
and visual message design through recognizing the different images below. This will help you to better
understand the lesson about web design principles and elements.

For this activity, identify which principle of graphic and layout best describe the following images
bellow. Choose your answer inside the box located at the bottom page then write your answer in a
separate sheet of paper.

1. 2. 3.
________________________
__________________________________
________________________
RED WHITE __________________________________
________________________
__________________________________
________________________

Balance Hierarchy Contrast

Emphasis Alignment Repetition

6
 What’s New
Examine the following website below and share your thoughts that best describe the
design of the website by using one word (ex. Simple). You can visit the link below
for further analysis.

1. Link: https://www.microsoft.com/

2. Link: https://kahoot.com/schools/

3. Link: https://commons.deped.gov.ph/

7
 What is It
Creating a website is often challenging and hard because it requires more than an
aesthetically pleasing appearance. In fact, there are billions of websites in the ‘world
wide web’ and only a few thousand of them are mostly good website. Several factors
such as consistency, colors, typography, imagery, simplicity, and functionality are considered when
building a website. To further understand, you need to study web design principles and elements that
will serve as a guideline on web development.

Web Design Principles

Web design principles are general rules for the design of website that include basic guidelines for the
design of layouts and interaction design. It will also help you on how your website will work based on
the design you put into it. In this module, we have outlined the 5 basic principles of a good web design
from various online resources to address what we consider to be the most accurate, concise and
comprehensive yet easy to understand principle.

1. Purpose The starting point of building a website is to have a very clear purpose. This
could be anything from providing information, selling
products to entertainment. Having a simple clear intention
on your website may accommodate and meet the user expectation
with what you have to offer. Therefore, you have to be crystal clear
about the objectives your web design is going to achieve.

2. Simplicity Over-designed website may not work and may lead to

distraction from the main purpose of your website. Having design
features that do not serve the purpose may be frustrating to the
loading time of your website. Keep your design as simple as
possible so that the users can feel it easy-to-use and can find what
they are looking. Remember

simplicity always works in an effective web page design.

3. Load Time Crowded and over-designed web design can affect the loading time of your
website. This may result to lose your visitors even if every aspect
of your website has a clear purpose. To improve the speed
and performance of your website you need to simplify your
design to optimize its loading time.

8
4. Communication To establish better communication with the users, you must formulate
straight forward and easy-todigest information. This will
establish connection with the user to spend more time on your
website. Organizing information by making good use of
headlines and sub-headlines, illustration, and using bullet
points is a clear and consistent ways of communication to
convey information to the
users.

5. Responsive The best way to design an effective website is to make it mobile-friendly on

which the design of your website can shrink or expands as per the
dimension of the screen of the device. Today, with the growing use of
smartphones and tablets to browse the web, designing a responsive and
adoptive website is a must. Making your website available across
multiple devices will attract more users

Web Design Elements

Element of web design is the overall appearance of your website. It is the convergence of all visual
elements that contribute for a complete user experience based on its content, usability and other aspect
of the website. On this module, we gather the top 5 most critical elements on web designing that your
website should have.

1. Content Content is considered as the backbone of your website because this is the main
reasons people seeking your website at the first place. Using
video, animation, relevant news, up-to-date information and
high-resolution imagery provide a great deal for your website
to be engaging, effective and popular. This will ensure longer
participation of the user on your website.

2. Usability Usability anticipates what the users may think

and help them fulfill their needs with as little effort as
possible. Your website must be easily to navigate, intuitive,
accessible and user-friendly using navigation buttons. This
will allow user to know where they are on the website at all
times and be able to find where they want to go with

little thought they have. This will also be able to access any
page they need without having to view the whole site.

3. Aesthetic Aesthetics includes factors such as balance,

9
 movement, pattern, scale, shape and visual weight. This factor,
if done properly, will visually contributes the credibility of
your design. Having a visually impressive yet simple website
across all devices will reflect on what quality you have on your
website design.

4. Visibility The success of your website is based on the

volume of user engagement you have. Even if you had the
most aesthetically pleasing and userfriendly website on the
web, it would still be unsuccessful unless it could be found.
This element of web design is vital, and it requires to
formulate a plan to market your website using

search engines optimizer, social media and email marketing.

It’s important that you understand how to be found, what
platforms to target and how to utilize your content.

5. Interaction Adding comment boxes and opinion polls in the

design of your website can help you to improve the
functionality of it. This will allow you to engage with the
users, hold their attention, direct them and finally encourage
them to contact you. Because your website isn’t just there for
show, it is there to help your audience and ensure your
growth.

Anatomy of a Website

Knowing the basic structure of a website can really help you understand how to build an effective one.
The example below will show you the basic structure of a website.

10
This is an example of a homepage which is known as the main or first page of your website. This page
usually acts as an overview, to give visitors an immediate sense of what you offer. It is also the starting
point where the user explores different parts of your website. The labeled parts given above are what
we are going to focus on since they are the most common parts of a website.

Header

Header is the top of the page that usually contains the logo and navigation option on your website.

Logo

Logo is the graphic symbol of your brand that can be easily identify by the users.

Navigation
11
Navigation help the user explore your website through the set of links that are present in every pages of
your website.

Headline

Headline is a short and clear description of your website that helps visitors understand the site’s content,
products and services.

Banner (or Slider)

Banner is a large image placed below the header that is meant to grab attention of the users.

Content

Content is the images, text, graphics, videos and other media that make up a website. As we discuss
earlier, this is what the users are coming to the website in the first place. That’s why you need to
formulate an informative, easy to read, and concise information in designing a website.

Contact Form

Contact Form is a simple way to interact with the users directly through your sites. This allow the user
to comment or give any suggestion to your website.

Footer

Footer is located at the bottom part of the website. Similar to the header, the footer stays on every page.
This part typically consists copyright information, social media links, privacy policies and contact
information.

What’s More

This activity requires you to visit the link below in order to evaluate the websites based on its design
elements and principles by answering the given questions. Write YES if the website meets your
expectation as a user and NO if not. Write your answer in a separate sheet of paper.

12
 YES NO
1. Did you easily identify the purpose of the website?
2. Does the website contain videos, graphics or relevant information?

3. Does the website take 2-3 seconds to load its content?

4. Is the information inside the website clear, concise, and direct to the point?

5. Does the website adjust its content on your mobile phone?

6. Did you easily navigate the website even without any instruction provided?

7. Does the design consist too much graphics, videos, and text?
8. Do they have social media page for their marketing strategy?
9. Does the style suits the target audience?
10 Does the website have comment box or any contact information of their platform?

13
 What I Have Learned

Test your understanding. Complete the statement with the appropriate word/words
that goes with it. Write your answer in a separate sheet of paper.

You have identified the two aspect of web designing which are the
(1)_______________, and (2) _______________. Both of them are useful in order to have a successful
website. Where web design principle outlined purpose as the starting point of building a website
followed by (3) _______________, (4) _______________, (5)________________, and (6)
_______________. While on the other hand, web design elements considered the content as the
backbone of the website along with
(7)________________, (8)________________, (9) _______________, and
(10)________________. These essential factors ensure the effectiveness and efficiency of every site,
page, and section of your website.

What I Can Do
Identify the anatomy of a website below by choosing the letter of the correct parts of
it. Write your answer in a separate sheet of paper.

1. 6.
a. Background
7. b. Banner
c. Contact Form
d. Content
8.
e. Footer
f. Header
g. Headline
h. Image
i. Logo
j. Navigation
9.
k. Video
10.

14
 Assessment

Read the following questions carefully and choose the letter that best describes the
answer. Write your answer in a separate sheet of paper.

1. This are general rules for the design of a website that include basic guidelines for the design
layout and interaction design.
a. Web Design
b. Web Design Elements
c. Web Design Principles
d. All of the above
2. This is the starting point of building a website that provides clear intention on your website.
a. Communication
b. Load time
c. Purpose
d. Simplicity
3. It is considered as the backbone of your website, because this is the main reason why people
are seeking your website in the first place.
a. Aesthetic
b. Content
c. Usability
d. Visibility
4. Which of the following web design elements contributes to the visual appeal of your website?
a. Aesthetic
b. Visibility
c. Usability
d. Content
5. What design principle allows your website to work on mobile devices.
a. Communication
b. Load Time
c. Responsive
d. Simplicity
6. Which of the following is the basic principle of web designing?
a. Communication
b. Purpose
c. Simplicity
d. All of the above
7. This is the overall appearance of your website that contributes to the complete user experience.
a. Web Design
b. Web Design Elements
c. Web Design Principles
d. All of the above
8. Which of the following content must your website should have?
a. High-definition videos
b. High-resolution imagery

15
 c. Up-to-date information
d. All of the above
9. Which among the following design principle limits the design to avoid distraction?
a. Simplicity
b. Load time
c. Communication
d. Purpose
10. Which of the following is the basic elements of web designing?
a. Content
b. Usability
c. Visibility
d. All of the above
11. This element allows the user to navigate your website easily even with a little thought they
have.
a. Interaction
b. Simplicity
c. Usability
d. Visibility
12. Which of the following web design principles refers to the speed and performance of your
website?
a. Communication
b. Load time
c. Purpose
d. Simplicity
13. This web design elements can help you improve the functionality of your website based on the
comment and suggestion of the users.
a. Aesthetic
b. Interaction
c. Usability
d. Visibility
14. Which web design elements requires you to have a marketing plan to attract more visitors on
your website?
a. Visibility
b. Aesthetic
c. Usability
d. Interaction
15. What web design principle directs you to formulate straight forward and easy-to-digest
information in order to establish a connection with the user?
a. Communication
b. Purpose
c. Responsive
d. Simplicity
Additional Activities

Now that you understand how web designing principles and elements affect the integrity of a website
you are now going to create your own using wix.com - an online website builder. But before we utilized

16
wix.com, you are required first to draft your website in a short bond paper. You may use basic coloring
materials, paper cut-outs, Microsoft word or Photoshop to illustrate your website. Please refer to the
criteria below to make sure you will meet the standard set by this module.

Category 5 4 3 2
Purpose The website has a The website has a The purpose of The website lacks
well-stated clear clearly stated purpose the website is a purpose.
purpose that is but may have one or somewhat muddy
carried out two elements that do or vague.
throughout the site. not seem to be related
to it.

Aesthetic The website is The website is The website may The website is
exceptionally attractive and uses appear busy or cluttered looking
attractive and uses different boring and rarely or confusing.
different elements elements use different
effectively effectively elements.

Content The website has made The website has tried The website has The author has
an exceptional to make the content of put lots of provided
attempt to make the this website information in only the
content of this interesting to the the website but minimum amount
website interesting to people for whom it is there is little of information and
the people for whom intended. evidence that the has not
it is intended. person tried to transformed the
present the information to
information in an make it more
interesting way. interesting.

*Note: Prepare two copies of your draft website. One will be submitted to your subject teacher and the
other will be your reference for the next module.

17
References

2018. Astra. 06 26. https://wpastra.com/good-website-design/.

Cardello, Jeff. 2019. Webflor, Incorporated. 07 16. https://webflow.com/blog/webdesign-principles.
Cefar. 2020. Cefar. 04 14. https://www.cefar.co.uk/blog/2020/04/14/topprinciples-of-web-design/.
Kumar, Manoj. 2015. Blog. 09 29. https://think360studio.com/blog/bad-webdesign-vs-good-web-
design-infographics.
18
2020. Learn. https://www.varrocreative.com/website-anatomy/.
Luenendonk, Martin. 2019. 09 20. https://www.cleverism.com/web-designprinciples-successful-
websites/.
Marianne. 2018. Digital. 02 18. https://www.feelingpeaky.com/9-principles-ofgood-web-design/.
Prabhu, Tanu N. 2020. User Research. 01 13. https://uxplanet.org/9-generalprinciples-for-good-
website-design-d9853548f454.
Techniques, Resource. 2019. Web Design. 02 20.
https://www.resourcetechniques.co.uk/news/web-design/5-basicelements-of-web-design-
100152.
Technologies, Crescent. 2018. 04 05. https://medium.com/@crescenttech555/10elements-of-website-
design-898a910fcb02.

19
20