Prototyping Tools to Increase the Project Production Speed

When coming up with a new design, it’s a painstaking process even if you have a general idea in mind. You have to experiment with layouts and grids, typography, colors, visual elements, structure and mechanics, and even user experience.

That explains why wireframe, prototyping and testing tools are so helpful. You’ll write lots of code during the development of the real product. It makes sense to use planning tools that ease and cut down on the amount of necessary code. How many times have you sketched a design or concept on paper, for example, without any digital coding or manipulation? Probably a handful of times, or some manner of this process.

Want something a little more rudimentary than paper or sketch pads? Check out these five great prototyping tools meant to boost your project production speed.

1. Marvel

Don’t want to fiddle with installing third-party apps on your design computer or system? No problem, Marvel is browser-based, allowing you to prototype designs right in your favorite web browser. It’s also incredibly easy to setup and use.

With Marvel, you can upload local image files, gestures, transitions and various elements for use in your designs. It supports formats like JPG, GIF and PSD. You can also interface with cloud storage services such as Dropbox, Google Drive, Sketch and more.

One thing to note, you cannot edit images with a suite of tools. You’ll have to do your editing elsewhere and then import the content into Marvel. That said, it does offer a robust set of prototyping features like background color changes and quick image re-sizing. You can also apply and work with a handful of themes — some made for specific platforms like mobile.

In the middle of working and need to take off? Your designs will sync through the Marvel service and can be opened and manipulated through the Marvel mobile companion app from anywhere.

Price: Free and Premium Plans

2. InVision

If you haven’t heard of InVision before, at least from another designer, then you’ve been living under a rock. It’s incredibly popular — one of the most popular tools in the world actually — because of how capable it is. The development team stays in touch with the community, and constantly adds new features and support.

While it offers a huge variety of prototyping and design features, the customer feedback loop it creates is unprecedented. Clients and teammates can provide feedback on a prototype as you shape it. This creates an invaluable design process that needs no sweeping changes later.

For design features, you can animate, create and add assets or import designs and images — including those from Sketch or Photoshop. There’s also a handy mobile device simulation tool, where you can see your prototype on a simulated website. This benefits the user experience, as you can see what works and what doesn’t before going live.

Plus, there’s integration with Slack, Dropbox, Google Drive, Box, and many more.

Price: Free

3. Vectr

Similar to Marvel, Vectr allows you to design and manipulate prototypes from within your browser using a web app. But you have the option to use a desktop app on Windows or Mac too.

Sharing is made simple through this tool, as you can assign prototypes a URL, which can be sent via apps such as Slack or even conventional email. This allows for a stronger collaboration between teams and a more involved client process. Mockups and wireframes can also be edited and shared in this way too.

Additionally, you’ll get embedded feedback and annotation support, interactive mockups, third-party and community-created plugins, image effects and collaborative editing.

Price: Free

4. Sketch

We’ve already mentioned Sketch a couple times in our list, so it’s only natural we include it on the list too. It doesn’t hurt that it’s a renowned and reliable prototyping tool for designers either. Graphic artists — digital or otherwise — software designers and web developers will all benefit from using this tool.

It’s a lot like Photoshop and GIMP as you can edit photos through a series of robust and advanced options. It’s much easier to use than Photoshop and the learning curve is not so steep. Of particular note is the ease of tweaking designs. You can switch styles, layouts, element sizes and even various page properties quickly.

Sketch also integrates with a preview tool called Sketch Mirror that allows you to see your prototype or design live, on the device of your choice.

Price: $99

5. iRise

iRise made the list because it’s a great tool, yes, but you can use it to create interactive prototypes for multiple systems including wearable products, mobile and web. Don’t want to work with a higher accuracy? No problem, enable lo-fi wireframes and you’re good to go. You can also enable hotspot driven prototypes and hi-fi apps with data connections.

The real meat of this bad boy, however, lies in the collection of tools and support for designers. You can work with UI elements, user flows, interactive and working widgets, mobile gestures and business process diagrams.

Price: Free 30-day Trial, $99 for Basic

Honorable Mentions

This list is by no means comprehensive. There are a variety of additional prototyping tools you can use for prototyping and early design. Some honorable mentions include:

•   Origami
•   Adobe Comp
•   HotGloo
•   Justinmind
•   Balsamiq
•   Axure
•   Creately

Whatever prototyping tools you choose, it’s good to know they can all help you improve your process and production speed in their own way. More importantly, they will help keep you more organized and focused, which pays for itself really — free or not.