Top 9 wireframing and prototyping tools

Basically, when creating prototype or wireframe you create a preliminary version of your final product. Through prototyping and wireframing you introduce your idea to the world, pass the purpose of the project to users through its basic functionalities and interactivity, get valuable feedback, and discover whether your project satisfies customers’ needs or must be improved. So, it is definitely worth it. However, there is a huge number of prototyping and wireframing tools on the market, and choosing the right and perfectly suitable one for your project may prove to be a tricky task.

It always depends on your skills and what exactly you want to create. You can start from one of the oldest and simplest option — pen and paper and draw you design, illustrating your idea on paper. If you are proficient enough and able to code, you can do more with framework like Bootstrap, Foundation or their lightweight alternatives. So, if you come to decision to use, here is what you need to know.

To begin with

There are some factors, which you should define before making your decision.

Learning curve. In order to implement the right tool you have to learn how to use it. At this moment, it is important to consider what knowledge you already have about it and what you still need to learn.

What are you going to prototype. Is this a website, a mobile application or a desktop one?

Level of fidelity. You should consider to what extent your prototype must reflect the final product. It may have low level of fidelity with the aim just to test your idea, high level of fidelity when it visually looks like your final product with different animations, transitions and interactions included, or something in between.

Collaboration and communication. Some tools prioritize collaboration, and some don’t involve it at all. Probably, when you work alone on your prototype, you won’t give this factor a huge meaning. However, while working with a team, you need to communicate with your counterparts constantly, leaving and receiving feedback in real-time, so this part of prototyping tool may be rather important.

Ease of use. Eventually, the tool you choose must be convenient and suitable for you. Apparently, it will take some time to get used to it, but in the end you must feel comfortable using and working on a model of your product.

When you decide on your priorities, it’s time to look at the options market offers you. So, here you have 8 options to compare and choose the right one just for you.

Axure

Axure is definitely one of the most popular prototyping tools on the market. It is of those UX tools with the help of which you can create truly advanced interactive prototypes. With Axure you can create both simple diagrams and rich prototypes with a lot of functions and complicated interactions. It allows creating rapid prototypes without writing a line of code. Axure is aimed at web and desktop applications and not suitable for the mobile ones.

Overall, its broad set of tools, superb training and support documentation, solid library of widgets, and enabling to add interactivity and complex interactions make Axure highly competitive among other prototyping tools. Meanwhile, its steep learning curve makes it quite tricky to use Axure without some design background.

Platform: Mac, Windows
Price: Pro edition — $495 or $29 per month; Team edition — $895 or $49 per month; Enterprise edition — $99 per month.

InVision

InVision is often considered to be the most popular prototyping tool out there. Its clients are Uber, Twitter, Hubspot, Evernote, and other famous brands, which already means something. InVision has got huge number of useful features and constantly continues adding new ones. It is relatively easy to learn, has fast setup and simple web display of a prototype. InVision is excellent in facilitating collaboration and feedback process. Clients and team members are able to make comments directly on the prototype. With its LiveShare feature it all can be done in real time within a screen sharing integration.

Although InVision works with existing modes only and it doesn’t support creating and editing designs directly, it enables transforming static screens into interactive and clickable prototypes. Moreover, it provides synchronization with Photoshop and Sketch, so design files can be imported from there. It also offers clickable hotspots, hover states, animation and transition options, mobile prototyping complete with gestures, real-time to-do lists, syncing with Dropbox, Slack and other apps, as well as much more. With such powerful features package InVision stays a strong competitor on nowadays prototyping tools market.

Platform: Web
Pricing: ranging from $0 (for 1 prototype in a month) to $99 (unlimited number of prototypes + up to 5 members in a team)

Justinmind

Justinmind is meant to be an all-round prototyping tool. It supports different types of devices, enabling creating web and mobile wireframes. With Justinmind you can build both simple click-through prototypes and more complicated ones. It is your decision to use either existing mocks or create your own screens — both options are possible. There is large widget library including buttons, forms, checkboxes, list etc. With this tool, it is possible to make interactive wireframes with different interactions and animations without coding. Justinmind may be difficult to get into, however it provides a tutorial section with helpful educational materials and community support.

Platform: Mac, Windows
Pricing: ranging from $19 per user per month (billed annually or $29 month-to-month) to $495 per user (multi-user discount)

Marvel

Marvel is a web-based prototyping tool for creating fast, simple, and click-through prototypes for web and mobile applications. Prototypes can be created from existing mocks uploaded into Marvel directly or via Google Drive, Sketch, or Dropbox in such formats as PSD, GIF, JPG. Meanwhile, there are no features for creating or modifying elements.

Still, Marvel’s competitive advantage lies in its simplicity. Of course, being simple to use and learn means its reduced functionality, but this tool has got all needed basic functions. With Marvel it is possible to add screens and hotspots without much effort, include simple animations to page transitions, visually link screens and drag and drop them for rearranging, edit and view prototypes on mobile app using basic mobile gestures etc. One more advantageous feature of Marvel is its mobile companion app. With this app you can transform your sketches on paper into prototypes only by taking a photo of them.

Therefore, Marvel is a good option for those who want to create simple and quick mockups as well as for newcomers in web design.

Platform: Web
Pricing: starting from $0 per month (for 2 free projects) and getting higher depending on what you need (there are Pro, Plus, and Company versions) and how many users are in your team (for instance, Company version for 3 users costs $45)

Flinto Lite

Flinto Lite is another prototyping tool that is about simple and fast prototype creation. This tool is ideal for mobile apps and it allows creating prototypes for Android, iPad, and iPhone. By using only existing mocks imported into Flinto Lite you can create your prototype in about 5–10 minutes. The philosophy of this company states that it is of the utmost importance to create a prototype of your final product on the early stages before development starts, so test your product from the start. That is why it offers rapid and easy prototypes creating without disrupting your workflow using the screens, which have already been designed.

Apparently, having simple and fast prototyping style it provides only basic functionality. But sometimes it is all you need. Flinto Lite allows connecting screens visually, sharing prototypes with others in one click, dragging and dropping new screens over the old ones, adding transition effects to links etc. There is also Flinto for Mac version — app prototyping tool for creating both simple prototypes and more comprehensive ones including interactions. Flinto for Mac has such features as Sketch plugin, live preview on your desktop, Behaviour Designer feature for creation of micro-interactions within screens, customizable image sizes and others.

Platform: Web
Pricing: $20 per member per month

Proto.io

Proto.io is a web-based prototyping tool made for creating fully-interactive prototypes with high level of fidelity. It has a truly extensive library of built-in widgets for for iOS 7 and 8, Android 4, and Windows 8 devices. Proto.io is about building prototype elements within the tool, not uploading existing mockups. You can begin with a bare template and create the final version of your prototype, feeling free to customize your prototype in a way you choose.

Proto.io enables to add interactivity to individual elements, including animations, transition effects, and scrollable containers. It also supports mobile gestures and transitions. Moreover, it has Dropbox syncing for assets and provides support for Sketch and Photoshop plugins. Proto.io supports commenting and conversations but it does not allow setting detailed required documents. It may be difficult for the first-time users to work with Proto.io because of its great deal of options and functions that can be a little overwhelming, but it provides proper training and support documentation.

Platform: Web
Pricing: starting from $29/month (1 user and 5 active projects) ending with $199/month (10 users and 30 active projects). There is also up to 20% discount for annual billing.

Protoshare

Protoshare is a browser-based tool for creating wireframes and prototypes. It focuses on collaboration between team members and clients, enabling them to put their comments, opinions, ideas, and decisions in real-time. It makes the working process more effective and faster, as communication problems and misconceptions are often the reason projects face some difficulties or even fail.

Protoshare is not a Flash tool and it uses HTML, CSS, and Javascript. It is good for creating prototypes with multiple states and animated transitions for web, mobile, and tablet. This prototyping online tool also enables building interactive and clickable prototypes, adding animations to individual elements, using custom CSS and including your own elements there, export prototypes to an HTML file or Word document and so on. In addition, it has considerable library of drag-and-drop components. What is more, it is not about using existing mockups, but more about creating new screens within the tool. Meanwhile, with all its features and complexity Protoshare may be a bit difficult for the beginners.

Platform: Web
Pricing: offers Standard plan for $29/month; Professional plan for $49/month, Business plan for $59/month and free 30-day trial for all the plans

UXPin

UXPin is one more web-based tool for prototyping web, desktop, and mobile apps. Both static wireframes and fully interactive and animated prototypes with low or high level of fidelity may be built with this tool. It has truly extensive library of UI elements and UX patterns, which are available for various devices and frameworks. It also supports importing designs from Sketch or Photoshop. You can create prototypes either importing existing mocks, Photoshop and Sketch files or within UXPin with the help of its UI libraries. What is more, UXPin offers clean drag-and-drop interface, usability testing, live presentation for your stakeholders, and supports collaboration enabling commenting and annotation.

Apart from all the advantages UXPin offers, apparently there must be some drawbacks. This prototyping tool has a moderate learning curve, so it may not be clear enough for the first-time users, it may provide no support for gesture-based interactions, and no support for creating master elements. Nonetheless, UXPin provides really good blog with a lot of valuable information about UI and UX.

Platform: Web
Pricing: ranging from $19/month per user (Basic) to $98/month for 2 users + 1 for free and $49 for every next user (Team)

Fluid

Fluid is web-based prototyping tool, which is ideal for creating mobile application prototypes. It has a lot of users so far, and such well-known brands as Google, Samsung, Xerox, and eBay are among them. Fluid has 16 built-in libraries for all the modern mobile platforms, such as Android, iOS, Windows, and wearable devices. You can create your prototype from existing mocks or by building screens within Fluid using its libraries. Furthermore, Fluid is a great visualization tool. You can map out your ideas by creating screen flaws, building diagrams, and illustrating how it works.

In general, it has intuitive and clean interface, easy drag and drop functioning, extensive UI widgets library, support gesture-based interaction between pages, ability to add transition effects to links, ability to share your project with your team members and clients, version history etc. However, it does not support adding interactivity to individual elements, and its learning curve may be characterized as moderate, as it will take some time to get oriented for not really experienced users.

Platform: Web
Pricing: starting from $8.25/month or $99 a year for a Solo plan (3 projects) ending with $41.58/month or $499 a year for a Team plan (unlimited number of projects)

Therefore, the above mentioned tools are only bright representatives of those existing on the market. There are plenty of wireframing and prototyping tools out there with their advantages and disadvantages. It’s impossible to determine the one that beats them all, because the best solution for you will not be the best for your neighbor. It is all about what you need and what you are looking for, so you have to consider your priorities, choose the most appropriate option and give it a try.


Discover more interesting articles on our blog.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.