this might help you

1. WEB DESIGN
PRINCIPLES
PREPARED BY:
Kyle Rain Pondemira & Angelo Peter Nualla

2. According to Cleverism, “Web design is a concept
of planning, creating, and maintaining websites.”
It is the process of creatively designing and
constructing a website and updating it regularly to
incorporate changes.
Designing for web publication equates to
communication. Visuals on a web page are of
utmost importance since it is one of the ways how
you communicate with the viewer.
INTRODUCTION

3. Visual Hierarchy
1
Proportions
2
White Space and
Simple Design
5
Accessibility
6
PRINCIPLES
Hick’s Law
3
Visible Language
7
Fitt’s Law
4
8
Regular
Testing

4. VISUAL
HIERARCHY
01

5. VISUAL
HIERARCHY
This explains the order in which
human eye perceives what it sees.
This is a technique wherein, as the
developer, you have to distinguish the
importance of every part of your web
page.
Elements should be ranked according
to its importance and your objectives.
It can be shown through the use of
varying sizes and amount of content.

6. It's about creating a clear and logical
structure that helps users navigate and
understand the information presented.
EXAMPLES

7. PROPORTION
02

8. PROPORTION
You can make use of the golden ratio, a
magical number approximately equal to
1.1618 that makes all things proportioned so
as to make a design aesthetically pleasing.
There is also the Fibonacci sequence where
each term is defined as the sum of the two
previous terms. 0, 1, 1 , 2, 3, 5, 8, 13, 21,
and so on.
As the Designer, you should keep in my
mind the proper division of the contents of
your web page to avoid crowding the view

9. The meaning of PROPORTION is
harmonious relation of parts to each
other or to the whole : balance,
symmetry.
EXAMPLES

10. HICK’S LAW
03

11. HICKS’S LAW
This law can be considered as a
guideline for decision-making in a
viewer’s perspective
Hick’s law states that “with every
additional choice, the time required to
make a decision increases.” This law
does not only hold true for web design
but also in a number of other
situations and settings. This means
that we need to reduce the number of
choices in order to provide a better
user experience.

12. Hick’s Law describes the time it takes
for a person to make a decision as a
result of the possible choices:
increasing the number of choices will
increase the decision times
logarithmically.
EXAMPLES

13. FITT’S LAW
04

14. FITT’S LAW
According to this law, the time needed
to move to a target is dependent upon
the size of the target as well as the
distance to the target.
This means that the larger the object
or target and the shorter the distance,
the easier would it be to move it or
reach it.
However, this does not mean that the
bigger, the better but that usability
factor of a target runs as a curve and
not as a straight line.

15. Fitts's law says that the time to move
to a target depends on how big it is and
on how far away it is.
EXAMPLES

16. ACCESSIBILITY
05

17. ACCESSIBILITY
When a visitor enters the website, he
or she must be able to access each bit
of information in the easiest manner.
Typefaces must be readable to all and
is not too fancy for some to access or
understand.
Make your own color palette and
choose contrasting colors for the
background and written content so
that it can be easily read. Make sure
your images are of high-quality and
are suitable for your purpose, and
have alternative text for images for
those who are visually impaired

18. Web accessibility means
that websites, tools, and technologies
are designed and developed so that
people with disabilities can use them.
EXAMPLES

19. Web accessibility means
that websites, tools, and technologies
are designed and developed so that
people with disabilities can use them.
EXAMPLES

20. VISIBLE
LANGUAGE
06

21. VISIBLE
LANGUAGE
A web page design should
communicate with the users clearly
and in an engaging manner. The
following are principles for a
successful visual language:
• Organize
• Economize
• Communicate

22. A visual language in design is a set of
elements and principles used to create
and communicate a specific visual
message. This includes the use of
color, typography, imagery, and other
design elements to create a visual
language that conveys a specific
message or emotion.
EXAMPLES

23. A visual language in design is a set of
elements and principles used to create
and communicate a specific visual
message. This includes the use of
color, typography, imagery, and other
design elements to create a visual
language that conveys a specific
message or emotion.
EXAMPLES

24. WHITE SPACE
AND SIMPLE
DESIGN
07

25. WHITE SPACE AND SIMPLE
DESIGN
White space helps divide the web
page into several distinct parts or
areas that make it simpler for the
users to process information. The
following are some of the other
things that can be considered as
a part of a simple design:

26. Grid-based Layout
The content of this layout is divided into
columns, boxes, and different sections.
OTHER PARTS OF A SIMPLE
DESIGN
F-pattern design
Design a web page or website in a way that
complements the natural reading behavior of
the visitors like the “F-pattern.”
Conventional designs
Conventional or conservative designs still
work well as far as visitor response or
likeability is concerned. They add a hint of
trust, reliability as well as brand credibility.

27. Grid-based Layout
The content of this layout is divided into
columns, boxes, and different sections.

28. Design a web page or website in a
way that complements the natural
reading behavior of the visitors like the
“F-pattern.”
EXAMPLES

29. Conventional or conservative designs
still work well as far as visitor response
or likeability is concerned. They add a
hint of trust, reliability as well as brand
credibility.
EXAMPLES

30. REGULAR
TESTING
08

31. REGULAR
TESTING
Test Early and Test Often, or TETO, is
another web design principle that all
designers and website owners must
consider.
Conducting usability tests every now and
then provides important results and insights
into many kinds of problems and
complications related to a website layout or
aspects of design
Websites constantly need upgrades and
updates to maintain the visitor customer’s
interests and trends.

32. Testing should evaluate your site's
performance under different conditions
and scenarios. Stress testing places
your website's server under heavy
traffic loads to ensure that it can
maintain its performance when facing
sudden spikes in traffic.
EXAMPLES

33. Testing should evaluate your site's
performance under different conditions
and scenarios. Stress testing places
your website's server under heavy
traffic loads to ensure that it can
maintain its performance when facing
sudden spikes in traffic.
EXAMPLES

34. IDENTIFICATION
1. It is the process of creatively designing and
constructing a website and updating it
regularly to incorporate changes.
2. Elements should be ranked according to its
importance and your objectives.
3. This law can be considered as a guideline
for decision-making in a viewer’s
perspective.
4. This means that the larger the object or
target and the shorter the distance, the
easier would it be to move it or reach it.
5. A person must be able to access each bit of
information in the easiest manner.

35. IDENTIFICATION
6. A web page design should communicate with
the users clearly and in an engaging manner.
7. Conducting usability tests every now and
then provides important results and insights into
many kinds of problems.
8. The harmonious relation of parts to each other or
to the whole : balance, symmetry.
9. This helps divide the web page into several
distinct parts or areas that make it simpler for the
users to process information.
10. Give at least one other parts of a simple design.

36. IDENTIFICATION
1. WEB DESIGN
2. VISUAL HIERARCHY
3. HICK’S LAW
4. FITT’S LAW
5. ACCESSIBILITY
6. VISIBLE LANGUAGE
7. REGULAR TESTING
8. PROPORTION
9. WHITE SPACE

37. THANK YOU!
PREPARED BY:
Kyle Rain Pondemira & Angelo Peter Nualla