Wireframe and Prototyping — Part 2

Sakhawat Hossain
5 min readApr 15, 2020

--

This is the second part of my wireframe and prototyping series. In the last read, I have tried to summarize all the things related to the topic wireframe. In this part, I will be explaining about prototyping. You might find some similar kind of talking here comparing to the first part because these two are aligned with each other. So don't get confused.

Things that I will try to cover,
1. What is prototyping?
2. What are the differences between wireframe and prototyping?
3. Why do you need prototyping or what are the problems that prototyping is trying to solve?
4. How do you use prototyping in your product?
5. What are the tools for prototyping?


If you don't read my previous article I would recommend reading that.

Link: Wireframe and Prototyping Part — 1

What is prototyping?

In some simple words prototyping is the mid to high-level version of your system. Where you can put animations, events, variable and advanced interactions. You can think of it as the clone version fo your final product.

If you come to see some expert with a project prototype in hand — from your own solicitor to a potential licensing company — you distinguish yourself from the hundreds of people who have approached them with only abstract ideas in mind. Alternatively, as opposed to just an artist with a potentially good idea, you’ll be seen as a specialist with a reason.

What are the differences between wireframe and prototyping?

As we have talked earlier that there is some kind of similarities between wireframe and prototyping.

So lets clear things up.
While wireframing we do the following things,
1.Basic skeleton or structure
2.No animations or advanced interactions
3.Basic layout
4.Dummy content or data

On the other hand, while prototyping we do the following things,
1.Advanced interactions
2.Representing of original data
3.More closer to the final version

These are the basic differences that occur between these two. Although there are more differences between them. As this is not a comparison article so let's not go much further. We will come with that in upcoming articles.

Why do you need prototyping or what are the problems that prototyping is trying to solve?

Problems

Think, you are the only guy who designs everything, develops everything and represents the work to the client. So initially you prepared that there will be some feedback like arranging icons or changing the text size or fonts etc. But the problem occurs when a client asks you to change a lot of things. For example, you have a page where you put a list and some statistical data. And the client asked you to remove both of these components and replace them with some infographics like an illustration or something others.

The client always going to ask you some revisions and you have to provide them. We all know that major changes can not be brought at less time. Because the developers had to remove some components both in design and backend and introduce some new features, while these processes need more time. Isn't that going to be a hassle? I guess it is.

Solution

That's why every company uses prototyping to represent a demo work to their client. Remember it is not the final product, it is just a demo version that has been prepared just to settle certain things.

Prototyping snippet lets you get everything done. Basically, the main purpose to build a prototype is consumer testing that shows you how useful and beneficial the product is to the end-user. You will get feedback and insights into how the product will really be used by real consumers and what you can change to fix their pain points.

How do you use prototyping in your product?

Till now we understand that by using prototyping we can clear the misunderstanding between the client and professionals. There are basically three key steps that can be followed while prototyping.

To designers & engineers, it’s the same, irrespective of the product and whether this product will be marketed to profit or used to sell a brand. Depending on input from product development, prototypes and proposals will continue to be iterated until the final result is reached — something the consumer wants and needs alike. And this is where the true value of prototyping is found.

What are the tools for prototyping?

While prototyping you can use several tools that are also used for wireframing too. If you search tools for prototyping you will get almost the same result for wireframing. So if you want to know tools that can be used for prototyping you can read my part 1 article of wireframe and prototyping.

But wait, I am gonna talk about one specific tool strongly and that is InVision .InVision is used widely in most of the leading companies in all over the world. Although I haven't work with any large companies but, if you search for top prototyping tools, I can definitely point you that it's going to be InVision and you can also find that who are using this tool for prototyping. I am attaching a screenshot just to give you a preview.

Prototyping in InVision

You will love the interface too because everything is much more organized and it is not a heavy tool to use on low powerful computers.

Thanks for reading the article and always try to do wireframe and prototyping first, rather than going for direct development. Some claps will be amazing !!

Stay Home, Stay Safe.

--

--

Sakhawat Hossain

Senior Software Engineer | Android | iOS | Java | Kotlin | Flutter