Module 7:

ICT for Content

Development
Prepared by:
Mr. Fredper C. Sentes
 Objectives:
• Explore the principles of interactivity and rich content in the context of Web
2.0 and the participation of the user in the online experience.
• Evaluate existing online creation tools, platforms, and applications in
developing ICT content for specific professional tracks.
• Apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for a specific purpose
T in specific professional tracks.
Outline of Discussion
Website Iteractivity Web Design Principles
01 and User Experience 02 and Elements

Applications for
03 Content Development
• Wix
• Facebook Page
• Spark Video
 Essential Questions
• How can you improve user experience in using your
digital platfom?
• Why are social media platforms and websites widely
used for promotion?
• What is the advatage of WYSIWYG authoring tools.
Interactive Features
Website Interactivity and User Experience

Website Interactivity User Experience (UX)

Website interactivity enables the user to
actively participate in a webpage, for
example: (UX) User Experience is the perception of
the users about their interaction with the
⎼ Sending reactions Website.
⎼ Commenting on a post
⎼ Answering a poll
⎼ Clicking a button
Web Design
Principles and
Elements
Web design principles and elements ensure
that your website fulfills its intended purpose,
which is to convey a message to the viewers.
Simplicity
• Making the website
easy to navigate and
use.
• Simplicity in website
can be achieved in
variety of ways.
Color
• Select colors that are
appropriate for the
brand
• Select up to at least five
colors and ensure that
these complement to
one another
• Pleasing and
comfortable to the eyes
of the users
Typeface
• Must be clear and easy
to read
• Can select up to three
different typefaces
Imagery
• The visual aspect of the
website
• Pictures, illustrations,
videos, and all forms of
graphics
• Imagery use must be
relevant and support
the message to be
conveyed to the
audience
Navigation
• A good characteristic of
website is easy to
navigate
• Incorporate a finding
system or menu
• Avoid confusing the
viewers
F-shaped Pattern
Reading
• F-shaped pattern is the
natural way on how the
users scan texts (Left to
Right, Top to Bottom)
Visual Hierarchy
• The arrangement of
visual elements
according to the level of
importance
• Typically, the most
important element has
the largest size, found
at the center, or
contains the brightest
colors
Content
• Good website has a
good content
• It must have a
compelling language
• Does not contain
incorrect grammar and
spelling
Grid-based
Layout
• Clean and organize
• Arranges content in a
clean grid structure
which contains columns
and sections
• Placed web content
nicely and balanced
Load Time
• Too much multimedia
will result in longer load
time
• Optimized medias to
help the website load
faster
Applications for
Content
Development
Here are few free applications and online tools
that you can use to boost your advocacy on the
internet:
Wix
• This is a web-based
platform that enables
users to create stunning
and professional-
looking websites.

Here are the key features:

✓ Vast number of stunning templates
✓ WYSIWYG (What-You-See-Is-What-You-Get) system
✓ Optimized for viewing in mobile devices
✓ Integrate animation, video backgrounds, and scroll effects to your website
✓ Unlimited access to fonts
Signing Up
• Register manually or
using Facebook or
Google account
Creating a New
Site
• “My Sites” page
will enable you to
select, edit, view,
and open the
dashboard for your
existing sites.
• Create a site by
selecting “Create
New Site”
Creating a New
Site
• Select or search
what kind of website
you want to create

Note: select setup

without AI
Choosing a
Temaplate
• “Choose a Template” will
enable access templates
precreated by Wix
• Search desired templates by
entering a key word on the
search bar
• Navigate templates by
category (e.g., business,
store, creative, community ,
and blog)
Editing a
Temaplate
• “Edit” will enable to Wix
Editor which will enable the
use of various tools for web
development
Using Wix Editor
The following are a few tips in using Wix Editor
Add Elements
• Elements are the most
important part of your site.
They make up your content,
and include text, buttons,
forms, images etc.
• “Add Elements” The
elements are split up into
categories in the Add panel to
make it easy to find what we
are looking for.
Update Texts
• Rewrite and edit text
in template by
clicking it
• “Edit Text” enables
to change size, face,
and color and
configuring “Text
Settings” window
Customize
Background
• “Background”
enables change
background
depending on the
needs
Add Section
• Sections are an easy way to
organize and display content
on your site
• “Add Sections” Add a section
to your site to begin structuring
pages and their content
Add Pages
• Website Information
must be complete
and organize to be
able to persuade the
target audience
• “Pages & Menu”
enables to organize
website by adding
webpages
depending on the
need of the user
Site Design
• From here you can
customize the overall
design of your site.
• There are 4 settings
you can adjust from this
panel - color theme,
text theme, page
background and page
transitions. Select a
question to learn more
about each setting.
Add Apps
• Website interactivity
increases and improves user
experience, such as adding
applications like interactive
quizzes, chat, comments, and
many more
• “Add Apps” enables to add
and explore new apps
Add Multimedia
• The use of multimedia in
website enhances user
experience and supports the
message we wanted to present
to our viewers
• Multimedia is a combination of
text, image, video, audio, and
graphics
• “Add Media” enables to add
media from the computer,
social media account, or
search media from the internet
by entering key word in search
box
Make it Look
Good on Mobile
• Many people today use mobile
phones instead of a desktop
computer or laptop to view
website
• Choose whether to enable or
disable the mobile-friendly
view of your site.
• Wix editor automatically
optimizes website for mobile
viewing which ensures best
experience for the visitors
Adding
Collaborators
• Invite teammates or other
external collaborators to
work with you on a site directly
from the Studio Editor.
• Assign a role based on each
person's area of expertise or
create roles with the
permissions of your choice.
Adding
Collaborators
• The roles you give determine
the permissions inside the
Editor.
Accepting an
invitation to
collaborate
• When a Wix user invites you to
collaborate on their site, an
invitation is sent to your email
address (You can accept the
invitation by clicking on the link in
the email).
• Your invitation link expires 30
days after it's sent. If you can’t
find your email invite, check your
junk or spam folder.
• If your invite has expired, ask the
site owner to resend your invite.
Publishing your
Website
• Manage your site from within
the Editor to keep it updated,
and to keep any new changes
that you've made. You can
save, preview, and publish
your site from the Editor at any
time.
• Once published, it already be
viewed by the public using the
URL, or the website address.
• The default domain for the free
users is
<username>.wixsite.com
Facebook Page
• Create a Facebook Page for free
• Free tools such as Events and
Appointments
• Monitor performance of the page
and behavior of the audience using
insight feature
• Create a Facebook Page by having
an account in Facebook that will
serve as the administrator of the
page
Spark Video
• Improve website and pages by
creating impactful video stories and
motion graphics using Spark Video
• A free mobile and web-based
application form Adobe Systems
• Trim videos, resize it across various
social media platforms, add transition
effects, and insert music
• Select from a collection of video
templates
TAKE NOTE!

Book Activity: Answer book activity page 130 (Size Up) for 5
points

Quiz in Module 7: Prepare for a module quiz (15-20 items)

Resources
Textbooks
● Sagun, M. A., & Ricaña, M. A. (2023 ). Essentials of Empowerment Technologies. Makati City: DIWA Learning Systems Inc.
● Sagun, M. A., Bandala, A. A., & Ricaña, M. A. (2019). Empowerment Technologies (Second ed.). Makati City : DIWA Learning Systesm Inc.
.
Applications
● Wix.com
Vectors
● Grid design Disproportionate Illustrations
● Asset selection Disproportionate Illustrations
● Responsive Disproportionate Illustrations
● Website designer Disproportionate Illustrations

Photos
● Man working at desk top view
● Google.com

Icons
● Icon Pack: Editorial Design | Lineal
 Thanks! Any questions?
[email protected]
+91 620 421 838
yourwebsite.com

CREDITS: This presentation template was created by Slidesgo, and

includes icons by Flaticon, and infographics & images by Freepik

Please keep this slide for attribution