7+ Free UX Design Tools Everyone Should Use
Posted on June 24, 2019 | Updated on October 28, 2022
UX design becomes more difficult each year, and so does keeping our users happy. Why? The answer is simple: Product quality increases with each software iteration and app release. There are so many UX design tools available, and some cost a fortune. Plus, expectations for new designs and products are high, and they only continue to grow. With each new UI a user encounters, the expectations increase. Believe it or not, there are some free UX design tools that are comparable to the ones that cost money. Here are the top free UX design tools you can get your hands on right now:
Jump to: Stylify Me | Creately | Freemind | Origami | ClickHeat | Totoal Validator | Five Second Test | Protonotes | Checklist Design | Fontjoy | DrawKit | HeySpace | UsabilityHub | Pingdom Website Speed Tests
1. For Style: Stylify Me
UX designers constantly analyze and assess other products because it helps us improve our own work. It also helps because we can pull inspiration for a design from anywhere. If you’ve ever looked at another site and wondered what color was used, you’ll appreciate Stylify Me.
It’s a reverse engineer tool that crawls a URL and returns the HEX values of the colors used. Simply enter the URL of the site you want to copy, and the tool will spit out the HEX values. You can also download a list of the colors used in a PDF and review it offline.
Expect to discover the HEX values for the background colors, font colors and typography data. It will also tell you the image dimensions for all the content on the homepage, so you can mimic the general design or style.
Obviously, you don’t want to copy the color scheme of another site, but finding that perfect blue used on another site saves you time and effort in locating the color on your own. You can then create a unique palette around that color choice.
2. For Sitemapping: Creately and Freemind
Creately is an excellent diagramming tool to create sitemaps, wireframes and flowcharts. As a UX designer, you need a plan of attack before you jump in and start developing. Creately is the perfect tool. It was designed from the ground up to accommodate collaboration, which is great if you work on a team. You can work on a map or diagram in real-time with colleagues. You can export your work to other apps like JIRA and Google Apps.
With a free Creately account, you can create up to five public diagrams, and collaborate with up to three team members at once. If you need more than that, you’ll have to pay for a premium subscription. This tool makes a UX designer’s job easier, because you can share ideas for projects with clients and get approval with just a few clicks of the mouse.
Freemind is an entirely free, open-source mind mapping tool that can be used to create sitemaps. Everything you design with the tool is native HTML, so it works like a regular website. It’s simple, easy to use and includes a variety of great UX design features you’ll find super helpful.
Use Freemind to create a sitemap that allows visitors to easily find what they’re seeking on your site at a glance. However, you can also plan the structure of a new site using this tool. Mapping out a site before creating it allows you to see how it might scale as your business grows.
3. For Prototyping: Origami
Origami is a free prototyping tool from the Facebook team. With it, you can create interactive prototypes for desktop, tablet and mobile. You can also import screens, UI components and more.
Supported interactions include swiping, scrolling, tapping, dragging and more — such as pinch to zoom. It’s great because you can really flesh out the design and navigation elements. You can also export code snippets from your Prototype to any mobile platform, including Android and iOS, so the rest of your development team has a working example to copy and paste into existing projects.
One of the biggest advantages to designers is that you can design online with layers. This allows you to test different ideas without completely changing your project. If you then want to go back to a previous version, you simply swap out the layers.
4. For Analytics: ClickHeat
ClickHeat can be a little difficult to install on a site, especially a prototype or early design. Once it’s in place, however, it works wonders. The tool creates heatmaps of clicks and interactions on a webpage. It highlights both hot and cold zones, so you can see where users spend most of their time. Unfortunately, there’s no mobile app version, but you can still learn a lot from it.
Consider cloning the design of your mobile app on a website and tracking how users interact with the elements. Analytics data and user testing information can help you hone your design and create something special.
One way designers should utilize ClickHeat is when decluttering a landing page. Put the focus on only those areas site visitors are clicking on and reduce the noise on the items they aren’t as interested in.
5. For Accessibility: Total Validator
Total Validator is a comprehensive validation tool for designers. It checks accessibility, spelling and broken links on an HTML or XHTML page and points out significant problems, so you can fix them. After a long crunch session, when you’re tired and ready to take a break, a tool like this can work wonders. It discovers problems you might overlook on a quick pass of your prototype or site design.
If you want to check whether your website is ADA (Americans with Disabilities Act) compliant, this is a tool that allows you to identify issues and fix them. Since broken links aggravate site visitors and cause an increase in bounce rates, you can also utilize the broken link checker to make sure visitors aren’t running into 404 errors.
6. For User Testing: Five Second Test
After you build a prototype of a new design, the next step is to get some feedback. Five Second Test collects quick first impressions from users, and it can handle A/B testing. Designs are not interactive, but testers can see a screenshot of a design for five seconds before offering feedback. You can’t test the working elements of a design, but you can see how users might react to a particular kind.
Considering 26 percent of installed apps are abandoned after the first use, initial impressions are a big deal. You can use Five Second Test to gauge initial reactions and interest for a design. While the impressions are general in nature, rather than aimed at your target audience, you’ll still be able to gauge the overall usability of your site and how well the interface works.
7. For Annotation: Protonotes
While working with the rest of your design team, it helps to have an annotation tool for leaving notes. It also works for leaving simple reminders for yourself, as well. Protonotes is a great — and free — tool that allows you to add sticky notes to a prototype or design. It’s an excellent way to receive feedback from the rest of your team — and your testers, too. You have to add a Javascript snippet to each prototype page, but the tool does the heavy lifting.
As a UX designer, any tool that allows you to stay more organized increases your productivity. Leaving notes for your team allows everyone to get on the same page. If a client leaves a note about a change, it won’t be missed or forgotten, which also improves overall customer service.
8. For Details: Checklist Design
When you’re working on multiple projects, and each one has moving parts that need to come together, it’s easy to forget some of the smaller steps required to create a 100% usable design. Fortunately, you can create a checklist that covers all the fundamental points and use it for every project you work on.
One of the best features of Checklist Design is that it looks at any page you’re designing and lists all the essential elements for good UX. The site lists the minimum things a page needs to satisfy users. You’ll never forget those little details again.
9. For Font Selection: Fontjoy
As a designer, you likely have a general idea about which types of fonts look best together, but it can take hours upon hours of work to figure out which specific fonts pair well with others and meet user expectations at the same time. The fonts you use have a significant impact on site visitors, and can make the difference between a site that’s engaging and easy to read and a page visitors bounce away from immediately.
Fontjoy allows you to generate font pairings and choose the pairing that fits your site’s personality best. Good UX designers know the typography on the page enhances the content there and also sets a mood for site visitors. Finding the right pairings takes a lot of time, so finding a tool that saves you time is welcome.
10. For Illustrations: DrawKit
DrawKit offers free SVG illustrations you can customize any way you’d like. Illustrations help engage people when they hit your landing page or read your newsletter and can be a valuable addition to any design. The drawings are free to use. If you worry about winding up with the same designs another business uses, they do offer a paid service where they’ll create custom illustrations based on your concepts.
Not only do the illustrations work well for website designs, but you could also use them in app design, software and even in print media as flat designs. SVG translates well to many different sizes, so the possibilities are limitless.
11. For Cooperation: HeySpace
Looking for a free collaboration tool with the capabilities of Slack and Trello combined? HeySpace offers simple project management with the ability to chat among collaborators. Share images, designs and other elements of a project, get feedback or work in real time with your team members. Their free package generously allows up to 10 members and unlimited space and chats. While they do have paid services and you’ll gain more capability, you can use the free version for basic needs and always upgrade later if needed.
UX designers must keep tweaking their designs until they hit on the most usable version and ensure every step through the design is user-friendly. A collaboration tool allows multiple players to give input and avoids a scenario where something minor gets missed. A second, third and even fourth set of eyes is much more effective at finding issues that might impact the user’s experience.
12. For User-Friendliness: UsabilityHub
Testing out the usability of your website or app is a vital part of the design process. You may think everything is perfect, but until you test your creation, you have no way of knowing for sure. There may be a link that goes nowhere or a form that won’t submit correctly, for example.
UsabilityHub offers a free package where you can run a two-minute test. Testing single pages is more than doable without paying out a fortune. They, of course, also offer expanded packages, but their free package gets you started.
Some of the tests you can run on the site include first-click tests, design surveys, preference tests and five-second tests. You can recruit participants yourself or tap into UsabilityHub’s panel of targeted users. If you don’t have a big budget, the fees for using their panel are very reasonable.
13. For Speed: Pingdom Website Speed Tests
Pingdom allows you to run website speed tests from different locations. If your page takes just three seconds to load, 53% of mobile users bounce away. Speed matters to today’s users who are used to everything delivered instantly at high speeds. Using the Pingdom tool to identify issues that might bog down your load speeds allows you to hit that sweet spot of two seconds or less loading time.
The essential features of Pingdom’s speed test are free. Type in the website URL and choose your location, such as North America, Asia, Europe or South America. Pingdom gives you a report with a score out of 100 and a letter grade. They’ll also grade different areas that impact load times, such as expired headers, URL redirects, size of favicon and number of HTTP requests.
UX design continues to evolve and gain complexity and it’ll be increasingly important to update your designer tool chest in order to stay competitive. Utilizing these free tools allows you to do your job more efficiently and saves you time and effort, which increases your bottom line. What’s your favorite free UX design tool?
As an Amazon Associate, Designerly may get commissions for purchases made through links in this post.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.
Definitely a must read. Good job! Do visit our website to find blogs you might be interested in. https://www.koruux.com/blog/