Wireframe

Origin & evolution

The word is borrowed from computer-aided design and 3D modelling, where a "wireframe" shows an object as line art, its edges visible as if built from wires, with no surfaces or shading. The visual idea of a structural skeleton without finish carried directly into screen design.

The term migrated to interface work in the early-to-mid 1990s as the web arrived. The precise coinage is disputed; one frequently cited account is Matthew Van Horn's recollection of separating page structure from look and feel at Snickelways Interactive around 1993-94, explicitly by analogy to the 3D wireframe model that shows shape without shading or texture. The honest reading is that the practice emerged across several studios at once as designers needed a cheap artefact to debate layout.

Thinking since has organised around fidelity. A low-fidelity wireframe is grey boxes and placeholder text, fast to draw and cheap to throw away. High-fidelity wireframes carry real content and accurate spacing, edging toward a mockup. The discipline's working principle is to keep fidelity low while the questions are about structure, and to raise it only once those questions are settled, because high fidelity invites feedback on aesthetics that the artefact was never meant to invite.

How it works in practice

A team is designing a checkout. Before opening the visual design tool in earnest, a designer sketches six low-fidelity wireframes for the payment step in an afternoon: one with a single long form, one split across steps, one with an express path on top. In a thirty-minute review the team kills four. The two survivors raise a real question, whether to show the order summary inline or in a collapsible panel, which becomes a design_question💭Design QuestionExperience DesignAn open design problem to exploreView reference → to resolve with a quick test. No pixels were polished, no engineer estimated anything, and the expensive disagreement surfaced while it was still cheap to change.

Wireframe vs. its neighbours

• Mockup adds the visual layer: real colour, type, imagery, brand. A wireframe answers "what goes where and why"; a mockup answers "what does it look like". Raising a wireframe's fidelity all the way turns it into a mockup, which is why the two blur in practice.
• Prototype📱PrototypeExperience DesignAn interactive mockup for testingView reference → is interactive. A wireframe is static; a prototype lets a user click through and reveals flow and timing problems a still image hides. In the graph a prototype📱PrototypeExperience DesignAn interactive mockup for testingView reference → simulates screens, while a wireframe specifies one.
• Screen is the durable artefact in the product: a real route users reach. A wireframe is a proposal for a screen, an early draft that the screen may or may not adopt.
• Design concept🌱Design ConceptExperience DesignA possible design direction or approachView reference → is a broader exploratory idea, often spanning several screens or a whole approach. A wireframe is one concrete way of sketching part of a concept.

In the graph

In the Unified Product Graph, wireframe▭WireframeExperience DesignA low-fidelity structural layout is a leaf in the Experience Design domain of the Experience, Design & Brand region, sitting late in the creation sequence after journeys, screens, and flows are roughed in. Its key edge is wireframe_specifies_screenWireframespecifiesScreencross-domain: a wireframe is a proposal pointed at a durable screen. It also carries wireframe_specifies_featureWireframespecifiesFeaturecross-domain, which crosses sideways into Product Delivery and lets a feature⭐FeatureProduct SpecificationA product capability or featureView reference → trace to the sketch that first explored it. Inbound, a design_concept🌱Design ConceptExperience DesignA possible design direction or approachView reference → reaches it through design_concept_sketched_in_wireframeDesign Conceptsketched inWireframehierarchy. That placement keeps the wireframe honest as a draft, connected to the screen it proposes and the concept it serves, never floating as decoration.