Web Design Principles

and Elements
Identify which principle of graphic and layout best describe the following
images bellow. Choose your answer inside the box located at the bottom
page then write your answer in a separate sheet of paper.
 Web Design Principles

•Web design principles are general rules for

the design of website that include basic
guidelines for the design of layouts and
interaction design.
 5 Basic Principles of a good web design

•Purpose
•Simplicity
•Load Time
•Communication
•Responsive
 5 Basic Principles of a good web design

•Purpose
The starting point of
building a website is to
have a very clear purpose.
 5 Basic Principles of a good web design

•Simplicity
Keep your design as simple
as possible so that the users
can feel it easy-to-use and
can find what they are
looking.
 5 Basic Principles of a good web design

•Load Time
To improve the speed and
performance of your
website you need to
simplify your design to
optimize its loading time.
 5 Basic Principles of a good web design

•Communication
To establish better
communication with the
users, you must formulate
straight forward and easy-
to digest information.
 5 Basic Principles of a good web design

•Responsive
Making your website
available across multiple
devices will attract more
user.
 Web Design Elements

•Element of web design is the overall

appearance of your website. 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.
 Web Design Elements
•Content
Content is considered as the backbone of
your website because this is the main
reasons people seeking your website at the
first place.
 Web Design Elements
•Usability
Usability anticipates what the users may
think and help them fulfill their needs with as
little effort as possible.
 Web Design Elements
•Aesthetic
Aesthetics includes factors such as balance,
movement, pattern, scale, shape and visual
weight.
 Web Design Elements
•Visibility
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.
 Web Design Elements
•Interaction
This will allow you to engage with the users,
hold their attention, direct them and finally
encourage them to contact you.
Anatomy of a Website
 Anatomy of a Website
• Header is the top of the page that usually contains the logo
and navigation option on your website.
• Logo is the graphic symbol of your brand that can be easily
identify by the users.
• Navigation help the user explore your website through the
set of links that are present in every pages of your website.
• Headline is a short and clear description of your website that
helps visitors understand the site’s content, products and
services.
• Banner (or Slider) is a large image placed below the header
that is meant to grab attention of the users.
 Anatomy of a Website
•Content is the images, text, graphics,
videos and other media that make up
a website.
•Contact Form is a simple way to
interact with the users directly
through your sites.
•Footer is located at the bottom part
of the website.
What you have learned?
What you have learned?
THANK YOU!