A wireframe is a low-fidelity sketch of a screen showing layout, hierarchy, and core functionality, used to align on structure before investing in polish. It deliberately strips out real typography, color, imagery, and microinteractions. The deliberate ugliness is the point: a polished mockup invites feedback on visual taste; a wireframe forces feedback on the structure of the experience.
The fidelity spectrum runs roughly: paper sketches (lowest, drawn freehand on actual paper or whiteboard), low-fidelity digital wireframes (grayscale boxes-and-labels in Balsamiq, Whimsical, or Figma), high-fidelity wireframes (more refined layout but still no real visuals), mockups (full visual design but typically static), and prototypes (inter...