Wireframe

Definition

A simple layout that shows structure and content priority without final visuals.

Advanced

Used to align stakeholders on hierarchy and flows before adding branding and micro-interactions. Focuses on copy blocks, navigation, and key actions.

Why it matters

Speeds alignment and reduces rework later in design and development.

Use cases

• Service page structure
• Dashboard layout
• Checkout flow mapping

Metrics

• Time to stakeholder sign-off
• Iterations before moving to high fidelity

Issues

• Treating wireframes as final visual design
• Adding polish too early, which distracts from the structure

Example

Greyscale layouts with boxes for hero, benefits, proof, and CTA, annotated with content goals.