Little Glossary · Brand and product
Wireframe
A wireframe is a schematic of a screen or page that shows its structure, content hierarchy and the placement of elements, without the final visual design: no colors, final images or brand typography.
Levels of fidelity
- Low fidelity: hand sketches or grey boxes. Good for exploring alternatives quickly.
- Mid fidelity: with real or approximate copy, proportions and recognizable components. The most common format to validate a page.
- High fidelity: very close to the final design. From here on it's usually called a mockup.
Wireframe, mockup and prototype
- Wireframe: structure and content.
- Mockup: final visual appearance, static.
- Prototype: an interactive version, at any fidelity, that you can click through to follow a flow. It's what you use to test with users.
What a wireframe decides
- Which sections the page has and in what order.
- What message each section carries and how much text fits.
- Where CTAs and social proof go.
- How it adapts to mobile.
- Which elements are interactive and what happens when you use them.
Good practices
- Work with real content, or as close to it as possible. Placeholder text (lorem ipsum) hides problems: headlines that don't fit, sections with nothing to say.
- Think mobile from the start, not at the end.
- Keep it grey so the conversation focuses on structure and content, not colors.
- Annotate the behavior you can't see: states, validations, dynamic content.
Tools
Pen and paper, Figma, Balsamiq, Whimsical or any diagramming tool. The tool matters less than doing it before designing.
Related terms
At Little we design and build for B2B tech companies for a monthly fee. See how it works →