WEB DESIGN

PRINCIPLES AND
ELEMENTS
Module 9
 WEB DESIGN PRINCIPLES AND
ELEMENTS
Having a website become a common requirement in
attracting a potential customer. Various sector such as
education, businesses, entertainment and other
service provider adopt on this kind of global trend that
led to a faster delivery of information and other
transaction online. Today, websites have grown out to
be more than just digital presence and creating one
become an evolving art. For this reason, it is
important to consider the different web design
principles and elements so that your website can grab
the customer attention and help to incisor more users.
2
INTRODUCTION

Creating a website is often challenging and hard

because it requires more than an aesthetically pleasing
appearance. In fact, there are billions of websites in the
‘world wide web’ and only a few thousand of them are
mostly good website. Several factors such as
consistency, colors, typography, imagery, simplicity,
and functionality are considered when building a
website. To further understand, you need to study web
design principles and elements that will serve as a
guideline on web development.
20XX PRESENTATION TITLE 3
 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. It will also help you on how
your website will work based on the design you
put into it. In this module, we have outlined the
5 basic principles of a good web design from
various online resources to address what we
consider to be the most accurate, concise and
comprehensive yet easy to understand
principle.
 1. PURPOSE
The starting point of building a website is to
have
a very clear purpose. 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
20XX PRESENTATION TITLE 5
2. SIMPLICITY
Over-designed website may not work and
may lead to distraction from the main purpose
of your
website. Having design features that do not
serve
the 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
PRESENTATION TITLE 6
3. LOAD TIME
Crowded and over-designed web design
can affect the loading time of your
website. This may result to lose your
visitors even if every aspect of your
website has a clear purpose. To improve
the speed and performance of your
website you need to simplify your design
to optimize its loading time.
4.
COMMUNICATION
To establish better communication with the
users, you must formulate straight forward and
easy-to 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.
5. RESPONSIVE
The best way to design an effective website is
to
make it mobile-friendly on which the design of
your website can shrink or expands as per the
dimension of the 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
 WEB DESIGN
ELEMENTS

20XX PRESENTATION TITLE 10

 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. On this module, we
gather the top 5 most critical elements on web
designing that your website should have.
1. CONTENT
Content is considered as the backbone of
your
website because this is the main reasons
people
seeking your 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,
2. USABILITY
Usability anticipates what the users may think and
help them fulfill their needs with as little effort as
possible. Your website must be easily to navigate,
intuitive, accessible and user-friendly using
navigation buttons. This will allow user to know
where they are on the website at all times and be
able to find where they want to go with little thought
they have. This will also be able to access any
page they need without having to
PRESENTATION TITLE 13
3. AESTHETIC
Aesthetics includes factors such as balance,
movement, pattern, scale, shape and visual
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. 14
4. VISIBILITY
The success of your website is based on the volume of
user engagement you have. 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.
5. INTERACTION
Adding comment boxes and opinion polls
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. Because
your website isn’t just there for show, it is
there to help your audience and ensure
 ANATOMY OF A WEBSITE
Knowing the basic structure of a website can really help you understand how to build an effective one.
The example below will show you the basic structure 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
- a short and clear description of your website that helps
visitors understand the site’s content, products and
services.

Banner (or slider)

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

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.
Contact Form
- 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.

Footer
- located at the bottom part of the 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.
END OF
PRESENTATIO
N