Scribd
Upload
18 views45 pages

Principles and Elements of Web Design

EMPOWERMENT TECHNOLOGY

Uploaded by

Jumedeluna05yahoo.com Jumelynjumelyn199411
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views45 pages

Principles and Elements of Web Design

EMPOWERMENT TECHNOLOGY

Uploaded by

Jumedeluna05yahoo.com Jumelynjumelyn199411
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

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

You might also like