{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is the difference between a wireframe and a mockup?", "acceptedAnswer": { "@type": "Answer", "text": "A wireframe is structural and low-fi; a mockup is visually complete but static." } }, { "@type": "Question", "name": "What tools are used for wireframing?", "acceptedAnswer": { "@type": "Answer", "text": "Figma, Sketch, Balsamiq, and even pen and paper for early-stage ideation." } }, { "@type": "Question", "name": "Should clients approve wireframes before design?", "acceptedAnswer": { "@type": "Answer", "text": "Yes — wireframe approval prevents costly redesigns at the high-fidelity stage." } } ] }
Definition

What Is a Wireframe in Web Design?

A low-fidelity, schematic layout of a webpage showing structure, content placement, and user flow — without visual design, colour, or branding.

Related Terms

Prototype

Figma

UX

Information Architecture

Design System

Example

Before designing a new SaaS homepage in Figma, Reload Mode creates grayscale wireframes to validate content structure with the client.

Synonyms:

Lo-fi mockup, Sketch, Page blueprint

Acronyms:

-