UX DESIGN

Five best pro­to­typ­ing tools for UX and UI de­sign

Naturally, you would­n’t want to take the plunge and de­velop a soft­ware ap­pli­ca­tion with­out a strong un­der­stand­ing of how the fi­nal prod­uct would look and feel. A click­able, graph­i­cal pro­to­type is an es­sen­tial arte­fact from the scop­ing process, which demon­strates the pro­posed user ex­pe­ri­ence and user in­ter­face. These pro­to­types are also cru­cial dur­ing de­vel­op­ment, as they are part of the over­all blue­print de­vel­op­ers build from.

Of course, there are many ways to cre­ate pro­to­types and a va­ri­ety of soft­ware so­lu­tions to sup­port this process. Generally, a prod­uct de­signer might be­gin pro­to­typ­ing via sketches and draw­ings. After they have ex­plored ideas us­ing tra­di­tional meth­ods, they will then con­vert those sketches to wire­frames and high-fi­delity screens. Below are five com­monly used pro­to­typ­ing tools that you might en­counter on your soft­ware jour­ney.

1. Adobe XD

https://​www.adobe.com/​au/​prod­ucts/​xd.html

This soft­ware ap­pli­ca­tion comes first in our list be­cause it is cur­rently the de­sign ap­pli­ca­tion most used for pro­to­typ­ing at WorkingMouse. Adobe XD fea­tures a sim­ple in­ter­face which is very easy to nav­i­gate and al­lows de­sign­ers to cre­ate art boards which match the screen sizes of com­mon de­vices. Moreover, Adobe XD comes locked and loaded with an­i­ma­tion and hotspot tools to bet­ter sim­u­late drop­down menus, tran­si­tions and other in­ter­face good­ies you’d ex­pect to see in a fin­ished ap­pli­ca­tion.

Arranging the screen or­der and click­able area of pro­to­types is also very straight­for­ward, in­volv­ing sim­ply click­ing on an el­e­ment and us­ing the pro­to­typ­ing wire tool to link’ it to an­other area of the pro­to­type. Prototypes can be saved to the cloud for oth­ers to view and com­ment on when pro­to­typ­ing is com­plete. Perhaps one of the most at­trac­tive things, how­ever, about Adobe XD is its price point: as of this writ­ing, it’s free as long as you have an Adobe ac­count, no ac­tive Creative Cloud sub­scrip­tion re­quired.

2. Balsamiq

https://​bal­samiq.com/

Balsamiq is an in­dus­try-stan­dard tool to pro­duce low-fi­delity wire­frames. Low-fidelity wire­frames equates to greyscale or black and white rep­re­sen­ta­tions of the ap­pli­ca­tion where the fo­cus is on the over­all struc­ture rather than the fine de­tails. Because of this, it is most use­ful to­wards the early stages of pro­to­typ­ing where de­sign­ers tran­si­tion from pen­cil sketches to digi­tised ver­sions of the UI. One of Balsamiq’s great­est strengths is in its to­tal sim­plic­ity - be­cause it is geared to­wards cre­at­ing wire­frames, it means that the in­ter­face is in­cred­i­bly straight­for­ward to use.

In fact, Balsamiq is widely con­sid­ered to be one of the eas­i­est pro­to­typ­ing soft­ware ap­pli­ca­tions to use. Basically: if you can use Microsoft Word or cre­ate an email, then you will have no prob­lems pick­ing up Balsamiq. Aside from the speed with which these wire­frames can be pro­duced, one of the best ben­e­fits of Balsamiq are its col­lab­o­ra­tive pos­si­bil­i­ties. Because Balsamiq is so in­cred­i­bly easy to use, it means that Product Owners can get in­volved with the wire­fram­ing process di­rectly if they so wish.

3. InVision

https://​www.in­vi­sion­app.com/

One of the most well-known pro­to­typ­ing tools for user in­ter­faces is InVision. It shares many sim­i­lar­i­ties with Adobe XD, which makes sense as Adobe XD is a re­sponse to InVision. InVision has been around for a long time and is mostly fo­cused on UX and team col­lab­o­ra­tion. Team mem­bers can log in on­line to view, edit and cre­ate pro­jects, with­out the need to down­load a desk­top app. Upload screen­shots, de­signs or other im­ages from your com­puter to cre­ate the base in­ter­face for an InVision pro­ject, and then use the tools within the app to link el­e­ments, cre­ate hover states and craft a well-honed user ex­pe­ri­ence.

Because you can ac­cess InVision any­where, it is a plat­form ag­nos­tic tool, whereas some pro­to­typ­ing soft­ware is locked to a spe­cific op­er­at­ing sys­tem. And, of course, InVision pro­vides a host­ing en­vi­ron­ment for your pro­to­types as well as a way to get feed­back on them. It is worth point­ing out that InVision is not a com­plete de­sign tool; you would need to de­sign your screens and as­sets us­ing an­other app and then im­port them into InVision for pro­to­typ­ing. This brings us to the next item on the list…

4. Affinity Designer

https://​affin­ity.serif.com

Affinity Designer is a vec­tor graph­ics pro­gram sim­i­lar to Adobe Illustrator. However, it also sup­ports raster brushes for a com­plete draw­ing ex­pe­ri­ence. Affinity is also able to open and edit Photoshop, Illustrator and EPS files with rel­a­tive ease. It can also ex­port back to PSD and PDF is re­quired. The strength of Affinity lies in its ver­sa­til­ity - like Adobe Illustrator, you can cre­ate rich vec­tor graph­ics, in­clud­ing UIs.

However, Affinity is cur­rently be­ing of­fered at a much lower price point than Adobe Illustrator and the learn­ing curve is slightly friend­lier. For de­sign­ers who are al­ready ex­pe­ri­enced with Adobe Illustrator, pick­ing up Affinity is su­per easy. If you are look­ing for an all-around soft­ware specif­i­cally for cre­at­ing user in­ter­faces, and you’re on a bud­get, then you could do worse than grab­bing Affinity and then set­ting up an ac­count on InVision for your com­plete pro­to­typ­ing needs.

5. Sketch

https://​www.sketch.com/

Sketch is widely con­sid­ered to be one of the best pro­to­typ­ing tools avail­able on the mar­ket, and cer­tainly is deeply beloved by many de­sign­ers. There is a caveat here, how­ever, and that is that Sketch is cur­rently only avail­able for Mac. For those on this op­er­at­ing sys­tem, how­ever, Sketch is a great ad­di­tion to your de­sign toolkit and can be used to cre­ate UI, mo­bile, web and even icon de­sign. It has a very clean user-in­ter­face that is straight-for­ward and to the point, and ver­sa­tile tools that blends the lay­out suite of InDesign with the de­sign tools of Photoshop or Illustrator. It can ex­port files at mul­ti­ple sizes so prod­uct de­sign­ers can cre­ate pro­to­types to ac­count for a va­ri­ety of out­puts. Another sig­nif­i­cant ben­e­fit of Sketch is its af­ford­able price. Purchase the app once and use it for a life­time.

You’ll have to re­new the li­cense each year to ac­cess any new up­dates, but this re­newal fee is cheaper than the orig­i­nal pur­chase price and is far cheaper than a Creative Cloud sub­scrip­tion with all the trim­mings. Sketch is able to han­dle the cre­ation of click­able pro­to­types by cre­at­ing links be­tween art­boards, sim­i­lar to how Adobe XD works. It can also cre­ate links via hotspots which are man­u­ally cre­ated. The de­vel­op­ment team who main­tain Sketch are quite nim­ble, con­stantly adding use­ful up­dates to Sketch. Overall, Sketch is an af­ford­able and very wor­thy ad­di­tion to your de­sign ar­se­nal, pro­vided you’re on a Mac.

ABOUT THE AUTHOR

Rhiannon Stevens

Creative sto­ry­teller and ex­pe­ri­ence ex­pert

Get cu­rated con­tent on soft­ware de­vel­op­ment, straight to your in­box.

Your vi­sion,

our ex­pe­ri­ence

Book an analy­sis call