ANALYS CONTAC

MENU
IS T
Data ANALYSIS

Lesson: 1 Web
Design Principles
and Elements
Presented by group: 9
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

What is Web Design?

 Web Design is a concept of planning,
creating, updating and maintaining
websites.

 It also compasses many different skills

and disciplines in the production and
maintenance of websites.
 ANALYS CONTAC
MENU
IS T

Web Design Principles

Your website needs to accommodate the needs of the
1. user. Having a simple clear intention on all pages
will help the user interact with what you have to
Purpose
offer.

Simplicity is the best way to go when

2..
considering the user experience and the
usability of your website. Below are ways to
achieve simplicity through design.
Simplicity
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Page load time is the time it takes to download

3. and display the entire content of a web page in
the browser window (measured in seconds).
Load Time

4. 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
Communication
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

The best way to design an effective website is to

5..
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.
Responsive
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Web Design Elements

Web design encompasses the overall
appearance of a website, encompassing
visual elements for a complete user
experience, content, usability, and other
aspects.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Content is the backbone of a website, attracting users through

1.
engaging content like video, animation, news, and high-resolution
imagery, ensuring user engagement and popularity.
Content

Usability is crucial for websites to anticipate user needs and make

them easy to navigate. Navigation buttons should be intuitive,
2. accessible, and user-friendly, allowing users to find desired content
and access desired pages without navigating the entire site.

Usability
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

3. Aesthetics involves balance, movement, pattern, scale, shape, and

visual weight, contributing credibility to a website's quality and
appearance across all devices.

Aesthethic
Website success relies on user engagement, and a well-
designed website requires effective marketing strategies.
4.
Utilizing search engine optimization, social media, and
email marketing is crucial for success. Understanding how
to be found, target platforms, and utilize content is
Visibility essential.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Contact Us Enhance website functionality by including comment

boxes and opinion polls to engage users, hold their
5. attention, direct them, and encourage contact, ensuring
Email audience growth and engagement.
Comment

Interaction
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

What is Anatomy?
Anatomy in web design refers to the structural and visual
elements in a web page, including headers, navigation
menus, content areas, sidebars, footers, and interactive
elements. Understanding this anatomy is crucial for
creating visually appealing, user-friendly layouts, utilizing
typography, color schemes, and placement.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Parts of
Anatomy
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

1. Header- Is the top of the page that usually contains

the logo and navigations option on your website.
2. Logo- Is the graphic symbol of your brand that can
be easily identify by the users.
3. Navigation- help the user explore your website
through the set of links that are present in every
pages of your website.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

4. Headline- Is a short and clear description of your

website that helps visitors understand the site’s
content, products and services.

5. Banner (or Slider)- Is a large image placed below the

header that is meant to grab attention of the users.

6. Content- Is the images, text, graphics, videos and

other media that make up a website.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

7. Contact Form- Is a simple way to interact with the

users directly through your sites. This allow the users
to comment or give any suggestion to your website.
8. Footer- Is 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.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

What I Have Learned.

1. It is the backbone of a website, attracting users through
engaging content like video, animation, news, and high-
resolution imagery.
2. 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
3. Is located at the bottom part of the website.
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Box of choices

1. Content 6. Footer
2. Load time 7. Usability
3. Interaction 8. Aesthetic
4. Responsive 9. Visibility
5. Communication
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

What I
can do
 ANALYS CONTAC
MENU
IS T
Data ANALYSIS

Answer Key
What I can do
1. F 6. J
2. I 7. G
3. B 8. H
4. D 9. C
5. K 10. E