Wireframe
A wireframe is a low-fidelity sketch of a digital interface that shows layout, structure, and content placement, intentionally stripped of color, typography, and visual polish.
In depth
Wireframes sit between user flows and high-fidelity mockups in the design pipeline. The point of a wireframe is to defer aesthetic decisions and force critique of layout and information hierarchy. Boxes, lines, and grayscale fills do all the work.
Common variants include hand-drawn wireframes (best for early iteration), wireframe libraries inside Figma/Sketch, and lightweight tools optimized purely for wireframing. Higher-fidelity intermediate stages — 'mid-fi' wireframes — add light typography and basic color.
OpenCharts supports wireframing via the whiteboard's hand-drawn aesthetic and shape library, plus an Image Canvas for AI-generated mockups when fidelity needs to step up.
Also known as
Want to put this concept to work in OpenCharts?
Sketch a wireframeRelated terms
User flow
A user flow is a diagram that maps the steps a user takes through a product or service to accomplish a specific goal, including screens, actions, and decision points.
Customer journey map
A customer journey map is a visual diagram that depicts a customer's interactions with a product or service over time, including their actions, thoughts, emotions, and pain points at each stage.
Sitemap
A sitemap is a hierarchical diagram of a website's pages and the navigation between them, used in information architecture, content audits, and SEO planning.