LESSON 1: MULTIMEDIA AND WEB 2.0
Media
-various outlets or tools that deliver useful
information and content
-advancement of technology: transformed
media accessibility and faster information
gathering
Multimedia
-”multi”:many; “media”: medium to present
info
-content composed of various elements:
animations, graphics, illustrations, images,
music, text, and video
-delivers information through an electronic
device
Uses of Multimedia
-Advertising: promote products & services
by uploading photos/videos on social media
-Business: creating presentations for
proposals; videos=effective way to train
employees
-Engineering: engineers can interact with
their project in 3D and identify flaws before
execution
-Education: interactive & engaging teaching
with interactive games, presentations,
videos
-Entertainment: playing games, watching
movies
-Healthcare: medical imagery for
consultations and diagnosis; real-time and
remote monitoring of a patient’s condition
-Public Places: interactive art galleries &
museum, 5D cinema, kiosks
Advantages and Disadvantages
Advantages
Disadvantages
Interactive
Information overload
Rich contents
Time consuming
Numerous apps allow Some are not intuitive
you to easily create enough
one
Immersive
Expensive
experiences
Web 2.0
-second generation of the world wide web
-interact with users and websites containing
rich content not present in Web 1.0
-enables user to create & share multimedia
content with other users in various platforms
Types of Web 2.0 Tools
1.Text Based Tools
-Uses: join discussion groups, collaborate
on documents and notes, post, comment,
message
-Platforms: Evernote, Google Docs, Quora,
Reddit, Twitter
2.Image Based Tools
-Uses: create, edit, share images;
collaborative whiteboards; mind maps or
word clouds
-Platforms: Flickr, Instagram, Miro,
Stormboard, Mindmeister
3.Audio Based Tools
-Uses: create & edit audio, and
publish/share it through a streaming
platform
-Platforms: Audacity Online, Spotify,
Soundcloud, Twistedwave
4.Video Based Tools
-Uses: create & edit video content, and
broadcast or share it through a streaming
platform
-Platforms: Animoto, Powtoon, Dailymotion,
Youtube, WeVideo
5.Multimodal Production Tools
-Uses: create & share interactive
presentations, digital bulletin boards for
ideas and to-do-list
-Platforms: Blendspace, Google Slides,
Prezi, Padlet, Trello
6.Website Creation Tools
-Uses: make blog/website, easy to use
interface and tools to create a website
-Platforms: Blogger, Webflow, Wix, Weebly,
Wordpress
7.Social Networking Service
-Uses: view & share, images, links, videos;
interact by reacting & commenting to a post
-Platforms: Facebook, LinkedIn, Pinterest,
Twitter, Snapchat
LESSON 2: MULTIMEDIA AND ITS
SOURCES
Elements of Multimedia
1.Text: fundamental element of multimedia;
made up of words/phrases to communicate
an idea
-consider the ff.: appropriate color, font,
size; alignment; length & readability
2.Image: 2D or 3D illustrations, powerful
way to represent an idea & information
-examples: charts, diagrams, drawings,
graphs, maps, photographs
-graphics: graphic image, image made
using an app or web platform; two kinds:
-raster(bitmap) image: uses pixels
-vector image: composed of lines
defined by mathematical formula,
retained clarity when zoomed
3.Audio: sounds recorded through digital or
analog; voice recordings, music, sound
effects; enhances multimedia content
through bgm, sfx, v.o; two types:
-analog audio: recorded using a
microphone and stored into a tape or
vinyl
4.Animation: sequence of images that gives
an illusion of movement or motion
5.Video: recording and processing of
moving pictures and sounds
2.Rich User Experience: view websites
through rich contents; enhances user
experience & promotes interactivity.
3.Folksonomy: classify links, images,
videos, using hashtags
4.Software as a Service (SaaS): utilize apps
without installing, free or subscription
Platforms: Multimedia Sources
1.Music-on-demand (MoD): allows various
platforms to stream digital music online
2.Video-on-demand (VoD): allows various
platforms to stream videos online
3.Webcast: platforms that broadcast a live
video over the internet
4.Online Courseware: different interactive
activities, presentations, tutorials, tests
5.Online Games: games in the internet
through a computer, console, and
smartphones
6.Online Shopping Platforms: attracts
customer by animations, images, and
videos of products
LESSON 3: MULTIMEDIA AND
INTERACTIVITY
Linear Multimedia
-passive multimedia
-deliver information sequentially
-user can view but not control or interact
with the multimedia
-examples: movie presentation, books,
magazines, encyclopedia
Nonlinear Multimedia
-interactive multimedia
-consequently; requires user participation
-user can access and control the multimedia
(at but not with it)
-examples: interactive websites, computer
and mobile apps, digital presentations,
games, simulations
World Wide Web
-technology that made information
accessible to everyone
-collection of webpages
Tim Berners-Lee
-1989, developed the first generation of the
web
-developed first hyperlink, web browser,
server
Web 3.0
-third and current generation of the web
-term invented by John Markoff, 2006
-lets a computer understand kinds of
information to help find and recommend
useful info to users
Features of Web 3.0
1.Semantic Web: interpret different kinds of
info
2.Artificial Intelligence: intelligent web, tools:
-digital assistants: voice recognition
apps
-chatbot
-navigation apps
3.Connectivity: connecting through various
devices
4.3D Graphics: more immersive and
interactive experience on online games,
e-commerce, etc.
5.Ubiquity: accessible using any kind of
device
LESSON 4: ONLINE GAMES, TESTS,
ETC.
Multimedia Platforms
-provides great ways of educating,
entertaining, and satisfying user experience
Examples of Multimedia Platforms
1.Online Games: apps that allows user to
play over the internet, genres:
-adventure games: fictional setting,
various missions or levels
-augmented reality (ar) games:
computer generated imagery
-massive multiplayer online (mmo): play
with players around the world,
multiplayer online battle arena (moba)
-puzzle games: brain teaser activities
-educational games: interactive,learning
new knowledge or skill
-virtual reality (vr) games: vr headsets or
sensor-equipped gloves
Web 2.0
-term invented by Darcy Dinucci, 1999
-interactive features
Features of Web 2.0
1.User Participation: social web, lets user
generate content and interact, examples:
-blog: post, share experiences (Blogger,
Weebly, Wordpress, Medium, Typepad)
-social bookmarking site: organize,
save, share links (Pinterest, Digg,
Reddit, Pocket, Twitter)
2.Online Tests: create and take quizzes
over the internet (ClassMarker, Raptivity,
FlexiQuiz, ProProfs), types:
-interactive quizzes: in the form of a
game
-psychological tests: eq, iq, career, or
personality tests
Advocacy against Environmental IssuesClimate change, pollution, and waste
production are some of the environmental
concerns experienced globally making it
one of the pressing issues the humankind
has today.
3.Podcasts: streams audio content similar to
a radio show that tells a particular story,
issue, or trend (Buzzsprout, Podbean,
Spotify, Soundcloud)
4.Vodcasts: streams video content online
from vlogs, webinars, interview, event,
presentations (Dailymotion, Veoh, Youtube,
WeVideo)
Advocacy against Social StratificationClass and caste systems affected by
socioeconomic factors have caused life
difficulty to those who are on the lowest
rank.
Advocacy against Gender Inequality-A
campaign that acknowledges all gender
preferences to live equally and receive
equivalent opportunities and Resources.
Advocacy on Mental Health AwarenessPromotes realizations on the well-being of
individuals and overcome the stigma on
mental illnesses.
User Experience
-provide positive and negative feedback
when using products or systems such as
hardware, software, apps, and websites to
determine the
user's overall satisfaction
-measured by factors of usability
Usability Factors
-intuitive design
-ease of learning
-efficiency
-subjective satisfaction
LESSON 5:DEFINING ADVOCACY
Advocacy
-refers to a public activity by an individual or
group that promotes and seeks to address a
societal matter.
- happens when there is an initiative to
pursue the awareness of fellowmen.
Developmental Communication
-is an approach that includes the exchange
of information processes which promotes
social development.
-encourages members of the community to
recognize, inform, and suggest matters
involving social issues.
-an advocacy becomes effective in
addressing social matters when the
developmental communication
approach is strictly observed.
Recognized Universal Advocacies
-There are social issues being addressed
globally for the common good of the
majority.
Advocacy against Poverty- Poverty is one
of the major problems in the society
making it the root of other global issues.
Advocacy against Corruption-A campaign
that calls the transparency on the decisions
and actions of the Government.
Advocacy against Violence-Addresses
brutality against women, children, animals,
and even cyberharassment.
ICT as an Advocacy and Communication
Platform
Organize- ICT helps systemize and compile
information and data related to advocacy.
Educate- ICT delivers academic contents
provided by the advocates about their
chosen societal matter.
Research- ICT aids gathering and analysis
of survey data that may be helpful for the
campaign.
Inform- ICT paves the way for awareness
across different generations, nationalities,
and places.
Encourage- ICT stimulates and motivates
people because of the ease that technology
can offer in call-to-actions activities.
Train- ICT supplies instructional documents
with the various sources available for the
Advocacy.
Lobby- ICT makes it possible for ordinary
citizens’ messages to reach the authorities
of the government to persuade for a certain
thought.
Action- ICT pushes people to make a move
for the common good through its networks
and users.
ICT Advocacy Communication Tools
Blog Sites- allows advocates to publish
detailed contents about their agendas and
purpose
Video Hosting Platforms- used to
broadcast campaigns digitally
Web Conferencing Sites- allows advocacy
groups to tackle their plans remotely
Printed Media- enables advocacy groups to
carry out message to people on-hand
Modern Media- various forms of ICT
providing awareness to the citizens
LESSON 5.1: THE POWER OF SOCIAL
MEDIA
Social Media
- refers to interactive websites which allows
the creation of contents and building of
virtual network.
The Power of Social Media in the Society
-provides an avenue for diverse
purposes enabling interrelation around the
globe. It has also served meaningful roles in
the society.
EDSA Revolution (People Power
Revolution) Civil resistance against the
dictatorship of former President Marcos and
restoration of democracy. (Radio Veritas)
EDSA II (2001 EDSA Revolution) A
political protest against the administration of
former President Estrada because of
corruption allegations. (Text brigade)
Million People March A protest for the total
abolition of Pork Barrel fund over the PDAF
scam pointing to Janet Lim- Napoles.
(Social media)
Typhoon Yolanda A super typhoon that
caused extensive damage and high death
toll. (Yolanda People Finder)
HISTORY
-Records and keeps the memories of
individuals and the society.
COVID-19 Crisis
A global pandemic with the spread of
infectious disease. (Social media)
CONNECTIVITY
Binds the gaps and differences of nations
and develops ways to establish union.
Lesson 6 Digital Citizenship in the
Philippines
-Digital Citizen refers to a person who
utilize technology and apply proper ethics.
ENTERTAINMENT
Provides leisure and amusement that
arouses the interests and excitement of
people.
PRODUCTIVITY
Offers tools that simplifies and supports a
wide range of tasks in different fields.
INFLUENCE
Emanates control and affects people lives
through its contents and functions.
EDUCATION
Facilitates learning through a selection of
resources for different areas.
INSPIRATION
Gives motivations and insights through its
stories and people.
EXPRESSION
Allows demonstration of thoughts and
emotions through its platforms.
Video type to integrate subtite
- .mkv
A collection of webpages
- The web
Online tests are also known as
- Online assessment
IQ TESTS
- Psychological tests
Value of ICT and Social Media in
Philippine History
-ICT had played a role in different
historical events and the daily
lives of the Filipinos.
Nine Elements of Digital Citizenship:
Access
Pertains to the availability of electronic tools
and make equal use of online resources.
Commerce
Refers to digital selling and buying products
and services and develop effective trading
skills.
Communication
Exhibits the appropriate way of
self-expression and providing feedback and
authentic information.
Literacy
Demonstrates learning the use of
technology and application of skills.
Etiquette
Manifest proper online behavior and
positively handle challenging contents and
comments.
Law
Abiding legal rules and restrictions in the
online community.
Rights and Responsibilities
Obtain the liberty and accountability with
one’s actions across online platforms.
Health and Wellness
Maintaining well-being physically and
psychologically to avoid harm and danger.
Security
Precautions on system malwares and
viruses and cyber crimes such as frauds
and scams.
9Ps
Focuses on the proactive and experiential
knowledge that an individual should
remember as a digital citizen.
Passwords: account security.
Private Information: legal identity
protection.
Personal Information: network-sharing
selection.
Photographs: AI-locating features.
Property: respecting intellectual property.
Permission: license attribution.
Protection: avoidance of cyber threats.
Professionalism: exhibiting netiquette.
Personal Brand: decent online image
Lesson 7 Creating a Page as a Medium
for Promoting an Advocacy
The significance of promoting an advocacy
is the awareness that it brings to the people
and the impact of the movement that it may
cause to a societal matter.
Aspects to Sustain Advocacy:
Identify Cause or Issue
Determine a significant conflict affecting a
community or a group of people.
Determine Goals
Decide on a feasible objective that can
benefit people for the common good.
Recognize the Audience
Know and understand your potential
viewers and supporters.
Build a Network
Establish relationship with people that play
a vital role on your advocacy.
Take Action
Make careful steps and activity in fulfilling
goals.
Consistency of Data
Produce and maintain reliable and valid
information through systemize processes.
Layout and Design
Create appealing and engaging online
platform with useful contents.
Lesson 8 Conceptualizing an ICT Project
The simplified ICT project processes are
Planning
This is where the group will set up
meetings, assign tasks, and talk about
essential elements needed for the project
such as web hosting, website design,
applications, and funding.
Development
This is where the production of materials
like articles, pictures, videos, and others
alike takes place.
Release and promotion
This is where the promotion of the website
and its contents happens that will help
spread out the message.
Maintenance
This is where the group will analyze and
improve their website and contents.
Conceptualizing the idea and other
important details of the project is the first
process in creating an ICT project for social
change.
It should fit the SMART criteria which
means
Specific
The objectives and description of the project
should be set to have a proper idea of the
result.
Measurable
The project progress cost, progress, and
quality should be measurable using some
standards such as deadlines and budgets.
Attainable
The people doing the project should meet
all the deadlines set and do the task given
to them.
Relevant
The project should be able to address the
problem raised.
Time-oriented
The project should have a deadline on when
to deploy it or there are deadlines for each
tasks to meet a specific part of the project.
Lesson 9 Creating a Document Template
A concept paper is a document that aims
to convince panels and experts which are
potential sponsors to help the project
become a reality.
A draft of a concept paper usually discusses
the goal, scope, process, deliverables,
resources, limitations and dependencies,
deadline, and stakeholders.
After writing, editing and finalizing the
draft, the group can now proceed in
creating the concept paper.
The five elements of a concept paper are
Introduction- This includes a brief overview
of the project and introduction about the
group.
Purpose- This includes the reasons why
the group has chosen the project and other
points to show the worthiness of the project.
Description- This includes the plan of how
to execute and produce the project.
Support- This includes the resources
needed for the project such as manpower,
number of materials and funds.
Contact Information- This includes the
contact detail of the group.
Lesson 10 Planning an ICT Project
ICT provides better communication between
involved people on a project. It is also
responsible for giving tools all throughout in
the project process.
Planning is the first stage in creating an
ICT project.
also used for other types of work and not
limited to projects only.
Task Management Software.
A task management software can assign
tasks that are not necessarily part of the
larger picture of the project therefore, it is
usually used for small groups.
Lesson 12 Researching and Audience
Profiling for ICT Project
Tasks in planning include researching,
conducting meetings, assigning tasks,
setting up deadlines, finding a web host,
creating a sitemap, listing needed
applications and budgeting.
Audience Profiling is the process of
identifying the target audience’s identity in
connection with a research project or a
business proposal.
Types of Web Hosting Services
Shared Hosting
The website will be hosted on the
same server as multiple other
Websites.
There are four components that audience
profiling must have: demographic
profiling, identifying prior Knowledge,
probing questions focusing on the target
topic, and measurable choices.
Virtual Private Server
Hosting The website will be hosted within its
own space on the server while still sharing a
physical server with the others.
Dedicated Server Hosting
The website will be hosted on an exclusively
rented server.
Principles of Audience profiling were also
introduced in this lesson. They are
Segmentation, Messaging, Engaging,
and Measurement.
Cloud Hosting
The website will be hosted through cloud
computing services.
There are lots of benefits that audience
profiling will give to us. Selected among
them are: Gain Deeper Understanding,
Discover Public’s Interests, Forecast
Future Needs, and You are in the Right
Track.
Managed Hosting
The website will be hosted by a host
system.
Lesson 13 Audience Profiling by
Creating Basic Forms Using Surveying
Application
Colocation
The website will be hosted in a colocation
center.
-Survey refers to the process of seeking
ideas and opinions towards a specific topic.
-There are lots of surveying applications
available on the internet and some of these
are introduced in this lesson. They are as
follows: Google Form, ProProfs, Survey
Monkey, and SmartSurvey.
Lesson 11 Managing Tasks Using Online
Project Management Tool
Managing and organizing tasks helps the
group become more productive and
positively impacts the project.
Project management tools are online
systems made for working and collaborating
specifically on the project. These are also
sometimes referred to as project
management software that is available
online.
Some softwares associated with project
management softwares are:
Collaboration Software
A collaboration software includes a wide
range of services for communicating which
a lot project management tools does not
have.
Workflow Software
A workflow software is more flexible than
project management software since it is
-Sectioning is very important in audience
profiling which is mentioned as follows:
Overview, Demographics Information,
Psychographic Section, Familiarization
Section, Main Questions, and
Recommendation and Closing Section.
Creating Basic Forms
-Main Questions
-Recommendation Section
Overview- It contains the intention of the
proponents in conducting audience profiling.
Demographic Information- Demographic
data is critical information to collect as it will
be the basis of the surveyor if the project is
suitable for a specific race, age, gender, etc.
Psychographics Information- It is the
audience's behavior towards a specific topic
emphasized in the project.
Familiarization Questions- It aims to find
out the audience's prior knowledge about
your topic.
Main Survey Questions- The type of items
often used in this section are questions
seeking agreements or arguments,
opinions, and feedback of the audience.
Recommendation Section- It is used to
know the suggestions given by your
audience to add more ideas to improve your
project.
Lesson 14 Audience Profiling by
Creating Advanced Forms Using
Surveying Application
Creating advanced forms have been made
easy because of advanced features offered
by most of the surveying applications just
like google form.
Advanced features offered by some of the
surveying applications are as follows but not
limited to: response validation, branching,
adding images and videos as part of the
question, adding images as choices, edit
responses, show progress, and add
collaborators.
Similarities and differences of creating
basic and advanced forms are also given
emphasis.
Lesson 15 Audience Profiling by
Collating Data Using Surveying
Application
Collating data refers to a process of
collecting and segregating data according to
their proper places so that it will become
organized.
One of the ways of collating data is by
creating a summary list of answers
manually. Another way of collating data is
by purchasing a plan with a surveying
application.
It is unnecessary to purchase a plan with a
surveying application since you can export
the summary of responses in a .csv file or
.xls file.
Stated in this lesson are the steps in
collating data by exporting the summary of
responses. It includes exporting responses
into CSV or XLS file, highlighting column to
add chart and graph, and organizing
categories.
Collating data is as essential as your
concept as it empowers to make informed
decisions, backup arguments, time saver,
and improves strategy.
Lesson 16 Designing ICT Project
Web Design refers to the appearance or
visual elements that are visible on a
website.
Web Development refers to building the
website and its functionality with the use of
programming languages such as CSS or
Javascript.
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 is essential in delivering information
through the use of characters and symbols.
-Graphics refers to illustrations, clipart,
icons, infographics, organizers, still or
dynamic images.
-Video pertains to motion visuals in
animations, live, or recorded image frames
usually accompanied by audio.
-Audio involves the use of sound effects,
podcasts, narrations, or dialogues.
Interactives consists of dynamic
components such as maps, slides, polls,
active links, and other embedded features.
The Principles of Effective Web Design are
Purpose justifies the intended plan of the
website.
Communication properly conveys the
message of the website.
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.
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.
Load Time ensures that the contents of the
website will load efficiently.
Mobile Friendly allows the website to be
accessible on all devices.
Some Tools for Creating Rich Multimedia
are
Pixlr is a photo editor where you can
enhance your image with filters, effects, and
other modifications.
Giphy is an online tool where you can
create, download, and upload your GIFs.
Piktochart is an infographic tool which
allows the user to create presentations and
graphics.
Timeline JS is a timeline creation tool in
which your data are uploaded as Excel
format.
Riddle is an online tool for creating polls,
surveys, and quizzes.
Pexels Video is an online platform that lets
users find and upload free stock videos to
their website.
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.
The Elements of SEO Copywriting are
Site Speed is the appropriate loading time
of the website that keeps the audience
engaged on your platform.
Headline is the first text commonly seen on
a website. It should be appropriately
formulated to be able to entice the audience
to read further.
Meta Description or Snippets include the
key points or keywords that the website has
to offer.
Content provides useful and relevant
information on a specific topic to the users.
Keyword Frequency refers to the ample
number of keywords available on your
content.
Page Links shows web pages which
contain relevant and reliable content.
The Qualities of a Good Copywriting are:
Changes perspective- The content should
trigger thoughts and make the viewer
hooked on the piece he or she is reading.
Finds connection- The content can be
linked to a real -life experience or its
significance to the readers' lives.
Stunning lead- The website's content
should capture the attention of the
audiences that they need to know more and
remain a little longer on the site.
Born out of listening- Understanding the
audience's needs and wants will
significantly affect the success of a website.
Avoids jargons and hyperbole- Words
should be carefully thought of to convey
proper meaning to the audience.
Cuts out excess- Clear and concise
sentences and paragraphs help clarify the
content and make the tone more reliable.
Lesson 18 Developing Prototype Using
Online Prototyping Tool (Basic
Techniques)
Online Prototyping Tools are sites that
enable the creation of web prototypes by
the use of pre-built templates and elements.
Lesson 17 Copywriting Using Search
Engine Optimization
SEO Copywriting aims to improve ranking
and visibility of the website through using
well-planned keywords and techniques
to increase traffic.
Copywriting is the process and strategy of
writing content that aims to maximize the
promotion and engagement of the website.
SEO Copywriting undergoes the processes
of the three SEO pillars:
● Technology is the website's technical
coded language.
● Relevance refers to the website’s text
content.
● Authority defines the validity and
reliability of the sources.
The Two Levels of Fidelity are
Low Fidelity- A static prototype that shows
how components will be placed on a screen.
High Fidelity- An interactive prototype
wherein the usability of the website are
created and tested along with the visual
features.
Some Online Prototyping Tools are
MockFlow
is a cloud-based platform that enables web
designers to collaborate in creating a
wireframe prototype.
Draftium
is a free online tool with pre-built templates
and quick creation or customization of the
prototype.
Adobe XD
is an online vector-based tool to create
prototypes for websites and apps.
InVision
is an online tool for creating and
collaborating interactive prototypes.
Lesson 19 Developing Prototype Using
Online Prototyping Tool (Advanced
Techniques)
Advanced Online Prototyping Tool lets
the user create an interactive web
prototype.
Moqups is a free online tool to create
dynamic web prototypes with the help of
built-in templates.
Other Online Prototyping Tools are Marvel
and Mockplus.
Lesson 20 Principles and Elements of
Web Design
Web design is the process of planning and
creating visually pleasing and easy to use
websites.
Web Design has two classifications:
adaptive and responsive web design.
Adaptive web design is a specific website
version viewable on particular screen sizes
while Responsive web design
automatically adjusts the website so that it
can be browsed on or customized to the
screen of any devices.
Making use of the different elements of
web design that are guided by the
principles of web design will help you
convey your idea to your target
audience.
The web design principles include:
Purpose- Before planning to create a
website, always consider its goals and its
target audience.
Simplicity- It defines the clean and fresh
design of your website that makes it visually
appealing.
Intuitive Navigation- It lets the audience
quickly navigate and find what they are
looking for on a website.
F-shaped pattern- It helps the audience to
quickly read or scan the contents of a
website.
Visual hierarchy- It describes the
arrangement of the elements in order
according to its importance.
Grid-based layout- It helps users to
arrange the elements on every web page in
a block-shaped container.
Loading time- The design should be light
and images are optimized so that the
website loads quickly.
Mobile-friendly- A website with a
responsive design will make the website
adjust to the screen and can be viewable
any device.
Elements of Web Design- These are
components which plays an essential
role in making a aesthetically pleasing and
user-friendly website.
The web design elements include:
Content- One of the most crucial elements
that will help make the website informative,
interesting and popular to the users is the
content.
Typography- It describes the way a text is
properly designed, organized, and
presented on a website.
Space- It is an element used for dividing or
separating different contents of the website.
Layout- This defines how the graphics,
texts, and other elements are arranged and
placed on the web page.
Color- This is an element
used to express meaningful contents and
catch the attention of the audience.
Graphics- Any graphic representation such
as clipart, icons, logos,
infographics, and images to quickly
represent an idea or feeling to the audience.
Videos- It is often used as a
background and added in slideshows or on
the website.
Animation- This is an effect seen on
various interactivity, such as clicking or
hovering different buttons, images, or forms.
Navigation- This refers to the set of buttons
that let users to freely navigate across the
web pages of the website.
User Interaction- It defines the different
interactivity of websites such as scrolling,
clicking, or typing.
Lesson 21 Website Design Workflow
Web design workflow explains the various
steps in designing, building, and publishing
the website.
It involves the following steps:
Goal Setting- This phase will let the web
designer identify the goals and audiences of
the website.
Branding- Establishes the website’s identity
by coming up with a name, domain name,
logo, and colors that will represent the
website.
Website Structure-This phase will allow
web designers to visualize the layout of the
website by creating a sitemap.
Mockup- After visualizing the structure of
the website, This step will allow web
designers to represent the design for each
page of the website by creating a wireframe.
Design & Development- After setting the
objectives and creating a layout, it is now
the time to put all those ideas by making the
website either through coding or website
builder.
Testing- This phase will help web designers
to check or fix the errors that might affect
the functionality of the website
Launching- Publishing the website can be
done after thoroughly ensuring that every
part of the website has no errors.
Goal setting lets a person or a group
identify the aims and the target audience of
the website. This will also identify the
contents of the website by planning about
the essential pages and tools.
Branding involves building the website’s
identity by deciding on its domain name,
color scheme, and logo.
Website structure consists of the
visualization of the website’s layout with a
sitemap.
Mockup represents the design for each
web page of your website through
wireframing.
Design & development puts all the ideas
into action by creating the website either
through coding or using a website builder.
Testing checks all the basic functionalities
of the website.
Launching allows for the publishing of the
website once everything is finalized.
Being familiar with the structure of the
website will help the web designer to place
all the elements correctly.
The parts of the website includes:
Header- refers to the banner placed on the
top of the website. It includes the logo,
name, images, videos and user interface
elements.
Navigation bar- shows a list of buttons that
lets the audience check and access some
parts of the website.
Sidebar- is part of a website that displays
information which is not part of the page
content. It also contains social media posts,
advertisements and other related links.
Content- defines the main body of the
website. It contains various types of web
design elements such as the text, images,
videos, and others.
Footer- is found at the bottom part of the
website which allows the audience to view
copyright information and other useful links.
NAKAKRAZY NA AKO SORRY HAHA
AKO LANG TO