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.

Finding the right tools and software to help you grow and improve your design workflow can be tough. The tools need to scale, leaving room for innovation and fresh product development. Believe it or not, some of the best tools that offer scalability are free.

Here are the top free UX design tools you can get your hands on right now:

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.

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?


About the author

Lexie Lu

Hello! My name is Lexie and I have a fervor for design, writing, and coffee. I graduated with a dual major in Creative Writing and Commercial Design, and through those grueling study hours (facilitated by coffee, of course) I always found time to write for myself.

My posts feature design trends throughout all industries and show how the field is always changing. There’s never a dull moment in the design world!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.