A navigation structure is key to planning a website. A navigation structure involves a bit higher level of abstraction than just sketching pages. A navigation flowchart (or sitemap) organizes how you are going to guide visitors through your material.

You don’t want to place hurdles in front of visitors looking for something at your site. You’re building your site for a reason (or set of reasons). You have ideas on what material is top priority for visitors to engage with, and what is not.

Your navigation flow will reflect those priorities, with the material you want most accessible available from a first line of menu options, with other material accessible through submenus or maybe just through links within pages.

In other words, although you want to take your visitors’ inclinations into account, you want to provide links to content you want to steer visitors to. For example, if you’re selling a product, you want convenient, prominent, even (sometimes) pushy links to the shopping cart at your site.

One good way to conceptualize a navigation structure is to create an outline. You can do this with a professional outlining program like OmniGraffle. You can do it in a word processor. Or, you can grab some scratch paper and sketch an outline of how your site navigation will look.


The top outline levels (or at least, the top level under the Home page) will be visible when a visitor comes to the site and are the key things you want to encourage a visitor to go to. Other menu items (the second level) become visible when a main menu item is hovered over or selected. And sub-submenus provide another level of navigation.

Creating a graphical flowchart illustrating your navigation structure is often helpful. Such a flowchart is often referred to as a site map.

OmniGraffle has both an outline and flowchart view. You can show or hide the outline sidebar. With the outline sidebar active, you can enter flowchart titles, and demote them by pressing Tab (or promote them by pressing Shift+Tab).

Graphical site maps/flowcharts help designers step back, visualize a user’s experience with the site, and adjust the navigation flow as appropriate.


Based on a sketched-out concept for navigation, you (or a designer you work with) can design pages that implement that navigation structure, like the artwork in the following figure.