12 Competencies of UX Design No. 7: Interface Design and Prototyping

Prototyping in UX design is the process of turning ideas into concrete, testable representations of a digital interface or workflow. These can range from rough hand-drawn sketches to fully interactive digital models. The goal is always the same: show rather than tell what works, what doesn't, and why.

This is the seventh installment of our series on the 12 Competencies of UX Design.

What Is Prototyping in UX Design?

Prototyping is how UX designers and CX consultants make digital experiences tangible before they're built.

Think of it like architecture. Changi International Airport in Singapore has held the title of world's best airport for nearly a decade. It handles over 85 million passengers a year across four terminals and two runways. But before any of that existed, Changi was just a desolate island covered in swampland. It only became the modern marvel it is today after dozens of architects spent years researching, sketching, refining, blueprinting, and modeling the structure.

UX designers follow the same process. Illustrating an interaction, user interface, or workflow through prototyping is how great digital experiences get built. And it's a critical part of UX success.

What Questions Does Prototyping Help Answer?

Before a UX designer puts pen to paper, they should already have established their "why," defined their vision for the final outcome, and identified their target audience's needs through empathy and research. Prototyping takes that foundation one step further by turning ideas and concepts into concrete examples that both designers and users can react to.

Regardless of form, prototypes help answer questions like:

• What might the ideal solution look, sound, and feel like?
• How might it work?
• Are we sure we're solving the right problem?
• How will this idea meet needs and relieve pain points?
• Is this solution technically feasible?

What Are the Three Types of Prototypes?

Prototypes can be broken down in many ways, but for our purposes there are three main categories: low-fidelity, high-fidelity, and interactive.

What Are Low-Fidelity Prototypes?

Low-fidelity prototypes are static, super-simplified representations of a final product or interface used in the earlier stages of UX design. They're often a series of black-and-white sketches that broadly illustrate a particular workflow.

Low-fidelity prototypes aren't designed to scale. They don't include brand colors or imagery, and they only include key elements of written content. What they do include are general representations of interaction and communication elements like content hierarchy, focus of interaction, and supporting pieces like buttons, titles, or menus, along with elements that show how a user might move through a workflow.

Low-fidelity prototypes are great for:

• Low-stakes brainstorming and ideation
• Getting alignment around broad design concepts or structures
• Narrowing down big-picture problems and solutions
• Rapid experimentation and testing of high-level functionality
• Establishing an interface's overall context, structure, and flow

What Are High-Fidelity Prototypes?

High-fidelity prototypes are intended to more closely represent a refined product or interface. They're usually designed to scale, include brand colors and imagery, and are most often in a digital format.

High-fidelity prototypes typically come after multiple iterations of low-fidelity prototypes that have been reviewed, refined, and adjusted by multiple stakeholders.

High-fidelity prototypes are great for:

• User testing and feedback
• More detailed review of design elements and imagery
• Determining an experience's holistic look and feel
• Integrating brand identity, voice, and tone
• Later-stage review and approval with stakeholders and end-users
• Refining specific interactions or design elements

What Are Interactive Prototypes?

Interactive prototypes can be low-fidelity or high-fidelity, but they all have one important thing in common: they respond to the actions of a user. That responsiveness can be very simple, like a clickable wireframe, or very complex, like a coded prototype, depending on what needs to be tested and why.

Interactive prototypes are usually used to identify possible points of friction in an interaction or workflow. They may also be used to give stakeholders a sense of how well certain interactions are performing. Ultimately, interactive prototypes are a vital tool when it comes to interaction design and testing.

Interactive prototypes are great for:

• Moderated testing with users
• Streamlining the development process
• Refining a particular interaction within a workflow
• Confirming a common vision among users and stakeholders

How Do You Get Prototyping Right?

A common misconception among novice UX designers is that every UX design project requires the same prototype deliverables. That couldn't be further from the truth.

Prototypes are never final deliverables, even when they're high-fidelity. Instead, they're tools that help designers and stakeholders make better decisions about users and the experiences they enjoy.

That's why at Drawbackwards, we see prototyping as just one small component of our Design Thinking Process. That process first establishes a problem we aim to solve through research, fosters empathy for those interacting with the experience being created, and then defines that problem before any design occurs.

While many novice UX designers will start building prototypes almost immediately, savvy UX professionals know that any design work should be preceded by research and empathy. Otherwise, prototypes end up guided by designers' and stakeholders' personal preferences, not by what users and the business actually want and need.

Whether it's hand-drawn sketches or fully interactive coded interfaces, prototypes help UX designers reduce friction and create more meaningful experiences for their audience. That's what makes prototyping and interface design such a critical UX competency, no matter how you go about it.

FAQ

What is the difference between low-fidelity and high-fidelity prototypes? Low-fidelity prototypes are simple, often hand-drawn representations used early in the design process to explore broad concepts. High-fidelity prototypes are more refined, usually digital, and include brand elements like color and imagery. They're used later in the process for detailed feedback and stakeholder approval.

When should you use an interactive prototype? Use an interactive prototype when you need to test how a user actually moves through a workflow or interaction. They're especially useful for identifying friction points and confirming that an experience performs the way stakeholders and users expect.

Do you always need all three types of prototypes for a UX project? No. The type of prototype you need depends on the project, the stage of design, and what questions you're trying to answer. There's no single set of required deliverables for every project.

Should prototyping come before or after user research? After. Prototyping without prior research and empathy work means your designs will reflect personal preferences rather than real user needs. Research and problem definition should always come first.

Are prototypes ever the final deliverable? No. Prototypes, even high-fidelity ones, are decision-making tools, not finished products. They exist to help teams make better, more informed choices before development begins.