openskills.info
Course Preview

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

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