Master Your Craft With These Top UX Tools
When having the right UX tools is the crucial difference between having a highly effective design workflow and one that’s slow and unproductive, it’s important to stay up to date with the latest tools.
When having the right UX tools is the crucial difference between having a highly effective design workflow and one that’s slow and unproductive, it’s important to stay up to date with the latest tools.
A six-time winner in international design contests, Olha comes to Toptal with more than five years of experience in web and UI/UX design.
Expertise
PREVIOUSLY AT
Having the right UX tools at hand can be the crucial difference between having a collaborative, seamless, and overall highly effective design workflow and a workflow that’s slow, unproductive, and unaccountable.
It’s important to stay up to date with the latest tools and technologies, and learn about the interesting ways designers can use them to create and collaborate more efficiently. Some tools are more effective than others depending on the size of the team, the stage in the design process, and any other tools that are already part of the workflow.
Let’s take a look at the top UX tools, from wireframing and prototyping to UX research and analytics, that are helping teams do incredible things in 2018.
Design + Prototyping + Design Handoff Tools
InVision/InVision Studio
Platform: web (integrates with Sketch and Photoshop), and macOS
Price: from $13/month for individuals, or $89/month for teams of five
Note: The price applies to the core InVision web app, not InVision Studio, which is free.
![One of the best UX tools: InVision](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126155%2Ftoptal-blog-image-1526911546736-953f72a272d6936a87b4ef8ef7dd0bb2.jpg)
InVision is arguably the mightiest UX tool yet. It allows Sketch and Photoshop designers to import their static screens and turn them into dynamic prototypes, and stakeholders to offer constructive feedback that can then be converted into actionable, manageable tasks. Combine that with their user testing and collaborative whiteboard technology, and the InVision web app becomes an invaluable, seriously impressive, tool.
In 2017, InVision shipped new design handoff features, and now in 2018, InVision has has become a complete, all-in-one solution as they introduce their own UX design tool, Studio, which is free and includes advanced animation and prototyping features.
For teams that want a fully stocked toolbox under one subscription, InVision is here.
![InVision Studio, a free UI design tool and a great addition to the design process](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126156%2Ftoptal-blog-image-1526911578499-9a040f115d6416a03b524f5387c1a24b.png)
Framer
Platform: macOS
Price: $12/month for individual users, or from $250/month for teams of three
![One of the best UX tools: Framer Studio, a UX prototyping tool](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126157%2Ftoptal-blog-image-1526911605082-97ad7da47fcd2038a4a30d8190baf27d.png)
In terms of offering, Framer is the tool that most closely resembles InVision, since they both combine a mature web interface with a brand new UX design tool. It comes down to personal preference with these two, but where Framer is slightly cheaper for individuals, InVision is clearly the bigger brother when it comes to design collaboration.
Figma
Platform: web, macOS, and Windows
Price: free for starter teams, or $12/month
![Another great prototyping tool: Figma](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126158%2Ftoptal-blog-image-1526911617590-04ac0f58d82ea98b7013cb2bdd891f76.png)
Figma stood out from the rest early on in its development as the leading tool for multiplayer design, allowing multiple designers to work on the same design file all at once. With the ability to create responsive designs and added handoff features, it’s impressive how they’ve offered these features across the web, macOS, and Windows versions of the product.
If you enjoy an energetic, collaborative design workflow, Figma is for you.
Adobe XD
Platform: Windows and macOS
Price: free for 1 prototype, or $20.99/month for unlimited prototypes
![One of the best UX tools: Adobe XD](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126159%2Ftoptal-blog-image-1526911627007-88aed9e6de0a35076fa8f2bf1599ab33.png)
When Sketch became the #1 tool for wireframing and interface design, Adobe almost had no choice but to admit that Photoshop could never be the UI design tool that designers needed. Adobe decided to make Adobe XD available to Windows users where Sketch didn’t, and also built in the ability to prototype user flows and inspect designs, helping veteran designers familiar with the Adobe ecosystem to stick with a familiar workflow.
UXPin
Platform: web
Price: from $8.10/month for one user, with other options for teams
![A great wireframing and collaboration UX tool: UXPin](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126160%2Ftoptal-blog-image-1526911647218-7ded3d2218b09d2993348b4303cfaaf5.png)
UXPin is a complete product design platform offering everything from design, wireframing, prototyping, collaboration, user testing, and handoff all in a single web application. The downside is that UXPin is one of the more difficult tools to use due to the number of features, cluttered interface, and (sometimes) performance lag that often haunts bulky web apps. However, enterprise teams in need of impressive features such as design systems and the ability to take advantage of web frameworks and technologies such as Bootstrap and Google Fonts shouldn’t overlook it too quickly.
Design + Prototyping Tools
Sketch
Platform: macOS
Price: $99/year
![One of the best design, wireframing, prototyping UX tools: Sketch](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126161%2Ftoptal-blog-image-1526911656267-8b2a49afd06b9ec53def08f5d37d3147.jpg)
Photoshop handed the crown to Sketch as they became the leading design tool for both wireframing and interface design in 2015, and as of 2017 they’re still leading the charge. Sketch’s innovative approach to screen design introduced invaluable features such as artboards, symbols, and exports, that would then inspire a wave of new design tools like Adobe XD, Framer Studio, and InVision Studio. This incredibly-intuitive (and lightweight) vector tool helps UI designers iterate much faster than ever before.
However, here’s the “but” (and it’s a big but): Sketch isn’t available for Windows, and their decision to implement tools for prototyping designers so late in the game means that their competitors have quickly taken over this market, with InVision being arguably the most dynamic prototyping tool available today. Even though Sketch functionality can be tailored with an impressive catalogue of plugins (including integrations with the likes of Flinto, Zeplin, Marvel, Principle, and even InVision themselves), some designers may favor a more native experience with these features readily available out of the box.
All in all, Sketch is excellent for ideation and wireframing, or those that don’t mind topping up their toolbox to add better prototyping and collaboration tools.
Webflow
Platform: web
Price: a variety of options aimed at single-site individuals, multiple sites, and teams
![Webflow is used to create responsive websites online](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126162%2Ftoptal-blog-image-1526911666384-d678bd4aef885a3649bcdff2281feb3d.jpg)
Webflow is a WYSIWYG editor for the modern-day designer who wants to build responsive websites without code, and even host them, all with a single subscription. Webflow outputs clean, semantic code so that you don’t have to, and delivers robust features that lets web designers create anything from static websites to eCommerce stores, where even the content and inventory is managed from the same dashboard.
Principle
Platform: macOS
Price: $129/year
![Principle is one of the best app prototyping tools](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126163%2Ftoptal-blog-image-1526911677157-8cc7e3eaaaceac581b99421ed9ad420c.jpg)
Although more of a prototyping tool than a design tool, the highly rated Principle app is for designers that focus on high-fidelity prototypes, and uses timeline animation to help design advanced micro-interactions where Sketch and Adobe XD don’t. If the design features aren’t sophisticated enough for your needs, Principle integrates with Sketch.
Prototyping Tools (Only)
Flinto
Platform: macOS
Price: $99/year
![Flinto, one of the cheaper prototyping tools for macOS](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126164%2Ftoptal-blog-image-1526911691887-afa2091e7e1e1876075a21d82599a71f.png)
Flinto takes transitions and micro-interactions to the next level with advanced animation tools, including springs and easings, 3D rotation, scrolling effects, and even allows trendy designers to export animations as videos, GIFs, and Dribbble shots.
While Flinto is focused solely on prototyping interactions, it does it well. Pair with Sketch for best results.
Origami
Platform: macOS
Price: free/open source
![Origami, an app prototyping tool made by Facebook](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126165%2Ftoptal-blog-image-1526911706353-ceed9e48269013bf71bf292bfa182c04.png)
Origami is an app prototyping tool developed by the design team at Facebook. While it’s similar to Flinto (minus the price tag), it’s not maintained as often as similar tools, and its logic-based approach to designing interactions results in a steeper learning curve.
For designers on a budget, Origami is well worth a look.
Prototyping + Design Handoff Tools
Marvel
Platform: web
Price: $0-12/month for individuals, or $42-84/month for teams
Enterprise teams requiring SSO and handoff features should inquire directly.
![Marvel, an easy-to-use online prototyping tool](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126166%2Ftoptal-blog-image-1526911720197-26c0f2256c8210b69b68722dd1045fd6.jpg)
Marvel is an online prototyping tool known for being one of the easiest to master, however, the trade off is that it’s not as sophisticated as InVision when it comes to dynamic prototyping features, and requires integration with Sketch to become a complete design + prototyping solution. That being said, it does integrate with Lookback, bringing user testing to the table, and includes design handoff features.
Marvel also allows teams (even non-designers) to choose an artboard and illustrate a low-fidelity idea using shapes and text, making it ideal for design sprints (especially since it also lets users convert paper prototypes to low-fidelity Marvel prototypes).
Design Handoff Tools (Only)
Zeplin
Platform: web
Price: free for one project, $17/month and $26/month for three and 12 projects respectfully
For large organizations, their $7.65/user/month option offers more advanced user permissions and the ability to copy color and text styles between projects.
![Zeplin allows seamless design handoffs for Sketch users, helping the design process.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126167%2Ftoptal-blog-image-1526911734903-e0a6aa8e0f8711f66a70e87de4ef70ff.png)
Zeplin has consistently outperformed competitors Sympli and Avocode, where it has recently added Adobe XD and Figma integrations alongside its already-existing Sketch and Photoshop CC integrations. While many all-in-one tools have added design handoff to their list of features, Zeplin fills the void for the tools that haven’t (Sketch, Photoshop), and those still experimenting with handoff features (Adobe XD, Figma).
Wireframing + Prototyping Tools
Axure
Platform: Windows and macOS
Price: $29/49/99/user/month for Pro/Team/Enterprise users respectively
One-time purchases of Axure RP 8 also available from $495.
![Axure is one of the best wireframing and prototyping tools.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126168%2Ftoptal-blog-image-1526911754086-0d8e47becdbfc84246705dc5b702967f.jpg)
Axure is built specifically for the design of wireframes and rough prototypes, and comes with features that make creating data-driven, dynamic, and adaptive mockups so easy you’ll forget that it’s a tool with no high-fidelity UX prototyping features. For designers focusing solely on wireframes and prototyping, Axure is a top choice, used by 87% of the Fortune 100 companies.
Justinmind
Platform: Windows and macOS
Price: $19/user/month, or $39/user/month for enterprise teams
![Justinmind, one of the best prototyping tools for wireframing](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126169%2Ftoptal-blog-image-1526911765250-ae5423f5a9ee8a2cd77625c2952a6e0a.png)
Justinmind doesn’t receive enough love for what it offers, which is advanced UX prototyping, collaboration, some basic design tools, and also 500+ web and mobile widgets for wireframing. Wireframing isn’t something that many competing prototyping apps have focused on, making Justinmind one of the few UX tools that does.
Wireframing Tools (Only)
OmniGraffle
Platform: macOS
Price: $100, or $200 for a Pro license
![Omnigraffle is a mockup tool for creating wireframes and diagrams for the UX design process.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126170%2Ftoptal-blog-image-1526911780163-0382fd7a230c3be361dafe32d8a0f569.png)
OmniGraffle is a wireframing tool with diagramming features, useful for apps and websites where the user flow or information architecture might need more attention. As a native macOS app, the interface is very friendly, making it an easy UX tool to master.
OmniGraffle has a very handy feature: “stencils,” that are ready-to-use, drag-and-drop reusable design components in a “stencil library” which designers can use for building wireframes, mockups, or even final visual designs. Users can create their own library, and there are also thousands of stencil libraries available on the web for download, a lot of them free, saving time and effort.
Graffletopia is one of the largest stencil depositories on the web containing a mix of free and paid libraries. With over 1,100 stencils, Graffletopia has stencils for every use—designing mobile apps, websites, network diagrams, flowcharts, and more.
Balsamiq
Platform: web, macOS, and Windows
Price: from $90/user/year for cloud access, or $89 for the desktop apps
![Balsamiq is one of the best UX tools for creating low-fidelity wireframes.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126171%2Ftoptal-blog-image-1526911795050-d5a862408edd8e4d7f55bfddc73cd509.png)
Balsamiq is the opposite of Justinmind, focusing more on wireframing than prototyping. Their built-in UI elements use a sketched-out visual aesthetic to encourage brainstorming, and is uniquely aimed at product managers and developers, as well as wireframing designers, allowing entire teams to be a part of the design process early on.
UX Research and Testing Tools
Lookback
Platform: web
Price: $49/user/month or $99/user/month depending on features
![Lookback, one of the easiest user testing tools to master](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126172%2Ftoptal-blog-image-1526911807953-372b1c52d79340011229dd651c18245b.jpg)
Lookback introduces live, moderated user testing to the UX design process, allowing designers to record the face, screen, and voice of anyone in the world. For teams using Marvel as their prototyping tool, Lookback integrates with it seamlessly.
UserTesting
Platform: web
Price: $49/test (min. 15 tests), with enterprise options available
![UserTesting, arguably the best user testing tool](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126175%2Ftoptal-blog-image-1526911870993-8cc1fb411ce500cc0a9a46f4cfcde14a.png)
UserTesting is similar to Lookback in terms of features. Although it’s a terrific standalone user testing tool with a huge repertoire of experienced user testers (with Marvel you’ll need to find user testers yourself), UserTesting seamlessly integrates with InVision, too.
Eyequant
Platform: web
Price: $499/month for individuals, $999/month for teams of 10 (+ enterprise options)
![Eyequant uses machine learning to improve CRO.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126176%2Ftoptal-blog-image-1526911881896-85e898c1765137aaa698ea549cabfe2c.jpg)
Eyequant uses machine learning to help teams make better design decisions and improve their CRO efforts. Its hefty price tag might deter some customers, but those that do invest receive training on how to simulate users, analyze metrics, make the most of their A/B testing, and more.
Hotjar
Platform: web
Price: variable pricing depending on number of daily pageviews
![Hotjar is the leading tool for heatmaps that helps the design process.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126177%2Ftoptal-blog-image-1526911898916-9d3622ecfe9a24207c302b35ebea3de6.jpg)
Hotjar makes it easy for teams to optimize user experiences by combining user feedback with analytics, heatmaps, clickmaps, scrollmaps, and visitor recordings. Where heatmaps and clickmaps illustrate where users are moving and clicking their mouse respectively, scrollmaps indicate at which point users might be losing interest.
Crazy Egg
Platform: web
Price: from $29/month for 20,000 pageviews
![Crazy Egg combines A/B testing and analytics for the best UX design process.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126178%2Ftoptal-blog-image-1526911917446-0fff54066cafb0321cb149d5ca7385e7.png)
Similar to Hotjar, Crazy Egg is used to optimize user experiences and conversion rates by analyzing user behavior with heatmaps and visitor recordings, although it also includes easy-to-use A/B testing tools to help decipher what is and isn’t working.
Optimal Workshop
Platform: web
Price: $166/user/month, with free and enterprise options available
![Optimal Workflow is one of the best user research tools.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126179%2Ftoptal-blog-image-1526911934315-32c0abedc172af09c098d97c23eeb27f.png)
Optimal Workshop is a user research toolkit focusing on card sorting, surveys, tree testing, first-click testing, and qualitative data discovery.
Analytics Tools
Google Analytics
Platform: web
Price: free
![Google Analytics is the #1 website analytics tool.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126180%2Ftoptal-blog-image-1526911948434-46738676730e0ea495dcb7faa064fd39.png)
While Google Analytics doesn’t sport the most inspiring or most usable interface, it does deliver a fair amount of data for a free tool, making it a suitable starting point for user research and acquiring insights that you might want to explore further in another tool.
Mixpanel
Platform: web
Price: from $99 per 1 million data points, with free and enterprise options available
![Mixpanel, a popular website analytics tool for user research and the UX design process](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126181%2Ftoptal-blog-image-1526911961607-1db4e9cfa7dc2103f42af62d5e2af036.png)
Mixpanel allows anyone, from executives to simple contributors, to use data to make more strategic decisions. With a friendlier interface compared to Google Analytics, designers might find that it’s easier to analyze user journeys, learn how users engage with the product, and decipher complex behavioral analysis with Mixpanel.
Pendo
Platform: web
Price: pricing is determined based on the number of users and features required
![Website analytics tool, Pendo, helps the UX design process.](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F126182%2Ftoptal-blog-image-1526911974126-481ec1182fbfcbfb5b6f919a6e78e5f0.png)
Pendo, with a much simpler interface compared to most other analytics tools, allows designers to track NPS (net promoter score), segment users, optimize funnels and user journeys, and anything else you’d expect from a top website analytics tool. Besides that, designers can deliver targeted announcements, contextual help, and tailored experiences based on the data that’s been tracked.
Conclusion
Choosing the right UX tools requires careful consideration. We need to factor in the costs, the required level of collaboration with other designers and stakeholders, the platform, and any other tools that we might need to integrate with in order to maintain a seamless workflow. Once you’ve narrowed down your choices, sign up for their free trials and consider running a five-day design sprint to test the waters.
Understanding the basics
What is InVision Enterprise?
InVision Enterprise is a subscription plan that includes all of InVision’s features plus enterprise-grade security, SSO (single sign-on) integration, and two-factor authentication, as well as unlimited projects and storage, and early access to new features.
What is a wireframe in web design?
A web design wireframe is a skeletal, often black and white mockup of a website that’s used to demonstrate the layout being moving forward with visual design.
What is the Zeplin app?
Zeplin is a design handoff app used to handover finished designs to developers.
What is InVision?
InVision is an all-in-one design suite for product teams looking to collaborate on prototypes, which includes their standalone app, InVision Studio.
What are Balsamiq mockups used for?
Balsamiq mockups are used to demonstrate wireframes to stakeholders, and receive feedback on those wireframes.
Olha Bahaieva
Kharkiv, Kharkiv Oblast, Ukraine
February 6, 2018
About the author
A six-time winner in international design contests, Olha comes to Toptal with more than five years of experience in web and UI/UX design.
Expertise
PREVIOUSLY AT