ST. CATHERINE’S ACADEMY OF GATTARAN, INC.
Liban Street, Centro Sur, Gattaran, 3508 Cagayan
School ID: 400368
Module No: 1 Module Title: MASTERING THE PRINCIPLES OF WEB DESIGN AND WEB
Week 1 DEVELOPMENT
Inclusive Date:
No. of Units: 1 Grade Level: 9 – COMPUTER
August 29 – September 2, 2022
Teacher’s Name EAJAY B. ROSUMAN
Module Overview
Module 1 aims that every learner will be able to understand the principles of web design and web
development that can guide them to create effective websites. Web design includes Minimalism, Typography,
Color scheme, Display, Animation, and Mobile-friendliness. Web development principles includes User focus,
Quality focus, Simplicity, and Efficiency of codes.
Terminologies
Web design is the process of creating websites. It encompasses several different aspects, including webpage
layout, content production, and graphic design.
Web development refers to building, creating, and an maintaining websites. It includes aspects such as web
design, web publishing, web programming, and database management.
Unit Content
This module has one unit that focuses on the principles of Web design and Web Development.
Web development is the work involved in developing a website for the Internet or an intranet. Web
development can range from developing a simple single static page of plain text to complex web-based
internet applications, electronic businesses, and social network services.
Principles of Web Design
There are name factors that can affect the aesthetics and usability of a website. Here are the current
design principles that need to consider.
Minimalism is the simplicity of the web design. Example website: www.plus63.org
Typography is an element of design that refers to the visual aesthetics, style, or appearance of the text.
Example website: www.papertiger.com
Color Scheme is the combination of color that has a big impact on how users think and feel about the
website. Example website: bloomthat.com
Display will allow the users to browse the website’s content in a simple and linear fashion. There is no
need to switch through multiple pages. Example Website: apple.com
Animation use to capture maximum user attention. Use animation icons and micro-interactions to
ensure fluidity in the user’s experience. Example website:
https://yourplanyourplanet.sustainability.google
Mobile-friendliness is the website that access and browse on any device such as smartphones, tablets,
or desktop computers.
Principles of Web Development
User focus is the key principles can help to provide a great user experience.
Quality focus is very important to develop a mindset of quality. It must determine the standards of a
quality website.
Simplicity keeps the website simple and well organized. Simple website does not have superfluous
information. They are easier to build and maintain.
Efficiency of codes reduce the amount of codes without compromising the website’s quality and
functionality.
To learn more about principles of web design and web development, look into pages 2-13 of your textbook
entitled Computer for Digital Learners Grade 9 by Cobre, Elmeryn Joy L., Frago, Elsa S., et. al.
Name and signature of Parents or Guardians: Parents’ or Guardians’ Contact
number
Date submitted:
Name : ______________________________________________ Grade Level : ___________
ST. CATHERINE’S ACADEMY OF GATTARAN, INC.
Liban Street, Centro Sur, Gattaran, 3508 Cagayan
School ID: 400368
Activity 1: True or False
Tell if the given statements on web design and web development are TRUE or FALSE. Write your answers on
the space provided.
1. Web development includes the visual aesthetics and usability of a website.
2. When we design a website, make sure users can access and browse it on any device.
3. The key principle is to provide users a great user experience.
4. Minimalism can be achieved by reducing the use if visuals on the web page.
5. Writing codes efficiently means using longer and detailed codes.
1 2 3 4 5
Activity 2. What do you do?
Compare and contrast a web developer and a web designer using the venn diagram below.
Name : ______________________________________________ Grade Level : ___________
Assignment: Plan Your Website
Plan your own website as you answer the following questions that may guide you as you create an article in
your web page
Website Designer
ST. CATHERINE’S ACADEMY OF GATTARAN, INC.
Liban Street, Centro Sur, Gattaran, 3508 Cagayan
School ID: 400368
_____________________________________
If you are to create _____________________________________
your own website, _____________________________________
_____________________________________
what will it be
_____________________________________
about?
_____________________________________
_____________________________________
_
Who is the target
What will be the What are the main audience that you
purpose of your goals that you hope to want to attract to
website? accomplish in creating your website?
the website?
________________________
____________________ ________________________
____________________
____________________ ________________________
____________________
____________________ ________________________
____________________
____________________ ________________________
____________________
____________________ ________________________
____________________
____________________ ____________________
____________________ ____________________
____________________ _________________________________________________________
____________________
What will be _________________________________________________________
_________________________________________________________
the content
_________________________________________________________
of your _________________________________________________________
website? _________________________________________________________
_________________________________________________________
_________________________________________________________
___
Prepared by: Checked by:
EAJAY B. ROSUMAN RONELIO G. BAWIT
Subject Teacher Academic Coordinator
Approved by:
SR. ASCENTION L. DOMUGHO, O.P.
Principal / Directress
