wireframe-prototyping

SKILL.md

Wireframe Prototyping

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

Overview

Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.

When to Use

Early concept validation

Stakeholder alignment

User testing and feedback

Developer handoff

Feature exploration

UX problem-solving

Rapid iteration

Quick Start

Minimal working example:

Wireframe Principles:

Low Fidelity (Sketches):
  Tools: Paper, whiteboard, Balsamiq
  Time: 30 minutes - 2 hours
  Detail: Basic layout, no colors/fonts
  Best For: Brainstorming, exploration
  Cost: Free

Medium Fidelity:
  Tools: Figma, Sketch, Adobe XD
  Time: 2-8 hours
  Detail: Layout, content, basic interaction
  Best For: Team alignment, feedback
  Cost: Low

High Fidelity:
  Tools: Figma, Framer, web dev tools
  Time: 8+ hours
  Detail: Visual design, interactions, animations
  Best For: Developer handoff, user testing
  Cost: Medium

---
## Wireframe Components
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide
Contents

Prototyping Tools & Techniques
Prototyping Tools & Techniques

Wireframe Examples
Wireframe Examples

Prototype Testing
Prototype Testing

Best Practices

✅ DO

Start with low-fidelity sketches

Get feedback early and often

Test with real users

Iterate based on feedback

Use consistent grids and spacing

Document interaction flows

Include edge cases (empty states, errors)

Create mobile-first wireframes

Share prototypes for collaboration

Keep wireframes simple and focused

❌ DON'T

Jump directly to high-fidelity

Over-design before validation

Ignore mobile/responsive needs

Create wireframes without user input

Leave interactions undefined

Make wireframes too detailed

Test only with team members

Ignore accessibility

Lock into designs too early

Create unrealistic user flows

26:[