Master Your Craft With These Top UX Tools

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.

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.

Framer

Platform: macOS
Price: $12/month for individual users, or from $250/month for teams of three

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

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

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

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

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 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

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 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 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 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 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 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 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 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 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 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 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 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 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

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 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

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 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

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.