Review of UX prototype software

My review on several UX prototype tools I have used

Lucy M. Chen
Aug 22, 2017 · 7 min read

I have used many UX prototype software during my career so far (difficult not to, given the abundance of UX software out there), and I noticed that each software is useful in different environments, depending on what the organizational role is for the designers. Different organizations expect the UX designers to do different things.

This short piece explores the properties and features of these tools and hopefully helps you to decide on one to use for your organization.

Disclaimer: Not thoroughly edited. I have extensively used these tools, but I have only tried others such as Framer, Principle, Origami, and Balsamiq, which I won’t cover in this piece.

My tools of trade.

TLDR: Sketch is solid. Adobe XD is simple and easy to pickup, but not too powerful. Axure is a monster tool that can create extremely realistic prototypes. Photoshop and Illustrator recommended for beginners.

Adobe Photoshop CC

My UX career began with Photoshop (in the basement of my university friend’s house). It was the only tool that I’m familiar with at that time.

It goes without saying that any visual software can be used to prototype (including Powerpoint, Paint, etc.). Photoshop is no exception.

Good

  • The great thing about Photoshop is that it offers many features for image manipulation and different resolutions and types to preserve the image.
  • You can use layers to compose different scenarios for a specific art board.
  • You can create quick animations.

Bad

  • It is usually pixel based so it won’t be scalable in terms of resolution. To avoid this, you can create “shapes” and they will be vector. If you pasted mock photographs, it might appear pixelated (and unprofessional) if you export the mock in high resolution.
  • It is layer based, so you can’t always select what you see. If you have many shapes (for example, a form page), often times you will have to traverse the layer list to find the right layer to select your shape.
  • Expensive

Conclusion: ★★☆☆☆

Use Photoshop for quick design fixes. However, be mindful that often times a quick fix can turn into a feature.

Adobe Illustrator CC

Good

  • It is vector based and has art boards. You can easily click on whatever you see.
  • Adobe shortcuts are used interchangeable here.
  • Icon creation is easy.
  • You can batch export art boards.
  • File recovery in the case of a crash.

Bad

  • Naming the art boards is very difficult (you have to go into the art board tool)
  • The software is very “heavy”. It can slow down or crash sometimes if you loaded a bunch of art boards with tons of shapes and elements, which is irritating.
  • Expensive.

Conclusion: ★★★☆☆

Illustrator is decent, but it runs slowly if you have too many elements on your art boards. I would use this only if you already have Illustrator for other purposes.

Adobe InDesign

Good

  • The interface is great for laying out pages, since this is a publisher tool.
  • Grid feature is awesome and versatile. InDesign allows you to specify left and right margins of the grid system, which Sketch cannot.
  • Easy to import images as objects and resize as you desire. This is equivalent to the masking tool in Sketch and Adobe Experience Design, except it’s automatic in InDesign.

Bad

  • There are no art boards but pages, so it’s not easy to get to the mock you want. You’d have to rely on the visuals on the page tab.
  • The font is in points, so it will cause major problems when you are doing your specs for your developer.
  • Expensive.

Conclusion: ★★☆☆☆

InDesign is great for laying out your page really quickly, but it doesn’t support other features in a prototype software.

Sketch

Good

  • Grid system is easy to set up, although somewhat rigid because gutter and column width are automatically calculated.
  • Art boards are easy to set up and rename.
  • Has many plugin tools, such as InVision’s Craft plugin, Nearest 8 for 8-px grid system, Zeplin style library and so on.
  • Very light. It seems like it won’t freeze even when there are many pages and art boards and objects.
  • Easy to batch export art boards.
  • Affordable ($100 USD with 1 year of software updates)

Bad

  • Grid system offers no left and right margin.
  • Selecting multiple objects and shapes in Sketch is a nightmare because if you are not precise about it, it unselects all the objects
  • Locking and unlocking objects is inconvenient because you cannot unlock using the same shortcut, unless you have the layer selected.
  • Limitation is that it only exports as static images, not a live prototype.
  • Not compatible with Windows.

Conclusion: ★★★★☆

I can now understand why Sketch is the standard for UX high fidelity mockups. It is good for both small and large organizations.

Axure

Good

  • Incredibly realistic prototype with common UI elements such as drop downs, text box, lightbox dialogue, animation, hint text, buttons, etc.
  • The best thing is you can literally program (no worries, no coding!) your prototype to perform a certain flow.
  • This is especially useful if you are showing various different and complex use cases
  • Determines data, logic, workflow of a prototype, but not the “delight” that everyone speaks about
  • Easy drag-and-drop style library. Now all your pages are organized into components and it becomes extremely easy to recreate a page. Simply drag and drop that nav bar.
  • Many enterprises use Axure, and they appreciate new designers to be fluent in it as well.
  • Prototype is shareable and comment-able so it is pretty decent for review. Also, you can put a password on your prototype page.
  • If you purchase an enterprise license, you can also put your prototype in a team folder, accessible team members.
  • The license you purchase is perpetual!
  • If you are a student, you can get it for free!
  • You can also import other mocks into Axure and add Axure logic to bring your mocks to life.
  • You can also create pages within the prototype (accessible by the side bar) for documentation

Bad

  • The learning curve for Axure is steeper than other prototype software like Sketch and Illustrator.
  • No grid system feature, as far as I know. You gotta design your page elsewhere and port it here to prototype the interactive elements.
  • The UI elements Axure offer are most likely OS elements. If you want to create your own drop downs and radio buttons, you have to create and program them yourself.
  • Cannot create icons, but Axure now does support vector shapes.

Conclusion: ★★★★☆

Using Axure takes a bit of thinking because of the product’s user mental model is a bit different. Axure sure does lack in the visual department, but the level of interaction it offers is so detailed that you can uncover many use cases or go straight to some preliminary user testing with just an Axure prototype.

Adobe Experience Design (beta)

Good

  • Super easy to use. UI is minimal and visually appealing, somehow inspires me to also create cleaner interfaces.
  • Easy to publish a prototype like InVision straight from XD, but features are very limited
  • Light in performance. It is still fast even with numerous art boards.
  • The symbol library can come in handy if you find yourself re-using the same group of shapes or UI element
  • It’s free for now…

Bad

  • Limited features such as not able to create a regular polygon without using the pen tool
  • No grid system support
  • File recovery seems nonexistent…
  • Not transferable. If I copy an object from XD to Illustrator, it becomes a a raster image, which are pixels.

Conclusion: ★★★★☆

Adobe XD feels light and fast, although many features are sacrificed for the simplicity. It’s still in beta, so who knows how it will grow. For the features included in beta right now, it has what it takes for you to create a high fidelity mockup with a simple publisher tool.

If you are already familiar with Adobe, XD will be even easier for you to grasp. However, a few times I found myself using XD in conjunction with Illustrator, so it is not a free standing tool. I would recommend XD to beginners or any design team that already is familiar with Adobe products.

Conclusion

Sketch is definitely a mainstream tool for UXers for a reason. It is light, familiar, and affordable. It also offers many plugin tools to extend its usefulness, catered to your own needs. Sketch is great for small and large teams.

Adobe XD (free of charge for now…) is even lighter than Sketch but offers only the essential tools. It has an amazing interface that often inspires you to create interfaces just as clean and simple. You can also quickly connect your mockups to see a semi-interactive prototype.

Axure is the behemoth of prototyping. Given that many elements Axure offer are inherently interactive, your prototype can be extremely realistic, depending on how much effort you put in your prototype. This is awesome for usability testing. If you are a student/teacher, you can get it for free. Otherwise, it’s ~$1,000 for a perpetual license.

Photoshop and Illustrator would not be on my recommendations as the aforementioned three are easily accessible…They are suitable tools for UX perhaps for entry UXers who are already familiar with Adobe products.

Thanks @alixie.yang for proofreading!

)

Thanks to Alice Yang

Lucy M. Chen

Written by

Interaction Designer at @veevasystems. @uwaterloo math grad. Closet hipster and nerd

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade