Naturally, you wouldn't want to take the plunge and develop a software application without a strong understanding of how the final product would look and feel. A clickable, graphical prototype is an essential artefact from the scoping process, which demonstrates the proposed user experience and user interface. These prototypes are also crucial during development, as they are part of the overall blueprint developers build from.

Of course, there are many ways to create prototypes and a variety of software solutions to support this process. Generally, a product designer might begin prototyping via sketches and drawings. After they have explored ideas using traditional methods, they will then convert those sketches to wireframes and high-fidelity screens. Below are five commonly used prototyping tools that you might encounter on your software journey.

1. Adobe XD

https://www.adobe.com/au/products/xd.html

This software application comes first in our list because it is currently the design application most used for prototyping at WorkingMouse. Adobe XD features a simple interface which is very easy to navigate and allows designers to create art boards which match the screen sizes of common devices. Moreover, Adobe XD comes locked and loaded with animation and hotspot tools to better simulate dropdown menus, transitions and other interface goodies you’d expect to see in a finished application.

Arranging the screen order and clickable area of prototypes is also very straightforward, involving simply clicking on an element and using the prototyping wire tool to 'link' it to another area of the prototype. Prototypes can be saved to the cloud for others to view and comment on when prototyping is complete. Perhaps one of the most attractive things, however, about Adobe XD is its price point: as of this writing, it's free as long as you have an Adobe account, no active Creative Cloud subscription required.

2. Balsamiq

https://balsamiq.com/

Balsamiq is an industry-standard tool to produce low-fidelity wireframes. Low-fidelity wireframes equates to greyscale or black and white representations of the application where the focus is on the overall structure rather than the fine details. Because of this, it is most useful towards the early stages of prototyping where designers transition from pencil sketches to digitised versions of the UI. One of Balsamiq's greatest strengths is in its total simplicity - because it is geared towards creating wireframes, it means that the interface is incredibly straightforward to use.

In fact, Balsamiq is widely considered to be one of the easiest prototyping software applications to use. Basically: if you can use Microsoft Word or create an email, then you will have no problems picking up Balsamiq. Aside from the speed with which these wireframes can be produced, one of the best benefits of Balsamiq are its collaborative possibilities. Because Balsamiq is so incredibly easy to use, it means that Product Owners can get involved with the wireframing process directly if they so wish.

3. InVision

https://www.invisionapp.com/

One of the most well-known prototyping tools for user interfaces is InVision. It shares many similarities with Adobe XD, which makes sense as Adobe XD is a response to InVision. InVision has been around for a long time and is mostly focused on UX and team collaboration. Team members can log in online to view, edit and create projects, without the need to download a desktop app. Upload screenshots, designs or other images from your computer to create the base interface for an InVision project, and then use the tools within the app to link elements, create hover states and craft a well-honed user experience.

Because you can access InVision anywhere, it is a platform agnostic tool, whereas some prototyping software is locked to a specific operating system. And, of course, InVision provides a hosting environment for your prototypes as well as a way to get feedback on them. It is worth pointing out that InVision is not a complete design tool; you would need to design your screens and assets using another app and then import them into InVision for prototyping. This brings us to the next item on the list...

4. Affinity Designer

https://affinity.serif.com

Affinity Designer is a vector graphics program similar to Adobe Illustrator. However, it also supports raster brushes for a complete drawing experience. Affinity is also able to open and edit Photoshop, Illustrator and EPS files with relative ease. It can also export back to PSD and PDF is required. The strength of Affinity lies in its versatility - like Adobe Illustrator, you can create rich vector graphics, including UIs.

However, Affinity is currently being offered at a much lower price point than Adobe Illustrator and the learning curve is slightly friendlier. For designers who are already experienced with Adobe Illustrator, picking up Affinity is super easy. If you are looking for an all-around software specifically for creating user interfaces, and you're on a budget, then you could do worse than grabbing Affinity and then setting up an account on InVision for your complete prototyping needs.

5. Sketch

https://www.sketch.com/

Sketch is widely considered to be one of the best prototyping tools available on the market, and certainly is deeply beloved by many designers. There is a caveat here, however, and that is that Sketch is currently only available for Mac. For those on this operating system, however, Sketch is a great addition to your design toolkit and can be used to create UI, mobile, web and even icon design. It has a very clean user-interface that is straight-forward and to the point, and versatile tools that blends the layout suite of InDesign with the design tools of Photoshop or Illustrator. It can export files at multiple sizes so product designers can create prototypes to account for a variety of outputs. Another significant benefit of Sketch is its affordable price. Purchase the app once and use it for a lifetime.

You'll have to renew the license each year to access any new updates, but this renewal fee is cheaper than the original purchase price and is far cheaper than a Creative Cloud subscription with all the trimmings. Sketch is able to handle the creation of clickable prototypes by creating links between artboards, similar to how Adobe XD works. It can also create links via hotspots which are manually created. The development team who maintain Sketch are quite nimble, constantly adding useful updates to Sketch. Overall, Sketch is an affordable and very worthy addition to your design arsenal, provided you're on a Mac.