Justinmind-logo

30 best UX design tools for websites and apps

February 25, 2021
Useful ist of UX design tools - Justinmind

What are UX design tools every UXer should know about? Find all 30 of them in this list, then choose the right one for the job

A UX designer’s job is not the easiest in the world but can be among the most rewarding, especially when you have the right UX design tools for the job.

Get the best UX design tool for web and app design
Download Free

The right tools make all the difference in a UX designer’s day-to-day life (and your user’s). However, finding the right ones isn’t easy. UX designers often wear multiple hats – it’s even common to see UX/UI designer hybrids, meaning they also need to know how to use UI design tools. To further compound the issue, there’s a vast variation in pricing for certain tools, as well as the sheer number on offer.

But whatever the size of your team, your background or your client profiles, you should be more than able to find the right tool for the job in this post, as well as tools specifically geared towards interactions design, agile management and user testing. Waste no more time searching for the right tool!

Best UX design tools

1. Justinmind

Number one on our list of the best UX design tools has to be the Justinmind prototyping tool. “Justinmind? This happens to be Justinmind’s blog. What a coincidence!” you say. But trust us. We have good reasons to include it at number one. Here’s why:

Justinmind is the best UX design tool on the market because it allows you to go into as much graphic detail than most UI design tools out there, while also letting you add complex and conditional interaction and functionality to your prototypes.

Then there are the integrations. Even if you prefer creating designs in Sketch or Photoshop, you can still import your artboards and layers to Justinmind anyway, so you have the best of both worlds. But that’s not all – Justinmind also has integrations with the best agile and user testing tools on the market, such as Atlassian Jira, Microsoft TFS, UserTesting, Hotjar, CrazyEgg and many more.

For a complete guide on all the steps to follow between starting a prototyping and launching an MVP, check out our ultimate guide to prototyping.

Lastly, Justinmind is a UX design tool that’s second-to-none when it comes to collaboration. You can easily share your prototype in any browser with just a link and make it public or private. You can store prototypes in the cloud and also get feedback and comments within your prototype. Developer handoff is also a breeze with the inspect element feature, specifications documents and more.

2. InVision Studio

InVision Studio is one of those UX design tools that also doesn’t require an introduction. It’s one of the most popular and contains many of the features that UX designers are generally looking for in a UX design tool.

UXers get the power to easily and quickly add in interaction such as animations and screen transitions, with many elements coming with built-in animations. It also provides a timeline editing feature, as well as auto-layer linking and shared design libraries.

UX design tools - InVision Studio

Another unique feature of Invision is the collaborative Freehand feature that allowed teams to draw elements and brainstorm screens simultaneously on a virtual whiteboard. This is great for brainstorming during team meetings.

However potent, we wouldn’t say that these features are unheard of in most UX design tools out there nowadays. What’s more, certain users have complained that the integration with Sketch isn’t seamless – it can be difficult to synch properly when importing artboards. However, overall, what’s on offer is a well-rounded tool.

3. FluidUI

Fluid UI pen themselves as being pure speedsters. Fast, easy, fun, they say. They’re of the opinion that pre-built elements, as well as a streamlined UI is crucial to rapid prototyping and we couldn’t agree more.

In Fluid UI, all the tools required are stacked on top of each other in layers and maintained to one side of the screen. The effect this has is that everything is in the same place for quick and easy access to speed up the design process.

However, dispute everything being organized in a neat and orderly fashion, it can lead to a somewhat cramped feel and some users say they felt a lack of space and awkwardness when it comes to positioning things. Still, with practice, things improve!

4. UXPin

If you’re in the market for a UX design tool that shares a mix of UI design and interaction with code, then UXPin might be up your street. Available indiscriminately to use on any platform, the tool comes with interactive, pre-built assets, a trusty vector drawing tool, but most interestingly of all – coded components.

UX design tools - UXPin

Yes, UXPin is a little unique in that aspect. For example, you can perfectly sync React.js components or important existing HTML and build on that. If you want to, of course. For many, this may be an unnecessary and surplus feature. It all depends on the way you work.

On the flipside, UXPin may be a little complex to learn at first. No, not an alien cockpit, but the clunky interface can seem a bit intimidating at first, giving the learning curve a rather unwelcome jolt.

5. Webflow

Another member to join the UX design tool dark horse club is Webflow, which is, essentially a UX design tool fused with an engineering platform.

This UX design tool also attempts to bridge the gap between design and code, letting you assume control of the likes of CSS3, HTML and JavaScript, whilst placing it wherever you want atop a blank canvas. In theory, the beauty of this is that designs can be deciphered directly into code that can be published instantly or handed off to developers.

All this may seem cool at first, but most UX designers would probably prefer to hand off a working prototype to a developer first unless they are a hybrid designer/developer. And if you’re not one, you probably don’t want to be publishing chunks of iterated code without the oversight of a developer.

UX design tools - Webflow

On the plus side though, Webflow also lets you work directly in line with data taken from your CMS so that you can add real content to your UI designs.

6. Marvel

Marvel is a UX design tool that helps you add interaction in the form of gestures, transitions and animations to artwork designed in their tool or in Sketch. One unique feature is that, with Marvel, you automatically get access to a million-plus stock photos, as well as pre-made elements and icons.

UX design tools - Marvel

However, the main distinguishing feature of Marvel is it’s smooth usability and low learning curve. It was designed with a very varied team in mind, meaning that it should be accessible and usable by anyone from any department. The onboarding literally only takes a few minutes and use of the tool doesn’t appear to require any previous design knowledge.

On the flipside, many users complain of a lack of pre-designed transitions and animations, in addition to a hindered collaborative process due to not being able to directly get feedback within a prototype, which also can make testing difficult. This tool might be good therefore for brainstorming ideas or for making improvements to existing products after live testing. The decision depends on your situation.

7. Penpot

Penpot’s scouting to turn the world of UX design tools in on itself by creating the first open-sourced prototyper. Fully-online, the setup is a slice of cake, while collaboration also receives a boost.

UX design tools - Penpot

While Penpot obviously won’t have the same suite of features available as most of the paying tools on this list, it could have its upsides for very small, cash-strapped teams and individuals. For them, it could be a real solution as Penpot works with most vector design tools and doesn’t need just a Mac to use.

8. Adobe XD

Adobe XD focuses on offering a collaborative animating UX design tool. Of course, you don’t need us to tell you of Adobe’s rich history of image and graphic editing. With XD, their plan is to bring it all together, while being able to add in animation and interaction.

Adobe XD also puts its own unique spin on the market by offering a feature that lets you showcase your design work in a 3D perspective view. This is great for showing the layers and depth within your work, as well as exploring UIs rotating from different views.

UX design tools - Adobe XD

However, aside from this, we still think it’s best to go with a prototyping tool that is initially focused on adding interaction and functionality because it’s what they do best. Adobe XD often worries users working with large files due to the often buggy nature of the tool, complex UI and lack of autosave.

Although the learning curve with Adobe XD can be quite steep at first, they do let you have access to a library of free tutorials and tips. How kind!

9. Axure RP

Axure RP has an enormous variety of functionalities for designing interactive prototypes, such as dynamic content, interactions with conditional logic and animation effects, as well as adaptive views.

The integrations are also pretty good as you can import SVGs, as well as Figma asserts, Adobe XD files and artboards from sketch. Like many others on this list, Axure also offers the option to download technical documentation like design spec and CSS to hand off to developers, while also being able to share prototypes among teams via Axure’s cloud.

UX design tools - Axure RP

Among the gripes some users had were that the font style and color changer can be difficult to find. In addition to that, the requirements documents that it links to your prototype files can often be quite long and arduous compared to other UX design tools on the market.

10. Figma

Figma is both a desktop and browser-based UX design tool and sits among the heavyweights in the industry. This is partly thanks to an intuitive user interface, a striking similarity to Sketch and all the bells and whistles of most other UX tools.

With Figma, you can easily add interaction and functionality, from subtle interactions to full-blown animations, momentum scrolling and advanced transitions. Another cool feature is the fact that you can easily add GIFs that are able to convey motion design, microinteractions and video elements.

UX design tools - Figma

It’s also not bad for collaboration as you can comment in a prototype, and that comment gets saved, no matter where the prototype is viewed from. And that is anywhere, because you just need a link to share your designs.

On the other hand, one of the common complaints most users tend to have is that it can be rather slow when working with high-resolution images, while the browser version is quite prone to crashing.

Get the best UX prototyping tool for web and app design
Download Free

Best user flow tools

1. Justinmind

At the top of our list for the best user flow tools is – you guessed it – the Justinmind wireframe tool! Here’s why: it has a scenario builder, as well as a requirements management module so that you can easily create user flow diagrams for any website or mobile app conceivable.

User flow tools - Justinmind

On top of that, the best thing is that if you create your flows in Justinmind, you can then quickly move on to the wireframing and prototyping stage – in the same tool. Furthermore, with Justinmind, you can link your wireframe screens up to create a wireflow diagram which you can use when giving an overview of your wireframes and prototypes.

For more information about why and how to get started with wireframing, check out our ultimate guide to wireframing.

Lastly, you also have the option to make your user flows interactive and testable on any device, as well as being able to easily collaborate with your team and stakeholders by just sending a link.

2. Mockflow

Mockflow prizes itself on being one of the quickest tools on the market for brainstorming ideas about user interfaces. It’s great for whacking out sketchy UI compilations in that early UI design stage when anything is possible and then molding them into intricate wireflows.

User flow tools - Mockflow

Overall, this user flow tool enables you to turn your user journey concepts into real user flow prototypes quite fast, as well as create sitemaps. Moreover, Mockflow lets you share your user flows and collaborate on them in real-time.

3. Flowmapp

FlowMapp is perhaps one of the user flow tools that have the smallest learning curve on the market but allows you to squeeze in a heck of a lot of professional detail nonetheless.

Aside from its relative ease of use, it has an intuitive and helpful workflow, allowing you to create sitemaps that can lead into user flows, which draw on user personas that you create. All of this detail allows you take every step of the user journey into consideration and perfect it.

User flow tools - Flowmapp

Of course, with everything, there are a few small downsides, such as the fact that general gestures like zooming and panning on touchscreen devices can be a little tricky. It’s also not possible to export user flows in small sections, but rather, the whole lot.

4. Omnigraffle

OmniGraffle is a user flow often used by UX designers because of its sheer versatility and because it’s so easy to get started, especially if you’re using a Mac. Their line routing feature makes short work of signalling new flows, while their stencil library is perfect for creating the elements required for user flows.

User flow tools - Omnigraffle

One gripe that we would have is that there is not much opportunity for collaboration, something which, in an agile environment is crucial. On top of that, while the charting and mapping features are incredibly handy for drawing user flows, many find that there are a lot of surplus features provided that don’t really match up to those of the competition.

5. Cacoo

Cacoo is a user flow tool that comes with a Google Drive integration and brings a variety of neat templates and a library full of shapes to create everything from user flows, to mind maps and flowcharts.

User flow tools - Cacoo

One thing that sets Cacoo apart from the competition is its inbuilt chat feature that supports embedding and exporting from Adobe Creative and Visio. However, best of all us that users can collaborate and easily share their work by simply copying a link.

That said, we would like to see more integrations with design tools, as well as a more intuitive UI in general, as many elements aren’t where the typical designer might expect them to be.

Best Interaction design tools

1. Justinmind

Justinmind again trumps the game in interaction design, in our humble opinion. Our tool lets you rapidly and efficiently create web and mobile interactions and gestures in nothing more than a few clicks. Microinteractions, form design, parallax scrolling, dynamic data grids – you name it, you can design it in Justinmind.

Interaction design tools - Justinmind

Drag and drop technology lets you drag an element to the canvas and add an event, for which you need only select a trigger and choose an interaction. These interactions can be transitions, special effects or mobile gestures. It’s as simple as that! Moreover, if you’re pressed for time, you can choose from our 4,000+ pre-designed elements and components with baked-in interaction. Or take things a step further and add advanced conditions.

Finally, if designing pixel-perfect images in Photoshop or artboards in Sketch or Illustrator is your thing, you’re in luck. You can import them all in Justinmind and add interaction at the drop of a hat.

2. Protopie

Interaction design tool Protopie helps you add dynamic interactions to your designs and share your work on a cloud-based server. The beauty is that you can go into extra detail by applying easing functions, using Cubic Bezier and Spring to help you create refined, natural movement and animation curves.

Interaction design tools - Protopie

In addition to that, and in case you have the need, they consider themselves champions of voice interaction design, with text-to-speech functions available in over 40 languages. On top of that, if your next project happens to be a driving app, Protopie lets you test out your designs using the Playstation Steering yoke and its buttons.

3. Principle

Principle is one of those interaction design tools that lets you control animations and interactions with a fine tooth comb. For instance, their timeline feature makes short work of typical animation tasks like bouncing, popping and easing.

Interaction design tools - Principle

The good thing about Principle is that you’re free to experiment limitlessly with interactions without being restricted to predefined animations, transitions and interactions.

Importing figma designs and artboards from Sketch is also not a problem with Principle. However, the bad thing is, unless you have a Mac, you won’t be able to use it.

4. Origami Studio 3

Origami Studio 3 is a little different in that it’s an open-source interaction design tool provided by Facebook. With it, you can design responsive and adaptive screen layouts with no cost.

Interaction design tools - Origami Studio 3

The interesting thing about Origami is that it can also tap into the haptic engine on your native iOS device as well as other native features, such as the gyrometer and GPS data. You can also grab images straight from the Camera Roll on your mobile device, as well as sound recordings. Copying and pasting layers and artboards from Figma and Sketch is also a walk in the park.

5. Framer

Framer places its emphasis on interaction and animation, affording you an extra level of control over motion design in interactions such as transitions. Furthermore, an extensive library offers you a menu of interactive “smart” elements, so that the UX designer has very little to do themselves but link them up.

Another reason we’ve decided to include Framer on the list is because of its cool code-generating feature based exactly on the prototypes you create in the tool. It also has some pretty cool integrations with user testing tools, such as UserZoom, lookback and UserTesting.

Interaction design tools - Framer

Perhaps one of the downsides to Framer is an unnecessarily complicated user interface which seems to change quite a lot from one moment to the next. On top of that, sometimes the code it produces is not useful to developers due to coding guidelines and constraints.

Best UI testing tools

1. UserTesting

UserTesting is a great option if you’re in the market for a UX testing tool that lets you record sessions with users. That’s because it goes the extra mile by earmarking specific moments of friction that your users had and allows you to skip to those moments.

UI testing tools - UserTesting

Furthermore, UserTesting is a UX testing tool that lets you record how much time users spent completing tasks on your website or app, while also giving you the opportunity to add multiple-choice surveys and even ratings scales.

2. Hotjar

We couldn’t have a UX testing tool list without featuring the well-known heatmap testing tool, Hotjar. Hotjar lets you see things through the eyes of your users by showing what elements and parts of the screen their attention is directed at the most. It also lets you provide surveys to your users to glean extra context to the testing results.

UI testing tools - Hotjar

Hotjar is very easy to install on your website – all it requires is a line of code! Then you can start applying heatmap tests to your website to see which parts of the screen and which elements your users focus on the most. On top of that, you can also create surveys for your users for even more qualitative detail.

Finally, another cool feature of Hotjar is that your users can leave comments and emojis on particular elements and features in your UI.

3. Crazy Egg

If you’re looking for a good all-in-one UX testing tool that offers relatively good value, then you could try a lot worse than Crazy Egg.

With this UX testing tool, you get AB testing, heatmap testing and scroll testing all in one. But they also go the extra mile and provide confetti snapshots, which capture the specific points of the screen users click on (hence the name “confetti snapshots”).

UI testing tools - Crazy Egg

CrazyEgg lets you tailor your plan so that in the end, you’ll only be paying for the features you need and use. In general though, it’s a cheaper alternative to Hotjar.

4. Userlytics

Userlytics offers “scalable and customizable user journeys” through a multitude of useful user testing methods such as card sorting and tree testing for information architecture.

As well as that, it’s also a UX testing tool that takes user segmentation very seriously with detailed filtering of participants and screening questions. Additional handy features include being able to add annotations and highlight reels to capture pain points and other insights.

UI testing tools - Userlytics

The only gripe we would have is that it can be quite onerous to sift through the large quantity of raw data that this UX testing tool provides as it’s not presented as nicely as in other tools.

5. UsabilityHub

UsabilityHub is one of the most simple and intuitive UX testing tools on the market. But don’t let the simplicity fool you – you’re in perfectly good hands with a whole suite of unique testing features to get extra insights.

UI testing tools - UsabilityHub

With UsabilityHub, you can see which part and on which element of your screen UI that your users click on first. You can also perform five-second tests with your users to see what features they remembered from your screen, or give them preference tests to test the visual appeal of multiple different UI designs. There’s also the typical survey feature to ask users direct questions about their experience.

Best Agile tools

1. Atlassian Jira

Atlassian Jira is one of those Agile tools that no longer really needs an introduction and its popularity is understandable.

Agile tools for UX - Atlassian Jira

It includes nearly every feature you could need to manage agile projects such as kanban boards, scrum backlogs, sprint and story reports, burnout charts, velocity reports and cumulative flow diagrams are just some of the features available.

All these workflow tools and reporting features are great for providing busy teams a snapshot of where they stand on any given project. We use it here at Justinmind to help manage our sprints!

2. Asana

What does Asana have over Jira, apart from being in the market longer? Many reviews on Capterra point to it having less complexity than Jira, while still providing an holistic overview of a team’s progress on any given project with a backlog management and kanban board system. The other thing setting it apart is that it’s more straightforward to use, with a clean UI that’s more eye-friendly.

Agile tools for UX - Asana

They also provide project timelines and task templates to get you started. Even the free version offers significant value if your team is small enough. Having said that, it doesn’t come with the same diversity of integrations as does Jira. Many prefer it for that reason.

3. Monday.com

Like Asana, Monday.com also boasts a user-friendly and minimalist UI, in addition to being one of the most flexible agile tools out there. It includes features for people from all levels, from Product Manager (link to post) to UX designer and developer.

Agile tools for UX - Monday.com

A Kanban board feature, in addition to project tracking, Gantt charts, time planning and reporting help give you a 360 degree view of the state of any project at a given time.

4. Trello

Easy and intuitive like Monday.com and Asana, Trello offers a relatively large and intelligent package for the smallest of learning curves due to their progressive onboarding. Card and list features help the user find their way around, with color-coded boards to make things more perceptive at a glance.

Agile tools for UX - Trello

The one thing that separates Trello from the rest, however, is its virtual assistant, Butler. Butler is an automation bot that helps create rule-based triggers, calendar commands, due dates and other similar features.

5. Wrike

Wrike, with their cloud-based project management system is another easy-to-use agile tool that boasts flexibility with customizable workflows and dashboards. The typical kanban board system is also available, along with a Gantt chart system to help keep work structured and flowing.

Agile tools for UX - Wrike

If you need an agile tool that integrates with Google, Salesforce, Dropbox and Creative Cloud, then you’re in luck with Wrike. Now that’s “synergie!”. Sorry.

The take-away

So, to make sense of this long list, we must first look at the situation one finds themselves in. Depending on your exact needs, or the exact needs of your team, agency or client, you may find that one tool or price range is more in line with your needs than others.

The same goes for the features – while most tools have a pretty similar and competitive arsenal of features, some have unique perks that might benefit people in certain situations.

The most important thing to bear in mind is that you always go for the tool that’s going to meet not just your financial, but also your technical needs. However, hopefully, with this exhaustive list, that should be possible. If not, well you won’t have much digging left to do!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast