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

• Start low-fidelity - Sketches, simple boxes

• Focus on structure - Not visual design

• Use real content - Avoid lorem ipsum

• Annotate clearly - Explain functionality

• Show states - Default, hover, active, error

• Mobile-first - Start with smallest screen

• Iterate quickly - Multiple versions

• Test early - Validate with users

Resources

• Figma: Wireframing and prototyping

• Balsamiq: Low-fidelity wireframes

• Whimsical: Quick wireframes and flows