Website Architecture Planner
Overview
Plan complete website information architecture: sitemap generation, content hierarchy, navigation design, URL strategy, page type definitions, and wireframe outlines. Produces a full website blueprint document.
When to Use
- "Plan the structure for my new website"
- "Design an information architecture"
- "Help me organize my site's content"
Sitemap Generation
Build a hierarchical sitemap:
Home
├── About
│ ├── Our Story
│ ├── Team
│ └── Careers
├── Services
│ ├── Service A
│ ├── Service B
│ └── Service C
├── Resources
│ ├── Blog
│ ├── Case Studies
│ ├── Whitepapers
│ └── FAQ
└── Contact
├── Locations
└── Support
Flat vs Deep Architecture
- Flat (<3 levels): Better for SEO, user experience. Limit to 2-3 clicks to any page.
- Deep (>3 levels): Only for massive sites (500+ pages) with clear navigation paths.
Navigation Design
| Navigation Type |
Purpose |
Best For |
| Primary nav |
Main pages visitors need |
Top 5-7 pages |
| Secondary nav |
Supporting content |
Resources, legal, about |
| Footer nav |
Everything else in groups |
Policies, contact, social |
| Breadcrumbs |
Show location + SEO |
Every inner page |
| Sidebar nav |
Sub-page navigation |
Documentation, courses |
Apply the "three-click rule": any page should be reachable in ≤3 clicks from any other page.
URL Structure Strategy
- Use descriptive, keyword-rich slugs:
example.com/services/web-design not example.com/services/?p=123
- Keep under 5 segments:
domain/category/post-name ideal
- Use hyphens, not underscores:
web-design not web_design
- Lowercase only:
/Services/Web-Design/ → /services/web-design/
- Avoid dates in URLs unless time-sensitive content
Page Type Definitions
| Page Type |
Purpose |
Content Required |
| Homepage |
Orientation, top conversions |
H1, hero, social proof, top CTAs, value prop |
| Landing Page |
Single conversion goal |
Target headline, benefit bullets, form/CTA, trust signals |
| Blog Post |
SEO, education, authority |
Headline, body, featured image, meta, author |
| Product/Service |
Sell an offering |
Features, benefits, pricing, testimonials, FAQ |
| About |
Trust-building |
Story, team, mission, values, press mentions |
| Contact |
Lead generation |
Form, map, phone, email, hours |
| FAQ |
Reduce support, SEO |
Questions as H2s, answers below |
| Resource/Library |
Content hub |
Filtered grid/search, categories, featured items |
Wireframe Outlines
Use the sketch tool or describe layout in markdown tables:
[Hero: Headline + Subheading + CTA Button]
[Social Proof: Logo bar of 3-5 companies]
[Features: 3-column grid with icons]
[Testimonials: Carousel of 3 quotes]
[FAQ: Accordion of top 5 questions]
[CTA: Final bold section]
[Footer: Links, social, legal]
Common Pitfalls
- Ignoring mobile navigation — hamburger menus on desktop are lazy; use responsive navigation
- Content-first, structure-second — structure must follow content needs, not the other way around
- Orphan pages — every page needs a link from at least one other page
- Overloaded primary nav — 7+ items overwhelms users; group and stack
- No 404 strategy — plan a helpful 404 page with search and popular links
Verification Checklist
1---2name: website-architecture-planner3description: Use when planning site structure. IA, sitemaps.4license: MIT5---67# Website Architecture Planner89## Overview10Plan complete website information architecture: sitemap generation, content hierarchy, navigation design, URL strategy, page type definitions, and wireframe outlines. Produces a full website blueprint document.1112## When to Use13- "Plan the structure for my new website"14- "Design an information architecture"15- "Help me organize my site's content"1617## Sitemap Generation18Build a hierarchical sitemap:1920```21Home22├── About23│ ├── Our Story24│ ├── Team25│ └── Careers26├── Services27│ ├── Service A28│ ├── Service B29│ └── Service C30├── Resources31│ ├── Blog32│ ├── Case Studies33│ ├── Whitepapers34│ └── FAQ35└── Contact36 ├── Locations37 └── Support38```3940### Flat vs Deep Architecture41- **Flat (<3 levels)**: Better for SEO, user experience. Limit to 2-3 clicks to any page.42- **Deep (>3 levels)**: Only for massive sites (500+ pages) with clear navigation paths.4344## Navigation Design45| Navigation Type | Purpose | Best For |46|----------------|---------|----------|47| Primary nav | Main pages visitors need | Top 5-7 pages |48| Secondary nav | Supporting content | Resources, legal, about |49| Footer nav | Everything else in groups | Policies, contact, social |50| Breadcrumbs | Show location + SEO | Every inner page |51| Sidebar nav | Sub-page navigation | Documentation, courses |5253Apply the "three-click rule": any page should be reachable in ≤3 clicks from any other page.5455## URL Structure Strategy56- Use descriptive, keyword-rich slugs: `example.com/services/web-design` not `example.com/services/?p=123`57- Keep under 5 segments: `domain/category/post-name` ideal58- Use hyphens, not underscores: `web-design` not `web_design`59- Lowercase only: `/Services/Web-Design/` → `/services/web-design/`60- Avoid dates in URLs unless time-sensitive content6162## Page Type Definitions63| Page Type | Purpose | Content Required |64|-----------|---------|-----------------|65| Homepage | Orientation, top conversions | H1, hero, social proof, top CTAs, value prop |66| Landing Page | Single conversion goal | Target headline, benefit bullets, form/CTA, trust signals |67| Blog Post | SEO, education, authority | Headline, body, featured image, meta, author |68| Product/Service | Sell an offering | Features, benefits, pricing, testimonials, FAQ |69| About | Trust-building | Story, team, mission, values, press mentions |70| Contact | Lead generation | Form, map, phone, email, hours |71| FAQ | Reduce support, SEO | Questions as H2s, answers below |72| Resource/Library | Content hub | Filtered grid/search, categories, featured items |7374## Wireframe Outlines75Use the `sketch` tool or describe layout in markdown tables:76```77[Hero: Headline + Subheading + CTA Button]78[Social Proof: Logo bar of 3-5 companies]79[Features: 3-column grid with icons]80[Testimonials: Carousel of 3 quotes]81[FAQ: Accordion of top 5 questions]82[CTA: Final bold section]83[Footer: Links, social, legal]84```8586## Common Pitfalls871. **Ignoring mobile navigation** — hamburger menus on desktop are lazy; use responsive navigation882. **Content-first, structure-second** — structure must follow content needs, not the other way around893. **Orphan pages** — every page needs a link from at least one other page904. **Overloaded primary nav** — 7+ items overwhelms users; group and stack915. **No 404 strategy** — plan a helpful 404 page with search and popular links9293## Verification Checklist94- [ ] Full hierarchical sitemap created 95- [ ] Navigation design (primary/secondary/footer/breadcrumb) planned96- [ ] URL structure strategy defined97- [ ] All page types documented (homepage, landing, blog, etc.)98- [ ] Wireframe outline for each top-level page type99- [ ] Mobile navigation plan included100- [ ] Every page has an inbound link path
LoopyLuci