PS
Primitive Softech
Get a Free Quote
Glossary · Web Design

What is a Wireframe?

A Wireframe is a bare-bones layout sketch of a webpage — boxes, lines and placeholder text showing where the header, navigation, images and content blocks will sit, with no colors, fonts or final images involved yet.

Why Wireframes Come First

Wireframing forces a conversation about structure and priority before anyone gets attached to colors or fonts. It's far cheaper to move a box around on a wireframe than to redesign a fully-built page.

Low-Fidelity vs High-Fidelity Wireframes

Low-fidelity wireframes are quick, rough sketches used early to explore ideas. High-fidelity wireframes are more precise, closer to final spacing and sizing, used just before visual design begins.

What a Wireframe Typically Shows

  • Header and navigation placement
  • Content block hierarchy — what appears first, second, third
  • Placeholder text length and image positions
  • Call-to-action button placement
"A wireframe answers 'does this make sense?' before anyone asks 'does this look good?'"

Want help putting this into practice? Our Website Design team can walk you through it.