Web Development as an ICT Intuitive Navigation - It lets the audience quickly

navigate and find what they are looking for on a

Project for Social Change website.

F-Shaped Pattern - It helps the audience to

What is Web Design? quickly read or scan the contents of a website.

Web design is the process of planning and creating

websites that are published and accessed on the
Internet.

Webpage - A single document that contains any

information.

Website - A collection of web pages combined together

to be published on the Internet.

Importance of Web Design Visual Hierarchy - It describes the arrangement

 Let’s any person or organization to convey their of the elements in order according to its
content to their target audiences. importance.
 Provides a good experience to the creator and
audiences. Grid-Based Layout - It helps users to arrange the
 Creates an aesthetically pleasing website. elements on every web page in a block-shaped
container.

Types of Web Design Loading Time - The design should be light and
images are optimized so that the website loads
Web design has two classifications that depend
quickly.
on the website's style and its view ability across
any device.
Mobile-Friendly - A website with a responsive
design will make the website adjust to the screen
Adaptive Web Design - Displays a specific
and can be viewable any device.
version of a website that is viewed on different
screen sizes either on desktop or mobile device.
What are the Elements of Web Design?
These are components which plays an essential
Responsive Web Design - Displays a customized
role in making an aesthetically pleasing and user-
version of a website that automatically adjusts
friendly website.
the size when viewed on any device.

Content - One of the most crucial elements that

What are the Principles of Web Design?
will help make the website informative,
These are numerous factors to consider or
interesting and popular to the users is the
guidelines to follow which will help in creating an
content.
aesthetically pleasing and user-friendly website.

Typography - It describes the way a text is

Purpose - Before planning to create a website,
properly designed, organized, and presented on
always consider its goals and its target audience.
a website.
Simplicity - It defines the clean and fresh design
Space - It is an element used for dividing or
of your website that makes it visually appealing.
separating different contents of the website.
Layout - This defines how the graphics, texts, and  The web design elements include
other elements are arranged and placed on the content, typography, space, layout,
web page. colour, graphics, videos, animation and
navigation.
Color - This is an element used to express
meaningful contents and catch the attention of What are the important parts of a
the audience. website?

Graphics - Any graphic representation such as What is Web Design Workflow?

clipart, icons, logos, infographics, and images to This explains the process creating
quickly represent an idea or feeling to the websites from scratch. This process
audience. involves various steps from the
designing, building, and publishing the
Videos - It is often used as a background and website.
added in slideshows or on the website.
1. Goal Setting - This phase will let the
Animation - This is an effect seen on various web designer identify the goals and
interactivity, such as clicking or hovering audiences of the website.
different buttons, images, or forms.
Goal Setting:
Navigation - This refers to the set of buttons that  Checkout similar websites to yours that
let users to freely navigate across the web pages would serve as a reference.
of the website.  The following slides are essential web
pages and basic functionalities of the
User Interaction - It defines the different website to help you achieve your
interactivity of websites such as scrolling, intended goals.
clicking, or typing.
Essential Webpages
 Web design is the process of planning
and creating visually pleasing and easy Home Page is the first web page that
to use websites. most audiences see. This page should be
 Web Design has two classifications: designed to quickly guide the audience
Adaptive and Responsive Web Design. to find what they are searching for.
Adaptive web design is a specific
website version viewable on particular About Page lets the audience know the
screen sizes while Responsive web goals and other essential information of
design automatically adjusts the website the person or the organization involved
so that it can be browsed on or in the website.
customized to the screen of any devices.
 Making use of the different elements of Contact Page lets the audience
web design that are guided by the communicate or get in touch with the
principles of web design will help you organization or website administrator.
convey your idea to your target
audience. Blog Page contains a set of posts that
 The web design principles include will help a person or an organization to
purpose, simplicity, intuitive navigation capture the attention, to educate, or to
f-shaped pattern, visual hierarchy, grid- persuade their target audience.
based layout, loading time and mobile-
friendly.
 Essential Website Tools 4. Mockup - After visualizing the structure of the
website, this step will allow web designers to
 Blog Module maintain and share blog represent the design for each page of the
posts. website by creating a wireframe.
 Contact forms lets audiences connect
Wireframe - A wireframe is considered as
with the website creator.
blueprint that represents the user experience of
 Social Media Integration allows
the website.
automated postings to the social media
accounts of web creators. How to Create a Wireframe?
 Search Engine Optimization (SEO) lets
the websites be searchable on search 1. Choose a method of making a wireframe
engines. either through sketching or online tools.
 Web Analytics track down the 2. Research some web design trends and
audiences’ activities. practices to help in knowing the contents that
 Comment Spam Protection prevents will be included on the website.
the audiences from spamming.
 Newsletter send emails to the 3. Start to sketch the different web contents.
audiences.

2. Branding - Establishes the website’s identity 5. Design & Development - After setting the
by coming up with a name, domain name, logo, objectives and creating a layout, it is now the
and colors that will represent the website. time to put all those ideas by making the website
3. Website Structure - This phase will allow web either through coding or website builder.
designers to visualize the layout of the website Coding - Coding will require a web designer to
by creating a sitemap. learn the basics of HTML (Hypertext Markup
Sitemap - A diagrammatic representation of the Language).
website components which provides web Website Builder helps a web designer to create
designers a clear idea of the website’s structure. a website without the prior knowledge of coding.
How to Create a Sitemap? 6. Testing - This phase will help web designers
1. Choose a method of making a sitemap either to check or fix the errors that might affect the
through sketching or online tools. functionality of the website.

2. Draw a box that would become the homepage 7. Launching Publishing - the website can be
and label. done after thoroughly ensuring that every part
of the website has no errors.
3. Below the homepage box, draw a second level
containing additional boxes that represents the Parts and Functions of a Website
website’s essential web pages. It is a must that web designers are familiar with
4. Draw lines between each box of a web page to its structure. The following slides are the
indicate that they are connected directly to the different parts that make up a website.
homepage. Header refers to the banner placed on the top of
5. Continue adding boxes and connect the lines the website. It includes the logo, name, images,
to a specific web page if adding another web videos and user interface elements.
page. Navigation Bar shows a list of buttons that lets
the audience check and access some parts of the
website.
A Side Bar is part of a website that displays What are Web Creation Applications?
information which is not part of the page
content. It also contains social media posts, Web Creation Applications offers a wide
advertisements and other related links. range of templates that can be used for
creating the website.
Content defines the main body of the website. It
contains various types of web design elements
Web Creation Applications contains
such as the text, images, videos, and others.
intuitive features to easily create the
Footer part is found at the bottom part of the website. Most platforms are for free and
website which allows the audience to view some are for premium.
copyright information and other useful links.
Wix is a website creation tool that offers
 Web design workflow explains the plenty of templates for basic designs and
various steps in the designing, building, web page tools.
and publishing the website. It involves
the following steps: goal setting, Weebly is one of the popular website
branding, website structure, mockup, creator tools which offers various
design & develop, testing, and templates and easy to use tools and
launching. interface.
 Goal setting lets a person or a group
identify the aims and the target Wordpress is a free online tool which
audience of the website. This will also allow users to create blog and website
identify the contents of the website by using a prebuilt template.
planning about the essential pages and
tools. Webflow is a cloud based application
 Branding involves building the website’s where users can easily drag and drop
identity by deciding on its domain name, elements and freely design the site.
color scheme, and logo.
 Website structure consists of the Site123 offers simple templates that
visualization of the website’s layout with focus on pre-built layouts to use for
a sitemap. creating or customizing the website.
 Mockup represents the design for each
web page of your website through wire Basic Web Creation Techniques help
framing. you to create a simple yet stunning
 Design & development puts all the ideas website.
into action by creating the website
either through coding or using a website Web Creation Techniques
builder.  Responsive Web Design will let a
 Testing checks all the basic website be properly viewable across any
functionalities of the website. device.
 Launching allows for the publishing of
the website once everything is finalized. Web Creation Techniques Layout
 Being familiar with the structure of the Uniformity establishes branding and it
website will help the web designer to makes sure that it is consistent in
place all the elements correctly. different platforms.
 The parts of the website include the
header, navigation bar, sidebar,
content, and footer.
 Web Creation Techniques Difference of Web Creation Techniques
 Inserting Images and Graphics will
provide interesting and relevant content Basic Techniques
to the visitors.  Create simple and basic designs
 Inserting Autoplay Video will help boost of web pages.
the engagement of the website.  Free but limited features in
 Keep It Simple by removing unnecessary creating web pages using web
elements from the page. creation platforms.
 Good for blog pages only.
 Pre-built designs are given.
 Website creators refer to the
application that offer various templates Advanced Techniques
for website creation.  Creates advanced and more
 There are plenty of online web creation attractive web pages.
applications available on the Internet.  Purchased plans.
Some of them are as follows but not  Good for various types of
limited to: Wix, Weebly, WordPress, websites.
Webflow, and Site 123.  Pre-built designs are available
 Basic techniques in web creation and can be customized to more
discussed are responsive website advanced designs.
design, layout uniformity, inserting
Online Web Creation
animated graphics, inserting autoplay
videos, and keeping it simple. Advantages
 Templates and drag and drop
Advanced Web Creation Techniques tools are available for easy
will let you create an excellent and more customization.
aesthetically pleasing website.  Can easily preview your web
page in different devices.
A homepage divided into scrollable  Easier to learn and create
sections will make it look more without prior knowledge in
organized and stunning. coding.

The use of more white spaces will help Disadvantages

in reducing blastful contents in the  Expensive
website.  Has recurring fees if you want
to access advanced features of
Following Hick’s Law will provide less yet the application.
useful content to the audience.
Hard Coded Web Creation will let you
Advanced Web Creation Techniques F- create a website that requires a
shape pattern will let the audiences knowledge of HTML and CSS.
quickly read and understand the content
of the website. Hard Coded Web Creation

Adding a landing page will give an Advantages

opportunity to promote the website and  Learn how dynamically
what it offers. operates the website.
 Can modify the design
according to your creativity.
  Can add features that online ● Supplementary skills
web creation application does
● Good communication
not offer.
 Can link database or any other Types of team structure:
applications
● Project team
Disadvantages ● Production team
 Require analytical and creative
skills. ● Technical team
 Can only preview when it runs ● Quality Control team
in the browser.
 Must install the software. Roles of team members in creating ICT content:
● Action-oriented role
 Advanced Web Creation ● People-oriented role
Techniques will add sophistication
to your website and will attract ● Thought-oriented role
more web visitors
Action-oriented role
 There are plenty of advanced
techniques that you might want to ● Shaper
consider in creating a website. Some
● Implementer
of them are: homepage that is
scrollable into sections, the use of ● Completer / finisher
more whitespaces, Hick’s Law, F-
Shaped pattern, and adding a People-oriented role
Landing Page. ● Coordinator
 Creating a website may be done
through the use of online web ● Team worker
creation or hard coded ● Resource investigator
applications.
Thought - oriented role

Team Structure and Dynamics ● Monitor - evaluator

● Specialist
for ICT Contents
● Plants (sensitives)
What is a team?
Answer the following completely in your own
Team refers to the set of people grouped
words.
together to attain the same goals. Each member
of the team is given tasks suited to their abilities 1. Define team structure.
and expertise.
2. What are the three (3) categories of roles of
Team structure refers to subdividing the team team members?
into smaller ones to distribute workloads
3. What is the difference between the technical
equally.
team and the quality control team?
Characteristics of a team:
4. Is it possible that a specific member of the
● Common values team have two or more roles? If yes, how? If no,
why not?
● Mutual trust

● Collaboration
5. Can somebody have all the characteristics of a Time Tracking Tools
team member? If yes, how? If no, why not? ● Time Doctor
● Everhour
 Team refers to a group of people with ● Toggl
the same set of goals, and it can be
divided into sub-teams. Communication Tools
 Team structure is a manner of dividing ● Google Meet or Hangouts
the tasks into subgroups to accomplish ● Skype
tasks on time. ● Slack
 There are several characteristics of a
team that are mentioned in this lesson. File Sharing Tools
These are common values, mutual trust, ● Google Drive
collaboration, supplementary skills, ● Dropbox
and good communication. ●OneDrive

 Four basic types of team structure are

Project Management Tools
also mentioned in this lesson: Project
● Toggl Plan
Team, Production Team, Technical
● GanttPRO
Team, and Quality Control Team.
● Zoho Projects
 According to Paul Merchant’s article
entitled “What are the nine types of Advantages and Disadvantages in
team roles?”, there are nine (9) types of Various Aspects
team roles that are categorized into
three: action-oriented roles, people-
oriented roles, and thought-oriented
roles.
 Action-oriented roles consist of three
sub-roles, namely: shaper, implementer,
and completer/finisher.
 People-oriented roles consist of three-
sub-roles, namely: coordinator, team
worker, and research investigator.
 Thought-oriented roles consist of three
sub-roles, namely: monitor-evaluator,
specialist, and plants.

Online Collaboration Tool

What is an online collaboration tool?

Collaboration tool refers to the device

or means to exchange and share ideas
for teams that cannot work physically.

Kinds of online collaboration tools:

● Time Tracking
● Communication Tools
● File Sharing Tools
● Project Management
  Productivity, efficiency, cost, audience,
security, and project management are the
things you should consider in choosing an online
collaboration tool.

Overview of Project Management Tool

Project management refers to the act of

managing a specific task to complete and
submit within its due date.

Answer the following completely in your own words.

[Link] type of online collaboration tool is usually

utilized for tracking the time of the team members?

[Link] type of collaboration tool is used for monitoring

the progress of the project?

[Link] is the difference of toggl time and toggl plan? Projects and Tasks Section - This section
must organize your current projects, even your
[Link] type of collaboration tool can we use if you just
future project schedules.
want to keep in touch with your teammates? [Link]
type of collaboration tool is used for sharing files within Team or Department Section - This section
the team members? must give you the master list of the members of
different teams or departments.
 Collaboration tool refers to the device or means
to exchange and share ideas for teams that Timeline or Gantt Charts It must show the
cannot meet physically. details of the task (e.g., status, name of the
 Four essential types of online collaboration tools project, assigned member, due date, etc.)
were introduced in this lesson. These are time
Storage Project management tools offer
tracking tools, communication tools, file-
large storage capacity because all the files that
sharing tools, and project management tools.
need a team working and team collaboration
 Time Doctor, Everhour, and Toggl are time
must be placed in the same storage.
tracking tools.
 Google Meet or Hangouts, Skype, and Slack are Customer Relationship Management (CRM)
communication tools. Some project management tools have this
 Google Drive, Dropbox, and OneDrive are feature that enables the management to interact
filesharing tools. Toggl Plan, GanttPRO, and with potential and prospective customers on the
Zoho Projects are project management tools. same platform.
 Human Resource Management (HRM) This  There are lots of project management tools
feature will secure all the details of the available for you to download, but it depends on
members, including their contact details. your needs and preference on what kind of
project management tool you are going to
download.

Online Content Curation Tool

What is content curation?

● Toggl Plan

● Teamwave

● Teamwork

● GanttProject
Factors in Online Curation
● Zoho Projects
● Audience
Identify the word/s being described in the
sentence. ● Updated Reference

[Link] refers to the act of managing a specific ● Content Creation Style

task to accomplish the due date. Guidelines in Curating Online Content
[Link] section of the project management ● Speak for yourself
tool organizes the current project schedules.
● Make sense
[Link] kind of project management tool
enables you to monitor current tasks in a ● Balance promotional content
company-wide system only.
● The shorter, the better
[Link] feature enables the team manager to
Kinds of Online Content Curation Tools
see the list of members in his or her team.
● eLearning Tags
[Link] feature enables the team to
collaborate and interact with their clients. ● LiveBinders

 Project Management refers to the act of ● [Link]

managing a specific task to complete and submit
● CurationSoft
within its due date. It is a practice or a
methodology where you can organize ● EduClipper
procedures when working on a project.
Identify the word/s being described in the
 There are many features that a project
sentence.
management tool can offer, but here are some
of the basic features you may consider: Projects 1. It is the act of collecting various references and
and Tasks Section, Team or Department materials with similar topics to create new
Section, Customer Relationship Management content.
Section, Human Resource Management
Section, and Storage Capacity.
 2. It considers the form on how you create the
content.

3. It is a platform that collects and binds all

similar topics into one album.

4. This curating guideline focuses on how your

topic helps the people reading or watching your
content.

5. What is the essence of content curation?

 Content Curation is the process of putting

together all ideas from different references and
materials in one content that has value and
importance.
 Online content curation lets you browse
important content relevant to your topic that
adds important information to your own
content.
 There are three factors to consider when
curating online content. Those are Audience,
Updated Reference, and Content Creation
Style.
 Guidelines in making a successful online content
curation were introduced in this lesson. Those
are speaking for yourself, making sense of you
content, neutralize promotional content, and
the shorter, the better.
 Different kinds of online content curation tools
were also introduced in this lesson. These tools
are not limited to the following: eLearning Tags,
LiveBinders, [Link], CurationSoft, and
EduClipper by Participate.