Choose Good Tools for UI/UX Design

These are the most popular UI design tools. Pretty a lot, uh? I will briefly introduce those tools in this article. What are those tools used for? What are their strength and weakness? When should I use which tool? After reading the article, you will better understand how to choose the best tool in what situation.
I will introduce in following order:
Wireframe -> Mockup -> Micro-interaction -> Prototype
I. Wireframe

I would recommend using Axure and Balsamiq for wireframing. Both of them can be used for digital wireframe and prototype. There are many icon options, and it makes wireframing faster. Axure is the most powerful prototype tool on the market, but I don’t like it. I prefer to have artboard and check all screen at a glance.
For wireframing, I like Balsamiq better. The most important feature of Balsamiq is its hand-drawn line. It’s very cute and very intuitive. It’s very important to have “unreal” style wireframing, or users will focus on the details and ignore the whole using process. Hand-drawn style is a good helper to make users understand it’s not the final version and focus on the overall process.
It’s a good idea to do hand-drawn wireframe on paper, but digital version is easier to be shared and collaborate on-line. It also saves your time for drawing icons by using digital tools. I’m pretty comfortable with using Balsamiq, and it’s quicker for me to use software than hand drawing. I prefer to use digital tools for wireframing.

II. Mockup
Those are my best friends for visual design.

Talking about mockup, the most powerful tool is Sketch. The price is affordable and it’s very very strong. It’s only $99/year, and there’s 50% discount for students. I can say I bought Mac for Sketch.
It combines the layer feature of Photoshop and artboard feature of Illustrator. That’s why Sketch is so powerful.
Another powerful feature is Symbol. (I’m sorry to say “powerful” so many times, but it’s true.) You can make frequently used buttons, tab bar, or navigation bar to Symbol. When making some adjustments, you don’t have to change the colors and shapes one by one. It’s super convenient.

There are some very useful plug-in for Sketch.
Zeplin is a great tool to collaborate with engineers. You just need to upload Sketch file to Zeplin, it will automatically mark color code, width, and length of your screens. Engineers can check it directly without bothering you again and again.
You can use Craft to export sketch file to Invision for prototyping. It also provides many profile pictures and lorem contents.
The disadvantage of Sketch is prototyping. There’s no built-in prototype function in Sketch. Designers must export it to another tool for prototyping.

2. Adobe XD
The best strength: it’s for free.
The interface is almost exactly same as Sketch, but some functions are not so advanced as Sketch. For example, it’s hard to manage Symbol, and there are no reflecting and drawing polygon functions. Sometimes it’s pretty annoyed.
The best thing of XD is prototyping. You can switch to prototype mode and start to link artboards. It’s convenient, but the transition animation and interaction are very limited. I really hope sketch can add built-in prototype function, so I can get rid of XD…OK, I’m a Sketch fan.
3. Photoshop
Everyone is familiar with Photoshop. It’s the best tool for “Photoshopping”. As a UI designer, I also use Photoshop to unify color tone, edit picture, and mock screen up on real mobile screens.
Sometimes I use Photoshop to do website mockup, because Cut&Slice me is perfect. I won’t recommend using Photoshop for mobile app. When doing app mockup, we have to check multiple screens at the same time, but there’s no artboard function in Photoshop. It will be very difficult to use Photoshop for app mockup.
There are also some awesome plug-ins for Photoshop:

WebZap and Velositey are for quick sketching layout and creating grids. The difference is Velositey is for free.
Cut&Slice me is the best slicing tool in the world. You just need to name the layer in rules, and press one button to export all assets. It can also train you to have good naming habits. Cut&Slice me is the reason why I choose Photoshop for website mockup.
5. Illustrator
I only recommend using Illustrator for drawing icons. Although Sketch already covers most functions for creating icons, Illustrator still has the most comprehensive functions for graphic design. Especially for complicated icons, it’s easier to use Illustrator.
BUT! DON’T USE ILLUSTRATOR(2015 cc) FOR MOCKUP!!!!!!!!!!
Many visual/UI designers with graphic design background are used to mockup by Illustrator, but it’s extremely tough to slice assets by Illustrator (at least in 2015 cc). Illustrator is trying to upgrade its UI design functions, but I haven’t tried it. For 2015 cc and the previous versions, the layout functions are so poor. We only can create another new artboard for each item, believe me, it will drive you crazy.
PLEASE!!!!!DON’T USE ILLUSTRATOR(2015 cc) FOR MOCKUP!!!!!!!!!!
6. InDesign
Some companies still ask designers to use InDesign for UI Design. I still can’t understand why they use a graphic design tool to design UI. It’s still a mystery to me.
III. Micro-Interaction

Sometimes it’s very difficult to explain the animation effect by language. Some designers use After Effect (it’s super cool), and I use HTML/CSS. There are many good examples on Codepen. After editing, I just need to pass the Codepen link to engineers. They can check the codes or use the codes directly. With CSS code, they don’t have to watch GIF and guess how many milliseconds for this transition.
IV. Prototype

As I mentioned before, Axure and XD are also nice for prototyping. I’m going to introduce other Prototype tools in this paragraph, in case you’re using Sketch.
Invision and Marvel have similar interfaces. You can draw rectangles on exported JPG file and link to another page. It’s very simple, everyone can learn it in one minute. However, compared with Axure, their interaction and transition options are limited.
And my engineer friend thinks it’s pretty efficient to code by Swift for your reference.
For whom end the article without reading: