UX Prototyping
UX prototyping creates a testable model of a digital experience before production code is complete. The model can range from paper screens to an interactive stateful flow, depending on the question the team needs to answer.
itWeb development | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Don't Panic
Don't Panic: UX Prototyping
UX prototyping is what happens when a design question is too expensive to answer in production and too slippery to answer in a meeting. You build a deliberately limited experience, put it in front of people or stakeholders, and watch what it reveals. The point is not to make a smaller product. The point is to make uncertainty visible before the expensive machinery starts moving.
The object on the screen is less important than the question it serves. A useful question names a participant, a goal, a condition, and a failure you want to avoid. Once that exists, the rest becomes engineering of evidence: which states can the task reach, which triggers move between them, and which recovery paths need to work well enough for the session.
Think of the prototype as a state graph, a map of interface conditions and transitions. The signed-out screen is a state. An invalid-password message is another. Selecting a control is a trigger. The action after it may navigate, open an overlay, set a value, or return. The happy path is the tourist brochure; the error and recovery paths are where the border guards live.
Fidelity is not a single volume knob. Content fidelity covers labels, values, and errors. Visual fidelity covers layout and styling. Interaction fidelity covers branching and feedback. System fidelity covers browser behavior, devices, services, semantics, and assistive technology. Raise the dimension that answers the question. Leave the others low on purpose, with a note attached so nobody mistakes restraint for negligence.
The common trap is a prototype that looks more certain than it is. A polished frame can still know nothing about focus order, screen-reader output, real input, network behavior, security, performance, or data integrity. A code prototype can answer some system questions, but it does not become production code by wearing a convincing hat. Production qualities need separate engineering work.
If you read one more tab, read the Practice Reference and build the route matrix. It turns the idea into states, triggers, expected outcomes, and resets. Use the Cheatsheet when choosing fidelity and checking limits. Use the Timeline and Landscape tabs to understand why tools differ. Then test the smallest complete scenario, because the most useful prototype is the one that makes the next decision less mysterious.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://prototype-kit.service.gov.uk/docs/prototyping
Supports
- Prototype purpose, forms, selection, code advantages, and production-code boundary
- Intro, slides, cheatsheet, practice reference, quiz, links, and infographic
- https://prototype-kit.service.gov.uk/docs/
Supports
- Realistic accessible interactive prototypes and reference path
- GOV.UK Prototype Kit Landscape placement
- https://www.gov.uk/guidance/usability-testing-qualitative-studies
Supports
- Task-based qualitative testing, success criteria, facilitation, observation, limits, and iteration
- Intro, slides, cheatsheet, practice reference, quiz, and video script
- https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma
Supports
- Flow, hotspot, trigger, action, destination, overlay, and transition model
- Figma Landscape placement and quiz answers
- https://help.figma.com/hc/en-us/articles/14506587589399-Use-variables-in-prototypes
Supports
- Stored values and state changes in prototypes
- Conditional behavior quiz answer
- https://www.w3.org/WAI/fundamentals/accessibility-usability-inclusion/
Supports
- Accessibility, usability, standards, early prototypes, and involvement of people with disabilities
- Accessibility sections and quiz answer
- https://www.w3.org/WAI/standards-guidelines/wcag/
Supports
- WCAG as a shared technical standard for accessible web content
- Reference path and accessibility limits
- https://www.protopie.io/learn/docs/basic-concepts
Supports
- Object, trigger, response, variable, formula, and sensor model
- ProtoPie Landscape placement and reference rationale
- https://www.axure.com/features/prototyping
Supports
- Events, conditions, variables, dynamic panels, and adaptive views
- Axure RP Landscape placement
- https://www.uxpin.com/studio/prototyping/
Supports
- States, variables, conditions, realistic data, sharing, and user testing
- UXPin Landscape placement
- https://origami.design/
Supports
- Canvas, patch-based interactions, hardware input, import, recording, and sharing
- Awesome Links rationale and Landscape placement
- https://lottie.airbnb.tech/
Supports
- Cross-platform rendering of exported animations
- Awesome Links rationale
- https://wave.webaim.org/
Supports
- Automated and human-supported accessibility evaluation of web pages
- Awesome Links rationale
- https://github.com/sindresorhus/awesome
Supports
- Required Awesome discovery starting point
- https://github.com/ttt30ga/awesome-product-design
Supports
- Discovery of Origami Studio, Lottie, and WAVE
- Prototype and accessibility ecosystem categories
- https://www.figma.com/prototyping/
Supports
- Interactive flows, variables, conditions, media, transitions, and sharing
- Figma Landscape placement
- https://www.sketch.com/prototyping/
Supports
- Links, hotspots, overlays, scrolling areas, previews, and sharing
- Sketch Landscape placement
- https://balsamiq.com/
Supports
- Deliberately low-fidelity wireframing and linked screens
- Balsamiq Landscape placement
- https://www.sketch.com/blog/create-symbols-sketch/
Supports
- 2014 reusable Symbols milestone
- https://www.figma.com/blog/design-meet-the-internet/
Supports
- 2015 Figma preview milestone
- https://blog.adobe.com/en/publish/2016/03/14/experience-matters-adobe-xd
Supports
- 2016 Adobe XD public preview milestone
- https://www.figma.com/blog/multiplayer-editing-in-figma/
Supports
- 2016 public signup and multiplayer milestone
- https://www.sketch.com/blog/prototyping-libraries-on-sketch-cloud-and-an-official-ios-ui-kit-in-sketch-49/
Supports
- 2018 built-in prototyping milestone
- https://www.figma.com/blog/announcing-auto-layout/
Supports
- 2019 content-responsive layout milestone
- https://www.figma.com/blog/bridging-design-and-code-with-variants/
Supports
- 2020 interactive component variants milestone
- https://www.figma.com/blog/config-2023-recap/
Supports
- 2023 variables and conditional prototyping milestone
