Organize and structure information for clarity and discoverability. Design navigation systems, hierarchies, and mental models that match user needs.
Install
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill information-architectureSKILL.md
Information Architecture
Table of Contents
Overview
Information Architecture creates logical structures that help users find and understand information easily.
When to Use
- Website or app redesign
- Large information spaces (documentation, e-commerce)
- Navigation structure planning
- Taxonomy and categorization
- Search functionality design
- User journey mapping
Quick Start
Minimal working example:
IA Process:
1. Research & Discovery
- Interview users about mental models
- Card sorting sessions (open and closed)
- Analyze current usage patterns
- Competitive analysis
2. Structure Development
- Create organization scheme (hierarchical, faceted, etc.)
- Define categories and relationships
- Build taxonomy
- Plan navigation
3. Wireframing
- Sitemap creation
- Navigation structure
- Page templates
- User flows
4. Validation
- User testing with prototypes
- Tree testing (navigation only)
- Iterate based on feedback
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Card Sorting & Taxonomy | Card Sorting & Taxonomy |
| Sitemap & Navigation Structure | Sitemap & Navigation Structure |
| Search & Discovery | Search & Discovery |
Best Practices
✅ DO
- Start with user research
- Conduct card sorting studies
- Use user mental models
- Keep hierarchy 3 levels deep max
- Use clear, simple labels
- Enable multiple ways to find content
- Test navigation with users
- Update based on usage data
- Document taxonomy
- Provide search functionality
❌ DON'T
- Impose organizational structure without research
- Use jargon or technical terms
- Make hierarchy too deep
- Bury important content
- Rely only on navigation (provide search)
- Change navigation frequently
- Create ambiguous labels
- Forget about edge cases
- Ignore accessibility
- Assume desktop-only navigation
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.