Wireframe
A low-fidelity visual guide representing the skeletal structure and layout of a web page.
Full definition
A wireframe is a simplified, black-and-white (or greyscale) layout diagram that shows the structure of a web page without visual design elements like colour, typography, or imagery. Wireframes focus on: content placement, navigation structure, functionality, user flow, and hierarchy of information. They are typically created early in the design process to establish structure before committing to visual design. Tools commonly used for wireframing include Figma, Balsamiq, Sketch, and even pen and paper. Wireframes enable rapid iteration — it's far faster to move boxes around in a wireframe than to redesign a fully designed mockup.
Real-world example
Before designing a new checkout flow, a UX designer creates wireframes showing 3 different approaches to payment form layout and navigation structure — allowing the team to evaluate and choose a direction in a workshop before any design work begins.
Related terms
The portion of a web page visible without scrolling, immediately upon page load.
Read definitionThe prominent introductory section at the top of a webpage, typically containing the primary headline, subheadline, and call to action.
Read definitionA standalone web page designed with a single focused objective — typically to convert visitors from a specific ad or campaign.
Read definitionA button, link, or instruction that directs users to take a specific desired action.
Read definitionReady to apply this to your business?
Build a custom digital marketing proposal in 60 seconds. We scope the right strategy for your market, industry, and growth goals.
Build my proposal