All Articles

Usability Diagrams

Top UI & UX Prototyping Tools for 2019

May 22, 2019 | Written by Sharon Hurley Hall

Prototyping is an essential part of developing web and mobile apps and tools — in fact, you can’t do without it. Just as many artists do sketches before completing a piece, UI and UX designers need prototypes to eliminate costly errors down the line.

Prototypes can also help you figure out what end users or customers need early in the design process. Nobody wants to create an end product that doesn’t work for the people who need it. With a prototype, you can create a better user experience. It’s a way of sketching out your plan so you can iron out any issues and make sure everyone’s on the same page about what you’re doing.

get on the same page

Prototyping helps you speed up the design process, save time and money, and improve user experience. Well, ideally, anyway.

What UX Designers Hate About Prototyping Tools

It turns out some UX designers have a love/hate relationship with prototyping tools. Perry Merrity, Senior UX Designer at CBRE, says:

Prototyping tools aren’t all that great … each one has a couple of features that others lack and claims superiority (yet none have figured out how to make a super tool).”

UX designer Ben Kopf agrees:

There is always something lacking in every tool. For example, one app does state-based screen changes easily but doesn’t have a good enough component library, and the other has hard to use state management but a massive, well organized component library.”

And author of UX for Beginners, Joanna Ngai, has a couple of pet peeves:

Tools that crash are the most frustrating. It can also be challenging to get sign off/hand off design concepts. Designers work with different groups of stakeholders at different stages of the product cycle, so sometimes we need to present, prototype, conduct studies or document specs. The structure of our tools need to be flexible to accommodate our changing needs.”

What to Look for in a UX/UI Prototyping Tool

So, how do you decide on the right UI prototyping tool? As Joanna Ngai suggests, it’s all to do with what you need. Sometimes you just want to stimulate ideas by wireframing how something could work, so you can identify any pitfalls early. And at other times you need to present something interactive and working to the guys who are signing your checks.

prototype app search

CreativeBloq suggests you choose your prototyping tool based on:

  • What you need to learn from the prototype
  • The skills you already have available
  • The timescale
  • How you plan to test your prototype

It’s also important to think about:

  • How easy it will be to collaborate and share with other people involved in the project
  • How easy it is to learn and use (usability for the win!)
  • Whether you need low fidelity (testing ideas), medium fidelity (testing layout and main interaction) or high fidelity (testing micro-interactions, visuals, and more)
  • Price — it has to suit your budget

A key part of the prototyping process is thinking about information architecture, user flow diagrams, and getting content together. You’ll want to make sure that your UI design tool works seamlessly with the tool you’re using to manage this process. Slickplan’s website planning app works well with all UX prototyping tools.

With that in mind, let’s have a look at this year’s top UI and UX prototyping tools.

sketch

1. Sketch

Sketch is one of the most popular tools for designing websites and apps, and it does prototyping too. In fact, it’s one of the most used UI design tools around. It’s a lightweight tool with a simple interface, leaving designers free to focus on the task at hand.

Sketch lets you transition seamlessly between design screens (artboards), add animations, and create working prototypes with a couple of clicks. Plus you can easily share prototypes and get instant feedback via Sketch’s cloud interface.

Price: Sketch is $99 for a one-year license. Design teams can get a volume license, starting at $89 apiece for two devices, and decreasing as you add more team members.

adobexd

2. Adobe XD

Adobe XD is a feature rich tool that offers everything from wireframing to prototyping, and allows you to test your designs, too. Whether you’re designing web or mobile apps, or want to try voice interactions, you can do it from a single interface.

Collaboration is easy, and it integrates with other Creative Cloud apps. Plus you can preview your designs on mobile via the iOS and Android apps.

Price: The starter plan is free for 1 shared prototype, 1 active design spec and 2GB of cloud storage. Upgrade for $9.99 a month for unlimited prototypes and design specs and 100GB of cloud storage. It’s also included in the more costly Creative Cloud all apps subscription.

axurexp

3. Axure RP

Used by 87% of Fortune 500 companies, Axure RP is a robust wireframing and prototyping tool that makes it easy for designers to handle dynamic content, conditional flow, animations, adaptive views and more when creating UI design.

The tool makes collaboration simple, allowing others to view projects on the most popular browsers and mobile platforms. You can use Axure RP to create everything from flowcharts and wireframes to mockups and user journeys.

Price: Axure RP is available for both purchase and subscription. Subscriptions start at $29 per user per month, with purchases starting at $495 per user.

balsamiq

4. Balsamiq

Balsamiq is on a mission to get rid of bad UI, and its prototyping and wireframing tool is a great way to do that. It claims to have the fastest low-fidelity wireframing tool around, and it’s useful for anyone designing user interfaces for web or mobile apps. Balsamiq is great for helping designers focus on structure and content.

Price: Balsamiq has a range of price options. The cloud app starts at $9 per month for two projects, while the desktop app is a one-off price of $89. There are also integrations with Google Drive, Confluence, and Jira at different prices.

composite

5. Composite

Composite is an iPhone app that helps you create interactive prototypes. It works with Mac and Windows Photoshop documents, so UI designers can transform mockups in a few seconds. Each page is designed via layer comps which you can link together for different screens. You can quickly create fixed elements, plus you can navigate your prototype like a fully developed iPhone app.

Price: Composite is available from the App Store for $9.99.

figma

6. Figma

Figma is Joanna Ngai’s favorite prototyping tool, though she believes in choosing tools according to your needs. This browser-based tool lets you design, prototype, and collaborate in the same space. It’s easy to scale designs, combine layers, use Boolean operations, and use vectors.

You can also handle scrolling, interactions, device frames, and overlays with ease. And you can create shared team libraries of resources and components for even quicker prototyping. Collaboration is built in with workflows, collaborative editing, copy editing, and quick feedback via shared links.

Price: Figma’s free starter plan allows you to create three projects. You’ll have to upgrade, at $12 per editor per month for unlimited projects and team features.

fluid id

7. Fluid UI

Fluid UI is another UI prototyping tool that prizes collaboration. It allows fast prototyping of web and mobile interfaces, in high or low fidelity. You can access prototypes in the browser or on desktop, and can preview mobile interfaces in the Fluid UI apps. Multiple team members can work on a prototype at the same time, and you can link prototypes together to get a feel for interactions.

Price: The Solo plan lets you have five active projects and unlimited reviewers for $8.25 a month. But if you want real-time collaboration with your project team, pick the team plan at $41.58 a month.

framerx

8. Framer X

If you’re looking for a high fidelity macOS prototyping tool, Framer X is worth a look. It gives you access to an extensive component library, so you can design your UI with a couple of clicks. You can use an infinite canvas to prototype user flows, and it’s easy to handle scrolling and navigation, and design popup and slide-in elements. Framer also includes motion effects.

Price: Framer’s personal plan is $12 a month.

invision

9. Invision

Invision is a robust digital product design platform that allows you to visualize, design, prototype, and get feedback in a single interface. You can draw freehand on a digital whiteboard, collect inspiration via design vision boards, and use vectors and layers to design your ideas. It’s also easy to transform static designs into interactive prototypes, and to communicate and get feedback in a shared design workspace.

Price: Invision is free for a single prototype, with paid pricing starting at $15 a month.

keynotopia

10. Keynotopia

If you’re already a Keynote or PowerPoint user, then you can use Keynotopia as a prototyping tool. It includes a large selection of UI design kits, so you can quickly create mockups, wireframes and prototypes. Once you’ve created each screen, it’s easy to link them together to make your prototype interactive. You can also test it with users via a mobile device.

Price: UI design bundles for PowerPoint or Keynote are currently $97, with add-ons for different platforms starting at $39.

webflow

11. WebFlow

Want to test your web interface? Then try the visual prototyping features in WebFlow. You can use the designer to create the look and feel of your site, and WebFlow does the HTML, CSS, and Javascript coding for you — and it’s clean code, too! You can also use the tool to try out animations, interactions, parallax scrolling, and more. You can also share your designs via a public portfolio.

Price: WebFlow’s forever free plan lets you work on two projects. You can also upgrade to a website plan starting at $12 a month and there are plans for ecommerce sites, starting at $29 a month.

wireframecc

12. Wireframe.cc

If you want to really keep things simple, then Wireframe.cc does exactly what it says. It is uncluttered, presenting design options only when you need them. You can use clicking and dragging to create your ideal interface, and can annotate your designs. Wireframe.cc works for desktop, tablet, and mobile phone interfaces.

Price: Wireframe.cc has a free version which allows you to create public, single-page wireframes. If you want to save your designs in your own account, and keep them private, you’ll need to upgrade. That starts at $16 a month.

Marvel

13. Marvel

Marvel brings all of the top tools and tasks for designers under one clean application: Wireframes, prototypes, and design specifications at fast, easy-to-spin-up speeds. Realistic interactions are easy to represent, which is crucial when considering user journeys and complex hierarchies. CSS, Swift, and XML can be quickly generated in the app, along with integrating with Jira, Confluence, Dropbox, Sketch, and more. The Dashboard on Marvel helps your team stay in sync with updates on the project. It’s also available as an app (highly rated on the Apple App Store). Even non-designers can easily leave feedback and comments on the project.

Price: Marvel is free for one user and one project, with paid accounts starting at $12 per month. Enterprise options for large agencies and teams is available with custom pricing. Better yet, there are no restrictions or pricing needed for customers or team members to leave comments on the project.

These are some of the top UI design tools around, and they all have different strengths. Compare our “what to look for checklist” with your design needs, and you’ll be able to pick the right one for you. And if you have another favorite UX prototyping tool that didn’t make the list, let us know!


Written By Sharon Hurley Hall

Sharon Hurley Hall is a professional writer and blogger. Her work has been published on Jilt, OptinMonster, CrazyEgg, GrowthLab, Unbounce, OnePageCRM, Search Engine People, and Mirasee. Sharon is certified in content marketing and email marketing. In her previous life Sharon was also a journalist and university journalism, lecturer! Learn more about Sharon on SharonHH.com or connect with her on LinkedIn.

TAGS: , ,

David Rivers

June 7, 2019

Marvel?

Reply
Slickplan

Slickplan

June 19, 2019

Good point David. We had Marvel on our list but had to edit it down to the top 12 which was not an easy task considering how many there are on the market. I’ll get with our content team and see if we can add a summary on Marvel as I agree it is a good solution.

Sysamic

June 14, 2019

Thanks for sharing nice article. this article is helpful and informative.

Reply

Mike

July 22, 2019

I’ve been using Sketch for years, but recently was looking into Adobe XD, Figma and InVision, but decided to not switch. I’ve written an article about it (https://madux.ca/top-3-sketch-alternatives/). TLDR; all those fine tools are missing one important feature: editing raster images :(

Reply

Recommended Articles

Join over 190,000 registered users

plans start at just $8.99 a month

Get Started Today

No credit card required