--- title: "Prototype" url: "https://www.insideuxdesign.com/en/glossar/prototype" language: "en" description: "What is a prototype in UX design? A plain-language explanation with an example and practical tips. Learn how to test ideas before writing costly code." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T12:48:19+02:00" --- # Prototype A prototype is an early, testable model of a product. It lets you check ideas with real people before time and money go into development. - **Buchstabe:** P UX glossary # Prototype A prototype is an early, testable model of a product. It lets you check ideas with real people before time and money go into development. Imagine a team planning an app for booking hair appointments. Before anyone writes a line of code, the team wants to know: Can people find a free slot? Do they understand how to cancel it again? That is exactly what a prototype is for: a trial version that feels like the future product but only does as much as those questions require. ## Explained simply In digital product design, a prototype plays the same role as a cardboard model or a show apartment in construction: you can try something out before the real building exists. It shows how a product could look and work, and turns an idea into something people can actually touch instead of just talk about. The Nielsen Norman Group describes a prototype, in essence, as a proposed solution to a specific design problem, which makes it a hypothesis: an assumption that still needs to be tested. The most direct way to test it is to watch people use it. ## From paper sketch to clickable mockup Prototypes differ mainly in their level of detail, known as *fidelity*. A low-fidelity prototype can be a hand-drawn sketch on paper or a simple [wireframe](https://www.insideuxdesign.com/en/glossar/wireframe). A high-fidelity prototype, on the other hand, looks almost like the finished product, with real colors, copy and working clicks, usually built in design tools like [Figma](https://www.insideuxdesign.com/en/ressourcen/figma). Fidelity doesn’t have to be equally high everywhere. A prototype can look rough but contain complete content. Or it can look polished while covering only a few click paths. Both have their advantages: rough drafts are quick to make and invite honest criticism because they clearly look unfinished. Detailed mockups show more realistically how people will behave later, but they take more time. ## An example Back to the hair salon app. In the first week, the team sketches three versions of the booking screen on paper and asks five people from other departments to “book” an appointment with them. It quickly becomes clear that a calendar view works better than a long list. Only then does the team build a clickable mockup and test it with regular customers of a salon. That test reveals that nobody can find the cancel link. Fixing it in the prototype takes a few minutes. In the finished product, it would take days. ## Why prototypes pay off Changing a prototype is far cheaper than changing finished code. Prototypes also make sure everyone on the team is talking about the same thing: a clickable mockup ends many discussions that would otherwise go in circles. And they are the basis for [usability testing](https://www.insideuxdesign.com/en/glossar/usability-testing), where you watch where people get stuck. It’s worth separating a prototype from a minimum viable product (MVP). A prototype is for learning and is often thrown away. An MVP is a first real version that people actually use. You can read more in [Minimum Viable Product (MVP): What UX Designers Should Know](https://www.insideuxdesign.com/en/blog/minimum-viable-product-mvp-what-ux-designers-should-know). ## In practice - **Question first, prototype second.** Write down what you want to find out. The question decides how detailed the prototype needs to be. - **As rough as possible, as detailed as necessary.** Paper is often enough for structure and flows. Questions about readability or animations need a more detailed mockup. - **Click through it yourself before testing.** A dead link or a missing screen throws participants off and skews your results. ## Related terms [Wireframe](https://www.insideuxdesign.com/en/glossar/wireframe), [Usability Testing](https://www.insideuxdesign.com/en/glossar/usability-testing), [Design System](https://www.insideuxdesign.com/en/glossar/design-system) ## Sources - [Kara Pernice: UX Prototypes: Low Fidelity vs. High Fidelity. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)