Mockups & Wireframes
Wireframes, Mockups, and Prototypes: The Fidelity Spectrum
Understand the full fidelity spectrum from paper sketch to production and learn exactly when to invest in each level.
The Fidelity Spectrum
Design artifacts exist on a spectrum from lowest fidelity (fastest, cheapest, least detailed) to highest (slowest, most expensive, most accurate). Choosing the wrong fidelity for your stage wastes time and money.
Paper Sketch (minutes): A pen on paper or whiteboard drawing. Used for brainstorming and thinking through layout. The goal is to externalize ideas quickly, not to communicate them to others. No precision required.
Wireframe (hours): A low-fidelity digital representation focusing on layout, structure, and content hierarchy. Gray boxes for images. Placeholder text. No color, no final typography. Communicates information architecture and component placement.
Mockup (days): A high-fidelity static design with real colors, real typography, real content, and polished visual design. Looks exactly like the final product but does not function. Used for stakeholder review, developer handoff, and brand alignment.
Prototype (days-weeks): An interactive design that simulates real behavior. Users can click through it. Used for user testing, validating interaction design, and demonstrating complex flows. Can be built in Figma (link screens together) or with code.
Production (weeks-months): The actual working software built in code.
When to Use Each Level
| Level | Use When | Skip When |
|---|---|---|
| Sketch | Initial brainstorming, quick idea validation | You need to communicate to others |
| Wireframe | Validating layout, developer communication, early feedback | Feature is trivial or already well-understood |
| Mockup | Stakeholder review, investor demos, developer handoff, brand-sensitive features | Feature may be cut, mockup would be wasted |
| Prototype | User testing, complex interaction validation, showcasing animations | Simple linear flows that need no interaction testing |
The over-investment trap: Do not create pixel-perfect mockups for features that have not been validated conceptually. Do not build click-through prototypes when a wireframe communicates the intent clearly. Match fidelity to your current level of certainty about what you are building.
The Same Login Screen at Four Fidelity Levels
Sketch: Box at top = logo area. Two horizontal lines = inputs. Rectangle below = button. "Login" written above.
Wireframe: 400px centered container. "Email" label, rectangle input box. "Password" label, rectangle input box. "Remember me" checkbox. Filled rectangle button labeled "LOG IN". Link labeled "Forgot password?" below.
Mockup: #0A0A0F background. 400px card with subtle border and shadow. "DevForge Academy" logo, Inter font. Email input with #1A1A2E background, amber focus ring. Password input with visibility toggle. "Log In" button with amber gradient. "Forgot password?" in muted text. Social login section below divider.
Prototype: All of the above, plus: clicking "Log In" animates a spinner, then transitions to dashboard. "Forgot password?" link opens a modal. Mobile version shows responsive stacked layout.
Key Takeaways
- The fidelity spectrum runs: sketch → wireframe → mockup → prototype → production
- Match fidelity to your current level of certainty — over-investing in fidelity before decisions are made wastes time
- Wireframes communicate layout and structure without visual design investment
- Mockups are used for stakeholder review, developer handoff, and brand validation
- Prototypes add interactivity for user testing — only build them when interaction design needs validation
Example
# Fidelity Decision Guide
Feature complexity: simple (1-2 screens) vs complex (5+ screens)
Certainty level: unknown (exploring) vs known (validated)
Audience: developer vs stakeholder vs user test
Decision matrix:
exploring + developer → sketch or quick wireframe
exploring + stakeholder → wireframe (don't invest in mockup yet)
validated + developer → mockup or design spec
validated + stakeholder → polished mockup
user testing planned → prototype (interactive Figma or coded)
brand-critical launch → pixel-perfect mockup + prototype
# Questions before investing in higher fidelity
1. Is this feature definitely being built?
2. Do we know what it should do (not just what it looks like)?
3. Will the audience understand wireframe fidelity?
4. Is interaction design the uncertainty, or just visual design?