What Kind of Prototypes and Design Tools You Need for Your Audience?
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
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.
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.
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).
2. Prototype design for developing team and Experienced clients
What matters: Interaction
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.
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 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 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.
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 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.
3. Prototype design for clients with no experience
What matters: high fidelity
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.
Origami is really complicated. Personally i don't want to use it. It'll take much time to do a prototyping.
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.
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.