small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="http://ift.tt/2scraZX">| Prototyping: From UX to Front End &mdash; Medium</a> Stephanie Kuo <img alt="" src="http://ift.tt/2rBCMqI">
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 -&gt; Mockup -&gt; Micro-interaction -&gt; Prototype
<h3>I. Wireframe</h3>
<img alt="" src="http://ift.tt/2sm1A38">
I would recommend using <a href="https://www.axure.com/">Axure</a> and <a href="https://balsamiq.com/">Balsamiq</a> for wireframing. Both of them can be used for digital wireframe and prototype. There are many icon options, and it makes wireframing faster. <a href="https://www.axure.com/">Axure</a> 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 <a href="https://balsamiq.com/">Balsamiq</a> better. The most important feature of <a href="https://balsamiq.com/">Balsamiq</a> 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 <a href="https://balsamiq.com/">Balsamiq</a>, and it’s quicker for me to use software than hand drawing. I prefer to use digital tools for wireframing.
<img alt="" src="http://ift.tt/2rBDPH4">
<h3>II. Mockup</h3>
Those are my best friends for visual design.
<img alt="" src="http://ift.tt/2smlScV">
<ol>
<li><a href="http://ift.tt/1Ls7nHW">Sketch</a></li>
</ol>
Talking about mockup, the most powerful tool is <a href="http://ift.tt/1Ls7nHW">Sketch</a>. 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 <a href="http://ift.tt/1Ls7nHW">Sketch</a>.
It combines the layer feature of <a href="http://ift.tt/Ii817v">Photoshop</a> and artboard feature of <a href="http://ift.tt/HJEbO9">Illustrator</a>. That’s why <a href="http://ift.tt/1Ls7nHW">Sketch</a> 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.
<img alt="" src="http://ift.tt/2sm44hJ">
There are some very useful plug-in for <a href="http://ift.tt/1Ls7nHW">Sketch</a>.
<a href="https://zeplin.io/">Zeplin</a> is a great tool to collaborate with engineers. You just need to upload Sketch file to <a href="https://zeplin.io/">Zeplin</a>, 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 <a href="http://ift.tt/1pZWfMs">Craft</a> to export sketch file to <a href="http://ift.tt/Strw5E">Invision</a> 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 <a href="http://ift.tt/1Ls7nHW">Sketch</a>. Designers must export it to another tool for prototyping.
<img alt="" src="http://ift.tt/2sm44OL">
2. Adobe XD
The best strength: it’s for free.
The interface is almost exactly same as <a href="http://ift.tt/1Ls7nHW">Sketch</a>, but some functions are not so advanced as <a href="http://ift.tt/1Ls7nHW">Sketch</a>. 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 <a href="http://ift.tt/1Ls7nHW">Sketch</a> fan.
3. <a href="http://ift.tt/Ii817v">Photoshop</a>
Everyone is familiar with <a href="http://ift.tt/Ii817v">Photoshop</a>. It’s the best tool for “Photoshopping”. As a UI designer, I also use <a href="http://ift.tt/Ii817v">Photoshop</a> to unify color tone, edit picture, and mock screen up on real mobile screens.
Sometimes I use <a href="http://ift.tt/Ii817v">Photoshop</a> to do website mockup, because <a href="http://ift.tt/VzHFdB">Cut&amp;Slice me</a> 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:
<img alt="" src="http://ift.tt/2smdU3h">
<a href="http://ift.tt/Strw5E">WebZap</a> and <a href="http://Velositey">Velositey</a> are for quick sketching layout and creating grids. The difference is <a href="http://Velositey">Velositey</a> is for free.
<a href="http://ift.tt/VzHFdB">Cut&amp;Slice me</a> 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. <a href="http://ift.tt/VzHFdB">Cut&amp;Slice me</a> is the reason why I choose Photoshop for website mockup.
5. <a href="http://ift.tt/HJEbO9">Illustrator</a>
I only recommend using <a href="http://ift.tt/HJEbO9">Illustrator</a> for drawing icons. Although <a href="http://ift.tt/1Ls7nHW">Sketch</a> already covers most functions for creating icons, <a href="http://ift.tt/HJEbO9">Illustrator</a> still has the most comprehensive functions for graphic design. Especially for complicated icons, it’s easier to use <a href="http://ift.tt/HJEbO9">Illustrator</a>.
BUT! DON’T USE ILLUSTRATOR(2015 cc) FOR MOCKUP!!!!!!!!!!
Many visual/UI designers with graphic design background are used to mockup by <a href="http://ift.tt/HJEbO9">Illustrator</a>, but it’s extremely tough to slice assets by <a href="http://ift.tt/HJEbO9">Illustrator</a> (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. <a href="http://ift.tt/Ii80Aq">InDesign</a>
Some companies still ask designers to use <a href="http://ift.tt/Ii80Aq">InDesign</a> 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.
<h3>III. Micro-Interaction</h3>
<img alt="" src="http://ift.tt/2smkNSe">
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
<img alt="" src="http://ift.tt/2rC5mIE">
As I mentioned before, <a href="https://www.axure.com/">Axure</a> and XD are also nice for prototyping. I’m going to introduce other Prototype tools in this paragraph, in case you’re using <a href="http://ift.tt/1Ls7nHW">Sketch</a>.
<a href="http://ift.tt/Strw5E">Invision</a> and <a href="https://marvelapp.com/">Marvel</a> 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:
<h3>Whatever, grab your card and buy <a href="http://ift.tt/1Ls7nHW">Sketch</a> NOW.</h3>
<img src="http://ift.tt/2sm41m3" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2rBUhqQ">Choose Good Tools for UI/UX Design</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Choose Good Tools for UI/UX Design

Choose Good Tools for UI/UX Design

Top Stories