BASIC WEB

DESIGN
PRINCIPLE AND
ELEMENTS
 Learning
Objectives
Identify the principles and elements
of web design.

Explain web design principles and

elements.
PARADOX OF
Phrase of the Day
CHOICE
is a concept popularized by
psychologist Barry Schwartz in his book
The Paradox of Choice: Why More Is
Less. It describes the idea that having
too many choices can lead to negative
outcomes.
 Table Of Content

BASIC WEB DESIGN

PRINCIPLE

BASIC WEB DESIGN

ELEMENTS
 BASIC WEB
DESIGN
PRINCIPLE
▪ Web design principles are general rules for the
design of web-based media that include basic
guidelines for the design of layouts and interaction
design.
▪ These help create effective, functional, and
aesthetically pleasing designs. (Human-computer
interaction, usability and user experience design,
Graphic design and Typography, Color theory,
and Design processes and models)
 Visual Language
•Use a consistent template on each page

Principle #1
with a uniform color scheme.
•Use contrasting color between text and
background in the place you want
attention.
•Avoid large and small font sizes and
many typefaces.
 Visual Language

▪ Use common font style to similar

Principle #1

items across the web pages.

▪ Make important links or menus
more prominent in terms of color.
▪ Use pictures that are high quality.
Visual Hierarchy
 Balance

▪ There should be a balance distribution of

Principle #2
heavy and light elements on the page.
▪ Proper alignment of text and images in a
web page helps maintain consistency in
design.
▪ Important information is placed near the
top.
 Balance
▪ The size of a button should be
Principle #2

proportional to its expected frequency of

use.
▪ Group similar things together in terms of
shape, color or shading.
▪ Create a pattern which will make your
page easier to use, remember and
understand.
Concept of Balance in Web
Design
 Paradox of Choice
▪ “Paradox of choice means the more

Principle #3
choices you provide, the easier for
others to choose nothing.” This means
that you should eliminate unnecessary
designs.
▪ Focus on the needs of the user.
▪ Design around context of multiuser in a
multi-screen and in a multi-device.
More is Less
 Focus on Content

▪ Match the content of the web

Principle #4
page with its purpose.
▪ Content should be
spellchecked.
▪ Content should be organized.
 Focus on Content

▪ There should be a clear delivery

Principle #4

of content.
▪ Include images on your content
not just pure text.
▪ Content should be updated.
Focus on the Content
 Simplify

Principle #5
Follow a simple design.
▪ Keep the content simple.
▪ Use minimal animated graphics.
▪ Maintain a consistent look and
feel across all the web pages.
Simplify Web Design
 Grid Based Layout

▪ Grids help to structure your

Principle #6
design and keep your content
organized.
▪ The grid helps to align
elements on the page and keep
it clean.
Grid Based Layout
 Load Time

▪ Waiting for a website to load will lose

Principle #7
visitors.
▪ Nearly half of web visitors expect a site
to load in 2 seconds or less and they will
potentially leave a site that isn’t loaded
within 3 seconds.
Decrease Website Load Time
 BASIC WEB
DESIGN
ELEMENTS
Web design is the process of
creating websites. It
encompasses several different
aspects, Including
webpage layout, content
production, and graphic design..
NAVIGATION ▪ The website design should be easy
ELEMENT
1 to navigate
▪The viewer should always know
exactly where they are on the
website and have easy access to
where they would like to be.
▪Menu items should easily accessible
from any page.
VISUAL ▪ Scrolling text, animation, and
ELEMENT
DESIGN
2
flash intros should be used
sparingly in your web design
and only to emphasize a point
for maximum effect.
▪ Let them know that your
website is trustworthy and
professional.
CONTENT
ELEMENT ▪ This is the backbone of your
3 website.
▪ Your website text should be
informative, easy to read, and
concise.
▪ It is the reason most visitors
are seeking from your website.
 WEB ▪ No matter how informative,
ELEMENT
FRIENDLY
4 beautiful, and easy to use your
website design is, it's useless
unless it's web-friendly.
▪ Many factors effect your
search engine placement and
visual appearance of your site.
 COLOR ▪ Your color palette and fonts will directly
inform your visitors’ opinions of your site
ELEMENT
SCHEME
5 and are what most novice designers start
with.
▪ As for choosing a color scheme, paying
attention to your brand or industry
perspectives — along with your target
audience.
▪ Always be looking for ways to narrow your
scope from the roughly 7 million
discernable hues the eye can detect.
TYPOGRAPH
ELEMENT
▪ Your text should be easily
Y
6 readable. Using a
complementary font is ideal
for headings or accents, but
don’t go beyond three
typefaces or unnecessary
sizing adjustments.
TURNAROUND
▪ The number one complaint of
ELEMENT
TIME
7 website design customers is the
time it takes to get the site up
and running.
▪ The longer it takes to complete
the website, the more business
- and value - you lose.
THANK YOU
This sentence contains information
related to the title