# Prototypes

> A prototype is an interactive simulation of a final product used to test and validate design concepts before development. Unlike mockups (which are static), prototypes are "clickable" and allow users to experience the flow of an application.

*Tags: ux, artifact, process, junior, mid-level*

---


> [!info] Quick Definition
> A prototype is an interactive simulation of a final product used to test and validate design concepts before development. Unlike mockups (which are static), prototypes are "clickable" and allow users to experience the flow of an application.


## What are Prototypes?

If a mockup is the color model of a house, a prototype is a virtual guided tour through that model. It allows you to open doors, turn on lights, and move between rooms to understand what it feels like to live in it.

A prototype simulates user interaction with the interface. Its fidelity can vary enormously:
- **Low-fidelity prototype (on paper):** It can be as simple as a series of paper sketches that a "human computer" swaps out as the user "clicks" on the drawn buttons.
- **Medium-fidelity prototype (clickable):** Generally created from digital wireframes, connecting screens to simulate basic navigation.
- **High-fidelity prototype (interactive):** Created from mockups, this type of prototype looks and feels very similar to the final product, including transitions, animations, and micro-interactions.

## Why are they important?

- **They validate design with real users:** They are the primary tool for [[Usability Testing]]. They allow you to observe how users interact with the design before writing a single line of code.
- **They save development costs:** Discovering that a flow is confusing during the prototyping phase is 100 times cheaper to fix than when the product has already been programmed.
- **They improve communication:** An interactive prototype communicates a design idea much more clearly and effectively than a static document. It allows stakeholders to "feel" the experience.
- **They enable rapid iteration:** They can be created and modified in a matter of hours or days, facilitating the exploration of multiple design solutions.

## How are they made?

The process is almost always done in design tools like Figma, Sketch, or Adobe XD.

1.  **Define the scope:** What do you want to test with this prototype? You don't need to make everything interactive. Focus on the key user flow you need to validate. Example: "Test the checkout process from cart to purchase confirmation."
2.  **Create the screens:** You need to have the [Wireframes](/en/artifacts/wireframes/) or [Mockups](/en/artifacts/mockups/) ready for all screens that are part of that flow.
3.  **Connect the elements (Hotspots):** In your design tool, select an element that should be interactive (e.g., a "Buy Now" button).
4.  **Define the interaction and destination:** Drag a connector from that element to the destination screen. Define the interaction type (e.g., "On click") and the transition (e.g., "Instant," "Slide left").
5.  **Repeat the process:** Continue connecting all interactive elements needed to complete the flow.
6.  **Test the prototype:** Before showing it to anyone, click through it yourself to make sure all connections work as expected.

## Mentor Tips

- **Prototype with a purpose:** Always be clear about what research question you want to answer with your prototype. This will help you avoid wasting time making every part of the design interactive.
- **The right fidelity for the right moment:** Use low-fidelity prototypes in early stages to validate broad concepts. Use high-fidelity ones later to test interface details and usability.
- **Don't seek perfection:** A prototype is not the final product. It's fine if some things don't work or if there are dead ends, as long as you can test what you need to.
- **Guide the user, but not too much:** During a test, if the user gets stuck, you can tell them "Imagine this part works and takes you here." The goal is to get feedback on the main flow.

## Resources and Tools

- **Prototyping Tools:**
    - **[Figma](https://www.figma.com/):** The most popular. It allows designing and prototyping in the same tool very smoothly.
    - **[ProtoPie](https://www.protopie.io/):** For very high-fidelity prototypes with complex logic, variables, and device sensor access.
    - **[Marvel App](https://marvelapp.com/):** A simple and quick option for creating prototypes from images or sketches.
- **Articles and Guides:**
    - **[Prototyping 101](https://www.nngroup.com/articles/prototyping-101/)** - Nielsen Norman Group
    - **[A Guide to Prototyping in UX Design](https://careerfoundry.com/en/blog/ux-design/prototyping-guide/)** - CareerFoundry


---

Source: https://www.fernandoux.com/en/wiki/artifacts/prototypes/