128 Best Prototype Templates and Examples

“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.” – Tom and David Kelly, IDEO 

We’ve collected 128—yes, 128—(mostly) free templates and examples for inspiration, along with everything you need to know about creating a killer prototype for UX research. 

Chances are good that the perfect one for your team looks something like one of the prototypes on this list, give or take a few details. We highlighted some of the best examples and put the rest in a Google Slides deck for easy reference.

Table of contents

• 128 (mostly free) prototype templates 
• What is a UX prototype?
• How to create your own prototype for user research
• Prototype examples by type

💚 Love research templates? Head to our library to download all of them for free

128 (mostly free) prototype templates for Adobe XD, Figma, Sketch, Framer, and more

Why bury the lede? We searched high and low to find the prototype templates and examples to suit just about every use case, software, experience, and design skill level—and we’re happy to share the fruits of our research. Feel free to bookmark the following Google Slides deck for quick reference.

What is a UX prototype?

A prototype is a stripped-down representation of a final product or design that UX teams use for concept validation and usability testing. Prototype testing enables teams to create the best user experience while saving time and money

Designers and researchers create prototypes to:

• Help stakeholders visualize how the final product will look
• Validate designs through user feedback before moving forward with product development 
• Identify problems early on through prototype testing 

There are three different types of prototypes: 

• Paper prototypes, which are typically hand drawings of rough, early-stage product designs.
• Digital prototypes, which map out user flows using digital tools. Digital prototypes can be low-fidelity or high-fidelity (more on that below). 
• HTML/CSS prototypes, which are coded, interactive prototypes that function like the final product. 

Usually, the process for prototyping starts simple and layers on more complexity in later stages—from paper, to low-fi, to high-fi, to coded prototypes—with testing and feedback collection happening before moving on to each stage. Once the final prototype has been vetted by research, it’s passed onto engineering teams to build the actual product. 

High-fidelity vs. low-fidelity prototypes

The ‘fidelity’ of a prototype determines how close the prototype is to the final product. A sketch, for example, would be considered at the lowest end of the fidelity scale, whereas a coded prototype would be considered high-fidelity. 

You’ll determine the right fidelity for your prototype based on what your goals are and how far along you are in the design process. Here are some pros and cons to consider when choosing the right level of fidelity:

• Low-fidelity prototypes include paper prototypes and very simple click-through wireframes. Because low-fi prototypes are quick, easy, and inexpensive, they’re great for earlier stages of the design process when you’re still mapping out the user flow and determining the foundational structure of the product. However, low-fi prototypes may produce unrealistic or unreliable results in testing. 
• High-fidelity prototypes include interactive, digital, and coded prototypes. They’re more complex and aesthetically pleasing than low-fi prototypes, making them ideal for the later stages of the design process. Because high-fi prototypes are more realistic than low-fi prototypes, they tend to produce more accurate feedback during usability testing. However, the higher the fidelity, the more time, effort, and resources are required.

Although paper prototypes can be useful when you’re still collaborating and brainstorming, many UX researchers believe they’re too basic for effective usability testing. Instead, create low-fi, fully-digital prototypes for your earliest stages of testing to improve the quality of your test results without committing to costly high-fidelity designs too soon. 

📚 Related reading: How UX designers can conduct user research on their own

How to create your own prototype for user research

There are many things to consider in the process of creating your prototype, but we’ll just cover the basics here.

In brief, here are the 5 steps to creating an effective prototype for user research: 

• Consider the 4 key components of prototyping and testing: According to the Interaction Design Association, these 4 components are people, objects, location, and interactions. 
• Define your user flows. Map out all of the potential user flows for completing a particular task, as well as the features required to complete those flows. Give the user more than one way to complete the task; this will allow you to see which process in your prototype is most intuitive to users. 
• Decide on the level of fidelity your prototype will need. This will depend on the product design stage, the complexity of the tasks you're testing, and your goals and research questions. 
• Choose the right prototyping tool for your team. There are plenty of prototyping tools on the market, each with its own advantages and disadvantages. The most popular tools include Figma, Sketch, Adobe XD, ProtoPie, Axure, Marvel, and Framer. 
• Include ‘red herrings’ in your prototype design. Including secondary and tertiary features that aren’t part of the test can help you learn where users may get distracted or confused. 

Along with your design and prototyping tools, you might consider using User Interviews to recruit and manage your research participants. Sign up now and get your first 3 participants for free. 

🏆 Want more templates? Check out:

• ‍144 Best Customer Journey Maps Templates  
• ‍31 Creative UX Research Presentations and Reports – Templates and Examples
• 54 Templates for User Personas, Jobs to Be Done & Other Mental Models
• Notetaking for UX Research: Templates & Methods

Prototype examples by type

To help you determine the right approach to your next prototype, we’ve rounded up some of the best prototype examples for different use cases. Keep scrolling for top-notch examples of:

• Paper prototypes
• Low-fidelity digital prototypes
• High-fidelity digital prototypes
• Coded prototypes

Paper prototype examples

Paper prototype video walkthrough for a mobile application design

As the name suggests, a paper prototype is made with pen and paper. Although not ideal for sharing in a remote environment, here’s a great example of a paper prototype walkthrough video, created by a student in Interaction Design Media at the University of Limerick:

As you can see, the prototype consists of simple, hand-drawn pictures of each screen in the user flow of this particular app design. This designer’s done a good job of presenting it as realistically as is possible with paper prototypes, using the frame of an iPhone to mimic the user’s scrolling and clicking behavior. 

Paper app user flow prototype example 

Here’s an example of a paper prototype used to demonstrate the user’s journey through an app concept:

This prototype lays out all the different screens in the app and the possible paths a user can take to get to them. 

Paper prototype example of a tablet game

Last but not least, here’s a fun example of a paper prototype for a game, created as a games development project at King Mongkut’s University of Technology Thonburi: 

Although the prototype isn’t truly interactive, the moving paper parts help viewers get a real feel for what the final product might look like. 

Low-fidelity digital prototype examples

Low-fidelity prototype example created in Adobe XD

Low-fidelity prototypes are great for presenting your design with some level of interactivity before committing to full product development. This video shows the process of creating a low-fidelity digital prototype using one of the most popular prototyping tools, Adobe XD:

As you can see, the designer starts with static wireframe designs and converts them into low-fidelity prototypes by switching from “Design Mode” to “Prototype Mode” in Adobe XD. In prototyping mode, the designer can connect individual design elements to simulate a user flow.

Low-fidelity website prototype example from Focus Lab

Here’s an example of a low-fidelity prototype from Focus Lab: 

As you can see, this prototype is far more detailed than the paper prototypes and more clearly delineates the user flow throughout the website. Although no brand colors are used, shading and other specific design elements are beginning to take shape to showcase the site’s functionality. 

Low-fidelity prototype for a wholesale furniture website

Here’s an example of a low-fidelity, interactive prototype from Draftium: 

If you click through to the example site, you’ll see that it’s fully functional, allowing users to navigate to different pages and interact with all of the site components. 

From low-fi to high-fi: Event detail app prototype example

Here’s an example of a prototype for an event app designed by Javier Oliver on Dribble:

This is a great example of taking a low-fidelity prototype and building on the user experience in the high-fidelity version. 

The designer also created this prototype to demonstrate how the app transitions will look when users scroll through the app:

High-fidelity digital prototype examples

High-fidelity home banking website prototype example 

As I mentioned earlier, high-fidelity prototypes are interactive and designed to look and feel like the final product. Here’s an example of a high-fidelity prototype that reacts to user input and real data from JustInMind: 

If you click through to the example on JustInMind’s website, you can click through multiple user flows in the prototype, including making a new transfer, reviewing different accounts, and viewing credit cards associated with your account. 

Although some of the elements are clickable (e.g. “My Accounts” and “New Transfer”), not all of them are (e.g. “Notifications” and “User Settings”). This allows you to narrow the scope of your usability test to specific tasks without too many distractions. 

High-fidelity prototype example of a UX solution to the COVID crisis

Here’s a video walkthrough of a high-fidelity prototype for a web/mobile application by Club UX:

As you can see, the interface is interactive and presents a real experience of multiple user flows through the product. Although not all elements are interactive, there’s enough functionality to give users a true sense of how the product works. 

High-fidelity NIKE website concept prototype with interactive scrolling

Malik Mannan created this example of a high-fidelity, interactive website prototype: 

If you follow the link and click on the image, you’ll launch the interactive prototype, where you can scroll through the webpage as if you’re visiting a real website. None of the buttons are clickable, but it provides a powerful-enough experience for users to understand the look and feel of the final product. 

Coded (HTML, CSS, or Javascript) prototype examples

Coded prototypes are created using HTML, CSS, or Javascript and provide users with a real experience of interacting with your product. Because it takes much more time and effort, coded prototypes are typically reserved for the later stages of development.

Coded website prototype example from Anderson Gomes

Here’s an example of a coded website prototype built by Youse’s Head of Design, Anderson Gomes, using Bootstrap Studio:

The site is fully interactive and responsive, allowing for greater confidence in usability test results. 

HTML prototype example from Atlas Code

Here’s an HTML prototype for a fictional back office system from Atlas Code:

The prototype is online and fully functional, so you can interact with it for early user testing and validation of the site’s flow and functionality. 

HTML/CSS portfolio website prototype example 

Here’s an example of a coded prototype created by UX Designer and Software Developer Andreas Johanson: 

If you click through to the prototype link, you’ll be able to interact with the prototype to get a sense of the designer’s vision for the user experience.

From design to code: An HTML/CSS mobile blog app prototype example 

Here’s another example of a coded prototype from Andreas Johanson:

The original concept was created by Ghani Pradita and shared on Dribble, and Andreas Johansson implemented the design through code. Take a look at both the original mockup and the interactive prototype—it’s a great opportunity to feel the difference between a static design and a functional prototype. 

Further Reading 📚 The notes you take during prototype testing sessions can speed up—or slow down—your analysis. Set yourself up for a faster, easier analysis with these note-taking templates for UX research. 

Ready to test your prototype? Recruit and manage high-quality participants with User Interviews.

Once you’ve built your perfect prototype, it’s time to test it with your target users. 

Recruit from a pool of more than 850,000 participants to reach nearly any target audience with User Interviews. The median time to the first matched participant is just three hours. Or, build and manage a panel of your current users with Research Hub. 

Sign up today and get your first 3 research participants for free.