10 Prototyping Tools Recommended For UI/UX Designers


Recently, I've read some articles about sharing books and websites for UI/UX design. I think it might be useful to write an article about prototyping tools and share with you. So, I collect 10 prototyping tools this time and put them into 3 different categories.
  1. Category A: Easy and fast.
  2. Category B: Light and flexible.
  3. Category C: Comprehensive and functional.
Let's have a look.

Category A: Easy and Fast.

Tools: Chainco, InVision, Flinto Lite.

Learning Curve: Low.

Just like the slogan of Chainco, these tools are great demonstration tools for UI designers. All the three tools are based on the web. Although, they look different from each other, but, in fact, they have so many similar features. The interaction setting is about creating hot spots, and taking the page-switching as the main function. There's nearly no cost for learning or operation. Designers in China like Chainco better, but it is only available in Chinese version. More designers prefer to use InVision because of the function of collaboration.

A great benefit of using this kind of tool is that, you could import those pictures that UI made as the pages. Some of them could import PS and AI design files directly, like InVision and Flinto Lite. However, the shortcoming is also obvious. They don't support setting components interaction or even setting components.

Chainco：



InVision：



Category B: Light and Flexible

Tools: Mockplus、Proto.io 6、UXPin、Flinto for Mac.

Learning Curve: Middle.

In this category, these tools are really good helpers in interaction design. They have at least one thing in common: they are relatively lighter and more flexible than other tools. Taking Flinto for Mac as an example, you could create interactions by just moving the components on the layers. Meanwhile, maybe the operation modes of these four tools seem different, but they all use link point and drag-and-drop as their basic operation mode. This highly visualization makes the designing process easy and effective.

Mockplus is more typical in this category. Compared with the components in Proto.io, simple components - container - completed components, I prefer to choose Mockplus. It offers you more highly packaged components, and as a "lazy" designer, I love this. What's more, you could rely on the easy operation mode and over 2500 vector icons to finish your design even though the network is not stable or totally not available. Exporting HTML files and publishing your project directly could make prototype testing much easier than before.

Flinto for Mac：



Mockplus：



Of course, you will spend more time and costs on learning than category A on the tools in category B. But, if you have tried tools in catogory C, you will find out that, the costs for Group B are totally acceptable.

Category C: Comprehensive and functional

Tools: Axure RP、Justinmind、Framer JS.

Learning Curve: high

If you want to make your prototype functionally comprehensive, then there must be something related to coding in your design. In these tools, Axure RP is more familiar to us. Also, Axure RP has kept a pretty good balance between the difficulty and usability. However, there are still many designers confused about some functions, such as setting values and conditions.

While Axure is seeking a balance, what Framer JS telling us is coding a prototype. This is the prototyping tool all based on coding. As long as you could write the code, it will make everything come true.

These tools are more comprehensive than others, but you also need to pay a lot to learn them, especially Framer JS, I'm pretty sure there is no one else to compete with it in terms of the included powerful functions. However, it's definitely not easy to master this powerful but sophisticated tool. Hence, if you want to use tools in Category C, then enough knowledge must be prepared.

Framer JS：



These are 10 prototyping tools I want to share with you. Everyone has a different understanding about prototyping, and the mastery level of different knowledge is not the same either. Combining with your personal situation, I think you will find a suitable tool among those 10 tools.


You may also like:

Mockplus Rapid Prototyping Tutorial - Test Your Prototype in 8 Different Ways

5 UX Design Trend Prediction in 2016

Complete Beginner’s Guide to UX Research

Comments

Post a Comment

Popular posts from this blog

Axure vs Balsamiq vs Mockplus vs Justinmind - Which Is The Idealest Choice of Chinese Designers?

Image
Nowadays, there are many prototyping tools on the foreign lands, such as Pidoco, UXPIN, Proto.io 6, and InVision, etc. It makes you dazing when you have so many choices. However, do you know which of them are the common prototyping tools in China? How the Chinese designers think of the performances of them? Generally, there are mainly four desktop prototyping tools in China: Axure RP, Balsamiq, Mockplus, and Justinmind. These four tools technically have taken control of a pretty large number of Chinese users. Today, I'm gonna try to analyze the reasons why those four prototyping tools could have nice performances in China from the view of user experience which is the first thing of "Innovation 2.0". Axure RP : Broadly speaking, the "Axure" we talking about is Axure RP, equaling to Axure Rapid Prototyping. The reason why Axure has a good fame in China is not only the using inertia, but also the comprehensiveness of its function. Such as the s
Read more

Are You A Designer? - Designe Researcher

Image
We always someone say that "I'm a designer." So, you think designers are just designing? Man, things are not that simple. Please allow me to unveal the jobs of designers. Let's start with the beginning of design. Design researcher. Designs are made for needs, but, what do the users need? If you want to know that, you have to do a design research. How to do a qualified user research? User research refers to a variety of ways to get the respondents' suggestions and opinions. The purpose is to provide the related data base for next step of product design. User research can be divided into two kinds based on the contents of the survey, One is product survey: the the investigation and analysis on target users and the competitive products, this is used for determining the direction of design and verify the current point of view. The second is a research of user experience: this often happens in the product testing and post-release process. If you want to complet
Read more

Overcoming The Three Phases of Prototyping Flow

Image
Everyone has his/her own way of working, but not all of ways are scientific and effective. Having worked as a UX designer, and learnt knowledge from some books, I come forward with a useful work flow. I hope this could help the rookies and juniors who still have no idea about how to work as a UX designer. 1. Thinking and drafting This is the first step of making a prototype. What we need to do here is springing out our inspirations like a fountain. Hence, all the tools we are going to use are whiteboard and mark pen, even just paper and pencil. Anything else could be a rock on your way to inspiration. We need to focus on brainstorming, write down every relevant idea on the whiteboard. 2. Selecting and combining The second step is to select and combine the ideas on whiteboard according to usability. Now, what we need is...a group of cute and picky colleagues. In fact, many UX designers like to design something impractical, that is very annoying. So, after we wri
Read more