How to make a prototype? The first step towards a successful product

What is the first step from a great idea to a successful project? We believe it is thorough prototyping. How to make a prototype that will result in an application everybody loves? Find the answers in our article!

Article header
Article header

If you are interested in the information technology world, you definitely wouldn’t have  missed the movie The Social Network  the story of the biggest social phenomenon of the century - Facebook.

You followed how a shapeless idea rapidly grew into a successful business despite all the obstacles. If you were inspired by the example of a young Mark Zuckerberg, and you are just about to turn your idea into reality - slow down. Being in a hurry  hurry won’t guarantee your success, but smart planning will.

The first step to realizing a business idea should be a website or mobile app prototype, which is critical to prove the concept.

What is a prototype? 

what is a prototype

According to Wikipedia, “A prototype is an early sample, model, or release of a product built to test a concept or process, or to act as a thing to be replicated or learned from.”

We can apply this definition to the information technology sphere as well. Compared to the minimum viable product (MVP), which is a minimum usable version of the product and includes the core functionality, the prototype doesn’t perform anything. It is just an image of your future app.

But the importance of a prototype is much greater than you can imagine.


"If a picture is worth 1000 words, 
a prototype is worth 1000 meetings."

John Maeda

Reasons to build a prototype

A website or app prototype is a powerful tool for developing a successful product. It can save you hundreds of development hours and thousands of dollars.

  • Look at your idea from another perspective

    The idea in your head may seem perfect, but building a prototype makes the idea material. It enables you to see not just the advantages, but the weaknesses as well. Changing the perspective allows you to be more critical and discover any drawbacks of the idea.

  • Work with details

    When the idea is visual, you will quickly notice some gaps or imperfections. Improving it at the prototype stage will save you a lot of time and money.

  • Consider different solutions

    With your app you are targeting certain problems. A prototype allows you to test different solutions, and choose the one that best satisfies the needs of your target market. Moreover, a prototype is a great tool to conduct  experiments with minimum risk.

  • Test with potential users

    If you have a mobile app prototype, it means you have something to show to your potential customers. Define your target audience and ask them to evaluate your prototype. You may be surprised at how much the opinion of potential users may differ from your own. Their feedback will show you how the product can be improved. Knowing what your customers need before the actual development is very valuable.

  • Talk to developers

    Developers often hear requests such as “I want an app like Facebook. How much does it cost?”  But the phrase “an app like Facebook” doesn’t tell us anything about the complexity, the features, the number of screens, etc. The mobile app prototype, instead, does. Showing the development team a prototype will give them the exact description of your future product and will enable an exact cost estimation.

  • Talk to investors

    You may get your initial funding from your friends or family, your high school teacher or a real investor. Either way, you’ll need to show them something that will convince them to invest in your idea. A prototype allows them to see and touch the product they are being asked to fund, which increases your chances of getting the money.

Advantages of prototyping

  • Short development time

    Depending on the fidelity grade, the prototype can be created in several hours to several days. A short development time allows making numerous changes and testing different functionality without significant risks to the budget

  • Doesn’t require specific skills

    Even a non-tech person can build a simple prototype using a pen and paper. The prototyping tools for high-fidelity wireframes are usually not complicated to learn and to use. So you don’t have to be a professional programmer or designer to build a prototype of your own product. And in this article, we will teach you how to make a prototype right.

  • Low price

    Prototypes are great for experiments and idea verification, since they don’t take much time to develop, and the costs are usually low. So, you can try prototyping different functionality, or a different structure and design of the future app, without risking a huge amount of money.

How to make a prototype? A step-by-step guide

The website or app prototype is a critical stage in developing a product. But, unfortunately, many entrepreneurs skip this and move straight to the development stage. As a result, mistakes in design and weaknesses of the product are discovered only after the release. As a result, too much time and money is spent solving  problems that could have been prevented by proper prototyping.

You may think that a prototype requires hiring a professional, but actually, you can do all the work yourself in a few hours. All you need is a pencil and a notepad, a laptop, and this step-by-step guide.

So, it’s time to start!

Step 1. Start with a paper prototype 

paper prototype

The very first step is to sketch your idea on a sheet of paper. If you consider yourself to be a bad artist - don’t let that stop you. A paper prototype isn’t about art, it’s about presenting the idea in a simplified way.

Take a sketchbook and a pen and try to put your idea on paper. To make it more visual, you can use a sketchbooks with phones templates on every page, or download and print such templates. This allows you to get a clear view of how the app will look on the device screen.

It is important to sketch all the screens of the app to get a clear structure. If your product  includes many screens - present them on a single page, and add the connections.

A pen-and-paper sketch is just a draft for an interactive prototype. So, at this stage, you should pay more attention to key items and their placement and not to the detailed design. The UI of the future app or website is born right now.

Besides the pictures, you can sketch additional information that will be helpful for the project. Describe your buyer personas - the potential clients who will pay to use your product. Describe the possible user journey through the application, their steps and their impressions. And remember, you aren’t writing a novel, so don’t aim for perfection in your writing. A paper prototype is just a raw visualization of your thoughts.

Why are paper prototypes good?

Firstly, you can make them anytime, anywhere. Traveling on a train, walking the dog, watching the morning show - an idea can hit you unexpectedly. If you have a notepad and a pen, you are fully equipped for your first prototype. If not, check for other available material. Maybe you can grab several napkins from the nearest KFC.

Secondly, you don’t need any background in programming or design to know how to make a paper prototype. An understanding of your future product is enough.

Thirdly, prototypes cost you almost nothing. You don’t need expensive devices and prototyping tools to sketch the first model of your app. You won’t have to pay anyone for making the prototype for you. Yes, it will take you some time, but believe me, you would spend much more time explaining what you actually to a developer.

With a bit of creativity, your paper prototype can become interactive.

After the first paper prototype is ready, you can start showing it to other people. The visual presentation of your idea might be quite helpful for finding like-minded people, who will potentially join your team.

Step 2. Create a digital wireframe

After the structure of the app is more or less clear, it’s time to create a digital wireframe, which is a blueprint that represents the skeleton of the future app.

The term digital wireframe speaks for itself - it is created with the help of digital prototyping tools.

If you really like your paper prototype and think it includes all the necessary UI elements - you can save time with POP (the abbreviation for Prototyping on Paper) by Marvel. It will help you transform a pen-and-paper prototype into a digital one. You just take photos of your sketches, and the tool will upload them as screens of your future app. It’s even possible to add different types of interactions.

There are also dozens of apps for professional prototyping as well. But don’t let the word “professional” scare you. They are all easy to learn, and most of them have trials or free plans.

One of our favorites is InVision - a prototyping tool for creating digital wireframes and interactive prototypes. Using a rich library of ready UI elements you can build the layout of literally any type of app or website.

InVision is the right tool if you are wondering how to make a prototype interactive. This means that you can add different transitions like swipe, tap, dissolve, etc. The interactive digital prototype looks like the ready application.

InVision also enables project sharing via email, SMS, and URLs. Authorized users can also leave comments. Such applications are great when working with a remote team since you are not limited to one location.

Step 3. Share your prototype with people

The advantage of the digital wireframe is the ability to share it with anyone in any corner of the planet, which is impossible to do with the paper prototype. Digital prototyping tools enable you to share prototypes with whoever you want. InVision, for example, makes it possible to leave comments and discuss the website prototype online. So how to make a prototype work for you?

Share with friends. Ask for their opinion. Ideas from another perspective might be unexpected but quite valuable.

Share with the designer. Having a skeleton of the product you can then involve a professional to create an attractive and friendly UI/UX design.

Share with potential users. Contact your potential clients to get their feedback concerning the product and its logic. No one can understand the product better than people who are meant to use it.

Share with investors. If you want to raise money, you have to show your potential investors something convincing, an interactive prototype, for example. The wireframe is a detailed and visual presentation of the idea, proving that you are serious about implementing it. Of course, you won’t get millions of dollars straight away, but you may attract seed capital that will help you develop your product and start moving it forward.

Share with developers. An app prototype is essential when placing your future product in the hands of the development team. It is a clear roadmap for them to know how the app should look, what functionality it should include, and how it should solve the users’ problems. With a prototype, you can ask for an accurate estimation of the development time and costs.

Step 4. HTML prototype

html prototype

By using HTML and CSS you can create a digital prototype, however, you’ll have to involve another professional, unless you can code yourself. HTML and CSS are the most widely-used technologies, and it won’t be an issue to find a developer who can create an interactive prototype for you.

The HTML prototype has one huge advantage - the code behind it is reusable. This means that you can use the same code (with slight improvements) to build the MVP (minimum viable product).

It is also important to mention that HTML prototyping is optional. It depends on how your business is currently going. If you have enough money to start the MVP development - do this. If you were able to test the idea with potential users and know exactly what features you should build for them - do this. If you have already gathered the team to run the business - do this. In all the other cases, move on to HTML prototyping.

An HTML prototype has the highest fidelity grade. Since it is built with the same technologies as the end product, it shows exactly how the final product will look. Moreover, it allows testing whether or not the idea can be implemented with existing technologies.


The website or app prototype is a safe and reliable tool to test an idea. It enables you to present the model of your future product to the potential users, receive their feedback and to improve it. The biggest advantage of prototyping is that you risk very little, but receive a lot of value: you test your idea, receive feedback and improve it, until it exactly matches the needs of the target market.

Visualizing the idea in a prototype is the very beginning of product development, which is usually followed by creating the MVP. Compared to the prototype, the MVP isn’t a model, but a real working product with minimal but useful functionality.

The prototype is the first and highly-important step towards a successful product that people use, love and are willing to pay for.

Thanks for reading!


Related articles
Dealing with large files in Cordova
Types of Web Hosting. What to choose in 2018
Web Development Trends in 2018
How to reduce logistics costs?

We will be pleased to hear from you, or receive a proposal for joint cooperation

Contact us