Prototyping

Your constantly-updated definition of Prototyping and collection of videos and articles
380 shares

What is Prototyping?

Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users. With prototypes, you can refine and validate your designs so your brand can release the right products.

Show Hide video transcript
  1. Transcript loading…

“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long.”

— Tim Brown, CEO & President of IDEO

Discover how prototyping can help you access your users to fine-tune ideal products.

Show Hide video transcript
  1. Transcript loading…

Remarkable Reasons for Prototyping

Prototyping is the fourth phase of both design thinking and design sprints. It’s an essential part of user experience (UX) design that usually comes after ideation, where you/your team have created and selected ideas that can solve users’ needs. In prototyping, you craft a simple experimental model of your proposed product so you can check how well it matches what users want through the feedback they give. You should consider prototyping from early on—using paper prototyping, if appropriate—so the feedback you gather from users can help guide development.

Show Hide video transcript
  1. Transcript loading…

The advantages of prototyping are that you:

  1. Have a solid foundation from which to ideate towards improvements—giving all stakeholders a clear picture of the potential benefits, risks and costs associated with where a prototype might lead.

  2. Can adapt changes early—thereby avoiding commitment to a single, falsely-ideal version, getting stuck on local maxima of UX and later incurring heavy costs due to oversights.

  3. Show the prototype to your users so they can give you their feedback to help pinpoint which elements/variants work best and whether an overhaul is required.

  4. Have a tool to experiment with associated parts of the users’ needs and problems—therefore, you can get insights into less-obvious areas of the users’ world (e.g., you notice them using it for additional purposes or spot unforeseen accessibility issues such as challenges to mobile use).

  5. Provide a sense of ownership to all concerned stakeholders—therefore fostering emotional investment in the product’s ultimate success.

  6. Improve time-to-market by minimizing the number of errors to correct before product release.

Prototyping can help catch potentially costly errors well in advance.

Low-Fidelity vs. High-Fidelity Prototyping

Fidelity refers to the level of detail and functionality you include in your prototype. Usually, this will depend on your product’s development stage. You can construct one that gives a wide view of the entire system or subsystem (called a horizontal prototype – e.g., an entire website) or one that gives a detailed view of just one feature (a vertical prototype – e.g., a checkout process). The level of fidelity you choose should be appropriate for presenting to users in user testing so they can give focused feedback. Consider the differences:

  • Low-fidelity

    • Example: Paper prototypes

    • Pros: Fast and cheap; disposable; easy to make changes and test new iterations; allow a quick overall view of the product; anyone can produce them; encourage design thinking since prototypes are visibly not finalized.

    • Cons: Lack of realism, so users might have a hard time giving feedback; hard to apply results from crude early versions; may be too basic to reflect the user experience of the finished product; can oversimplify complex issues; lack of interactivity deprives users of direct control; users must imagine how they would use the product.

© Interaction Design Foundation, CC BY-SA 4.0

  • High-fidelity

    • Example: Digital prototypes created on software such as Sketch or Adobe XD

    • Pros: Engaging—all stakeholders have the vision realized in their hands and can judge how well it matches users’ needs and solves their problems; testing will yield more accurate, more applicable results; versions closest to the final product enable you to predict how users will take to it in the marketplace.

    • Cons: Longer/costlier to create; users are more likely to comment on superficial details than on content; after hours of work, you the designer are likely to dislike the idea of making changes, which can take considerable time; users may mistake the prototype for the finished product and form biases.

© Interaction Design Foundation, CC BY-SA 4.0

Some designers split high-fidelity prototyping into “mid-fidelity” (where prototypes can have basic digital interactivity or be slick wireframes) and “high-fidelity” (where they’re far closer to the final version). Interactive prototypes yield far more useful results in user tests. However, fidelity is relative—a static mockup of a landing page, for example, is of higher fidelity than sketched cut-outs users can move. Overall, you should always commit to prototyping with the users’ needs in mind, particularly with an eye for user flow.

© Interaction Design Foundation, CC BY-SA 4.0

Learn More about Prototyping

Take our Design Thinking course to see how prototyping works best.

Read about the various types of prototyping and when to use which.

Find some eye-opening points about what prototyping involves.

Explore several additional dimensions of prototyping here.

Questions related to Prototyping

What is rapid prototyping?

Rapid prototyping, often exemplified by techniques like paper prototyping, is a user-centered approach that facilitates quick mockups of solutions. Using low-technology, low-cost materials, designers can simulate their solutions at the early stages of design. CEO of Syntagm, William Hudson highlights one such rapid prototyping method:

Show Hide video transcript
  1. Transcript loading…

Paper prototyping, as highlighted in the video, is especially beneficial for novel solutions. It's easy to create, modify, and animate, avoiding distractions with superficial details. Users find it less intimidating, promoting genuine feedback. It portrays a malleable, unfinished concept, making it perfect for brainstorming innovative ideas. For a comprehensive grasp on the iterative process behind such concepts and to delve deeper into innovative design methodologies, consider enrolling in our Design Thinking: The Ultimate Guide course.

How to make a prototype?

Making a prototype begins with understanding its purpose: to refine ideas and get closer to the desired solution. 

Show Hide video transcript
  1. Transcript loading…

As HCI expert Prof. Alan Dix highlighted in the video, start by sketching your design, perhaps on paper, to visualize your idea. Depending on your needs, your prototype can be crafted from materials like blue foam, cardboard, or even digital tools for a "make-do" version to help users comprehend. Involve real users, gather their feedback, and evaluate and refine the prototype iteratively. It's crucial to remember that while iterating is essential, starting with a robust foundation based on a deep understanding of your users and technology ensures a better outcome.

You can download our guidelines in this template: “Six Best Practice Tips for Gathering Feedback on Your Prototypes”!

Get your free template for “Gathering Feedback on Your Prototypes”
Gathering Feedback on Your Prototypes Gathering Feedback on Your Prototypes
Secure form
Please provide your name.
We respect your privacy
Please provide a valid email address.
310,520 designers enjoy our newsletter—sure you don’t want to receive it?

What is a prototype in psychology?

In psychology, a prototype is essentially the most central or "typical" member of a category. Here's an example related to the category of "fruit."

Category: Fruit

Question: When you think of fruit, what's the first fruit that comes to mind?

Common Answer (Prototype): Apple

For many people, an apple might be the first fruit they think of, making it a prototype of the "fruit" category in their minds. It doesn't mean an apple is the "best" or "most accurate" representation of all fruits, but it's a central or typical example that people often associate with the category.

Now, let's say you show someone a series of pictures – a carrot, a tomato, and an apple – and ask which one is the most representative of "fruit." Most people would pick the apple because it fits their prototype for the category. This psychological concept of prototyping helps us quickly categorize and process information in our world.

While this concept is rooted in cognitive psychology, it holds relevance in design thinking, where understanding users' prototypes can aid in crafting intuitive interfaces. Dive deeper into prototypes and their significance in design from our What Kind of Prototype Should You Create? article. 

What does prototype mean in business?

In business, a prototype serves as a preliminary model of a product or solution, enabling teams to visualize, test, and refine their ideas before full-scale production. This approach saves time and cost as businesses can course-correct early on.

Businesses can use prototyping for research as well as testing. Prototypes can help businesses user needs, streamline processes, and deliver value-added propositions. This iterative approach ensures that organizations not only meet customer expectations but also innovate effectively.

What is JS prototype?

JavaScript (JS) is a web programming language that developers use to create web pages. In the context of JS, a prototype serves as a template or blueprint from which other objects inherit properties and methods. In JavaScript, every object has a "prototype" from which it inherits properties and methods. This concept allows for object-oriented programming patterns, such as inheritance.

Note that the programming concept is different from using JavaScript to create design prototypes. Many teams opt for quick-and-dirty coded prototypes for testing solutions before building the actual product. Such prototypes may involve light coding, including HTML, CSS and JavaScript.

Is service design in demand?

Absolutely! As businesses increasingly recognize the value of delivering exceptional customer experiences, service design has become a pivotal discipline. It ensures seamless and holistic services that cater to both customer needs and business goals.

Video copyright info
    Images
  1. Copyright holder: Matthew Yohe. Appearance time: 0:06 - 0:08 Copyright license and terms: CC-BY-SA-3.0. Modified: No. Link: https://commons.wikimedia.org/wiki/File:SteveJobsHeadshot2010-CROP(cropped_2).jpg
Show Hide video transcript
  1. Transcript loading…

The demand for professionals with expertise in service design is growing across various industries, from tech to hospitality. In order to stay competitive and satisfy the current demand, many individuals are looking to improve their skills. For those keen on mastering this domain, Interaction Design Foundation's course on Service Design provides an in-depth understanding and hands-on learning. It's a great way to get started or deepen your expertise!

How to prototype in Figma?

To prototype in Figma:

  1. Start by setting up your design frames.

  2. Create your interfaces.

  3. Shift to "Prototype" mode at the top-right and connect design elements to  the appropriate frames.

  4. Assign interactions like "On Click" and set actions like "Navigate To."

  5. Use the properties panel to tweak animations and preview your prototype with the play button.

Figma's real-time collaboration feature enhances teamwork and feedback processes. 

Show Hide video transcript
  1. Transcript loading…

As highlighted in our video above and reinforced in our article "UX Tools Matter Less Than You Think", while being skilled with tools like Axure, Balsamiq, Sketch is beneficial, the specific UX tool isn't the crux. It's about adaptability and creating interactive, testable prototypes. Read "Best Prototyping Tools" on Interaction Design Foundation for a comprehensive understanding of prototyping.

What are function prototypes?

Function prototypes aren't related to UI/UX design; they belong to the realm of programming. In coding, a function prototype declares a function's name, return type, and parameters without its body. It provides an advanced outline of the function, ensuring correct usage across different parts of a program.

How much does a prototype cost?

The cost of creating a prototype can fluctuate significantly depending on its complexity and fidelity. However, it's essential to remember the value of good design. As noted in our article UX Quotes "The cost of bad design is significantly higher than the cost of good design." Investing in a well-thought-out prototype can save expenses in the long run by preventing costly design errors. While initial costs for prototypes can range from minimal (for low-fidelity sketches) to substantial (for high-fidelity interactive models), the key is to weigh these costs against potential savings from averting poor design decisions later on. Learn how to make the most of prototypes by avoiding these common pitfalls.

What makes a good prototype?

A good prototype helps teams test ideas and is often used in usability tests.  In this video, UX designer and author of Build Better Products walks us through the two most common types of design activities teams work on: innovations and incremental improvements.

Show Hide video transcript
  1. Transcript loading…

Usability tests with prototypes help teams test solutions against real user needs and challenges identified through in-depth research like contextual inquiry or diary studies. While major innovative changes can bring significant advancements, even small incremental improvements based on regular feedback and observational testing can lead to substantial impacts. 

Prototyping is a powerful tool that helps product teams adapt to evolving user needs, whether by making a system more intuitive or introducing a new feature to address a specific user challenge. Always remember, it's about improving an existing flow, making a product better every day.

What are the three types of prototypes?

The three primary types of prototypes based on fidelity are:

1. Low-Fidelity Prototypes: Simple and often hand-drawn representations, such as sketches or paper interfaces. They're quick to produce and useful for initial concept validations.

2. Mid-Fidelity Prototypes: More detailed than low-fidelity, these often use digital tools and give a clearer understanding of the product's aesthetics and functionality.

3. High-Fidelity Prototypes: Highly detailed and interactive, resembling the final product closely. They're used for advanced user testing and to get a realistic feel of the final design.

The right fidelity level is essential for effective feedback and aligning with the project's stage and goals. For a deeper dive into prototyping and its role in design, read this article and consider enrolling in our comprehensive design thinking course.

Where to learn prototyping?

To thoroughly grasp prototyping, enroll in our Design Thinking - The Ultimate Guide course. This course delves into design thinking methodologies, emphasizing the significance and methods of prototyping. For a deeper dive into understanding user needs to inform your prototypes, also consider our User Research – Methods and Best Practices course. Utilize these resources to excel in prototyping and design.

Literature on Prototyping

Here’s the entire UX literature on Prototyping by the Interaction Design Foundation, collated in one place:

Learn more about Prototyping

Take a deep dive into Prototyping with our course Design Thinking: The Ultimate Guide .

Some of the world’s leading brands, such as Apple, Google, Samsung, and General Electric, have rapidly adopted the design thinking approach, and design thinking is being taught at leading universities around the world, including Stanford d.school, Harvard, and MIT. What is design thinking, and why is it so popular and effective?

Design Thinking is not exclusive to designers—all great innovators in literature, art, music, science, engineering and business have practiced it. So, why call it Design Thinking? Well, that’s because design work processes help us systematically extract, teach, learn and apply human-centered techniques to solve problems in a creative and innovative way—in our designs, businesses, countries and lives. And that’s what makes it so special.

The overall goal of this design thinking course is to help you design better products, services, processes, strategies, spaces, architecture, and experiences. Design thinking helps you and your team develop practical and innovative solutions for your problems. It is a human-focused, prototype-driven, innovative design process. Through this course, you will develop a solid understanding of the fundamental phases and methods in design thinking, and you will learn how to implement your newfound knowledge in your professional work life. We will give you lots of examples; we will go into case studies, videos, and other useful material, all of which will help you dive further into design thinking. In fact, this course also includes exclusive video content that we've produced in partnership with design leaders like Alan Dix, William Hudson and Frank Spillers!

This course contains a series of practical exercises that build on one another to create a complete design thinking project. The exercises are optional, but you’ll get invaluable hands-on experience with the methods you encounter in this course if you complete them, because they will teach you to take your first steps as a design thinking practitioner. What’s equally important is you can use your work as a case study for your portfolio to showcase your abilities to future employers! A portfolio is essential if you want to step into or move ahead in a career in the world of human-centered design.

Design thinking methods and strategies belong at every level of the design process. However, design thinking is not an exclusive property of designers—all great innovators in literature, art, music, science, engineering, and business have practiced it. What’s special about design thinking is that designers and designers’ work processes can help us systematically extract, teach, learn, and apply these human-centered techniques in solving problems in a creative and innovative way—in our designs, in our businesses, in our countries, and in our lives.

That means that design thinking is not only for designers but also for creative employees, freelancers, and business leaders. It’s for anyone who seeks to infuse an approach to innovation that is powerful, effective and broadly accessible, one that can be integrated into every level of an organization, product, or service so as to drive new alternatives for businesses and society.

You earn a verifiable and industry-trusted Course Certificate once you complete the course. You can highlight them on your resume, CV, LinkedIn profile or your website.

All open-source articles on Prototyping

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!