11

Empowerment
Technologies
Quarter 1 – Module 4:
The Principles and Techniques of Design
and Applications to Develop
ICT Content

11
 Empowerment
Technologies
Quarter 1 – Module 4:
The Principles and Techniques of Design
and Applications to Develop
ICT Content

Module in Empowerment Technologies

Author: MARIA BUENASGRACIA O. NOBLETA
For the learner:

Welcome to the Empowerment Technologies Alternative Delivery Mode (ADM) Module on The
Principles and Techniques of Design and Applications to Develop ICT Content. 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 in to 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:

References This is a list of all sources used in developing this
module.
 What I Need to Know

This module was designed and written with you in mind. It is here to help you master the
Empowerment Technologies. The scope of this module permits it to be used in many different learning
situations. The language used recognizes the diverse vocabulary level of students. The lessons are
arranged to follow the standard sequence of the course. But the order in which you read them can be
changed to correspond with the textbook you are now using.

The module is divided into three lessons, namely:

• Lesson 1 – Nature and Purposes of Online Platforms and Applications
• Lesson 2 – Basic Web Design Principles and Elements
• Lesson 3 – Web Templates and WYSIWYG Platforms

After going through this module, you are expected to:

At the end of this lesson, you shall be able to evaluate existing online
platforms and applications in developing ICT content in your own specific
professional track.

P a g e 5 | 19
 What I Know

Multiple choice: Write the letter of the correct answer on the provided Learning Activity Sheet
(LAS)

1. It is a base of technologies designed to run within an online environment and provides interactive
online services.
a) File Management
b) online platform
c) Mapping
d) Web Page Creation
2. This is an online platform that allows you to present and share presentations, infographics
and videos with other people.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
3. This is an online platform that lets you build a web page that includes colors, text, images, and
often contain links to media such as video and audio. The platform does not require any web
programming skill as they provide a drag and drop interface and free hosting as well.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
4. The information shared can be in the form of ideas, pictures, videos or anything that you want to
create and share to the virtual communities. The information you share will be the basis of the
people to interact, share content and collaborate with you and the large group of people.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
5. Is a platform often referred to simply as “the cloud”. In other words, instead of using
your computer’s hard drive, you store and access your data and programs over the
Internet.
a) Presentation or Visualization
b) Cloud Computing
c) Social Media
d) Web Page Creation
6. This is an online platform that allows you to convert and manage files like images, video,
documents, audio and more to other formats without downloading software tool.
a) Presentation or Visualization
b) File Management

P a g e 6 | 19
 c) Social Media
d) Cloud Computing
7. In this kind of platform, no coding skills are required. Instead, you manipulate with
design components using an editor window and get the chance to choose what elements
are placed on your page.
a) Web Templates
b) WYSIWYG
c) Social Media
d) Mapping
8. Are unique full page layout that contains generic information which can be replaced by the users
with their own personal information.
a) Web Templates
b) WYSIWYG
c) Social Media
d) Mapping
9. You can use this to backup your files in the cloud and access them anywhere.
a) Slideshare
b) Wix
c) Google Drive
d) Tumblr
10. You can use this to share text, photos, quotes, links, music, and videos from your browser, phone,
desktop, email or wherever you happen to be. This is a microblogging service that has recently
become a popular social media site.
a) Slideshare
b) Wix
c) Google Drive
d) Tumblr

Nature and Purposes of Online

Platforms and Applications
What is an Online Platform?i

• An online platform is a base of technologies designed to run within an online

environment and provides interactive online services.
• Online platforms currently include, but are not limited to: Presentation or
Visualization, Cloud Computing, Social Media, Web Page Creation, File
Management, and Mapping.

What’s In

P a g e 7 | 19
Activity 1: My Thought
Directions. Look at the 2 Signs. Share your thoughts.

Fig 1.ii Fig. 2iii

Guide Questions
1. Which examples would you consider as having a good layout? Explain your answer.
2. Which examples do not have a good layout? Why do you say so? What improvements
can be done to the layout?
3. Who do you think should be the target audience of such materials? Justify how the objects,
images, or text used in the layout cater or do not cater to the target audience.

What’s New

Activity 1: Work with it!!!

Directions. Do what is asked
Guide Questions:
1. Can you recall how do you create your Gmail? Is it simple?
2. What facts do you have about the common requirements in signing-up in
any online platforms?
3. What are the pros of having a Gmail account?

What is It

NATURE OF ONLINE PLATFORMS

Presentation or Visualization – this is an online platform that

allows you to present and share presentations, infographics and
videos with other people

P a g e 8 | 19
 • Cloud Computing – dictionary.com defines Cloud
Computing as “Internet-based computing in which large
groups of remote servers are networked so as to allow
sharing of data-processing tasks, centralized data storage,
and online access to computer services or resources”.
• Cloud Computing is a platform often referred to simply as
“the cloud”. In other words, instead of using your
computer’s hard drive, you store and access your data and
programs over the Internet.
• Social Media – dictionary.com also defines Social Media
as “websites and other online means of communication
that are used by large groups of people to share
information and to develop social and professional
contacts”.
• Social Media –The information shared can be in the form
of ideas, pictures, videos or anything that you want to
create and share to the virtual communities. The
information you share will be the basis of the people to iv
interact, share content and collaborate with you and the
large group of people.
• Web Page Creation – this is an online platform that lets
you build a web page that includes colors, text, images,
and often contain links to media such as video and audio.
The platform does not require any web programming skill
as they provide a drag and drop interface and free hosting v
as well.

• File Management – this is an online platform that allows

you to convert and manage files like images, video,
documents, audio and more to other formats without
downloading software tool.
vi

Basic Web Design Principles and Elements

Platforms and Applications

Basic Web Design Principles

The most important factor in web design is the end user. So, in designing your own web
pages, remember the following principles:
Principle #1: Visual Language
• Use a consistent template on each page with a uniform color scheme.
• Use contrasting colors between text and background (dark over light or vice versa). Create the
most contrast in the area where you want more attention to.
• Avoid too large or too small font size. Avoid too many typefaces too.
• Use common font style to similar items across the web pages.
• Make important links or menus more prominent in terms of color.
• Use high-quality pictures

P a g e 9 | 19
 • Images used should follow the rule of thirds as a rough guideline. “The rule of thirds states
than an image is most pleasing when its subjects or regions are composed along imaginary
lines which divide the image into thirds — both vertically and horizontally.”

http://www.cambridgeincolour.com/tutorials/rule-of-thirds.htm
Principle #2: Balance
• There should be a balance distribution of heavy and light elements on the page.
• Proper alignment of text and images in a web page helps maintain consistency in design.
• Important information is placed near the top.
• The size of a button should be proportional to its expected frequency of use.
• Group similar things together in terms of shape, color or shading.
• Create a pattern which will make your page easier to use, remember and understand
Principle #3: Paradox of Choice
• “Paradox of choice means the more choices you provide, the easier for others to choose
nothing.” Hence, you should eliminate unimportant or distracting menus or options.
• Focus on user needs
• Design around context of the multiuser in a multi-screen and in a multi-device.
Principle #4: Focus on Content
• Know the purpose of your web page so you could match the content with the purpose.
• Content should be spellchecked.
• Content should be organized.
• There should be a clear delivery of content.
• Include images on your content not just pure text.
• Content should be updated. Always add something new to your content. If you have nothing
to add, you can pick some free articles or free e-books at:
http://www.web-source.net/free_articles.htm or
http://www.web-source.net/free_ebooks.htm
• Just make sure to acknowledge the author or include the author’s resource box.
Principle #5: Simplify
• Minimal design does not always mean an effective design. However, when choosing between
simple and the opposite, the former is always a better choice than the latter. Hence, strive to
have a simple design.
• Keep content simple.
• Use minimal animated graphics.
• Maintain a look and feel across all the web pages.
Basic Web Design Elements

Web design elements are building blocks of a webpage. Here are the basic elements that
were handpicked and organized for you to consider in your web design:

vii
Element #1: Illustrations and Styles

P a g e 10 | 19
 • Illustrations include lines, shapes, texture and color which are fundamental elements that
should not be overlooked.
• Lines are used to organize, connect, and separate information and design elements.
Combined with shapes, color, and texture they give us a visual grammar which you can use to
communicate.

viii
Element #2: Links
• Links are the most basic interface on web pages. Links should be distinctive in color from
other types of text in a webpage. Keep links and regular text styled consistently to avoid users
from thinking whether or not the text is a link.
• Make sure your links are working.

ix
Element #3: Buttons and Menus
• Just like links, buttons and menus are also essential to web pages and they too need consistent
styles.
• Buttons and menus should be well-organized.
• Button labels and menus should be clear and easy to understand.

x
Element #4: Images
• Images also aids in communicating your message to the viewers. Aside from being used as
fillers, images also helps in leaving a lasting first impression.
• Use specific images that are related to your content so that it will draw attention not only to
the content but to your web page as a whole.

Web Templates and WYSIWYG Platforms

• WYSIWYG = “what you see is what you get”

• In this kind of platform, no coding skills are required. Instead, you manipulate with design
components using an editor window and get the chance to choose what elements are placed on
your page.
• Web templates are unique full page layout that contains generic information which can be
replaced by the users with their own personal information.
• Slideshare – you can use this to upload and
share your professional videos and slide
presentations.

• Google Drive – you can use this to backup

your files in the cloud and access them

P a g e 11 | 19
 anywhere. You can also use other
applications of Google along with Google
Drive. xi

• Tumblr – you can use this to share text,

photos, quotes, links, music, and videos
from your browser, phone, desktop, email or
wherever you happen to be. This is a
microblogging service that has recently
become a popular social media site.

• Wix – you can use this to create your web

site or mobile site. xii

GETTING STARTED WITH SLIDESHARE

a. Go to Slideshare by typing
www.slideshare.net in the address bar of
your browser. Slideshare homepage will
appear as shown below.
b. Create your account by clicking Signup.
c. Enter the required data in the page.

d. Click Signup.
e. When the signup is successful, the page
below will be displayed and you’re on your
way to become one of the Sliders.

f. For the meantime, log out to your

SlideShare account by hovering to the face
and then click Logout.

Getting Started with GoogleDrive

If you already have a Gmail account, then you don’t need to create another account since
Google implements a “one Google Account for everything Google”. But if you still don’t have an
account, then follow these steps before you can finally use Google Drive.

a. Go to Google and type www.google.com in the address bar of your browser. The
homepage of Google will appear as shown:
b. Click Sign in.
c. Click Sign in. Login Page will appear as shown below.
d. Click Create account.
e. Fill out your profile information. At the end of the form, do not forget to click the “I
Agree…” check box.
f. Click Next Step.
Welcome Page will appear. This means that you are now ready to use Google Drive.
In Google Drive, you can create a folder, upload a file, create Google Docs, Sheets and Slides, and even
Google Forms, Drawings and Maps. Before you can do that, click Google Apps and select Drive

P a g e 12 | 19
Click New and everything follows.

Google offers other useful applications which can be accessed by clicking Google Apps .
• Play - is the official app store of Google for Android smartphones and tablets.
• News - is a computer-generated news site of Google whose news is aggregated from sources
all over the world.
• Gmail - is a free, advertising-supported email service provided by Google.
• Calendar - is a time-management web application and mobile app by Google.
• Google+ - is an interest-based social network by Google.
• Translate - is a multilingual service provided by Google to translate text, speech, images, or
real-time video from one language into another.
• Photos - is the newest app of Google which provides a photograph and video sharing and
storage service for Google users.
GETTING STARTED WITH TUMBLR

a. Go to Tumblr by typing www.tumblr.com in the address bar of your browser. The

Tumblr homepage will appear as shown:
b. Click Next.
c. Click I’m not a robot box and then answer what is asked.
d. Welcome page will be displayed. You will be asked to select and follow five blogs to
get started. However, to speed up the process of completing your account, click Skip.
e. You will be asked to verify your email address as shown below. So create a new tab
and go to your gmail account by typing gmail.com in the address bar.
f. Click Sign In.
g. Enter your email and then click Next.
h. Enter your password and then click Sign In.
i. Click Done. Your gmail account will be loaded and a welcome message will appear.
Close the welcome message.
j. In your Inbox, click the message of Tumblr asking for your confirmation.
k. Within the message, click Verify email address.
l. The page below will appear when the verification is successful. Click skip to your
web dashboard.

P a g e 13 | 19
 m. Close the tab and go back to your gmail account. Sign out to your gmail account, close
the tab and then go back to Tumblr.
n. To log out your Tumblr account, click the face account and then click Log out.

GETTING STARTED WITH WIX

a. Go to Wix by typing www.wix.com in the address bar of your browser. Wix
homepage will appear.
b. Click Start Now. Sign In Page will appear
c. If you want to sign in using your social media account on Facebook or Google, click
the corresponding button. However, you can also sign in using your available email.
Enter your email and password and then click Go.
d. Enter your email and password again for verification.
e. Click Go. When successful, a welcome page will appear.
f. Select a category. Customizable templates will be displayed for you to choose from
according to the selected category. If you are not decided on what category to use,
choose anything and the selection can be changed later.
g. Click Go and you’re ready to create your own website.
h. To log out to your Wix account, hover to the arrow beside your username and then
click Logout.

What’s More

Activity 4:

ACROSS
1.
3.
5. MEDIA
7.
8.
10.

DOWN
2. DRIVE
4.
6.
9.

P a g e 14 | 19
 What I Have Learned

Activity 5: YOUR EXIT TICKET

Directions: Complete the table 321 Exit Ticket by writing what is being asked.
321 EXIT TICKET
Things I learned
3

Things I Found Interesting

2

Questions I still have

1

What I Can Do

Activity 6: Look for the hidden words

P a g e 15 | 19
 Assessment

Multiple choice: Match column A with the correct answer on column B

COLUMN A COLUMN B
____ 1. This is an online platform that allows you to convert and
manage files like images, video, documents, audio and more a) Tumblr File
to other formats without downloading software tool. Management
____ 2. This is an online platform that allows you to present and share
presentations, infographics and videos with other people.
b) Slideshare
____ 3. The information shared can be in the form of ideas, pictures,
videos or anything that you want to create and share to the
virtual communities. The information you share will be the c) online platform
basis of the people to interact, share content and collaborate
with you and the large group of people.
____ 4. Is a platform often referred to simply as “the cloud”. In other d) Wix
words, instead of using your computer’s hard drive, you
store and access your data and programs over the Internet.
e) Google Drive
____ 5. In this kind of platform, no coding skills are required.
Instead, you manipulate with design components using an
editor window and get the chance to choose what elements f) Web Templates
are placed on your page.
____ 6. Are unique full page layout that contains generic information g) Social Media
which can be replaced by the users with their own personal
information.
____ 7. You can use this to backup your files in the cloud and access h) Mapping
them anywhere.
____ 8. It is a base of technologies designed to run within an online i) Cloud Computing
environment and provides interactive online services.
____ 9. You can use this to share text, photos, quotes, links, music,
and videos from your browser, phone, desktop, email or
wherever you happen to be. This is a microblogging service
that has recently become a popular social media site.
____ 10. This is an online platform that lets you build a web page that
includes colors, text, images, and often contain links to media
such as video and audio. The platform does not require any
web programming skill as they provide a drag and drop
interface and free hosting as well.

P a g e 16 | 19
 Reflection

Activity
Directions: In your notebook, journal or portfolio, write your personal
insights about the lesson by completing the following statements.

Reflection
Directions: In your notebook, journal or portfolio, write your personal insights about
the lesson by completing the following statements.

✓ I understand that ___________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I need to improve on ________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I realize that ______________________________________________________

_________________________________________________________________
_________________________________________________________________

Answer Keys

WHAT I KNOW ASSESSMENT

1. File Management A. Web Templates

2. online platform B. online platform
3. Mapping C. Cloud Computing
4. Cloud Computing D. Social Media
5. Social Media E. Slideshare
6. Web Templates F. Wix
7. Slideshare G. Google Drive
8. Wix H. File Management
9. Google Drive I. Tumblr
10. Tumblr J. Mapping

P a g e 17 | 19
References
For educational purposes only; All rights reserved for rightful owners
Empowerment Technologies by Innovative Training Works, Inc. and Rex Bookstore ISBN 978-971-
23-7830-0
EmTech by Ivy Tarun, ppt presentation
Fig. 1-Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0
Fig. 2-Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0
Image Source: www.openlearning.com
Image Source: www.lgam.info, moziru.com, www.freepik.com, www.barbarahaworthattard.com,
clipartix.com
Image Source: en.newcom-maroc.com
Image Source www.udemy.com
Image Source: www.sitepoint.com
Image Source: twitter.com
Image Source: www.designshock.com
Image Source: webneel.com
Image Source: www.sourcecon.com, itc.ua
Image Source: fontsinuse.com, twitter.com

Google images:
https://www.google.com/search?q=Focus+on+Content%2C+elements+of+design&tbm=isch&ved=2ahUKEwios93s3IzqAhVG1ZQKHe4D
CbEQ2-
cCegQIABAA&oq=Focus+on+Content%2C+elements+of+design&gs_lcp=CgNpbWcQAzIECCMQJ1DRzQNY0c0DYNvYA2gAcAB4AI
ABkQGIAZEBkgEDMC4xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=nRTsXujwOsaq0wTuh6SICw&bih=627&biw=1326&
client=opera&hs=ghT#imgrc=ZilIu0SEXT02KM

https://www.google.com/search?q=Balance%2C+elements+of+design&tbm=isch&ved=2ahUKEwi84KLL24zqAhVvGKYKHcq0BPcQ2-
cCegQIABAA&oq=Balance%2C+elements+of+design&gs_lcp=CgNpbWcQAzICCAAyBggAEAcQHjIGCAAQCBAeMgYIABAIEB4yB
ggAEAgQHlCDXFiDXGDvbGgAcAB4AIAB7wGIAe8BkgEDMi0xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=SxPsXvyOF
u-wmAXK6ZK4Dw&bih=627&biw=1326&client=opera#imgrc=y7jusl4Zd0ANUM

https://www.google.com/search?q=Visual+Language&client=opera&hs=ghT&sxsrf=ALeKk03_jt6kHnfTWSHNT8EdFKSAJsaNSA:15925
29353247&tbm=isch&source=iu&ictx=1&fir=HI3qc3iXa6bkzM%253A%252C87bK2m2fW3IOgM%252C_&vet=1&usg=AI4_-
kTRJ8RXqhEIGFmxXDrOCrM71yfnTw&sa=X&ved=2ahUKEwjV5ZOT2ozqAhVI_GEKHdUDAUkQ_h0wAnoECAUQCA&biw=1326
&bih=627#imgrc=HI3qc3iXa6bkzM:

https://www.google.com/search?q=Simplify%2C+elements+of+design&tbm=isch&ved=2ahUKEwixucjj24zqAhWHzIsBHaaFAuoQ2-
cCegQIABAA&oq=Simplify%2C+elements+of+design&gs_lcp=CgNpbWcQA1CZ8wVYmfMFYMP8BWgAcAB4AIABoAGIAaABkgE
DMC4xmAEAoAEBqgELZ3dzLXdpei1pbWc&sclient=img&ei=fhPsXrGCE4eZr7wPpouK0A4&bih=627&biw=1326&client=opera#imgr
c=DvTkfcwYWW1-_M

i
EmTech by Ivy Tarun, ppt presentation
ii
Fig. 1-Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0
iii
Fig. 2-Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0
iv
Image Source: www.openlearning.com
v
Image Source: en.newcom-maroc.com

P a g e 18 | 19
vi
Image Source www.udemy.com
vii
Image Source: www.sitepoint.com
viii
Image Source: twitter.com
ix
Image Source: www.designshock.com
x
Image Source: webneel.com
xi
Image Source: www.sourcecon.com, itc.ua
xii
Image Source: fontsinuse.com, twitter.com

P a g e 19 | 19