By far you have gathered all the necessary information for you website and put them into different categories. Now it’s time to present this information in pages. In order to do so, you need some structure.


A sitemap is the backbone of a project and shows a visual representation of the site’s structure. Generally you will design and structure your website in a hierarchical style. As we all know, almost all websites have a home page then there are other pages that are linked to it by a navigation bar or some links.


It’s recommended to keep your sitemap simple. If you have quite a few categories, then apply some levels to connect these pages together. At this point we are not using the site text or images; we only use pages names and links.





NOTE: Make sure to show both Link names (in black) and HTML page names (in blue) in your sitemap. Also keep in mind to follow HTML page name standards. Broken link is a common error and is usually caused by typing the wrong file and page name or address.



Types of Sitemap


Linear: Users navigate sequentially from one page to another.
Example: Online survey, IQ tests and slide shows. 


Hierarchical: Users navigate along the branches of a tree structure that is shaped by natural logic of the content. The above diagram shows a Hierarchical sitemap along two hierarchical trees. Example:


Nonlinear: Users navigate freely through the content of the project unbound by predetermined routes. Example: 90% of the websites on the internet.


Composite: Users may navigate freely (nonlinear) but are occasionally constrained to a linear process.  Example: (any website with a shopping cart)


Types of Sitemap



Drawing Sitemaps


Use Microsoft Word, Photoshop, Illustrator or any other drawing software to draw sitemaps. Free online open source program:



Class Exercise: Sitemap for a Hair Salon


Your project is to create a sitemap for a website. Your client is a Hair Salon on Granville Street, in downtown Vancouver. You have 10 minutes to ask the client a few questions about his business then:


  1. Write down the information
  2. Categorize the information into groups
  3. Compile the information  into various tabs
  4. Come up with a simple sitemap for this website
  5. Draw the sitemap




Buy "Digest Web Design" PDF Book


All the information on this website is also provided in a PDF book for only $30.
Click here to buy.



<<    Previous Page                                                                    Next Page    >>