Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free


Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free

9 Best User Experience Tools for 2017: Throughout the Whole Process

Mockplus Team 9543 Views

What are the user experience tools designers use in design process; design team’s favorite ux design tools; shared ux tools and techniques.

As designers, 80% of our work is about bringing forth new ideas while 20% is all about repetitive and mechanic work. So, is there a method to guarantee that our designs are not outcomes of mere repetition? Yes, it’s definitely something we are all capable of doing as long as we resort to some external resources, such as some user experience tools.

Recently, I’ve been to an off-line activity in silicon valley. When I come back, many readers write to ask me: Why the designers in silicon valley are so fast in work? How can they accomplish a complete design project just in a day? Now let’s take a look at these user experience design tools and make your choice.

Collection 1: Fast design

No. 1 Vecteecy - editable material library

As a designer, we can simply be fast by just using our limited self-made materials. The time cost is also too high if we get lost in the endless layers a PSD file. Especially for the first draft, all we need to do is to provide a product concept for internal discussion. Drawing all of the assets step by step seems to be something that only the one-track minds will do.

Vecteezy is a collection site of vector graphs. Some resources are not free, but the free resources are already more than enough. Just have a look:


Many resources provide designers with the EPS mode to be directly imported into tools like Sketch and Figma. With Vecteezy, designers can easily produce a wanted interface when asked to get their first draft done quickly.

No. 2 Mockplus - prototype faster, smarter, easier

As a partly freeux design tool, Mockplus is made by a Chinese team, yes it’s inexpensive, but not cheap. I’ve used it for months and I think it’s may be the perfect form of a good prototyping tool. The UI looks modern and it's quite simple and fast for making a finest solution. The idea that making real screen view through QR code is so addictive. In a word, it is dead simple and fast.


No. 3 ColorClaim - an ultimate solution to your color choice difficulty

I became a fan of Tobias who summed up his hundreds of color schemes of every project his had experienced since 2012. He somehow turned it into ColorClaim and in my perspective it is better than the famous color disk sharing websites like Colourlover. Now that Colorclaim is consecrated by Tobias, it does teach me a lot about how to use color in web design.

No. 4 GraphicBurger - make your final draft stunning

Even the product managers in my company have learned to put their final wireframes into a macbook or an iPhone when they are demonstrating to our CEO or doing other team reports. It would increase the visual effect of your design and it will be your loss if you miss it.


GraphicBurger provides designers with PSD resources of all kind, the mentioned good-looking equipment container is just a small part of them. Keep digging and you will find more exciting great resources.

Collection 2: Comprehensive design

As I said at the beginning, 80% of our work is about bringing forth new ideas while 20% is all about repetitive and mechanic work. In other words, designer is a job which is full of details. For example, you might be satisfied for today’s designing the background with a fashion color, but tomorrow you may be criticized by your boss for its lack of accessibility. How can we comprehensively reach the details from every angle? Here are some tools:

No. 5 UX Project Checklist - a workflow assistant

UX Project Checklist tells you what you need to do in a ux design in case you forget something. Although not every point in this list is necessary, but it actually will help you to build your design with a clearer workflow.

UX Project Checklist

No. 6 WebAIM Contrast Checker - be sensitive to the contrast

The concept of accessibility is becoming hotter and hotter. In the old days when no one cared about accessibility, interaction designers are mostly beauty-chasers who didn't realize the importance of usability review . However, it would be too late when users started to complain about the usability. Imagine that you are receiving countless call from users with red-and-green vision disorder and your team has to spend weeks on redesign a new version, it is a disaster. Generally, the culprit of the lack of accessibility is the lack of contrast. In the picture below, you might be able to tell the difference between the text and the background. But for users with vision disorder, the only the texts in the third row are recognizable.

WebAIM Contrast Checker

If you can tell whether it’s recognizable by yourself, I recommend you to use the build-in Color Contrast Checker of WebAIM. In the picture below we can see the result is 1.14 : 1, no wonder the users can’t distinguish the text.

No. 7 Marketch - a shortcut to have a conversation with the programmers

I’m so excited when I discover Marketch in GitHub. If you have tried things like Zepline or Invision Inspect, you must be familiar with the idea of Marketch. Think about the time cost you’ve spent on produce spec for programmers, this plug-in is definitely your savior. The generated spec is in HTML, the detailed information of a design component would show up if you just click it. Let’s check it out in the picture below.

Collection 3: Confident design

The concept of user centered design tells us in a way how we make user experience design. Theoretically, designs from the point of view of users are more likely get us to a more confident design result. But when our designs are questioned by product manager or other designers, how can we maintain such kind of confidence. The user experience tools below is here to solve this problem.

No. 8 UX Check - catch the whole in an action

I don’t know if you do check the design principles after accomplish your design. I’ll tell you what, we can hardly check our designs according to the principle check list due to the frightening quantity of hundreds of the design elements. UX Check is directly embedded in the browser and allows you to assess your design step by step in a row.

airbnb example

Click where you want to review

reiew example

All your reviews will directly generate a list with pictures.

No. 9 Usability Hub - fast user experience test of all kinds

Designers are all victims of choice difficulty. We always ask questions like: Why do the users do not click the button even if I’ve made it so big.

In fact, many little tests help us to make decisions besides the complicated user testing before the release. For example, now you have two icons like these two below and you want to find out which one is preferred by users. All you need to do is to spend 3 minutes to build your test on Usability Hub.

option 1 and option 2

Users will see the testing interface below:

testing interface

After a while, you can see the data as a key factor to make your design decisions, isn’t it great?

key data

If you'd like to try more tools, here are 15 UX and UI tools for designers!

Translator: Devin


Original website: zhihu

Original link:



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

Need help?

Join Mockplus on Slack Click here