How to pick your wireframing tool
Wireframing tools build the bridge between creative thoughts and the final product. Wireframing can help illustrate ideas and structures in early design stages (low fidelity), simulate interactions, help present a concept and a design later in a design process (high fidelity). Finding the right tool to match your needs is crucial. However, it can be challenging to navigate the wide variety of tools, each offering a different value propositions. We’ve done the hard work comparing some of the most popular tools, covering different niches of the wireframing process. The three tools are UXPin, Axure, and Sketch combined with Marvel.
Not a search for No 1 but a guide for the best match
Rather than looking for THE best tool, we’ve evaluated which ones are best for what purpose. Therefore, to start with, it is essential for you to figure out what you want and need. The following questions will help you do that.
- Learnability: How long will it take me to learn this tool? Do I have any experience with similar tools? How is the selection of provided learning material?
- Visual Fidelity: What kind of wireframe am I creating? Am I transforming ideas to a rough and low fidelity wireframe? Am I trying to simulate interactions for a user test? Or am I trying to illustrate a concept visually with a high fidelity wireframe?
- Simulation Fidelity: What kind of interaction am I trying to simulate? For instance, should it be possible to create dynamic panels and input fields or is it enough with clickable interactions?
- Shareability: Is the tool only for myself or for a team?
- Budget: How much am I prepared to pay?
Having answered these questions it should be easier for you to select the right tool.
UXPin
UXPin is a web-based application offering wireframing tools. Alongside the classic wireframing tools, UXPin has different project management and UX tools such as persona and business model canvas templates. UXPin offers a free 30 day trial and after that you can choose between different packages, which are billed monthly per user — Basic: $19, Pro: $29, Pro+ $49
UXPin has a visually appealing interface and is learned quickly because of freely available video tutorials and explanations. As a web-based service, it is accessible from different devices and operation systems. With UXPin, a good internet connection is essential for the program to work fast (especially with bigger wireframes). Also, it can be difficult to organize bigger wireframes, as it is not possible to create subpages and folders for pages in the wireframes. Another trade off is that it is not possible to upload a new font to UXPin. This means that you are depended on UXPin’s selection of fonts.
One of the advantages with UXPin is the interaction function. It is easy to create input fields, dynamic panels, states, and clickable interactions. Furthermore, the libraries with existing elements such as buttons and input fields offer a broad selection for quick wireframing. Also, as slack.com is integrated with UXPin, commenting and sharing wireframes is effortless.
Summary of criteria:
Learnability: Easy
Visual fidelity: Low
Simulation fidelity: Medium
Shareability: Good
Price: Low
Pro: Cheaper alternative to Axure, good for basic simulation of interaction, easy to learn and use, good widget library, easy to share and collaborate
Con: The fact that it is a Web-based application makes you dependent on a good internet connection, big wireframes can take a while to process, it is not possible to import new fonts, it is not suitable for advanced interactions (e.g. variable outcome), difficult to organize extensive wireframes
Axure
Axure has been in the game since 2002 and is probably the best known player in the field. There is no doubt that Axure probably is the most complete wireframing tool in terms of flexibility, functions and tools. Axure can be purchased or subscribed to monthly. Pro: $495 per purchase or $29 per subscription, Team: $895 per purchase or $49 per subscription, Enterprise: $99 per subscription. A little tip, if you are a student or teacher you can apply for a free Axure education license.
Axure’s interface just got a redesign with the newest Axure RP update and became more flat and appealing in it’s design. Online tutorials on Axure give the users the opportunity to learn the basics and also the more advanced functions.
Since Axure has a great selection of widgets and icons, it is easy to create lowfidelity wireframes and basic interactions. You can create your own widget and page style guides. New fonts are uploaded automatically which makes it easier to create visual wireframes. Interaction-wise, Axure offers pretty much everything from hotspot linking to variable outcomes.
Axure might seem overwhelming for new users since it is a very extensive program. If you are familiar with Photoshop, try to compare it to Axure— it can seem overwhelming at the start with all its functions but once you’ve learned it you probably won’t downgrade again.
Summary of criteria:
Learnability: Time-consuming
Visual fidelity: Medium
Simulation fidelity: High
Shareability: Medium; you can share the files but it is difficult to work simultaneously.
Price: High
Pro: Good for both low fidelity and high fidelity wireframes including advanced interactions and flowcharts, good widget library (default and symbols), easy to structure big wireframes and create master elements, good for flowcharting
Con: High price, more advanced functions take time to learn, can be overwhelming for new users
Similar programs to Axure: Justinmind
Sketch (with Marvel or Craft)
Sketch might not be a classic wireframing tool like the others but it’s worth having a look at. If you haven’t heard about Sketch before, you can try to think of it as a light and more UI-focused version of Illustrator, just a lot cheaper ($99 for a single user license).
Sketch comes pre-loaded with UI templates for app and web design, which makes visual wireframing easier. The real strength of Sketch lies in the long list of plug-ins developed by the large Sketch community. One of them being Craft from Invision which lets you do prototyping from within Sketch. Craft is still in beta so it comes with a bunch of bugs but it sure has potential.
Another plugin based wireframing tool for Sketch is Marvel; a web-based prototyping app. Here, designs can be linked together and transitions can be added. This makes the Sketch files clickable. You can use Marvel for free with limited functions, or subscribe to it on a monthly basis. Pro: $12, Plus: $15, Company: $33 for 3 users.
Back to Sketch. Sketch’s interface is simple and might remind you of Keynote’s interface. It is easy to learn, especially if you are used to working with Illustrator. On sketchapp.com/learn different video tutorials and courses are provided to help you get started.
Sketch is good for designing visual wireframes and rough, clickable prototypes. And, it is a great supplement tool for other wireframing tools when something more visual is needed.
Summary of criteria:
Learnability: Medium (if you are familiar with for example Illustrator: Easy)
Visual fidelity: High
Simulation fidelity: Low
Shareability: Medium
Price: Low
Pro: Cheap (compared to e.g. Illustrator), good for visual wireframes/prototypes and stakeholder presentations, good for clickable, visual wireframes combined with Marvel, good selection of plug-ins (e.g. integration with Marvel & Slack)
Con: Not ideal for wireframing, not suitable for usability testing
A model matching tools and overall purpose
In order to visualize which purposes the different tools are best for, we’ve placed them in a model covering the level of visual fidelity on one side and the simulation fidelity (level of interaction) on the other.
For specification Axure covers pretty much all areas but lacks tools for visual design. This is where Sketch becomes a great supplement tool for Axure, as it is great for visual design. However, interaction-wise, Axure is the strongest player in the field. UXPin can be a good option for you when your budget is limited and when your needs for wireframing are about average.
For concept testing it depends on the areas of the products you need to evaluate. UXPin is enough if you don’t need to test the more emotional reactions to the solution.
Usability testing often requires a high fidelity wireframe with a high level of interaction. For advanced usability testing Axure is the most suitable candidate. If the acquired level of interaction is medium to simple, UXPin might just fit your needs.
Stakeholder presentations often require a high fidelity wireframe with medium to no interaction. Here you might go for Sketch, and if you need to sell an idea to investors, combine it with Marvel to illustrate flows and interactions.
Overall conclusion
As indicated in the matrix, the suitability of a wireframing tool depends on your needs. If you have to stick to just one versatile tool, Axure is your best bet. And if you combine it with Sketch, you will be prepared for most UX and UI related tasks.
