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.
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.”
“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.
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 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.
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.
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 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.
It’s the closest you can get to developing mockups on paper in terms of speed and convenience.
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 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 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.
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.
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 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.
At our web development agency we’ve been using InvisionApp for many years now as it is the easiest way to present design concepts and prototypes when requesting feedback from clients. The feedback system is easy to use and even non-technical users have little trouble commenting on specific design elements.
Price: Invision is free for a single prototype, with paid pricing starting at $15 a month.
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.
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.
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 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.