Prototype
A prototype is an interactive simulation of a product that allows users to click, navigate, and experience flows. It validates usability and behavior before development begins.
§ 1 Definition
A prototype is an early, interactive model of a product used to test and validate design concepts, user flows, and interactions before building the final version. Prototypes range from low-fidelity click-through wireframes to high-fidelity simulations that closely match the final product. Unlike mockups (static visuals) and wireframes (structural blueprints), prototypes are functional: users can click buttons, navigate between screens, fill in forms, and experience transitions. The goal of a prototype is to learn what works before committing code.
§ 2 Fidelity Levels of Prototypes
Low-fidelity prototypes use wireframe-level graphics linked together to simulate navigation. They are fast to build and are ideal for testing flow logic and information architecture. Mid-fidelity prototypes add more accurate layout and spacing but may skip final colors and imagery. High-fidelity prototypes use polished mockup-level visuals with realistic interactions, animations, and transitions. The fidelity level depends on what you are testing: use low fidelity to test structure, high fidelity to test visual interaction and brand feel.
§ 3 Prototyping Tools and Methods
Figma has built-in prototyping with linking, transitions, overlays, and conditional logic. Framer offers higher-fidelity animations. Axure RP supports complex conditional logic and dynamic data for advanced prototypes. InVision (now partially absorbed) pioneered the click-through prototype format. Paper prototyping (watching users interact with hand-drawn screens) is still effective for very early testing. The best tool is the one closest to where your design lives, which for most teams today is Figma.
§ 4 Why Prototypes Beat Documents
A 50-page spec document leaves room for interpretation. A prototype does not. Stakeholders can click through a prototype and experience the flow rather than reading about it. Developers can see intended behavior directly rather than parsing written interaction descriptions. User testers can interact naturally rather than imagining how a static mockup might respond. A prototype is worth a thousand words of documentation.
§ 5 Common questions
- Q. When should I prototype vs just build it in code?
- A. Prototype when you need to validate multiple approaches quickly or when the development cost is high. Prototyping in Figma takes hours. Building in code takes days and introduces technical debt with every iteration. Prototype to learn, build to ship. If you already know exactly what to build, skip the prototype.
- Q. How much interactivity should a prototype include?
- A. Enough to test your assumptions. If testing navigation flow, link the major screens but do not sweat micro-transitions. If testing a specific interaction (like a drag-to-reorder list), build that interaction faithfully. Only add the fidelity that answers your current questions. Extra interactivity costs time without yielding extra insight.
- A prototype is an interactive simulation that validates behavior and usability before development.
- Fidelity ranges from low (click-through wireframes) to high (polished, animated simulations).
- Prototypes reduce misinterpretation better than specs or documentation.
- Build prototypes to learn, not to polish. Add only the fidelity needed to answer your questions.
- Figma, Framer, and Axure are the primary prototyping tools.
We prototype to validate before we build. From low-fi flows to high-fi simulations, we test assumptions early. See our Creative Services or get in touch.
Get in touchA prototype is an interactive simulation of a product that allows users to click, navigate, and experience flows. It validates usability and behavior before development begins.
Category: Design (also: UX)
Author: Atomic Glue Editorial Team
## Definition
A prototype is an early, interactive model of a product used to test and validate design concepts, user flows, and interactions before building the final version. Prototypes range from low-fidelity click-through wireframes to high-fidelity simulations that closely match the final product. Unlike mockups (static visuals) and wireframes (structural blueprints), prototypes are functional: users can click buttons, navigate between screens, fill in forms, and experience transitions. The goal of a prototype is to learn what works before committing code.
## Fidelity Levels of Prototypes
Low-fidelity prototypes use wireframe-level graphics linked together to simulate navigation. They are fast to build and are ideal for testing flow logic and information architecture. Mid-fidelity prototypes add more accurate layout and spacing but may skip final colors and imagery. High-fidelity prototypes use polished mockup-level visuals with realistic interactions, animations, and transitions. The fidelity level depends on what you are testing: use low fidelity to test structure, high fidelity to test visual interaction and brand feel.
## Prototyping Tools and Methods
Figma has built-in prototyping with linking, transitions, overlays, and conditional logic. Framer offers higher-fidelity animations. Axure RP supports complex conditional logic and dynamic data for advanced prototypes. InVision (now partially absorbed) pioneered the click-through prototype format. Paper prototyping (watching users interact with hand-drawn screens) is still effective for very early testing. The best tool is the one closest to where your design lives, which for most teams today is Figma.
## Why Prototypes Beat Documents
A 50-page spec document leaves room for interpretation. A prototype does not. Stakeholders can click through a prototype and experience the flow rather than reading about it. Developers can see intended behavior directly rather than parsing written interaction descriptions. User testers can interact naturally rather than imagining how a static mockup might respond. A prototype is worth a thousand words of documentation.
## Common questions
Q: When should I prototype vs just build it in code?
A: Prototype when you need to validate multiple approaches quickly or when the development cost is high. Prototyping in Figma takes hours. Building in code takes days and introduces technical debt with every iteration. Prototype to learn, build to ship. If you already know exactly what to build, skip the prototype.
Q: How much interactivity should a prototype include?
A: Enough to test your assumptions. If testing navigation flow, link the major screens but do not sweat micro-transitions. If testing a specific interaction (like a drag-to-reorder list), build that interaction faithfully. Only add the fidelity that answers your current questions. Extra interactivity costs time without yielding extra insight.
## Key takeaways
- A prototype is an interactive simulation that validates behavior and usability before development.
- Fidelity ranges from low (click-through wireframes) to high (polished, animated simulations).
- Prototypes reduce misinterpretation better than specs or documentation.
- Build prototypes to learn, not to polish. Add only the fidelity needed to answer your questions.
- Figma, Framer, and Axure are the primary prototyping tools.
## Related entries
- [Wireframe](atomicglue.co/glossary/wireframe)
- [Mockup](atomicglue.co/glossary/mockup)
- [Figma](atomicglue.co/glossary/figma)
- [Usability Testing](atomicglue.co/glossary/usability-testing)
- [Design Sprint](atomicglue.co/glossary/design-sprint)
Last updated July 2026. Permalink: atomicglue.co/glossary/prototype