A sitemap is a hierarchical list or diagram that represents the structure of HTML pages on a website. It is used to plan the logical presentation of content for users, visualize user paths, and organize content to help achieve business goals. There are two common types of sitemap diagrams: a horizontal tree diagram and a vertical tree diagram. Examples of sitemaps show hierarchical relationships between pages through visual diagrams.

1. DESIGN
SITE MAP
BY YAOWALUCK PROMDEE, DR.SUMONTA KASEMVILAS
WEB DESIGN TEAHNOLOGY
Web design technology
1

2. INDEX
What is a sitemap?
Purpose of a sitemap
Sitemap diagram
Example
Web design technology
2

3. Why you should build a sitemap
before designing your site?
Web design technology
3

4. WHAT IS A SITEMAP?
A sitemap is a list or diagram which
represents the hierarchical structure of the
html pages in a website.
• show hierarchy
• group content
• visualize path
Web design technology
4

5. PURPOSE OF SITEMAP
A sitemap is used to
Plan the logical presentation of website content
to users,
Visualise and structure user paths,
Organise the presentation of content to assist
the business to achieve its business goals;
Plan user-centric functionality, to enhance the
user experience.
Web design technology
5
Jeannie Melinz

6. Sitemap Diagram
Horizontal tree diagram
Level3
Level2
Level1 Home
About Us Service Contact
Web design technology
6

7. SITEMAP
DIAGRAM(CONT.)
Vertical tree diagram
Home
About
Service
page.html example
Contact
Web design technology
7

8. EXAMPLE
http://www.spudart.org/blog/images/2005/sitemap_after.gif
Web design technology
8

9. http://thumbs.dreamstime.com/
http://www.conceptdraw.com/csnews_online/img/june/ht_create_
websitemap_pre.png
Web design technology
9

10. http://arts.umich.edu/about/sitemap.png
Web design technology
10

11. ASSIGNMENT#3 PART2
Create your Sitemap Outline (ie. the List
View of the pages of the site) from
assignment#3
Using your preferred software tool,
create an electronic diagram version of
your sitemap
Web design technology
11