EMPOWERMENT

TECHNOLOGIES

FIRST SEMESTER
FIRST QUARTER
MODULE 5
Online Creation Tools, Platforms and
Applications

Locally Developed Self-Learning Material

Empowerment Technologies – Grade 11
Locally Developed Self-Learning Material
Quarter 1 – Lesson 5: Online Creation Tools, Platforms and Applications

Module Development Team

Writer: Joana Carla L. Alejo

Teacher II, NCNHS-SHS

Editors: Bien Levi Mendigorin

Special Science Teacher I, TSHS
Reynaldo Biag Jr.
Teacher I, BSHS

Reviewers: Jonathan F. Bada

EPS, EPP/TLE/TVL, SHS & GPP Focal Person
Orven O. Danugrao
PSDS, District I-A
Samson S. Buqueron
EPS/ OIC- School Administrator

Management Team:
Leilani S. Cunanan, CESO V
Schools Division Superintendent
Maylene M. Minimo, EdD, CESE
OIC- Assistant Schools Division Superintendent
Ariel C. Lansang
Chief, Curriculum Implementation Division
Jose C. Tala, EdD
EPS, Learning Resource Management System
Corazon B. Dumlao
PSDS, SHS Focal Person
 Quarter: First Quarter (Week 5)
Content: Online Creation Tools, Platforms, and Applications

Name: ______________________________ Grade/ Section: _______________

School: ______________________________ Date: _______________________

WHAT I NEED TO KNOW

Learning Competencies found in MELCS

1. Evaluate existing online creation tools, platforms, and applications in developing ICT content.
(CS_ICT11/12-ICTPT-Ig-h-11)

WHAT I KNOW

Directions: Read each item carefully and choose the letter of the correct answer. Write your answers on a separate sheet of paper.
1. When a user makes a mistake in accessing a website, 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 B. Visual Hierarchy C. Load Time D. Grid-based Layout

3. The F-shaped reading pattern is designed for what specific type of reading strategy?
A. Active Reading B. Previewing C. Skimming D. Scanning

4. What principle of a good web design refers to the type of font used in the website?
A. Color B. Grid-based Layout C. Navigation 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 on the website.
 WHAT’S NEW

Web Page Creation- 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 easy is it to use
(functionality). (https://www.feelingpeaky.com/9-principles-of-good-web-design/).

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 general information which can be replaced by the users
with their 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 Image from:
https://paymantaei.medium.com/
✓ 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.
✓ Typography or the text used. Typefaces should be
legible and only use a maximum of 3 different fonts on the
website.

Image from https://uicookies.com/minimal-shopify-themes/

 ✓ Imagery. It 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 wayfinding system used on
websites where visitors interact and find what they are
looking for. Website navigation is key to retaining visitors.
If the website's navigation is confusing visitors will give up
and find what they need elsewhere. Keeping navigation
simple, intuitive, and consistent on every page is key.

Image from

https://agentestudio.com/blog/website-navigation-design
➢ 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 areas of the screen.
The F’ shaped layout mimics our natural pattern of reading in the West
(left to right and top to bottom). An effectively designed website will
work with a reader’s natural pattern of scanning the page.

Image from https://www.wiredplus.com/blog/f-shaped-reading-pattern

➢ Visual Hierarchy. The arrangement of elements in order of importance. This is done either by size, color, imagery, contrast,
typography, 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.

Image from https://visme.co/blog/visual-hierarchy/

➢ 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.

➢ 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 from https://www.smashingmagazine.com/2007/04/designing-with-grid-based-approach/

 ➢ 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.

➢ 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.

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.
➢ 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.

Image from https://piktochart.com/

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.
Image from https://www.powtoon.com/
➢ Filmora. It is a popular video editing tool intended for users who want to concentrate on editing and making high-quality
videos. The software offers editing support for 4K videos. The tool makes it possible for users to throw
in overlays, come up with animations and elements, add audio, and insert texts.
Image from https://filmora.wondershare.com/

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.

Image from https://prezi.com

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

Image from https://www.slideshare.net

For Web Site Creations

➢ Wix. Wix is an online website builder that gives users drag-and-drop simplicity when it comes to designing and publishing
your portfolio, small business website, blog, or online store.
Image from https://www.wix.com

For Blogging
➢ WordPress.org 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.
➢ WordPress.com is a blog site hosting service by Automatic. You can get a free blog with basic features. For advanced
functionality, you need to opt for one of their paid plans. It can be a great starting point for blogging.
Image from https://www.wordpress.com
➢ Blogger.com 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.
Image from https://www.blogger.com

WHAT I CAN DO

ACTIVITY: It’s My Space

Directions: 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 online platform for your blog. Your work must be published online. Give the URL of
your blog to your teacher for checking.

Rubric for assessing your Blog:

The rubric is adapted from the University of Wisconsin https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html
CRITERIA 4 3 2 1
Text Layout, Use of Selects and inserts Selects and inserts Selects and inserts Does not insert any
Graphics and high-quality graphics graphics and many low-quality graphics, or uses only
Multimedia and multimedia when multimedia that are graphics and low-quality graphics
appropriate to enhance mostly high quality and multimedia which do and multimedia, which
the content’s visual enhance and clarify not enhance the do not enhance the
appeal and increase the content. content. content.
readability.
Acknowledges most Acknowledges only a Does not acknowledge
Acknowledges all image and multimedia few multimedia and any image or
image and multimedia sources with captions. image sources and multimedia sources,
sources with captions. uses incomplete either with a caption.
captions.
Content and Creativity Postings provide Postings provide Postings provide Postings show no
comprehensive insight, moderate insight, minimal insight, evidence of insight,
understanding, and understanding, and understanding, and understanding, or
reflective thought reflective thought reflective thought reflective thought
about the topic by about the topic. about the topic about the topic.
...building a focused
argument 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, and Most images, media, Some of the images, No images, media, or
text created by others or text created by media, or text created text created by others
display appropriate others display by others do not display appropriate
copyright permissions appropriate copyright display appropriate copyright permissions
and accurate citations. permissions and copyright permissions and do not include
accurate, properly and do not include accurate, properly
formatted citations. accurate, properly formatted citations.
formatted citations.
Quality of Writing and Blog entries have no Blog entries have few Blog entries show Blog entries use
Proofreading spelling or grammatical spelling or grammatical some evidence of incorrect grammar and
errors. errors. correct grammar, spelling, consistently
spelling, punctuation, making it difficult for
etc others to follow ideas
in the entry.
Blog Organization The blog is easy to The blog is easy to The blog is clear to The blog is
understand, easy to understand, clear to read, neat, and unorganized, hard to
navigate, clear to read, read and navigate, presentable All links follow or navigate, has
aesthetically appealing aesthetically appealing and titles are easy to nonworking links,
and relevant, all links and relevant, all links find. The blog is easy visually dissident.
are working, and titles and titles are easy to to navigate.
are easy to find find
 ASSESSMENT

Directions: 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. 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 on the website.

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

A. Consistent use of styles and color creates a professional look for 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 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 several different pages.

5. When a user makes a mistake in accessing a website 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 has to log out of the site, log back in and start again.
D. A re-direction to another website where you will log in.
 REFERENCES
1. Feeling Peaky. (2018, Feb. 16). 9 principles of good web design. Retrieved from https://www.feelingpeaky.com/9-principles-of-
good-web-design/. Retrieved on June 1, 2020.
2. Franker, Karen. The University of Wisconsin. (2016). A Rubric for Evaluating Student Blogs. Retrieved from
https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html. Retrieved on June 1, 2020.
3. Kaushal, Navneet. (2015, Feb. 9). 14 Online tools for visual content creation. Retrieved from https://www.clickz.com/14-online-
tools-for-visual-contentcreation/27235/. Retrieved on June 1, 2020.
4. Quiambao, Angelito. (2019, Sep. 8). Online platforms for ICT Content Development. Retrieved from
https://www.slideshare.net/AngelitoQuiambao/online-platforms-for-ictcontent-development-169954837. Retrieved on May 31,
2020.
5. Basic Web Page Creation. Retrieved from http://billconner.com/techie/webpages.html. Retrieved on June 1, 2020.

ANSWER KEY

WHAT I KNOW WHAT I CAN DO ASSESSMENT

1. A ACTIVITY 1. C
2. C ANSWERS MAY VARY. 2. B
3. D 3. A
4. D 4. B
5. B 5. A