Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

What Kind of Prototypes and Design Tools You Need for Your Audience?

Mockplus Team 15100 Views

Prototyping serves different purposes on various design scenarios. There are main 3 types of prototype design and designers may use different prototyping tools.

First, what is prototype design?

Prototype design is a necessary step involved in daily software design. Usually, we create a prototyping after doing enough UX research like gathering idea, data, information, demands, evaluation, etc. It is presented as a direct reflection and demonstration of a product. There are mainly three design scenario of prototyping:

1. Prototyping for yourself, for further design.

2. Prototyping for developing team, for developing.

3. Prototyping for client, for getting paid.

However, sometimes we have lots of newbies take the developing prototype to the client, leading to customer dissatisfaction, then the negotiation process will be extremely difficult.

Moreover, some designers take the prototypes which are made for customers to the developing team, the result is inefficiency of the developing, and might be rejected by the team. In a few cases, it may lead to more serious communication problems.

Also, in few situations, some may take the prototype for himself to the developing team or even the clients. What happens next would be really terrible.

So, for whom, which kind of prototype design shall we make with which prototyping tool?

1. Prototype design for yourself

What matters: Draft

Tools: White board, Paper and Pen, Balsamiq, Xmind

Since it's made for yourself, there's not much to say, just record everything you have in mind, and make sure that you can fully understand what you've recorded. In this phrase, the less interruption from outside world, the better you can make. The low fidelity is everything for this purpose.

1) paper and pen, white board

The easiest tools like paper and pen, white board would be the best things for you. You have no restriction with them. All your design ideas and inspiration can be write down. You don't need to keep it well organized as long as you can read it and know hoe all the elements interact with others.

2) Balsamiq

If you want to arrange these wireframes more affectively, please try Balsamiq. It is a rapid wireframing/prototyping tool that helps you work faster & smarter. You have a feeling that you are sketching on a whiteboard but actually using a computer. The handwritten design is unique and the large library of UI elements is very good. There's no interaction for this prototyping tool, but the sketch style would definitely provide you with some good ideas.

3) Xmind

If you need a mind map to get a better view of what you're doing, then you will need the help from Xmind. It is an open-source of mind mapping and idea management software solution for Microsoft Windows, Apple OS X, and Linux operating systems (OSes).

Balsamiq-Xmind

2. Prototype design for developing team and Experienced clients

What matters: Interaction

Tools: Axure RP, Justinmind, Mockplus, UXPin

Why prototype design is better than PRDS?

There are a thousand ways to interpret the bible. PRDs are not bibles, but, still there will be a thousand different understandings from your developing team. If you are still using wireframe + word descriptions for "PRDs" and give them to your developing team, then please try those four prototyping tools I listed.

Align developing teams usually choose prototyping + a few descriptions. It may need hundreds of pages for a full word description PRD file, but when you have a prototype, there will be just dozens of pages, it's like ten percent of the original files.

What's more, the interaction will make your ideas more intuitive. This will help your team improve the level of efficiency with less misunderstandings.

Key features:

1) Axure and Justinmind

Axure and Justinmind are powerful prototyping tools for doing interactions. However, they are more comprehensive and requires longer learning curve than Mockplus and UXpin.

Axure

Axure is a rapid prototyping/wireframing tool used for web and desktop applications. It offers drag and drop placement, resizing, and formatting of widgets. You can create very advanced interactive prototypes with this robust UX tool. The only thing you need to worry is that it requires a longer time to master. If you are a professional designer, you can use Axure to build more sophisticated, interactive prototypes.

Justinmind

Justinmind is a prototyping tool for web and mobile app prototypes and high-fidelity website wireframes. It offers capabilities typically found in UX tools like drag and drop placement, re-sizing, formatting and export/import of widgets. In addition, it has features for annotating widgets and defining interactions such as linking, animations, conditional linking, calculations, simulating tab controls, show/hide elements and database simulation with real data.

2) Mockplus and UXPin

Mockplus and UXPin are more agile and easy to learn. Personally, I like them better. Mockplus and UXPin can meet the needs of prototyping just right. But on the specific function point, such as Value and Judgement, they are less competitive.

Nevertheless, please have a second thought, is it really worth it to spend over ten minutes for setting an interaction? In fact, one simple description may have already solved the problem in one minute.

In the same situation, for the clients who are experienced, time is so valuable, present your idea in the fastest way is not only respecting your client, but also the affirmation of your work.

So, when the communication is among experts, some simple word descriptions combining with the prototypes made with tools like Mockplus and UXPin often can create a faster and also better result.

Mockplus

Created on a mission to do faster, smarter and easier design, Mockplus is a quick wireframe tool enables you to do a perfect interactive wireframe and prototype in a minimum of time.

New features in Mockplus 3.2:

UI flow design mode: Intelligent connections between pages which can be adjust manually

Repeater: Create repeated elements quickly with drag-and-drop.

Demo Projects and Templates: Various built-in templates help you to build your prototypes on them, easy and fast.

Sketch Import — Publish selected Sketch Artboards as a Team Project in Mockplus.

UXpin

UXPin is an online wireframe tool based in Europe. With simple drag and drop, you can arrange various elements to mock up an interface without a single code. It’s a visual editor that allows you to choose elements and combine them together into a cohesive whole. It allows you to design hi-fi mockup, or import layered designs from Sketch and Photoshop.

Prototyping tools

3. Prototype design for clients with no experience

What matters: high fidelity

Tools: Origami, FramerJS

There are some clients good at business but not familiar with software design. They might request a prototype which is 99.999% like the real App. What you need would be Origami and FramerJS. Why I put these great tools at the last? Because, if you design with those two, it might take some time.

Key features:

1) Origami

Origami is really complicated. Personally i don't want to use it. It'll take much time to do a prototyping.

2) FreamerJS

FreamerJS is based on coding. For that, many designers don't code may not choose it. If you like coding while design, you may consider to use it.

While the align developing, you won't have so much time for prototyping, unless you have met clients without experience but with super high requests. The interfaces and the interaction animations are really good, even could replace the real app. However, it needs coding skills and will cost a lost of time. Also, many designers are not doing high-fidelity prototype slowly nowadays, especially in the early stage of a product, so they're not on the list of recommendations for daily using.

Origami-FramerJS

Conclusion

These are the basic explanations for the three different situations of prototype design. Many of the great tools are not mentioned here. Please always choose the design tools that suit your audience's requirements better.

Also read:

What Are The Advantages of Prototyping? How to Make The Most of It?

High-Fidelity & Low-Fidelity Prototyping: What, When and How?

STILL HUNGRY FOR THE DESIGN?

_____

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
idoc close

Need help?

Join Mockplus on Slack Click here

support@jongde.com