Wireframing

Create effective wireframes that communicate structure, layout, and information hierarchy for user interfaces.

When to Use This Skill

• Early design exploration
• Communicating structure
• Stakeholder alignment
• Developer handoff
• Usability testing prep
• Iterative design
• Information architecture
• Layout planning

Core Concepts

1. Low-Fidelity Wireframe

+----------------------------------+
|  [Logo]    Nav1  Nav2  Nav3     |
+----------------------------------+
|                                  |
|  Hero Image / Banner             |
|  [Primary CTA Button]            |
|                                  |
+----------------------------------+
|                                  |
|  Feature 1  |  Feature 2         |
|  [Icon]     |  [Icon]            |
|  Text...    |  Text...           |
|                                  |
+----------------------------------+
|  Footer Links        [Social]   |
+----------------------------------+

2. Wireframe Annotations

Homepage Wireframe - Desktop (1440px)

1. Navigation Bar
   - Fixed position on scroll
   - Logo links to homepage
   - 3 main nav items
   - CTA button (right-aligned)

2. Hero Section
   - Full-width image
   - H1 headline (48px)
   - Subheading (24px)
   - Primary CTA (48px height)

3. Feature Grid
   - 3 columns on desktop
   - Icons (64x64px)
   - Hover state: scale 1.05

4. Footer
   - 4 column layout
   - Social icons (24x24px)
   - Copyright text (14px)

Best Practices

1. Start low-fidelity – Sketches, simple boxes
2. Focus on structure – Not visual design
3. Use real content – Avoid lorem ipsum
4. Annotate clearly – Explain functionality
5. Show states – Default, hover, active, error
6. Mobile-first – Start with smallest screen
7. Iterate quickly – Multiple versions
8. Test early – Validate with users

Resources

• Figma: Wireframing and prototyping
• Balsamiq: Low-fidelity wireframes
• Whimsical: Quick wireframes and flows