UX Design: Big List of Handy Tools for Design Process

It is said that a real professional doesn’t mind which tools to work with. If you know your craft well, you can do things appropriately in different conditions. Probably, this is a true statement still one question remains. Why would anyone torture themselves if there are so many opportunities and innovations around?

The tech world continues to evolve and provide people with problem-solving tools for different fields. UX designers are often under pressure and need to provide a high-quality outcomes within strict deadlines. That’s why it’s important to have a set of effective design tools that would advance the workflow. In this article, we have gathered a list of useful tools for UI and UX designers based on our experience and additional research. Let’s see what they are.

Illustration by Tubik

Wireframing and prototyping tools

Sketch

Sketch app is by far the most demanded tool among interface designers. The biggest advantage Sketch provides to its users is a simple and clear functionality. It can be used as a prototyping tool as well as the software to create icons and illustrations. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel.

Moreover, the tool provides effective guidelines, for example, you can see dimensions of the components and spacing between them only by holding the alt key. Due to the concise functionality, the program is light, so it works much faster not overloading the computer which saves time (and nerve!) for designers. Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions.

Adobe XD

New approaches in UI and UX design encouraged software developers to upgrade their products and even create new ones focused on specific tasks such as layout structuring. Adobe group wasn’t an exception so they launched their newest product Adobe XD (experience design) in 2016. It came as an alternative to Photoshop and Illustrator for UI and UX designers and managed to receive quite high ratings.

This program is specially meant for UX designers creating wireframes, interactive prototypes, and vector design. It is a good chance for Adobe fans to come back to the familiar tool with the significant upgrades focused on the user interface design. For those who are new to web design, XD interface may seem a bit difficult to figure out. Adobe XD is now available for both Mac and Windows 10 operational systems.

Figma

It is one of the most trending design tools today which brings innovative solutions and opportunities for UI designers. First of all, it is the professional design tool which is based on the web enabling design teams to collaborate in real-time working on one page. Also, designers can even export CSS right inside the program which enhances the communication with a development team. Figma allows for creating wireframes, prototypes, and vector icons for free just by signing-up but it works only for individuals while teams need to pay for it. In addition, the app is available for various operating systems.

Lunacy

Lunacy started as a Sketch files viewer for Windows users, but now it’s full-scale graphic editing software that enables Windows users to open, create and manipulate Sketch files. It is especially helpful for the teams whose members work on the computers with different operating systems. Therefore, for different stages of a process, it may be the way to make the flow more productive and friendly to all the participants – designers, developers, clients, and managers. What makes it even more attractive, it’s free for everyone.

Interactive prototyping

Marvel

Marvel is a free cloud-based tool for interactive prototyping which requires no coding skills. You can download wireframes from Sketch and Photoshop or even take a photo of a sketch made on a paper and then create realistic prototypes of a mobile app or website. Marvel offers to create unlimited projects for free with commenting on your first 3 projects. Also, you can get a paid premium plan with unlimited projects and comments along with removed Marvel branding and more additional features.

InVision

It is a free tool for creating interactive prototypes. InVision got the popularity since it enables to import files easily files from Sketch or Photoshop and build animated design. Interactive prototype in InVision looks like the real-life project because designers can link the pages simulating the usage of a real website or mobile app. Moreover, InVision helps to improve feedback process allowing to provide comments right on a prototype.

One more special feature is organizing UI components in different columns showing the status such as to-do, in progress, or approved. This way both a client and designer can control the workflow more efficiently.

Principle

This is a simple app which aims at creating animated UI design. The significant feature of Principle is that it can work even offline so your work progress doesn’t depend on the quality of the Internet connection. Interactive prototypes can be easily converted into a GIF or video and be shared in a portfolio on Dribbble or elsewhere. The interface of this tool is quite similar to Sketch app, so it would be easy to use for many designers. Also, an interesting feature is that you can preview designs on iOS devices. And here comes a pitfall. Principle software is only available for the iOS system, so Windows fans need to look for alternatives.

UXPin

The UXPin team is known as experts in user experience design field who constantly share their knowledge in various books and articles. Their product, UXPin editor, is a web-based tool for prototyping which can be used for creating wireframes along with high-quality mockups and turning them into interactive prototypes. Also, designers can download their wireframes from Sketch or Photoshop for prototyping in UXPin. In addition, the software can automatically generate style guides and specs for developers.

Color choice tools

ColorHexa

This is a free web-based tool helping to generate effective color schemes. You just need to enter a color value into the search field and you get detailed information: tints, shade, and tones as well as the alternatives and suggested color schemes. One of the biggest privileges of this tool is that it shows how a color will be perceived by people affected by a color vision deficiency. This way designers can make sure that their design will look good for users with colorblindness too. In addition, ColorHexa provides alternatives for color in different formats.

Paletton

Paletton is a free web tool assisting to pick color harmony for user interfaces. It is the software which UI designers have been using for color choice for a long time. Paletton has a simple functionality: people need to choose a color on a color wheel or enter its value and the tool generates beautiful schemes. Also, users can choose a type of color scheme and see similar schemes in different tones.

Flat UI Color

The flat design direction keeps being popular so a tool for choosing flat colors is a must-have. Flat UI Color is a website providing sufficient flat color schemes. All colors contain the HEX codes which can be copied right into the main software like Photoshop or into a style guide. The app has a narrow focus but it’s extremely useful for those who often work with flat design.

Material Design Color Tool

Color Tool is a free web-based app which is a part of Google’s material design resource which many of you may be familiar with. The app is focused on mobile design providing material color schemes. Users can try schemes on mobile templates which are also available in Color Tool. In addition, you can find the data on the accessibility of the chosen color schemes and adapt it if needed.

Pictaculous

To find color inspiration many designers go searching for beautiful photos. Pictaculous helps to analyze colors presented on images and output similar color schemes. You just need to upload a photo from a computer and you get exact colors with the HEX codes right at your disposal. In addition, the suggested color schemes can be saved as Adobe Swatch file.

Typography tools

Google fonts

Typography is one of the basic parts influencing user experience of digital products. That’s why it’s important to have handy tools helping to create effective typography.

Google fonts is a popular free web application featuring over 600 font families. Each of them can be previewed in different size and within a custom text. Also, you can see the loading time of each font so that you could make sure it wouldn’t take too long. Google fonts provide the data on embedding specific fonts into a product. You can just copy the code generated specifically for the chosen font in the right section of HTML document.

Typekit

Typekit is a time-tested tool with a library of fonts. Here you can find the variety of fonts from the classic one to the brand new choices. To use Typekit you just need to subscribe and get the access to all fonts. The tool has a clear interface with all the essential data about fonts including weight and style. Even more, it allows for seeing each font in different sizes and some colored backgrounds.

Fontjoy

One of the biggest dilemmas in typography creation is font pairing. There are thousands of fonts and it can become an endless process of choosing a perfect match. Fontjoy is a handy tool for font pairing integrated with Google fonts library. You can just choose fonts setting the right characteristics like size and weight.

This free tool pulls a full library of fonts straight from Google Webfonts and curates them together on one page. Then you choose which font(s) you’d like to test including the size, weight, and line height on the page and wait for the match. In addition, you can regulate how contrasting or similar you want a pair to be just by using a slider on the top of the app.

Typetester

Sometimes we can’t decide which font of the two chosen suits better. Typetester is a quick solution for testing and comparing fonts. It provides previews of multiple fonts on one page with their parameters including leading and tracking. Fonts can be chosen from different sources such as Google fonts or Apple Mac defaults and tested by adjustment of their size, alignment, as well as with customized text and backgrounds.

Calligraphr

Custom fonts is an effective way to add originality to a product. Calligraphr can create fonts based on handwriting. You need to download a template with your writing and the tool will generate it into vector fonts. After they are generated you can edit the details to polish your custom font.

Icons and graphics tools

Icons8 app

Icons8 is an app for Windows and Apple containing about 90,000 icons for digital products. Even more, every day new icons are added to the library. The app guides you through the library helping to find the right pack of icons by categories. Here you can find icons for iOS, Android and Windows platforms available in various formats. The selected pack can be copied right into Sketch, Figma, and others. Moreover, all icons can be recolored and resized in your editor. Icons8 allows downloading PNG icons on 100×100 for free. If you want to get access to all the icons in different formats, you can get a paid license.

Free Icon Maker

If you don’t like any of the icons found on the Web you can make them by yourself. Icons can be created in one of the visual editors such as Sketch, Illustrator, and Figma, or you can apply some free web-based tools. Free Icon Maker allows for creating and editing icons online. When you register there, you are free to use all the features such as downloading icons from the SVG files to modify them in this tool.

IconJar

Designers often download hundreds of icon packs and then it becomes hard to find the right one. IconJar is an effective organizer providing folders for specific icons. For example, if you need to find a “home” icon, you can search for it by the name and the tool will show you the icons from all sets. IconJar is available only for MacOS but soon there may be a Windows version. The program is paid but it has a free trial.

Ouch

UX designers that aren’t skilled in drawing can face the problem of the boring content for app screens and web pages. Ouch helps creators to overcome the lack of quality graphics. At the moment, the resource presents illustrations in 14 styles for 23 typical UX screens such as “fatal error”, “message set”, “downloading”, “subscribe” and many others. You can use them free for a link to the resource or buy the license to get the access to editable files and use the graphics without credits.

Collaboration tools

Trello

Our personal preference for projects monitoring as well as in-studio information flow is Trello. This tool is simple, effective, clear, and intuitive. This tool for communication provides clear systems of boards and cards which have a gear deal of features. It makes possible to split any task into sprints and enables us to carry out the project providing constant updates and presenting images. It is easy to set deadlines (due-dates), delegate specific tasks to specific people, create checklists and mark out the most important and urgent tasks. It also has one more really precious feature. Trello has not only thoroughly thought-out website but also efficient and smart applications for iOS and Android. This gives an additional opportunity for fast feedback so it saves time, efforts and makes management of the projects very comfortable for the customers. Trello is a great option for creating the spot where designers, project managers, and customers could together make a fast and effective workflow.

Zeplin

A successful design project is built upon effective communication of the creative team and clients. Zeplin is a platform for enhancing the collaboration between designers and developers. The major feature is a detailed style guide generator which makes sure design elements are implemented appropriately. Designers can upload wireframes from Sketch adding them to project folders in Zeplin. This way developers get all the data about designs including sizes, colors, and CSS suggestions for UI components.

Presentator

Presentator is a free web-based collaboration tool enabling to share designs with team members, developers, and clients. You can download a file and decide on permissions to it. For example, some may have full access with the ability to leave comments while others may have read-only access. The biggest advantage of this tool is that it’s absolutely free for everyone.

A useful tool works effectively only for those who know what they are doing. So, don’t forget to constantly learn and improve your professional skills. Stay tuned!

Originally written for Tubik Blog
Title illustration by Ouch