Wireframing
Sketching the low-fidelity skeleton of a screen — layout, content blocks, and hierarchy — before any visual styling is applied.
A wireframe is a stripped-back blueprint of a screen: boxes, labels, and placement with no color, imagery, or final type. Working in grayscale on purpose keeps the conversation on structure and priority — what goes where, and what matters most — before anyone argues about shades of blue.
Wireframes sit between the abstract (user flows, IA) and the concrete (mockups, prototypes). They are cheap to change, which is exactly the point: it is far better to move a box in a wireframe than to rebuild a polished screen.
Related terms
PrototypingBuilding an interactive, clickable model of a product so a flow can be experienced and tested before it is engineered.MockupA high-fidelity, static representation of a screen showing the final visual design — real colors, type, and content — but without interactivity.Information ArchitectureThe structural design of a product's content and navigation — how information is organized, labeled, and grouped so people can find it.User FlowA map of the sequence of steps and decisions a user moves through to complete a task, from entry point to goal.