Senior High School

EMPOWERMENT
TECHNOLOGIES
First Quarter – Week 5-8
Principles and Techniques of Design
Using Online Creation Tools, Platforms, and
Applications
EIM – Grade 11
Most Essential Learning Competency (MELC) – Based Exemplar
Quarter 1 – Week 5: Principles and Techniques of Design
Using Online Creation Tools, Platforms, and
Applications
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 exemplar 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.

Development and Quality Assurance Teams

Writers: ELEAZAR-REY M. AGUDO
Illustrator: ELEAZAR-REY M. AGUDO
Layout Artist:
Language Editor:
Content Evaluator:
Layout Evaluator:
Management Team: PSDS/DIC
___________________

1
Rationale

Project PPE (Portfolio Predicate on Exemplar) is a backup contingency response

of the Schools Division of Surigao del Sur for learning delivery and learning resource
which parallel to the on-going endeavors of the higher offices in the Department.
It is the utilization of a lesson exemplar that is streamlined in a teacher-and-learner-
friendly format to cater to the new classroom setup in light of the COVID-19 health
crisis. These exemplars will be paired with a self-contained and self-instructional
portfolio.

The portfolio is a deliberate collection of works that highlight a learner’s effort that
would enable the him/her to see his/her growth and achievement, ability to
reflect on his/her own work and ability to establish goals for future learning.

Introductory Message

For the teacher:

Welcome to the EMPOWERMENT TECHNOLOGIES QUARTER 1 WEEK 5-8 Exemplar

on Principles and Techniques of Design Using Online Creation Tools, Platforms,
and Applications

.This exemplar was collaboratively designed, developed and reviewed by

educators from different schools in the Division to assist you in helping the learners
meet the standards anchored on Most Essential Learning Competencies (MELC)
set by the Department while overcoming the constraints in schooling brought by
the COVID-19 pandemic.

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.

As a teacher, you are expected to orient the learners on how to use this exemplar
in the most fit modality. You also need to keep track of the learners' progress while
allowing them to manage their own learning through portfolio assessments.

For the learner:

Welcome to the EMPOWERMENT TECHNOLOGIES QUARTER 1 WEEK 5-8 Exemplar

on Principles and Techniques of Design Using Online Creation Tools, Platforms, and
Applications.

This exemplar was designed to provide you with fun and meaningful opportunities
for guided and independent learning at your own pace and time. You will be

2
enabled to process the contents of the learning resource while being an active
learner, either at home or in school. To help you with this, this exemplar comes with
a Weekly Portfolio Assessment. Your teacher will provide you with a template and
you will be given a privilege to organize the portfolio in your own creative way.

This exemplar has the following parts and corresponding icons:

This will give you an idea of the competencies

What I Need to Know
you are expected to learn in the exemplar and
the objectives you are expected to realize.
This part includes an activity that aims to check
What I Know
what you already know about the lesson to
take.
This section provides a brief discussion of the
What is It
lesson. This aims to help you discover and
understand new concepts and skills.
This section provides an activity which will help
What I Can Do (1,2 & 3)
you transfer your new knowledge or skill into real
life situations or concerns.

This task aims to evaluate your level of mastery

What I Have Learned
in achieving the learning objectives.

Answer Key This contains answers to all activities in the

module.

This contain instructions about recording your

Portfolio Goal Setting
positive, realistic goals before going through this
exemplar.
This contain instructions about completing the
Portfolio Completion -Your
components of the portfolio. This also includes a
Growth Clue!
rubric to guide you of how your portfolio will be
assessed.

At the end of this module you will also find:

References This is a list of all sources used in

developing this exemplar.

3
 What I Need to Know

Most Essential Learning Competency:

LO 1. Apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for a specific
purpose
in specific professional tracks CS_ICT11/12-ICTPT-Ig-h-10

Sub-competency:

Objectives

After going through this exemplar, you are expected to:

A. Knowledge: Evaluate the quality, value, and appropriateness of

peer’s existing or previously developed ICT content in relation to
the theme or intended audience/ viewer of an ICT project.
B. Skill: Create an original or derivative ICT content using online
creation tools, platforms, and applications to effectively
communicate messages.

C. Attitude: Share and showcase existing or previously developed

material in the form of a collaboratively designed newsletter or
blog site intended for a specific audience or viewer

Portfolio Goal Setting

Using the Portfolio Assessment Template provided by your teacher along

with this exemplar, accomplish now your weekly goal setting. Refer to the
objectives above. Think of positive and realistic goals that you can
considerably achieve with this exemplar. List them as your plans. Remember:
Do not proceed with this exemplar unless you have accomplished your goal
setting.

4
 What I Know
You must be excited to flip over the pages and begin with the
lessons. But first, please answer the pre-test to measure what
topics have you known so far.

Multiple Choice.
Direction: Read each item carefully and choose the letter of the correct
answer. Write your answers on a separate sheet of paper or in your notebook.

1. When a user makes a mistake which of the following would they expect?
A. An easily understood error message telling them how to solve the
problem.
B. A detailed error message which gives them detailed instructions on
how they can avoid the error next time.
C. To have to log out of the site, log back in and start again.
D. A re-direction to another website where you will log in.
2. Which principle of a good web design refers to the waiting time for your
website to load?
A. Navigation C. Load Time
B. Visual Hierarchy D. Grid-based Layout
3. The F-shaped reading pattern is designed for what specific type of reading
strategy?
A. Active Reading C. Skimming
B. Previewing D. Scanning
4. What principle of a good web design refers to the type of font used in the
website?
A. Color C. Navigation
B. Grid-based Layout D. Typography
5. Which statement best describes good use of animation on a website?
A. Animation should never be used on a website; it is just too
distracting.
B. Animation should be used sparingly and to create impact.
C. Animation should be used as much as possible to attract audience
attention.
D. Animation should be in small sizes, so they do not get too much
space in the website

What is It
Web Page Creation

While it's easy to build a web page, it's hard to make it look right. If all
you want is plain text, everything will be too straightforward. The tricky part is
when you want something more. Most bad web pages are bad because of

5
their design rather than their contents. The more stuff on the page, the
messier it gets and the less likely you are to keep the interest of the visitor
([Link]

An effective website design should fulfill its intended function by

conveying its message while simultaneously engaging the visitor. Several
factors such as consistency, colors, typography, imagery, simplicity and
functionality all contribute to good website design. A well-designed website
can help build trust and guide visitors to act. Creating a great user
experience involves making sure your website design is optimized for usability
(form and aesthetics) and how it easy is it to use (functionality).
([Link]

WEB TEMPLATES and “WYSIWYG” PLATFORMS

“WYSIWYG” means 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 on your page.
Web Templates These are unique full-page layout that contains generic
information which can be replaced by the users with their own personal
information.

BASIC WEB DESIGN PRINCIPLES

Website Purpose
Your website needs to accommodate the needs of the user. Having a
simple clear intention on all pages will help the user interact with what you
have to offer. Are you imparting practical information like a ‘How to guide’?
Is it an entertainment website like sports coverage or are you selling a
product to the user? Below are the common core purposes of websites:
✓ Describing Expertise
✓ Building Your Reputation
✓ Generating Leads
✓ Sales and After Care

Simplicity

Simplicity is the best way to go when considering the user experience

and the usability of your website. Below are ways to achieve simplicity
through design.

Color - it has the power to communicate messages and evoke

emotional responses. Finding a color palette that fits your brand will allow you
to influence your customer’s behavior. Keep the color selection limited to less
than 5 colors. Pleasing color combinations increase customer engagement
and make the user feel good.

6
 Typography or the text used.

Typefaces should be legible

and only use a maximum of 3
different fonts on the website.

Image source:
[Link]
design/big-typography/

Imagery is every visual aspect used within communications. This

includes still photography, illustration, video and all forms of graphics. All
imagery should be expressive and capture the spirit of the company and act
as the embodiment of their brand personality.

Navigation

Navigation is the way finding system used on websites where visitors interact
and find what they are looking for. Website navigation is key to retaining
visitors. If the websites navigation is confusing visitors will give up and find
what they need elsewhere. Keeping navigation simple, intuitive and
consistent on every page is key.

7
F-Shaped Pattern Reading
The F- based pattern is the most common
way visitors scan text on a website. Eye
tracking studies have found that most of what
people see is in the top and left area of the
screen. The F’ shaped layout mimics our
natural pattern of reading in the West (left to
right and top to bottom). An effective
designed website will work with a reader’s
natural pattern of scanning the page.

Image source:
[Link]

Visual Hierarchy
The arrangement of elements is order of importance. This is done either by
size, color, imagery, contrast, typographically, whitespace, texture and style.
One of the most important functions of visual hierarchy is to establish a focal
point; this shows visitors where the most important information is

Content

An effective web design has both great design and great content. Using
compelling language great content can attract and influence visitors by
converting them into customers.

8
Grid Based Layout
The grid-based layout arranges
content into a clean rigid grid
structure with columns, sections
that line up and feel balanced and
impose order and results in an
aesthetically pleasing website.
Image source: [Link]
principles-of-good-web-design/

Load Time
Waiting for a website to load will lose visitors.
Nearly half of web visitors expect a site to load in
2 seconds or less and they will potentially leave a
site that isn’t loaded within 3 seconds. Optimizing
image sizes will help load your site faster.
Image source:
[Link]

Mobile Friendly

More people are using their phones or other devices to

browse the web. It is important to consider building your
website with a responsive layout where your website can
adjust to different screens.
Image source:
[Link]

What I Can Do 1
Activity I - Website Design Quality Check

Direction: Use the Internet to research on the designated topics depending

on your track:
A. Stem cell research D. Types of Sports Injuries
(STEM students) (SPORTS track students)
B. Strategies on Putting up a Business E. Folk dances in the Philippines
(ABM students) (ARTS and DESIGN students)
C. Online Dating among Teens F. Vocational Education in the
(HUMSS students) Philippines (TVL students)

9
Once you find the website, evaluate the website using the checklist below. Copy the
checklist in your notebook or portfolio.

Name of Website: ___________________________________________________

Website URL: _______________________________________________________

What is It
Online Creation Tools

Types of Visual Content

Visual content is great because it powers up your communication and
receives great attention from the target audience.

Infographics are graphic visual representations of information, data, or

knowledge intended to present information quickly and clearly. They
can improve cognition by utilizing graphics to enhance the human
visual system's ability to see patterns and trends.

10
 Videos are recording of moving pictures and sound, especially as a
digital file.
Presentations use catchy images, videos, and graphics in your
presentation to get into the minds of your target audience.

For Infographics

Piktochart is an infographic creation tool that lets you design stunning

pieces worth sharing in minutes.

For Videos
PowToon. The online animation software of PowToon is perfect for
storytelling and creating Flash-style movies. You don’t have to go
through
hundreds of tutorials to learn motion creation as PowToon will do it for
you.

YouTube Video Editor is simple and with a single-track timeline, you get
all the basic transitions and effects and a soundtrack feature. It is easy
to learn and quick to use. Users can edit and remix the YouTube videos
that are uploaded in their YouTube accounts.

For Presentation

Prezi is cloud-based presentation software that is simple to use as

compared to the traditional slideshow makers. It displays information
not as series of slides but as a large board that zooms in on specific
information, text, or an image, giving presentations a fresh and non-
traditional feel.

SlideShare. You can use this to upload and share professional videos
and slide presentations.

For Web Site Creations

Wix you can use this to create your web site or mobile site.

For Blogging

[Link] the self-hosted version of WordPress is, by far the most

popular blogging platform in the world. WordPress powers over 90
percent of all the blogs on the Internet.

[Link] is a blog site hosting service by Automattic. You can

get a free blog with basic features. For advanced functionality, you

11
 need to opt for one of their paid plans. It can be a great starting point
for blogging.

[Link] This free blog hosting service has been around for a long
time. It was founded in 1999 and acquired by Google in 2003. You can
sign up easily with your existing Google account.

What I Can Do 2

Activity: It’s My Space

Direction: You are a graduating SHS student and your final task in your subject
is to create a blog. Your teacher asked you to create a blog on why incoming
SHS students must choose your track. Don’t forget to remember the principles
of web and graphic designs when creating your blog. Choose your own online
platform for your blog. Your work must be published online. Give the URL of your
blog to your teacher for checking. The link of your blog may be sent or posted
through our fb messenger group chat and group page.

You may choose to the different platforms but not limited to the following.

[Link] [Link] [Link]

CRITERIA 4 3 2 1
Text Layout, Selects and Selects and Selects and Does not insert
inserts high quality inserts graphics inserts many any graphics, or
Use of graphics and and multimedia low-quality uses only
Graphics multimedia when that are mostly graphics and lowquality
and appropriate to high quality and multimedia graphics
enhance the enhance and which do not and multimedia,
Multimedia content’s visual clarify the enhance the which do not
appeal and content. content. enhance the
increase Acknowledges Acknowledges content.
readability. most image and only a few Does not
Acknowledges all multimedia multimedia and acknowledge
image and sources with image sources any image or
multimedia captions and uses multimedia
sources with incomplete sources, either
captions captions. with a caption.
Content and Postings provide Postings Postings Postings show
comprehensive provide provide minimal no evidence of
Creativity insight, moderate insight, insight,
understanding, insight, understanding understanding
and reflective understanding and reflective or reflective
thought about the and reflective thought about thought about
topic by thought about the topic the topic.
...building a the topic
focused
argument

12
 around a specific
issue or
...asking a new
related question
or
...making an
oppositional
statement
supported by
personal
experience or
related research
Citations All images, media Most images, Some of the No images,
and text created media or text images, media media or text
by others display created by or text created created by
appropriate others display by others does others display
copyright appropriate not display appropriate
permissions and copyright appropriate copyright
accurate permissions copyright permissions
citations and accurate, permissions and do not
properly and does not include
formatted include accurate,
citations. accurate, properly
properly formatted
formatted citations.
citations
Quality of Blog entries have Blog entries Blog entries Blog entries use
no spelling or have few show some incorrect
Writing and grammatical spelling or evidence of grammar and
Proofreading errors. grammatical correct spelling,
errors. grammar, consistently
spelling, making it
punctuation, difficult for
etc others to follow
ideas in entry.
Blog Blog is easy to Blog is easy to Blog is clear to Blog is
understand, easy understand, read, neat, and unorganized,
Organization to navigate, clear clear to read presentable All hard to follow or
to read, and navigate, links and titles navigate,
aesthetically aesthetically are easy to find. nonworking links,
appealing and appealing and Blog is fairly visually
relevant, all links relevant, all easy to dissident
are working, and links and titles navigate
titles are easy to are easy to find.
find

13
 What I Have Learned
An effective website design should fulfill its intended function by
conveying its message while simultaneously engaging the
visitor. Several factors such as consistency, colors, typography,
imagery, simplicity and functionality all contribute to good website design. A
well-designed website can help build trust and guide visitors to act. Creating
a great user experience involves making sure your website design is optimized
for usability (form and aesthetics) and how it easy is it to use (functionality).

Direction: Read each item carefully and choose the letter of the correct
answer. Write your answers on a separate sheet.

1. Which of the following statements is an example of good website

design??
A. Having very detailed instructions to teach the user how to use the
website.
B. Having lots of flashing animation that shows how clever the
designer is.
C. Having navigation which makes it intuitive to use the website.
D. Having animation should be used as much as possible to attract
audiences’ attention.

2. Which statement best describes good use of animation on a website?

A. Animation should never be used on a website; it is just too
distracting.
B. Animation should be used sparingly and to create impact.
C. Animation should be used as much as possible to attract audience
attention.
D. Animation should be in small sizes, so they do not get too much
space in the website.

3. Which of the following statements describes good website design?

A. Consistent use of styles and color create a professional look to a
website.
B. Using lots of different styles and colors shows how creative the
designer is.
C. Consistent use of styles and color is boring and will make the user
log out.
D. Websites that have background music are a sign of creativity from
the designer.

4. How does the F-shaped reading pattern help visual hierarchy?

A. Users can confirm that the author of the site is an authority on the
subject.
B. Users first read in a horizontal movement, usually across the upper

14
 part of the content area.
C. It enables search engine users to index the website efficiently when
they crawl the web pages.
D. It enables users to enter the site from a number of different pages.

5. When a user makes a mistake which of the following would they

expect?
A. An easily understood error message telling them how to solve the
problem.
B. A detailed error message which gives them detailed instructions on
how they can avoid the error next time.
C. To have to log out of the site, log back in and start again.
D. A re-direction to another website where you will log in.

15
 Answer Key

What I know?
What Can I do 1?

What Can I do 2?

16
For inquiries or feedback, please write or call:

DepEd Surigao del Sur Division – Schools District of _____________

Address: _______________________________________________
___________________________________________________________
___________________________________________________________

Contact Number:
Email Address:

17