Skip to content

🧠 Mind Maps — Design System

"One concept, one map, instantly readable."

Mind maps are a visual content section of aguidetocloud.com — purpose-built diagrams that simplify complex Microsoft 365 and Azure topics into clear, shareable visual maps.

Design Philosophy

Mind maps follow the Zen Design System principles but operate as visual content — like illustrations or infographics — not as UI components. This means they have their own typography, colour system, and visual vocabulary, separate from the site chrome.

Principles

# Principle Meaning
1 One concept, one map Never cram "everything about X" into one map. Break into focused pieces: "Copilot in Teams", "E3 vs E5 Features", "Conditional Access Flow". Like our tools — each does one thing well.
2 Instantly readable A user should understand the map at a glance — no zooming, no panning, no instructions needed. If you have to squint, the map has failed.
3 Purpose-built Each map chooses its own layout, colours, shapes, and emphasis based on what it's trying to say. No template stamping. The visual choices serve the story.
4 Static, not interactive No search boxes, hover effects, zoom controls, or breadcrumbs. The map is a finished visual product, like a poster. Download and share.
5 Volume is a strength 30 small focused maps > 3 overloaded maps. Each one shareable, printable, covering a real question people have.

What changed from v1

The first version (May 2026) used an interactive D3.js renderer with search, hover highlight, click-to-zoom, breadcrumbs, and deep links. After comparing with entra.news mind maps and m365maps.com, we concluded:

  • Interactivity added complexity without user value
  • The interactive features were workarounds for "map is too small" — the real fix is making it readable by default
  • Static, purpose-built maps are more shareable, more printable, more useful
  • Dropping interactivity lets the map fill the full viewport

The mind maps gallery uses a 3-column card grid → fullscreen lightbox pattern:

  1. Gallery view — cards with mini preview thumbnails, titles, descriptions
  2. Click a card → map expands to fullscreen (other cards disappear)
  3. Fullscreen view — just the map + close button + download button
  4. Close → returns to gallery grid for navigation

This gives best of both worlds: discovery/navigation in the gallery, full immersion when viewing a map.

Content Strategy

Map scope — "one question" rule

Each mind map should answer one question a user might ask:

✅ Good scope ❌ Too broad
"What can Copilot do in Teams?" "Everything about M365 Copilot"
"Which Azure cert should I start with?" "All Azure certifications"
"E3 vs E5 — what's the difference?" "M365 licensing explained"
"How does Conditional Access work?" "Microsoft security products"

Planned maps (initial set)

Copilot family:

  • Copilot in Teams
  • Copilot in Word & PowerPoint
  • Copilot Deployment Checklist
  • Copilot Licensing at a Glance

Azure Certifications:

  • Azure Cert Paths (Fundamentals → Expert)
  • AZ-900 Study Topics
  • AZ-104 Study Topics

Licensing:

  • E3 vs E5 Feature Comparison
  • Business vs Enterprise Plans
  • Add-ons Worth Knowing

Security & Identity:

  • Conditional Access Flow
  • Entra ID Roles
  • Defender Product Family

Next sections

Coming soon: Data Format (JSON structure for mind map content)