WEB

DESIGN
PRINCIPLE
S AND
This Photo by Unknown Author is licensed under CC BY-NC ELEMENTS

SHEILA MARIE
MANUEL
This Photo by Unknown Author is licensed under CC BY-SA-NC
 WEB
DESIGN • Web design principles are general
PRINCIPLE rules for the design of website
that include basic guidelines for
S the design of layouts and
interaction design.

• It will also help you on how your

website will work based on the
design you put into it.

Presentation title 20XX 2

 • The starting point of building a website is to have a
PURPO very clear purpose.

SE • This could be anything from providing information,

selling products to entertainment.

• Having a simple clear intention on your website

may accommodate and meet the user expectation
with what you have to offer.

Presentation title 20XX 3

 • Over-designed website may not work and may lead
SIMPLICI to distraction from the main purpose of your website.
• Having design features that do not serve the
TY purpose may be frustrating to the loading time of
your website.
• Keep your design as simple as possible so that the
users can feel it easy-to-use and can find what they
are looking.

Presentation title 20XX 4

 • Crowded and over-designed web design
LOAD can affect the loading time of your
TIME website.
• This may result to lose your visitors even
if every aspect of your website has a clear
purpose.
• To improve the speed 10 and performance
of your website you need to simplify your
design to optimize its loading time.

Presentation title 20XX 5

 • To establish better communication with the users,
COMMUNICATIO
you must formulate straight forward and easy-to
N digest information.
• This will establish connection with the user to spend
more time on your website.
• Organizing information by making good use of
headlines and sub-headlines, illustration, and using
bullet points is a clear and consistent ways of
communication to convey information to the users.

Presentation title 20XX 6

 • The best way to design an effective website is to make
RESPONSI it mobile-friendly on which the design of your website
can shrink or expands as per the dimension of the
VE screen of the device.
• Today, with the growing use of smartphones and tablets
to browse the web, designing a responsive and
adoptive website is a must.
• Making your website available across multiple devices
will attract more users

Presentation title 20XX 7

 WEB • Element of web design is the overall
appearance of your website.
DESIGN
ELEMENTS • It is the convergence of all visual
elements that contribute for a
complete user experience based on its
content, usability and other aspect of
the website.

Presentation title 20XX 8

CONTEN • Content is considered as the backbone of your website
because this is the main reasons people seeking your
T website at the first place.
• Using video, animation, relevant news, up-to-date
information and high-resolution imagery provide a
great deal for your website to be engaging, effective
and popular.

Presentation title 20XX 9

 • Usability anticipates what the users may think
USABILIT and help them fulfill their needs with as little
effort as possible.
Y
• Your website must be easily to navigate,
intuitive, accessible and user-friendly using
navigation buttons.
• This will also be able to access any page they
need without having to view the whole site.

Presentation title 20XX 10

 • Aesthetics includes factors such as balance,
AESTHET movement, pattern, scale, shape and visual
IC weight.
• This factor, if done properly, will visually
contributes the credibility of your design.
Having a visually impressive yet simple
website across all devices will reflect on
what quality you have on your website
design.

Presentation title 20XX 11

 • The success of your website is based on the volume of
VISIBILIT user engagement you have.
Y • Even if you had the most aesthetically pleasing and
user- friendly website on the web, it would still be
unsuccessful unless it could be found.
• This element of web design is vital, and it requires to
formulate a plan to market your website using search
engines optimizer, social media and email marketing.
• It’s important that you understand how to be found,
what platforms to target and how to utilize your
content.

Presentation title 20XX 12

INTERACTI • Adding comment boxes and opinion polls
ON in the design of your website can help
you to improve the functionality of it.
• This will allow you to engage with the
users, hold their attention, direct them
and finally encourage them to contact
you.

Presentation title 20XX 13

 ANATOMY
OF A
WEBSITE

Presentation title 20XX 14

HEADER
• Header is
the top of
the page
that usually
contains the
logo and
navigation
option on
your
website.
Presentation title 20XX 15
LOGO
• Logo is the
graphic
symbol of
your brand
that can
be easily
identify by
the users.

Presentation title 20XX 16

 NAVIGATION
• Navigation
help the user
explore your
website
through the
set of links
that are
present in
every pages
of your
website.
Presentation title 20XX 17
 HEADLINE
• Headline is a
short and clear
description of
your website
that helps
visitors
understand
the site’s
content,
products and
services.

Presentation title 20XX 18

 BANNER/
SLIDER

• Banner is a
large image
placed below
the header
that is meant
to grab
attention of
the users.

Presentation title 20XX 19

CONTENT Content is the images, text, graphics, videos
and other media that make up a website. As
we discuss earlier, this is what the users are
coming to the website in the first place. That’s
why you need to formulate an informative,
easy to read, and concise information in
designing a website.

This Photo by Unknown Author is licensed under CC BY-SA-NC

Presentation title 20XX 20

CONTACT
FORM

Contact Form is
a simple way to
interact with the
users directly
through your
sites. This allow
the user to
comment or
give any
suggestion to
your website.
Presentation title 20XX 21
 Footer is located at the bottom part of the
FOOTER
website. Similar to the header, the footer
stays on every page. This part typically
consists copyright information, social media
links, privacy policies and contact
information.

Presentation title 20XX 22

 THANK YOU
Presentation title 20XX 23