Principles and Elements of Web Design
How will you
effectively
communicate
your ideas
through web
design?
2
What do you think makes
a good or bad web
design?
3
Activity
In this task, you are to checkout two examples of websites
below. Work with a partner in navigating and observing each
website's appearance, then answer the following guide
questions.
Website Links:
● https://www.sphere.bc.ca/test/sruniverse.html
● https://fueled.com/
4
Questions
1. Compare the visual appearance of the two
websites. What are your observations?
5
Questions
2. In your opinion, how can you say that a
website has a good design?
6
Questions
3. Did both websites effectively convey their
intended information to you as an
audience? Why?
7
What is Web Design?
Web design is the
process of planning and
creating websites that
are published
and accessed on the
Internet.
88
Webpage
A single document
that contains any
information.
99
Website
A collection of
web pages
combined
together to be
published on the
Internet.
10
10
Importance of
Web Design
● Lets any person or
organization to convey their
content to their target
audiences.
● Provides a good experience
to the creator and
audiences.
● Creates an aesthetically
pleasing website.
11
11
Types of Web
Design
Web design has two
classifications that
depend on the
website's style and
its viewability
across any device.
12
12
Adaptive Web Design
Displays a specific version of a website that is viewed on different screen
sizes either on desktop or mobile device.
13
13
Responsive Web Design
Displays a customized version of a website that automatically adjusts the
size when viewed on any device.
14
14
Which of these web designs do you
think will help in easily communicating
with your audience?
15
What are the Principles
of Web Design?
These are numerous
factors to consider or
guidelines to follow which
will help in creating a
aesthetically pleasing and
user-friendly website.
16
16
Purpose
Before planning to
create a website,
always consider its
goals and its target
audience.
17
17
Simplicity
It defines the
clean and fresh
design of your
website that
makes it visually
appealing.
18
18
Intuitive
Navigation
It lets the
audience
quickly
navigate and
find what they
are looking for
on a website.
19
19
F-Shaped
Pattern
It helps the
audience to
quickly read or
scan the
contents of a
website.
20
20
Visual
Hierarchy
It describes the
arrangement of
the elements in
order according to
its importance.
21
21
Grid-Based
Layout
It helps users to
arrange the
elements on
every web page
in a block-shaped
container.
22
22
Loading Time
The design should
be light and
images are
optimized so that
the website loads
quickly.
23
23
Mobile-Friendly
A website with a
responsive design
will make the
website adjust to
the screen and can
be viewable any
device.
24
24
Have you observed these principles
present in the websites you have
accessed before?
25
What are the Elements
of Web Design?
These are components
which plays an essential
role in making a
aesthetically pleasing and
user-friendly website.
26
26
Content
One of the most
crucial elements
that will help make
the website
informative,
interesting and
popular to the
users is the
content..
27
27
Typography
It describes the way
a text is properly
designed, organized,
and presented on a
website.
28
28
Space
It is an element
used for dividing or
separating
different contents
of the website.
29
29
Layout
This defines how
the graphics,
texts, and other
elements are
arranged and
placed on the
web page.
30
30
Color
This is an element
used to express
meaningful
contents and catch
the attention of the
audience.
31
31
Graphics
Any graphic
representation such
as clipart, icons,
logos, infographics,
and images to
quickly represent an
idea or feeling to
the audience.
32
32
Videos
It is often used as a
background and
added in
slideshows or on
the website.
33
33
Animation
This is an effect seen
on various
interactivity, such as
clicking or hovering
different buttons,
images, or forms.
34
34
Navigation
This refers to
the set of
buttons that let
users to freely
navigate across
the web pages
of the website.
35
35
User
Interaction
It defines the
different
interactivity of
websites such as
scrolling, clicking,
or typing.
36
36
Learning Activity 1
● Listed on the next slide are two
examples of websites you will
visit.
● As you navigate through these
websites, identify the web design
elements present on each, and
evaluate whether the usage of
the element is good or bad. Write
your answers in the table.
37
Learning Activity 1
Website :
● http://www.gatesnfences.com/
● https://relishmama.com.au/
Name of the Elements Evaluation
Website Present
38
Learning Activity 2
Using the same websites you
have evaluated in Activity 1,
classify them as either good or
bad usage of web design
elements, then name and
explain five principles of
design that are observed or
not observed.
39
Learning Activity 2
Website Web Design Observations
(Good/Bad)
40
Answer the following
comprehensively:
1. What are the two types of
web design?
2. Name and explain three
elements of web design.
41
Answer the question in
your own words:
If you are to select the three
most essential principles of
web design? What would those
be and why?
42
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. 43
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.
44
The web design principles include purpose, simplicity,
intuitive navigation f-shaped pattern, visual
hierarchy, grid-based layout, loading time and
mobile-friendly.
The web design elements include content, typography,
space, layout, colour, graphics, videos, animation
and navigation.
45
