Unit 15: Designing and Developing ICT Projects

Lesson 1
Designing ICT Project

Empowerment Technologies
Senior High School Applied - Academic
How do you
think online
platforms can
predict the
demands of the
people?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 22
 How can
students like
you use these
websites to
express your
advocacy for
society?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 3
 ● Distinguish the difference
between design and
Learning development in ICT.
Objectives ● Identify the elements of rich
multimedia.
At the end of the
lesson, you should be ● Analyze the principles in web
able to do the
following: design.
● Determine an ICT project to
develop for social change.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 44
Advocacy Website

Checkout the Greenpeace advocacy website and

investigate the contents available on it. Identify its
purpose with regards to its effectiveness in gaining
viewers' attention and delivering its messages. Fill out
the table on the next slide with your answer.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 55
Advocacy Website

Content Purpose
Text
Images
Pop Ups
Animations
Color Scheme
Interactive Buttons
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 66
Advocacy Website

1. What are the contents available on the

Greenpeace Philippines website?

2. What is the agenda or purpose of

Greenpeace in general?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 77
Advocacy Website

3. How would you define the purpose of the

contents combined on the website?

4. Describe how effective the website appears

to you when it comes to getting your
attention and understanding its contents.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 88
What is Web Design
and Development?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 99
 Web Design
refers to the
appearance or
visual
elements that
are visible on
a website.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 10
10
Web
Development
refers to building
the website and
its functionality
with the use of
programming
languages such
as CSS or
Javascript.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 11
11
 What are Rich
Multimedia
Elements?

These are
interactive
elements that
provide user
engagement.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 12
12
Rich
Multimedia
Elements

Text is essential
in delivering
information
through the use
of characters
and symbols.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 13
13
 Rich
Multimedia
Elements

Graphics refers
to illustrations,
clipart, icons,
infographics,
organizers, still
or dynamic
images.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 14
14
Rich
Multimedia
Elements

Video pertains
to motion visuals
in animations,
live, or recorded
image frames
usually
accompanied by
audio.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 15
15
 Rich
Multimedia
Elements

Audio
involves the
use of sound
effects,
podcasts,
narrations, or
dialogues.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 16
16
Rich Multimedia
Elements

Interactives
consists of
dynamic
components
such as maps,
slides, polls,
active links, and
other embedded
features.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 17
17
What multimedia elements do you
usually encounter on online
platforms? Do they serve a purpose
or are they just for decoration?

18
What are the
Principles of
Web Design?

These are the

proper
techniques to
layout and
design the
website.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 19
19
 Principles of
Web Design
● Purpose justifies
the intended plan
of the website.
● Communication
properly conveys
the message of
the website.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 20
20
Principles of
Web Design
● Typefaces refers
to the design of
the text
appearance.
● Colors convey the
brand and
emotion of the
website.
● Images support
the intended
purpose of the
website using any
graphics.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 21
21
 Principles of
Web Design
● Navigation lets
user to quickly
access the web
pages.
● Grid-based
layouts keep the
contents of the
website organized.
● F-pattern
design defines the
visual flow to retain
information.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 22
22
Principles of
Web Design
● Load Time
ensures that the
contents of the
website will
load efficiently.
● Mobile
Friendly allows
the website to
be accessible on
all devices.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 23
23
What are the
Tools for
Creating
Rich
Multimedia?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 24
24
 Rich Multimedia Tools

Pixlr is a photo editor where you can enhance

your image with filters, effects, and other
modifications.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 25
 Rich Multimedia Tools

Giphy is an online tool where you can create,

download, and upload your GIFs.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 26
 Rich Multimedia Tools

Piktochart is an infographic tool which allows

the user to create presentations and graphics.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 27
 Rich Multimedia Tools

Timeline JS is a timeline creation tool in which

your data are uploaded as Excel format.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 28
 Rich Multimedia Tools

Riddle is an online tool for creating polls,

surveys, and quizzes.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 29
 Rich Multimedia Tools

Pexels Video is an online platform that lets

users find and upload free stock videos to
their website.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 30
Which of the following online tools
will you most likely use in creating
interactive content on your website?

31
What are the
examples of ICT
projects for
Advocacy
Campaigns?

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 32
32
Advocacy Campaigns
Content Purpose
Anti-Drug
It seeks to resolve the problems caused by discrete
Campaigns
selling and using illegal drugs.
Youth Election
It aims to empower the younger generations in
Volunteer
Mobilization societal engagement.

Animal Welfare and

It protects the lives of the animals and their well-being.
Rights
Environmental
It addresses environmental issues and formulate plans
Conservation and
Action for the betterment of natural resources.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 33
33
Advocacy Campaigns
Content Purpose
Cyberbullying
It promotes the rights of digital citizens against threats,
harassment, and mistreatments.
Copyright
It educates the people to intellectual property rights and
Infringement
the proper citation of information on the Internet.

Green It helps to slow down global warming and reduce

Technology environmental issues.
Internet
It guides individuals, in the proper amount of time and
Addiction
ENGAG EXPLORattention given to the use of theEVALUAT
Internet.
EXPLAIN EXTEND 34
34
Remember

There is a wide array of societal issues and

matters. It is best to affiliate yourself with
campaigns that matter to you the most.

35
 Activity 1

1. Think of a societal issue you want to address by either

choosing one of the given campaigns or other issues
existing in our country.
2. Come up with four elements suitable for your website
and its corresponding content.
3. Write down your answers on the diagram. Put the topic
in the red one and the elements with the contents on
the blue ones.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 36
 Activity 1

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 37
 Activity 2

1. Search for an advocacy platform that follows at

least five principles in creating a web design.
2. Justify if it has followed the principle and is
effective in delivering the contents of the
website.
3. Write down your answers in the table below.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 38
 Activity 2
Advocacy Title:

Website Link:

Principle Followed Justification

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 39
Answer the following
completely in your own
words:

1. Name and define one

element and principle
of web design.
2. Provide one tool in
creating rich
multimedia to your
website. Explain your
answer.
ENGAG EXPLOR EVALUAT
EXPLAIN EXTEND 40
40
Answer the following
comprehensively:

How can the appearance

of your website affect
promoting your ICT
project? Explain and cite
some examples.

ENGAG EXPLOR EVALUAT

EXPLAIN EXTEND 41
41
 Wrap Up
Design and Development pertains to incorporating
multimedia elements to enhance visualization and putting
functions to the website components for interactivity.

Rich Multimedia Elements are Text, Graphics, Video,

Audio, and Interactives.

The Principles of Effective Web Design are Purpose,

Communication, Typefaces, Colours, Images, Navigation,
Grid, F-Pattern, Load Time, and Mobile Friendly.
42
 Wrap Up

Some Tools for Creating Rich Multimedia are Pixlr,

Giphy, Piktochart, Timeline JS, Riddle, and Pexels Video.

Some examples of ICT Project for Social Change are

Anti Drugs, Youth Election, Animal Welfare,
Environmental Conservation, Cyberbullying, Copyright
Infringement, Green Technology, and Internet
Addiction.

43
 Photo Credits

● Slide 3: This file, Flat people holding question marks Free Vector, by Pikisuperstar is licensed under Freepik License via Freepik.

● Slide 9: This file, Landing page concept design process Free Vector, by Freepik is licensed under Freepik License via Freepik.

● Slide 10: This file, Design process concept for landing page Free Vector, by Freepik is licensed under Freepik License via Freepik.

● Slide 12: This file, Web design icon set Free Vector, by Makyzz is licensed under Freepik License via Freepik.

● Slide 13: This file, Blue transparent glass web template Free Vector, by VVStudio is licensed under Freepik License via Freepik.

● Slide 14: This file, Image upload held by man Free Vector, by Freepik is licensed under Freepik License via Freepik.

● Slide 16: This file, Characters of people listening to music illustration Free Vector, by RawPixel is licensed under Freepik License via Freepik.

● Slide 17: This file, People interfaces isometric set Free Vector, by Macrovector is licensed under Freepik License via Freepik.

● Slide 24: This file, Online concept illustration Free Vector, by Stories is licensed under Freepik License via Freepik.

● Slide 32: This file, Mobile marketing concept illustration Free Vector, by Stories is licensed under Freepik License via Freepik.

● Slide 40 & 41: This file, Thoughts concept illustration Free Vector, by Stories is licensed under Freepik License via Freepik.

44
 Bibliography

Edge, Abigail. “20 Free Tools for Creating Multimedia and Interactives.” Shorthand Social. Accessed on July 15, 2020.
https://social.shorthand.com/abigailedge/3CupXGAcVvf/20-free-tools-for-creating-multimedia-and-interactives.

Jia, Grace. “A Full Guide on the Differences Between UI and UX Design.” MockPlus. March 3, 2019. Accessed on July 15, 2020.
https://www.mockplus.com/blog/post/difference-between-ui-and-ux.

Pines, Ben.”7 UX Principles for Creating a Great Website.” Webdesigner Depot RSS. May 29, 2018. Accessed on July 15, 2020.
https://www.webdesignerdepot.com/2018/05/7-ux-principles-for-creating-a-great-website/.

“The Five Elements of Multimedia.” Simply Effective Inc. Accessed on July 15, 2020.
https://www.simplyeffectivewebdesign.com/five-elements-of-multimedia/.

“Web Design or Web Development, What’s The Difference?” Purely Branded. Accessed on July 15, 2020.
https://www.purelybranded.com/insights/web-design-or-web-development-whats-the-difference/#:~:text=In%20essenc
e,%20web%20design%20refers,the%20website%20and%20it's%20usability.&text=Web%20Developers%20on%20th
e%20other,to%20life%20the%20design%20files
.
45