1. Structural / Functional Site Diagramming

2. Overview Introducing Site Diagramming Structural Site Diagrams
Functional Site Diagrams
Diagramming Practices
Recommendations
Diagramming Tools
Site Outlines

3. What is Site Diagramming?
Primary goal:
Providing a visual representation of the relationships between pages in the site
Some diagrams also show functionality, but do so in a limited fashion
With most websites structured as hierarchies, site diagrams are usually horizontal or vertical tree diagrams

4. Why Create Site Diagrams?
Reveal breadth / depth of site at a glance
Show relationships between pages
Graphic designers use them for the names of links / buttons in their mockups
Content developers rely on them to make sure that all the content is ready
Coders / programmers reference them to make sure that pages are correctly linked

5. Multiple Ways to Diagram
As with card sorting, the possibilities for site diagramming are numerous
We will focus on learning two methods:
A structural / functional approach I developed while at Diamond Bullet Design and have since refined further
The Visual Vocabulary, developed by Jesse James Garrett at Adaptive Path
Down the road you might develop your own approach to site diagramming

6. Multiple Site Diagramming Labels
Blueprint
Site flow
User flow
Process flow
Site mapping

7. Structural Site Diagramming
Reflects the structure of the entire website and relationships between pages
Organized by level, starting with the home page as Level 1
Include external links, but these are always secondary in importance
Can be either horizontal or vertical:
Often a personal preference, although breadth and depth of the website is a factor

8. Functional Site Diagramming
A functional site diagram begins as just a structural site diagram
Functionality is ‘layered on top of’ the structural site diagram:
Forms, links, and file downloads are commonly indicated
One drawback is additional visual clutter
There is also limited room for details

9. Diagramming Practices
Pages
Links
Levels
Numbering
Groupings
Chunking

10. Diagramming Pages Use rectangles to represent static pages
Rounded-edge rectangles represent dynamically generated pages
Dotted rectangles represent future pages
A ‘stack’ represents a cluster of similar pages
If you have a one-page diagram, each page (unique rectangle) should appear only once.

11. Diagramming Links
Solid connecting lines between pages for standard linking
Dashed connecting lines between pages for cross-links
Use an arrow to indicate direction of linking
Arrows between pages for linear sequences (e.g., registration, purchasing)

12. Diagramming Links Links to other websites (outgoing)
Links from other websites
(incoming)
Place these shapes outside, but in close proximity to, the page where they occur

13. Diagramming / Displaying Levels
Indicate levels with an explicit label (e.g., Level 1, Level 2, Level 3)
In horizontal diagrams:
top-level pages are on the left side
bottom-level pages are on the right side
In vertical diagrams:
top-level pages are at the top of the diagram
bottom-level pages are at the bottom of the diagram

14. Numbering in Diagrams
Numbering is very helpful when communicating about the website
Label the home page as 1.0
The second-level pages are 1.1, 1.2, etc.
Third-level pages under the 1.1 section are 1.1.1, 1.1.2, 1.1.3, etc.
When numbering clusters of pages, use x as the largest value (e.g., x)

15. Diagramming Groupings
Use dashed grouping boxes to indicate:
Global navigation
Local navigation
Any other groupings that occur
Be sure to label the dashed box

16. Chunking in Diagrams
Chunking refers to taking something (generally information) and breaking it down into smaller pieces
When diagramming large sites, chunking is required because one printed page cannot show everything
For small sites everything can fit on a single printed page in most cases

17. Diagram Page 1
Have the first diagram page contain the home page and the global navigation
Level 1
Home
1.0
Level 2
About
1.1
Services
1.2
Support
1.3
Careers
1.4
Contact
1.5
Global Navigation

18. Additional Diagram Pages
Then have a separate page devoted to each section of the website with subpages
Level 2
About
1.1
Level 3
History
1.1.1
Guarantee
1.1.2
Locations
1.1.3
Investors
1.1.4
Partners
1.1.5
Local Navigation

19. Recommendations Provide ‘meta data’ for the diagram
Include a legend at the bottom of the diagram
Assign a name and version number to the diagram (e.g., Jason Withrow’s Instructional Website, version 1.3)
Provide date of creation and/or last update
Number and order the pages the same way they appear on the website

20. Be Open to Innovation
Sometimes the available shapes do not work for a particular page or section
There may be a unique type of page (e.g., a page that spawns in a small window); how do you represent that?
Choose a shape, include that in your legend, and you should be fine

21. Diagramming Tools Visio is the industry standard software
The desktop version is Windows-only
There is an online version (Office 365) with a trial option:
Omnigraffle (Mac-only) is also fairly commonly used

22. Diagramming Tools
In practice any drawing program will do when it comes to making a site diagram
Visio is recommended because it has built-in shapes and tools for creating diagrams, which saves you time

23. Site Outlines
The site outline represents the structure of the site in a traditional outline format
Needs to exactly mirror the structural site diagram
Benefit:
Faster to create and maintain than the site diagram
Drawbacks:
Harder to show cross-links and sequences
No space for functionality to be mentioned

24. Why Create a Site Outline?
Some people are great visual learners and take immediately to your diagrams
Others will look at your diagram and say, ‘What in the world is this?’
In other words, diagrams do not work for every client - sometimes people need things spelled out!