Choosing the Right Prototyping Tool for UX Design
8-20-2019Updated 05-06-2020
Why Do We Need a Prototyping Tool?
Prototyping is an essential step in the UI/UX process. Prototyping in web design is a way to test out ideas before utilizing too many resources. This can be done with paper sketches, HTML5/CSS3, or a growing number of prototyping tools that make the process much faster and easier. Prototyping tools allow a designer to show how design elements will interact without pulling a developer into the design phase of a project. These tools allow UI/UX designers to explore ideas and ensure that the correct decisions are made for users. Prototypes also allow clients and stakeholders to view and interact with a design as it would appear on the web, before investing in the development phase. This process gives designers data to make correct user experience decisions for both users and stakeholders to feel confident about the design strategy. There are a lot of different prototyping tools; some are perfect for low-fidelity wireframes and mockups, some for high-fidelity needs, and everything in-between. The list of prototyping tools is ever-expanding. We’re only going to focus in on a couple of tools in this post:
- Balsamiq
- InVision
- Axure RP
- Adobe XD
If you are interested in exploring other prototyping tools, there is a large list available that breaks down features and pricing for each prototyping tool.
What Prototyping Tools Exist?
There are a lot of factors that go into choosing your prototyping tool. Are you looking for a tool that does it all? Are you hoping to create low-fidelity wireframes but are not channeling Leonardo da Vinci’s artistic abilities? What kind of time do you have to devote to a learning curve with new software? Do you need to communicate with other designers or stakeholders remotely? Are hover effects paramount to your design? Are you looking for a free tool? These are only a couple of questions to ask yourself when considering which prototyping tool to use. To assist you with your research, here are some details about popular prototyping tools.
Balsamiq is a low fidelity wireframing and prototyping tool. They focus on making quick wireframes to ensure that the focus is on functionality rather than design. The components and reusable symbols make creating wireframes quick and easy. Their UI is designed to be clear and simple to use with a number of keyboard shortcuts to streamline processes even more. Each element, once drawn, can be modified to be another type. For example, a box, drawn by holding down R, can be modified to an image by right clicking and selecting modify. Balsamiq includes collaboration by adding people to each project that you can chat with or can comment on specific screens.
Balsamiq is one of the prototyping tools that comes with a monthly or yearly cost depending on the number of active projects you are designing. For 2 active projects, the cost is $9/month or $90 per year. For 20 active projects, the cost is $49/month or $490/year. For 200 active projects, the cost is $199/month and $1,990/year.
InVision is almost opposite to Balsamiq. It allows the designers to create interactive mockups by using transitions and triggers to create interactions and animations. It has a focus on functionality, as all prototyping tools do, but it has more detailed interactions and animations available. It includes Inspiration Boards to help collect stakeholder inspiration at the beginning of requirements gathering to help inform the design direction for the project. InVision has built in collaboration and feedback tools available that allow designers and stakeholders to freehand sketch and add notes to each screen to communicate ideas. What’s great about InVision, is once the designs are approved there is a quick hand-off to development for implementation. InVision includes details about HEX colors, dimensions, appearance, and ensures that the original design elements translate to development without losing any thoughtful design details.
InVision includes several different monthly pricing options depending on the number of active projects. For 1 active prototype InVision is free to use. For 3 prototypes, the cost is $15/month. For unlimited prototypes, the cost is $25/month. For unlimited prototypes and access for up to five designers, the cost is $99/month. InVision also offers an enterprise option that includes unlimited prototypes and extra advanced features like: no user limits, customer support, SAML-based Single Sign-On (SSO) options, and admin controls to assign roles and access levels to team members.
Axure RP is very similar to InVision, it is a tool to create interactive wireframes and mockups; not low-fidelity wireframes. Axure RP allows designers to connect screens to show how a user would interact with the design elements on one screen and how that takes them to another screen. It also has built in tools to slice and crop images without the need for another tool like Photoshop or Illustrator. One great feature Axure RP has is the ability to write conditional logic. For example, a designer can designate what “if” and “else” logic occurs upon page load to emulate the end user’s experience. Axure RP comes with animation effects and gives designers the ability to import SVGs into their designs. Axure RP lends itself well for the transition to development like InVision does; it displays redlines, styles, colors, documentation, and even outputs CSS snippets to roll right into implementation.
Axure RP offers two purchasing models: one for a single designer (Axure RP Pro) and one for a team of designers (Axure RP Team). Axure RP Pro is $29/month and Axure RP Team is $49/month which includes co-authoring on team projects, revision history, and allows for cloud hosting.
Adobe XD brings design and prototyping together in one platform. Designers can create low-fidelity prototypes that move seamlessly into high-fidelity designs and then onto development hand-off. It includes great features like an organized assets panel, auto-animate features, the ability to quickly repeat grids, and with the click of a button you can resize artboards for all responsive screen sizes. Stakeholders have the ability to review and comment on each of the screens and it can integrate with Slack and Jira. Since XD was created by Adobe, Photoshop and Illustrator play nicely together with XD. Designers can open PSD files with XD, which makes updating any older files very easy. Although XD does have the ability to create vector shapes (with more updates coming every day) for anything that is imported from illustrator, you have control to edit the vector without leaving XD.
Adobe XD offers three different pricing plans depending on your need. XD’s Starter Plan is free but limits designers to 1 active prototype, 1 active design spec, a limited selection of Adobe fonts, and 2GB of cloud storage. The standard plan is $9.99/month per user and allows for unlimited prototypes, unlimited design specs, a full Adobe font library, and 100GB of cloud storage. XD for Teams is $22.99/month per user and has the same features as the standard plan; the additional cost with this plan includes onboarding webinars, web-based admin console, and advanced technical support.
What Prototyping Tool is Right for Your Project?
This depends on the project and how for you want to take the mockups. A tool like Balsamiq is great for creating wireframes that focus on functionality more than design. Adobe XD is great for starting with wireframes and evolving them into high-fidelity mockups that reflect how the user will interact with the website or application once it is developed.
We enjoy the inclusivity of Adobe XD. It does everything our designers need in one intuitive platform. Our focus on designing a great experience for users further supports the need to take our initial wireframes and evolve them into high-fidelity mockups that include animation and micro-interactions. If you’re interested in fully experiencing your new website design before it is implemented schedule a consultation with our team.
