Table of Contents
In this article, we’ll take a look to some free tools we can use in User Experience design and development (UXD), as well as web design.
Many times we wonder how to do this or that thing. Or we invest money in services or software without knowing how useful will thye be. Or even worse, that there are tools to do the same without spending a cent.
So we built a list with all kind of free resources for designers. With one particularity: unlike other lists you may find around, we actually used all of them in production environments. We’re NOT trying to sell you anything.
Of course, while we tried to do this list of resources as unbiased as possible, you’ll notice some apps we love (and use every day).
Bottom line: there are no paid links, no referral codes and all resources are completely free.
UX Free Tools vs Paid Tools: What’s the difference?
Well, the obvious answer is money.
But monetary issues aside, it is quite logical to wonder what other differences exist. And if those differences are worth the money savings.
Of course, there is no “one size fits all” answer to these questions. But in general terms, we can say that the use of free tools in UX has almost no difference with paid tools.
Some of these free applications are even superior to the paid ones. While most of them work with a “freemium” model: you have to pay to have access to more features. The most common model uses a project-based limitation, but with all features enabled.
In other words: we can do exactly the same with the same tools, both in its free version and in its paid version. The difference is the number of projects that we can have at the same time.
Of course, if we are a web design agency, or a UX consultancy, the limitation per project will immediately force us to pay.
But for freelance designers, or even small design agencies, these free tools come in handy. These free alternatives can work as a way to do the same as large design studios. Only that for free, or for a fraction of what these studios pay in UX tools costs.
Please note: this is a hand curated list, and it’s completely subjective, based on our own use. Thus: we used and tested these free tools (in its free version) before recommending any of them. You won’t find any paid link or referral, it’s our honest opinion. You’ll see most of the screen captures are for our own projects, so you know this test is for real.
Another thing to keep in mind: we use the paid version for many of these tools. However, the reference is for free versions and we won’t tell which tools we chose to pay in order to avoid any type of bias.
Without further ado, let’s go to the list!
2021 best free design tools list
Pencil
An absolute winner, Pencil is a completely free wireframe, prototyping, schematic and diagram tool that has absolutely nothing to envy of its paid counterparts.
Advantages:
- Free
- Easy to use
- Windows, Mac and Linux versions
- Constantly updated
- Add-on repository on GitHub
- Export of files in multiple formats (PDF, SVG, PNG, ODT, DOC, etc)
You can download it at Pencil Project
InVision
This service is one of the best in its field, and completely necessary for any UX designer, no matter if freelancer or a design agency. InVision allows you to work on designs in collaborative environments, as well as providing the ability to create Prototypes, Mood Boards and Mock Ups. It also has the Craft plugin that expands the functionalities by adding a series of tools for Photoshop and Sketch.
InVision became one of the main free design tools for web and UI designers,
This service is free for life for one project at a time, but you can delete or archive the project and continue with a new one.
Draw.io
Do you need to create schemas or workflows? Then Draw.io is the completely free solution to do it.
Loading and saving diagrams created by Draw.io is as if you were using the program installed on your computer. These files are saved as .xml and can be used by different programs that can read these languages. Diagrams can also be exported as .jpg, .png, .gif, .pdf and .svg for use on the Internet or distributed by email.
One of the most attractive features of Draw.io is the large number of vector graphics that are available to the user. Although these graphics don’t have great detail, they are still effective in getting the desired result without spending money on an application.
For those who need simple but functional diagram development, all the main representations are available.
It has a connection to Google Drive, DropBox, Trello, One Drive and GitHub to save diagrams in the cloud, or you can save locally in your computer. In addition, you can import files from programs such as Lucid Chart, Gliffy, VSSX, and other XML based programs.
Caravel
Another great service. Imagine Basecamp, just specific for user experience designers. They can share wireframes, user journeys, prototypesā¦. Whatever you can think of! And best of all, it’s completely free for 1 project (it used to be 3 projects, now only one), with access for an unlimited number of participants.
It also has some pretty nifty integrations, such as
- Sketch
- Invision, Marvel & Figma integration
- Google Docs & Sheet
Origami
Origami is a Facebook service used to design interactive prototypes for web and mobile. It uses layers like any good design program, and it connects automatically to Sketch and Figma
Furthermore, prototypes can be tested in real time, on both Android and iOS. You can share the prototypes with other users or test on your phone. An amazing feature: you can record on video prototype interactions.
In short: a very useful and completely free tool.
The main issue? It only comes for Mac š
Reframer
Reframer is a qualitative analysis tool created by Optimal Workshop. It allows you to perform card sorting, add notes from user interviews and user test sessions. You can also include labels, assign scores of significance to easily identify topics, retrieve key information and, in general, have data in different ways. Reframer is completely free (with some limitations).
Google Analytics
Seriously, did anyone think I was going to leave the best analytics tool out there off this list? Well, wrong guess!
I know some people thinks it’s not cool to say good things about Google, but come on!
GA is the standard by which any analysis tool is measured, it’s easy to use and it’s completely free, what else could you ask for?
Hotjar
Personally, I love Hotjar, so any assessment I may make is going to be colored by my daily use of the service.
This application offers a lot of cool UX research features such as
- heatmaps
- cursor movement tracking
- scroll tracking
- device performance
- recording on video of user visits
- behavior analysis in forms
- conversions and abandonment
- polls
- surveys
- user recruitment, etc.
For me, an almost magical tool that I use every day. Best of all, all of this is available completely free (with limitations, of course), so if you’re managing one project at a time, it’s a very good idea to use these free tools.
IxD Checklist
This may not seem so important, but I can assure you that it is a very useful tool. As its name implies, it is a checklist of things that no Interaction Designer should forget to check before showing a project to a client.
It seems obvious, but when we are about to deliver a project, it can save us a lot of time and problems with clients, project managers and other stakeholders.
Without further ado, visit IxD Checklist
Freemind
Freemind is a tool for creating mind maps and organizational charts. It is not the most complete, nor the best, but it competes with dignity and it is absolutely free. Unless you require a highly complex diagram, Freemind is probably the right tool for most cases. It has nothing to envy to most UX paid tools, and again: it’s completely free!
Another good news is that it can be downloaded for both Mac and Windows and Linux, which is more than what Origami and Sketch offer. This is highly commendable, considering it’s free software made in the free time of its programmers.
The big con? Its visual interface is really very bad in terms of aesthetics, although it is not so bad in terms of usability. So if you don’t mind seeing the interface, it’s an ideal tool
Fluid UI
Fluid is a free tool for creating interactive wireframes and prototypes. Fluid uses a library of elements that includes iOS, Android, and Windows UI, and its drag-and-drop interface really makes prototyping very easy and fast, even for those who have never used similar tools.
The list of clients that use it includes the largest IT companies, so there is no doubt that it is a tool that is really worth it.
The free lifetime plan includes 1 project of up to 10 pages, which is more than enough for any designer working on small projects.
WARNING: they use dark patterns to make you sign up for a paid option, so make sure you click on the low accessibility text “Free Forever” on top of the 3 paid plans.
Trello
Trello is supposed to be a free project management tool that is based on the Kanban methodology. But in my personal opinion, Trello bases its model on doing things right. Even their mascot Taco is loved by its users, which is no small thing.
With Trello we can organize information about projects, share it with teams, assign tasks, work collaboratively, etc. All this is done on a board where we swipe cards. See the image below:
The user interface is very nice and really intuitive, and interacting with teams is a very simple task, as well as very organized.
In addition, it is synchronized with all types of devices on any operating system, so we can access information from where it is most comfortable for us, at all times. Also, the free account allows unlimited projects!
Bottom line: if you work as a team, YOU NEED TRELLO.
Nimbus Screenshot
Nimbus is an extension for Firefox, Chrome and Opera browsers that also exists as standalone software for Android and Windows operating systems.
What Nimbus does, and it does it very well, is to capture the screen of the browser (or of active programs if we use the independent software).
These snapshots can take the entire page, the visible part of the page, or a user-defined slice.
Once the capture is made, we can make annotations, use tools for comments or even drawing (very basic) and then it allows us to save on the Nimbus server, in Google Drive, send by Slack or simply save on our computer.
In short: simple, very useful, works well and it’s free. And absolute must for web designers and UX consultants.
Download Nimbus (official page with all versions)
The Stocks
The Stocks is a site that lists many different sites featuring different types of resources: including photo stock archives, fonts, icons, videos, color palettes, etc. There are literally MILLIONS of free resources.
So if you need “that special image I can’t find nowhere (for free)” make sure to check this site.
Visit The Stocks
Five Seconds Test
This tool is a user behavior tool for studying first impressions. Hence the name “5-second test”, which is a memorization technique that we use in research with real users.
As the name implies, the technique consists in showing a user a UI screen for 5 seconds. Then the user has to write what she remembers or choose from a set of options.
This tool allows analysis by numerical metrics (quantitative analysis) or using word cloud visualization. It also allows 2 types of tests: first click test and preference tests, as well as the design of qualitative questionnaires
In short: a useful tool without great complexities. It does what it has to do and that’s it.
Click to visit Five Seconds Test
Coolors
Another favorite. Coolors is an AI based color palette generator that allows you to start from one or more colors or simply get random suggestions. The colors come with their name (although a bit iffy) and any kind of color notation type, such as Hex, RGB, CMYK, Lab, and many more.
You can even create accesible color blindness palettes, create palettes from photos, export as SVG, ASE, scripting or plain images.
In short: use it once, you’ll never stop using it. Mark my words!
Click to go to Coolors
Contrast Ratio Checker
Continuing with accessibility tools, Contrast Ratio Checker is a must. It does only one thing, and it does it just right. Basically, it lets you input a foreground color value, and then a background color value. After that, you get the Contrast Ratio for both AA and AAA levels.
Remember: if you don’t check contrast ratio, you’re NOT doing UI (neither UX), you’re doing just web design with no UX framework.
Visit Contrast Ratio Checker
Open Doodles
Doodles and hand drawn illustrations are the rage right now. And it will continue to be one of the top 2021 design trends.
Open Doodles is a library of free hand drawn illustrations without usage limitations. Some of these illustrations are animated.
Don’t get fooled by the color (they all have the same color), you can generate new colors as well, and download the doodles in a zip package.
Click to go to Open Doodles
Material Design
Without a doubt, a set of design guidelines any UI designer must know like the A-B-C. You can’t be a UI designer until you know Material. It simply is Android’s guidelines, so ignoring it is the same as saying “I don’t care about 86% of the people around the world”.
While Material has been criticized because all apps look the same (which is a fair criticism if you follow what Material says), it still is the leader between all design systems. Bar none. And to address that criticism: Material is a set of guidelines, not RULES.
Go to Google Material
Kraken
One of my favorite free tools for image compression. In times when Google demands high speed, one of the variables you need to control is image size. And what Kraken does is to compress your images without losing quality.
Speed is super fast, user interface is great and you can add as many images as you want, with one condition: it can’t be bigger than 1Mb.
One thing to note: the owner of Kraken is the guy who created the compression algorithm for most compression tools in the market. So it does make a lot of sense to use the original rather than the copies!
Visit Kraken
Typ.io
One of the coolest free tools for any web designer. It simply analyzes different fonts combinations so you can preview how they look. The list is hand picked from existing sites, so you can visit the sites to see the whole deal.
If you’re looking for inspiration with regards to typography, you should add this site to your bookmarks.
Visit Typ.io
UI Patterns
Student? Maybe a web designer thinking on moving to UI design (UID)? Perhaps a UX consultant in need of some inspiration?
Well, look no further: UI Patterns is one of those free tools to always keep at hand. It has a lot of… well, UI patterns, go figure. And each UI pattern includes its definition, its usage and several examples for each of them.
Click here to go to UI Patterns
iOS Human Interface Guidelines (HIG)
Same as with Material Design, we can’t ignore Apple’s design guidelines. We all know Apple is the world leader in interface design (and product design, and industrial design, and… ).
So it’s imperative to know its design guidelines.
On one hand, because you may need them if a client requests them.
On the other hand, because you’ll learn A LOT by following the advice from real design masters.
Service Design Toolkit
Same as UI Patterns or Material or Apple HIG, this is another tool that is aimed to teaching and learning. In this case, an amazing toolkit for service design.
Granted, this is not very useful for web designers or even UI designers. Instead, it’s oriented to UX research and the many nuances of designing a whole user flow or UX process.
However, for those willing to learn what real UX is, this is a very nice starting point. (And no, UI is not UX and there’s no such thing as UI/UX! )
Figma
Last but not least: Figma. I won’t extend much on this, since it would be too long. Besides, whether you work on a design agency, or as a freelance UI or web designer, chances are you’re already using it.
Figma is a free prototyping tool that takes inspiration on Sketch, but takes it a step further by adding desktop and cloud based version, agnostic operative systen (Sketch is Mac only), collaborative design abilities and… it’s 100% FREE.
Figma took the UI prototyping market by storm. To a point that Adobe, the undiscussed leader in design software had to offer its prototyping tool Adobe XD for free in order to compete. And it virtually made InVision Studio stop its development (not to confuse with InVision classic, mentioned above).
Tip: Figma’s only weakness is that animation prototyping is quite iffy. While improving every day, it’s nowhere close to animation in Adobe XD. However, if you combine Figma with other free prototyping tools such as Origami (mentioned above) or Framer (out of the list because of its redirect antipattern, close to a dark pattern), then you’re all set. There’s absolutely nothing you can’t do with these combinations.
Go to Figma
Verdict: And the Best Free Design Tool for 2021 is…
And the winner is ā¦ Figma! There is no way you can beat a cross-platform collaborative design app. Also, when the app is completely free, what else can the competition do to keep up?
But there are other applications that we consider very interesting, almost indispensable in any designer’s toolbox. That is why we made a list of 10 free design apps that can cover almost any need when it comes to user experience development, UXD, UID or web design.
Based on the tests carried out in our design studio, and considering the best value for money, the top 10 of the free resources for UX and web design would be the following:
- Figma
- Trello
- Draw.io
- Origami
- Hotjar
- Google analytics
- Kraken
- Coolors
- InVision
- Pencil
We truly believe that whether you are trying to get started in UX, or want to work as a UI designer, or just want to do app or web design, with these tools you have almost all possible scenarios covered.
Hope you enjoy these tools, and don’t forget to share this article to help more designers
Ariel is a Bachelor in Computer Sciences and writer for technology related sites. He lived in Nicaragua, Mexico, Spain, France, Ireland and Argentina. Ariel is a big fan of sports, specially football. And he swears PHP is not going anywhere!
We can improve your business!
Let us help you with the best solutions for your business.
It only takes one step, you're one click away from getting guaranteed results!
I want to improve my business NOW!