Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free


Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free

How to Make A Good Prototype? You Must Know Five Prototype Features

Mockplus Team 62368 Views

This post introduces what is the prototype, the functions of the prototype model, and five prototype features you should know when doing the prototype design.

A successful product must be the joint-efforts of a team, not just that of a product manager alone. In the early stages of a product, the product manager needs to let the team members understand what the product do? Why, and how to make it? Nevertheless, the prototype is the best language to communicate. Therefore, a good prototype always makes the product process achieve maximum results with little effort. Next, I will focus on the fiveprototype features that a good prototype should have in this article.

The Babel was a tower to reach heaven, which was originally built by all humanity. Unfortunately, the God made troubles to prevent human's plan of reaching heaven. God let scattered human around the world speak the different language so that the human can't communicate with each other. In the end, the Babel's construction plan failed, and the human went their separate ways.

Language is one of the most efficient ways to communicate with each other. The product prototype is the language that the product manager presents and communicates with others. Well-designed product prototypes are always able to let the product team members clearly understand that the product manager makes problem analysis for market and think about the users, then eventually settle down the product solutions. Next, I'll talk about it with following aspects.

Something about the prototype

What is the prototype?

The prototype is the graphics that product manager has converted from literal requirements, is the expression of the design scheme, is one of the important outputs of product manager, and also is the important basis of team reference and assessment in a project. In a word, it is a schematic of product function and content and is the embryo of the final product.

The function of the prototype

Why is it that a good prototyping makes the project achieve maximum results with little effort?

1. The prototype is the post-game analysis that whether the product manager takes the users demand into consideration. From the prototype, we can clearly know the product process, and verify if your design logic is reasonable;

2. The places where we can use the prototype is wide, such as the demand-side, UI, technology development, test, UI figure, technology framework, and database design.

3. The prototype is a model of the product and shows us the blueprint for the final product.

How to make a good prototype?

Everybody can make the prototype and does it almost every day. However, how do you make a good prototype? What are the prototype features of a good model? Here are some simple summaries of how to make a good prototype.

Five characteristics of a good prototype

1. The functional framework is clear and reasonable

The product consists of a number of functions. How to divide these functions into different modules is a test on whether the product manager thinks about the user and the product. Meanwhile, a clear functional framework makes it convenient for the product team members to understand the ideas and intentions of the product manager which can better improve the product design. The functional structure diagram can be used as a reference to the division of functional framework, and then converted into the module design of the page. As is shown below:

Function frame

2. The functional process is clear and complete

A clear product process helps users quickly understand the problems they want to solve and the way to solve problems. At the same time, it is also easy to tease out whether the product's functional structure is complete and whether there are missing links. In short, a product prototype with a clear functional process and complete structure can help users quickly understand that what is a"complete" product. On this basis, users will be able to better understand and think about the function details of the product. As is shown below:

Clear and complete functional process

3. Reasonable color application and interaction design

Product managers typically do not have professional UI/UX designer skills. However, a product prototype of a low-fidelity with black, white, and gray tone can both express the product manager's ideas and minimize the impact of UI/UE designers' work. Nevertheless, in a small team, product managers are required to design high-fidelity prototypes have clear colors, rich images, and interactive effects.

Therefore, the product manager should apply the color and interaction design reasonably according to different requirements in the prototype design, and promote, confirm the product rapidly with product teams. To provide illustrative screenshots is most recommended in this process.

4. Simple, standardized, and consistent text descriptions

Although the images, functions, and interactions in product prototype can well express the product manager's ideas and views, for some special scenarios, simple text descriptions can let the team members understand the product manager's ideas much faster and better.

(1) Brief specification

The prototype design is the same as the requirements document, and we can't finish it in one step. Generally, we need to communicate, review, and slowly determine the final prototype. In this case, we need to write down each change in the prototype, which can make it convenient for project members to see the content of each update, improve the efficiency of the work, save communication costs and avoid unnecessary troubles in late. You can use the way you like to record, and I generally use the form of change diary to give a brief description to the places where I changed my prototype along with the reasons. Here is an example of my work, as is shown below:

Brief specification

(2) Interaction specification

The interaction specification is a further addition to the dynamic effect and is an integral part of the prototype. The interaction specification with strict logical and clear content makes the prototype look more readable. For example, how to display too much text? What will the controls show in different states? etc. All of those questions require product managers to give a specification in the prototype, or there will be a lot of problems in UI design.

The interaction specification can be illustrated in the following categories:

Interaction specification

5. Display the page flow

Page flowcharts not only show the specific pages, but also show how users jump from one page to another. It is easy to show which pages are exchanged between pages when we make a page jump in the front end, and improve the work efficiency. Meanwhile, you can use the form to make relevant instructions when necessary. Here is an example of my work, as is shown below:

Page flow

Notes when designing a prototype

The prototype is made to give you a review of the project and makes it easy for users to associate the final product. Furthermore, it also allows every user to be clear about what they're going to do. Therefore, the product manager should try to standardize the prototype as much as possible when designing it.

1. We should also try to use real, logical data, otherwise, it will cause a lot of confusion when showing it to others.

2. Don't leave out the description of the particular state.

3. Don't use screen shots because of laziness.

4. Don't apply too many colors on the prototype, but show the contrast between the light and the dark.

5. Make a reasonable layout, consider the effect of the visual, and communicate with the UI designer in advance.

In the end, I hope that we can keep the five prototype features in mind when doing the prototype and work together to improve our language skills in order to design a better product.

You may also like:

5 of the Best Prototyping Tools for Mobile Apps

How to Simplify Your Prototype?

How to Make Right & Rapid Prototyping?

Author: Zecheng

Translator: Thomas

Original website: Everyone is a product manager

Original link:



Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here