Prototypes are used to save time and money. Learn here the best practices for prototyping websites and mobile apps in no time.

How to Prototype? Types, Techniques, and Best Practices


Do you have an idea for an app, platform or video game? Designing it or describing it is not enough. You need to test it. That’s what prototypes are for! In this article I’m sharing my experience on where to start and what techniques you can use to win with prototypes!

Source: Medium


What Is a prototype?


A prototype is an early version of something that will be made later. It is used to test and validate ideas with your target users before sharing with stakeholders. A prototype helps you visualize and optimize the user experience during the design process.


What’s the benefit of using one?


Why do teams use prototypes instead of immediately releasing their products? These are the main reasons:

  • Save time and money by tackling problems early (avoid work duplication)
  • Get feedback from users, testers and stakeholders
  • Improving the quality of the final product.

Source: Interaction Design


What types of prototypes may be used and for what purposes?


When you’re starting a new project, it’s important to have the right tools in your toolbox. This is especially true when it comes to prototyping. Different prototypes serve different needs, so it’s important to know which type will best help you achieve your goals.

There are four main types of prototypes: feasibility prototypes, low-fidelity user prototypes, high-fidelity user prototypes, and live-data prototypes. Each type has its own strengths and weaknesses, so it’s important to understand them before choosing one.

  • Feasibility Prototypes – are used early on in the product development process to determine if an idea is even possible. They’re often very simple and don’t look like the final product at all.
  • Low-Fidelity – are used later on in the process to get feedback from users about what they like and don’t like about a proposed design. They look similar to the final product but aren’t as polished.
  • High-Fidelity – look almost exactly like the finished product and are used for detailed testing with users.
  • Live-Data – are created near the end of the development process and are used to test how well a product works in real life conditions.

low fidelity paper prototype

Source: Ergomania


The Most Useful Prototyping Methodology

Paper Prototyping

Paper prototyping is a great way to start any design project. It’s usually low-barrier, since you can just use paper and pencil, and it helps you figure out what works and what doesn’t without spending too much time on things that might not end up in the final product.


Digital Prototyping

Digital prototyping is the process of creating a digital representation of your product. It allows you to visualize and interact with your product before it’s built. This can help save time and money, by catching potential problems early in the design process.

There are several advantages to using digital prototyping:

  • You can quickly create clickable prototypes that simulate how users will interact with your product.
  • You can easily test different versions of your prototype, to see which works best.
  • You can get feedback from other team members and stakeholders, to get a better understanding of what they need and want from your product.

When is the right time to start using digital prototyping? Ideally, you should start as soon as you have an idea for a new product or feature. However, even if you’re already in the middle of development, it’s never too late to start using digital prototypes. There are many tools available that make it easy to get started quickly.


HTML & JavaScript Prototyping

HTML & JavaScript Prototyping is a methodology that allows developers to create clickable prototypes using HTML and JavaScript. It helps in reducing the time and effort required to build a prototype. The main advantage of this approach is that it can be used for web as well as mobile applications. However, one downside is that it can be difficult to create complex animations using this method.


The Prototyping Process

Caption of one of the libraries used by Design Accelerator
Caption of one of the libraries used by Design Accelerator


Paper => Lo-fi Digital => Hi-fi Digital => Code

Most product teams typically follow the paper => lo-fi digital => hi-fi digital => code process for prototyping. In this approach, they:

  • Start with paper sketches to get ideas down quickly and test feasibility.
  • Move on to lo-fi (low fidelity) digital prototypes, which test crucial elements like navigation and information architecture early in the design process.
  • Build mockups resembling the final product, once a lo-fi prototype is approved.
  • Use code to create a hi-fi (high fidelity) prototype that looks and feels like the final product.

The advantage of this process is that it allows teams to develop lots of ideas before committing to digital. It also helps identify potential problems early on, so that they can be fixed before moving on to the hi-fi phase.


Paper => Lo-fi Digital => Code

A common way to create a prototype is to start with paper sketches, move on to lo-fi digital prototypes, and then code the final product. This can be a good approach if you work alone or the prototype is very small (e.g. a single feature). The process is exactly like the example above, with the exception of skipping the hi-fi digital step:

  • Paper sketching
  • Lo-fi digital prototypes
  • Code


No-code platforms

There’s now an alternative to coding when you want to release a prototype: using a no-code platform. These platforms allow you to create and deploy your prototypes without needing any technical skills.

For example, bubble.io and https://outgrow.co are both great options for creating and launching prototypes quickly and easily. So if you’re looking for a fast, easy way to test your idea, give one of these platforms a try!


Examples of prototype


There are a few different types that can be created. There is the clickable prototype, which is used to demonstrate how a user would interact with an app or website. This type of prototype is especially helpful when you’re trying to get feedback from users. Another common type of prototype is the paper prototype. As you might guess, this one uses paper and cardboard instead of pixels and code. It’s great for testing out ideas early on in the design process.


Prototypes can be used to test literally everything. Including games and videogames. Look at this example from


If you’re looking for some tips on how to create prototypes, here are a few techniques that will help you out:

1) Start with sketches: When you’re starting out, it’s often helpful to sketch out your ideas on paper. This will help you figure out what works and what doesn’t before moving on to more complicated prototypes.

2) Use mockups: Mockups are like detailed sketches that show all the components of your design. They can be really helpful for getting feedback from others and making sure your designs are accurate before moving on to development.

3) Try low-fidelity prototyping: If you’re short on time or resources, low-fidelity prototyping can be a great option. This approach involves creating prototypes that are less detailed and typically use basic shapes and colors.

4) Use a prototyping tool: If you’re looking for something more sophisticated, there are a number of great prototyping tools out there. These tools allow you to create interactive prototypes that look and feel like the real thing.


5-steps to start with prototyping


Prototyping is a key part of the design process, but it can be intimidating to get started. Here are five steps to help you get started:

1. Decide what you’re trying to test or learn. Prototyping is most useful when you have a specific question or hypothesis that you want to explore.

2. Map out the user flow. Once you know what you’re testing, start mapping out how users will interact with your prototype. This will help you determine which components and interactions are most important.

3. Create low- and high-fidelity prototypes as needed.” Often times, it’s helpful to start with a low-fidelity sketch to quickly get your idea down on paper (or screen). Then, build on that sketch with a more polished high-fi version later on if needed.”

4. Agree on what will and won’t be in the prototype. With your team, decide what needs to be included in order for you to answer your question or test your hypothesis effectively . This may involve creating multiple versions of the prototype depending on what’s being tested .

5. Get feedback and iterate! Once you’ve put your prototype together, it’s time for feedback! Show it to friends, family, co-workers, or anyone who will give you honest feedback. Then, use that feedback to iterate and improve your prototype.


How to choose the right prototyping technique for your project?


When it comes to prototyping, there are a lot of different techniques and methods you can use. But which one is right for your project? It depends on a few factors: how complex the idea is, how much time and resources you have, and what your final goal is.

Here are some of the most common types of prototypes and their benefits:

Paper prototypes are fast, inexpensive, and collaborative. They’re a great way to quickly test out an idea with minimal resources. The emphasis is on speed, not aesthetics, so they’re not always the best representation of the final product. But they can be a great team-building exercise and help you get feedback from users early on in the process.

Digital prototypes are more similar to the final product. They take more time to create but they give you a better idea of how the finished product will look and function. If you have the time and resources available, digital prototypes are definitely worth considering.

Examples of prototyping by Design Accelerator


What to do after you’ve created your prototype


Now that you have a prototype, it’s time to test it with your target audience. But how do you know what to test? And how do you make sure you’re using your prototype in the best way possible?

Define your goals for the prototype. What are you trying to learn or achieve? Make sure everyone on the team agrees on these goals and is clear on what they are.

Test your prototype with real users. Have them try out specific tasks or use cases. Watch them work and take note of any problems they encounter.

Make sure you’re using your prototype correctly. If you’re not getting the results you want, maybe there’s something wrong with your approach or implementation. Try different ways of using it until you find what works best for your needs


Read further:

Do you like this article? Don't miss the next one.

Continue reading: