5 Lovely Tools UI Designer Needs in 2020

There are some useful tools created that help UI designers work easier

丹尼爾 Daniel
uxbreakfast
3 min readJul 4, 2020

--

I want to introduce five tools I am using and share some feedback with you.

1/ Stories by Freepik

Illustration by Stories by Freepik

I love to explore freepik. There are lots of free stock photos and illustrations for designers to use. Now, they bring us some smashing — a collection of illustrations. Sometimes, you may not have time to create a bundle of graphics from ideas and sketch, and you go to a stock photo website to download some we need, thus, often struggle with mix up and re-color all downloaded illustrations as they are all coming from different artists.

Five illustration styles provided (Screenshot from Stories by Freepik)

Stories by Freepik has five illustration style for you to choose, and you can change the color you want before you download the image. If you are not a pro in making animation, you can use the animation panel in the tool to animate each layer to set the entrance effect, easing, and the way they are looping. Exporting is easy, they provide a different export format including SVG, GIF, and MP4. The only thing you have to know, you have to put the attribution when you use it. So for me, I would take it as a reference site on how they apply a color scheme into different graphics to align same style.

Screenshot from Stories by Freepik

2/ Whimsical

In the past, I use Illustrator to make a flowchart to present the app user scenarios, if I want to make changes on the blocks that make me messy. The arrows redraw again and again. Whimsical made me enjoyable to diagram. The tool allows you to create blocks, they will handle the arrow to make it beautifully placed. They provide four templates for you to make flowcharts, low-fi wireframe, sticky notes for affinity mapping, and mind maps.

Linking blocks is easy! (Image by Whimsical)

3/ Color.review

There are tones of checking the accessible colors. This is one of them, I love it because the interface is clear and also you can save the link as a record.

Test accessible color in Color Review

4/ Make a smooth shadow

Often time when I played with shadow in an app, I just can’t adjust a perfect cast shadow in the sketch app. With this tool (Thanks Philipp!!), you can make the shadow more natural by control the transparent and distance constraint between each layer. Yum… I really don’t know much how to calculate the constraint with CSS coding, but I have no doubt this website makes me happy, I can now pass those code to my developer, no messy.

5/ ColorBox

If you think the color tool in material.io is just a fundamental that you want some advance tool to shift and fine-tune the color set. It is very helpful. The tool makes your color set looks more ‘natural’.

ColorBox Allow you to fine-adjust the start, end color and color curve

Next time I will try to introduce more tools that I have been using. Stay tuned! I am Daniel, a UX Designer from Hong Kong, and currently start to write trendy stuff about UX/UI.

--

--

丹尼爾 Daniel
uxbreakfast

The step by step to learn ux and collaborate. Stay fool, stay hungry!