Wireframe
Definition
A wireframe is a schematic or structural diagram of a screen or user interface that shows the layout, content hierarchy, and functionality — without colors, typography, or final visual design — used to define structure before investing in detailed design.
Wireframes are the architectural drawings of digital products. They answer: what goes on this screen, in what order, and what happens when the user interacts with it? They don't answer: what does it look like?
The value of wireframing is in the questions it forces early. Where does the primary action go? What content is above the fold? What happens on the error state? What does the empty state look like? Answering these questions in wireframes — before anyone runs a design sprint or opens Figma with full production fidelity — is cheaper by an order of magnitude than answering them during development.
Wireframes exist on a fidelity spectrum:
Sketch-level — hand-drawn on paper or a whiteboard. Rough boxes and annotations. Fast to produce, fast to discard. Good for ideation and early alignment.
Low-fidelity digital — simple black-and-white wireframes in Figma, Balsamiq, or similar. More precise than sketches, still obviously not the final design.
High-fidelity wireframe — detailed structure with real content, real labels, real interactions — but still grayscale. Sometimes called an annotated wireframe.
Wireframes are distinct from prototypes. A wireframe is a static document (or a set of static documents). A prototype simulates interaction.
The classic wireframing tool is a whiteboard. Teams sketch screens, draw arrows between states, and annotate key interactions. BoardSnap captures those whiteboard wireframing sessions as structured summaries — preserving the key decisions about information architecture and interaction patterns before they're refined in a design tool.
Examples
- A whiteboard sketch of a new onboarding screen with boxes for content areas and arrows to the next state
- A low-fidelity Figma wireframe of a project creation flow with labeled components and interaction notes
- A hand-drawn wireframe for a mobile action item list reviewed in a product critique before design begins
Snap a wireframe. Ship its actions.
BoardSnap turns any whiteboard — including this one — into a summary and action plan.