Axure Template · Interaction Design · Product Design · Prototype · UX Design · Jun 19, 2022

How to Make an Excellent Prototype

by HILLERIC

Introduction

Prototypes serve as the source of content for PRD, as well as the basis for the entire product design. Product managers use prototypes to visualize (prototypes) documents such as flowcharts and structural diagrams that they organize when thinking about requirements, so as to facilitate the exchange of ideas.

The core of a good prototype is to make people understand it. Around this, the prototype can be divided into three large blocks.

1. Prototype page

A product prototype can be summed up as a frame design before the entire product goes to market. The prototype page is the presentation method and presentation form of the function to draw. For example, the login function, whether it is one-key login, account password login, mobile phone number login, or both, where are these functions placed, and what is used to display them to users.

Product prototype can be generalized as a framework before the whole product is launched. The prototype page is to draw the presentation method and presentation form of the feature. For example, the login feature is one click login, account and password login or phone number login, or all. Where are these feature placed and what are they presented to users.

Notes for Prototypes:

The page logic and hierarchy should be clear.
Do not use too many color, it will affect the work of the UI and waste time.
The design is unified, and the text, feature layout, feature location, etc. are all in a unified mode, which is easy to read.
Real information, the stuff on the prototype is as real as possible. For example, it is possible to write or find some evaluations instead of replacing them with XXXX evaluations. Real reviews are more immersive.

It is not suggested to separate some graphics without unified meaning, better with words or with graphics with unified meaning. For example, if you put a rectangle on the prototype to represent the logo, others will not understand what you mean. Adding text descriptions to the rectangle can be very convenient for people to understand.

2. Feature modules

The function module is to pave the way for the interaction description. This display method is not the same. You can directly mark 123 on the page...and the 123... modules to interact with each other. Everyone's habits are different, and my habit is to take it out separately for interaction description. This is better in terms of typography and readability.

Note on feature modules:

Sort from top to bottom and left to right.
To sort by large modules, such as the account and password of the login page, these can be combined into one login module, so that the content of the page can be classified into a large category, and it will not be scattered.

3. Interaction Description

The interaction description is to explain the rules to the entire page, and it is also the most important part of the prototype. It is this interaction description that others mainly view. The interaction explains what changes after the page writing operation, whether it is a jump or a pop-up window.

4. Usage scenarios

Usage scenarios. Introduce to others the scenarios in which this feature is used, such as positioning pages, users use positioning when obtaining local discounts.

5. Global description

Explain the big interaction rules of this page, and the global description is to describe the rules for the entire page.

For example, it takes a few seconds for the page to refresh, what is displayed when there is no network, and the pop-up window disappears after a few seconds.

The prototype mainly highlights the legibility. Everything is arranged and designed around making people feel comfortable and understandable. After all, the prototype is not for themselves. It is the best tool to communicate with PD, PM and website development engineers.

So you should really pay attention to details. Maybe you didn't pay attention to it, and the designer and developer of the product will have problems. Of course, the prototype is also a process of continuous improvement. The process of requirements discussion - structure - process - prototype is constantly cycling to improve the prototype.