3 Chapter 3: Site Structure & Navigation Planning

Introduction

Before choosing colors, fonts, or multimedia, you need the foundation: structure and navigation. Think of your site as a building… without a floor plan, hallways, and doors, the house won’t function. Good structure makes content easy to find, improves accessibility, and supports search engines. Without it, even a beautiful design feels frustrating.

3.1 Why Structure & Navigation Matter

Clear structure and navigation are essential for usability, accessibility, and credibility. They help users achieve their goals quickly, whether that means reading an article, purchasing a product, or locating contact information. Without a plan, users can feel lost and leave the site.

Clear structure and navigation:

Help users achieve their goals quickly.

Support accessibility for screen readers and assistive technologies.

Improve SEO by allowing search engines to crawl and index pages effectively.

Build trust and credibility with visitors.

For example, a cluttered news site that hides new articles behind multiple menus frustrates readers. By contrast, Wikipedia’s clear hierarchy allows people to find related topics in seconds.

3.2 Sitemaps: The Blueprint of Your Site

A sitemap is the blueprint of a website. It shows how all the pages connect and guides the flow of information. Just as an architect would not build without a floor plan, web designers use sitemaps to organize content logically.

Common structures include:

• Hierarchical (tree): Homepage → Categories → Subpages.
• Linear: Step-by-step (tutorials, courses).
• Hybrid: Mix of both for complex sites.

Best Practices:

• Limit depth: Users should reach most content in three clicks or less.
• Avoid orphan pages (pages not linked anywhere).
• Group related content logically.

Tools:

• Digital tools: Lucidchart, Miro, Figma.
• Low-tech tools: Pen and paper sketches.

Example: A university site might branch from Homepage → Admissions, Academics, Student Life, About. Under Academics → Colleges → Departments → Programs → Courses. This ensures both prospective students and faculty can find relevant information quickly.

3.3 Wireframes: Sketching the Layout

Once the sitemap is in place, wireframes sketch out individual pages. A wireframe is a layout diagram showing where elements will go, without styling. Wireframes make it possible to test ideas before investing in design or coding.

Types of Wireframes:

• Low-fidelity: Simple boxes and quick sketches.
• High-fidelity: Detailed, digital layouts showing buttons, menus, and forms.

Why They Matter:

• Save time before coding.
• Help visualize user flow.
• Ensure priorities are clear (what’s most visible vs. secondary).

Common Elements in a Wireframe:

• Header
• Navigation bar
• Main content area
• Sidebar
• Footer

Example: A blog wireframe might include a header with the site’s name, a top navigation bar, a central space for posts, a sidebar with categories, and a footer with contact information.

3.4 Navigation Best Practices

Navigation is the sign system of your site. Done well, it feels invisible—users simply find what they need.

Global vs. Local Navigation:

Global: Appears on all pages (top bar or main menu).

Local: Appears within a section (sub-menus, sidebars).

Common Patterns:

• Top navigation bars
• Sidebar menus
• Footer navigation
• Mobile-friendly hamburger menus or sticky nav bars

Best Practices:

• Keep menus short (5–7 main items).
• Use descriptive labels (e.g., ‘About Me’ instead of ‘Info’).
• Maintain consistency across all pages.
• Prioritize accessibility: keyboard-friendly, clear labels, strong contrast.

Mistakes to Avoid:

• Overstuffed menus.
• Inconsistent navigation between pages.
• Burying important content too deeply.

Key Terms

– Sitemap: Visual outline of site pages and connections.
– Wireframe: Sketch of page layout and structure.
– Navigation: Menus/links guiding users.
– Hierarchy: Content arranged in levels of importance.
– Breadcrumbs: Secondary navigation showing the user’s path.
– Global Navigation: Menus that appear across the entire site.
– Local Navigation: Menus specific to a section.
– Orphan Page: A page not connected to the rest of the site.
– Wireframe Fidelity: Level of detail (low = boxes, high = detailed layouts).

Summary

A website’s structure and navigation form its skeleton. Sitemaps plan the flow of information, wireframes sketch how pages will work, and navigation menus ensure users can move smoothly. By combining usability, accessibility, and clarity, designers create sites that are effective, trustworthy, and user-friendly.