While surfing 5G these days, I’ve been asked questions like “Should I draw a high-fidelity prototype?” and “Is it necessary to make a demo of a prototype?” “Is it appropriate for product managers to draw prototypes instead of PRDS?”

Of course not! Emmmmm thinks that maybe all of these ideas are a little bit wrong!

What is the purpose of prototyping

Especially for many NEW PMS, such content may bring some troubles to people when they first know this thing, so they are not sure what kind of results they need to produce at the very beginning.

For example, when I was an intern, I was trying to draw the same hi-fi prototype because I read a lot of hi-fi cases. But in retrospect, I spent too much time implementing pages and interactions, ignoring the business requirements and functional logic of the product itself.

To prove this point, I can’t help but turn to the textbook that has been hidden for years.

Let’s have a look at what the textbook says:

Rapid prototyping starts with quickly building a prototype that reflects the main needs of the user. Then it is provided to the user for use. After the user tries out the prototype, the developer will put forward many suggestions for modification. According to the suggestions of the user, the prototype system can be quickly modified. It is then handed over to the user, and the process is repeated until the user feels that the prototype system meets their requirements. Then the developer writes the requirements specification from the prototype system. Therefore, according to this requirement specification, the software should be developed to meet the real needs of users. As for the developed prototype, the purpose of the prototype is to learn the real needs of the users, so once the requirements are determined, the prototype will be discarded, so the internal structure of the prototype system is not important, the important thing is to build the prototype quickly, and then quickly modify the prototype according to the user’s opinion.

So for new PMS, you can think of a prototype as a tool to determine requirements. The purpose of using this requirement tool is to dig and filter the requirements of the product in a fast and iterative way, so as to get a specification of requirements determination.

Then we can say that the most important rule of prototyping is: fast & clear!

How do I make a prototype fast

First, use the most appropriate tool

When deciding on tools, it’s important to know exactly how the prototype itself will be used so that we can make the most accurate choices! In my opinion, the two most basic parts of a prototype are drawing & demonstrating!

Then, please read the fire teacher’s words with me in your heart: “The world martial arts, no firm not broken, only fast not broken!” In other words, the two most basic parts of the prototype can be expanded into: quick drawing & easy demo! So we have to look in both directions when we’re looking for tools.

So the hero we want to talk about today can play 💁🏻 : rapid prototyping tools, copy RP!

1, online drawing, ready to use

As long as it’s a computer with a browser and an Internet connection, you can prototype. There is no client, no need to find different versions of the installation package as with Axure, and no need for localization and activation. Just open the copy official website and create a new RP online design draft.

This “cloud editing” way will be more convenient for everyone to go to the scene of the office, anytime and anywhere, open the computer can adjust, synchronize your prototype, help you to become a new generation of King of Curly! You know, if you don’t roll, if I don’t roll, the project will be stranded! 🤨

You can download the client directly from your common device, making it easier to operate. And changes made to the prototype in the client are synchronized in the browser, so it’s easy to make occasional changes to the prototype on a very useful device! 👻

​

2, one-click sharing, ready to see

Drawing prototypes, sharing and demonstrating are also important. Especially for a cute new PM with a father, if the tools are not chosen correctly, then you will face revision and release again and again.

After all, the principle of the father of party A is generally: I have an opinion, but I do not say that once!

Therefore, in the whole process of prototype review and iteration, there will be a lot of details will be put forward in the way of one by one, and the use of copyist can give you the fastest experience is: After you update the prototype, the demo updates as well, with no need to export the zip or update the link, allowing you to quietly make changes like rain. Super nice.

Of course, for those of you who are vacationing on an island without an Internet connection, we’ll have to download the offline demo package to share and get everything back to where it started. 😌

​

3, full function unlock, free forever

For us PMS, many may still be studying in school, and many have just started to contact this industry. So it’s hard to pay for a tool that hasn’t become productive yet.

But the truth is not to deceive, the use of copy guest RP, really can not money!

As long as you join the free design program now, you can unlock all the features of the design and draw prototypes without being limited by the number of pages.

Two, quickly enrich the picture

After we choose our tools, we can start messing around!

1. Determine the page size

This step is usually a must when using Axure. After all, who of today’s PMS hasn’t asked the heartfelt question, “How big is the mobile page 😳?”

But now, when we create a new project using a follower, we can directly choose the size of the project page as needed.

As you can see in the image above, common phone, tablet and Web sizes have been preset, as well as a custom size to meet some unconventional needs. For example: like our company’s test sister, used to report TTP bai, I see also quite slip ~ 😏

2. Know the layout

When we open a new project, there will be a default generated home page. However, this time can not wait to open painting ah, or have to be familiar with our drawing panel. By understanding the layout of the drawing panel, you can see what elements are essential to a prototype!

Page: used to create and organize the project page, in order to better comb the product use logic;

Components: Some basic elements that make up a page;

Properties: Modify component styles;

Layer: Shows the components that make up the current page.

Interaction: Helps pages and components implement logic such as jumps.

3. Build page content

At this point, you can do whatever you want

Find the component you want and drag it to where it should be. This slowly builds up the page with components, and then builds up the project prototype page by page.

​

Neat to complete

Here’s a basic wireframing prototype. Who can say “daa baa” to a clean, uncluttered page like this? 🧐

Therefore, whenever we are new to PM, whether we draw prototypes or flow charts, we should have the attitude of alignment and equalization. (Maybe your boss or party A is a Virgo 🤫 ~)

So property here tools, please be sure to use it well!

In addition to a small tip: the establishment of a good auxiliary line, but also to help sprout new people greatly improve the speed of drawing yo ~

3. Establish logic

1. Page logic

Page logic is as important as functional deconstruction. In addition, we can clearly understand the depth of the user’s visit to the page through the relationship between the pages. Only by establishing a good logical relationship among them can we have a better optimization direction in the subsequent demonstration and iteration.

As for the operation, is also very simple, directly select the page drag can be, please see 👇👇

2. Interactive logic

Interaction is really a presentation function, so the fundamental goal is to make the prototype “move” so that the viewer can more intuitively feel the relationship between the component (button) and the page. So when prototyping quickly, we just need to make sure the basics jump.

How do you make the prototype look good

During the whole prototype drawing process, we can preview our own prototype through the demo function. This step can not only determine the beauty of our page, but also let oneself repeatedly experience interactive links, so as to determine whether their product logic is clear, smooth experience!

Finally, when demonstrating, you can pay attention to check always display link area oh ~ otherwise, if only one of the four ICONS can click on the link, but also need to let everyone go one by one to test, also too pulled down 😫 ~

All right, that said, let’s review the two most basic parts of prototyping: quick drawing & easy demo!

And our tool of choice 💁🏻 : Rapid prototyping tool, Copy RP! Draw prototype to do design, forever free!