• Presentations
  • Presentations
  • IMG 0341
  • Presentations
  • IMG 0409

Website Design - Site Diagrams

(2 votes, average 5.00 out of 5)

Site Diagrams

The website diagram is a diagram showing the layout, or proposed layout, of a website. In the design stage of a website it serves as a major planning document, giving both the broad scope of the website and the details of the website, indicating where each piece of content, navigation, or interactive functionality will appear.

Site diagrams are also useful when your project moves from planning to actual Web page implementation. As the new site is built up in a directory (or folder) on the Web server, the site diagram is often the first place programmers look to gain an understanding of how the site files should be subdivided into directories (or folders) on the server. The pattern of directories and sub-directories of the site files should mirror the major content divisions and structures as shown on the site diagram below:

Site Diagram

As the site directories and sub-directories (sub-folders) are organized on the server, information on the exact names used for major directories (folders) and files should be added to the site diagram, so that everyone on the team has a ready current reference to the naming conventions and file locations in the site. [1]


Copyrights: Portions of this handout, have been taken directly from http://webstyleguide.com, which is the website for the book Web Style Guide by Patrick Lynch and Sarah Horton.

[1] http://www.webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html