12 top prototyping tools

09. Atomic

Prototyping tools: Atomic

Atomic is a web application that requires Google Chrome
  • Price: Free trial (Individual $19pm/Team $99pm)

With its beautiful UI and intuitive, easy-to-use animation timeline, Atomic makes a great first impression. Atomic is a web application that requires Google Chrome, which may be a drawback to designers using Safari, Firefox or Windows browsers. Also, there are no desktop apps available.

If you have used After Effects to prototype animations, you will feel right at home with Atomic's animation timeline. This gives you the flexibility and control you need to fine-tune your interaction: just click the play button to see your changes and animations in action.

When you're happy with your design, you can share it with a URL preview on any device. It's also possible to gather design feedback from your clients and team via inline comments.

My favourite feature of this particular tool is the history option, which allows you to rewind to see previous iterations and create new versions from any point. For those designing for iOS, Atomic has launched an iOS kit with a library of iOS design elements, to enable rapid prototyping.

Finally, you can add custom CSS directly into Atomic. It's also possible to export CSS, so you can simply copy and paste it into your project.

10. InVision Studio

Price: TBC

Pros: 

  • Amazing animation potential
  • Responsive design ability
  • Developer-friendly
  • Inspect tool for design info
  • Easy to export prototypes
  • App available

Cons:

  • Not yet out of early access
  • A bit buggy to begin with

InVision Studio is the design tool that we’re all very excited to see. At time of writing it was due to be released soon. This tool promises some great features enabling you to create true-to-form visual prototypes with some fantastic features.

InVision, known for its online prototyping environment and its compatibility with Sketch and Photoshop, looks set to build on all this with its InVision Studio incarnation. 

The new application and studio offers sophisticated animation tools to make your designs awesome. One of the most exciting features on the cards is the responsive design ability. This means that you could design purely from one artboard, achieving designs for mobile, tablet and desktop.

As a whole, InVision is a well respected platform for designers that offers additional tools for any user including mood boards, project management and live annotating and collaboration. The one feature that also stands out is the Inspect tool, enabling developers to look at the designs and pick out things like colour references, sizes and even copy and paste rich text.

11. Adobe Comp CC

With Adobe Comp, you can create print, web and mobile layouts that seamlessly integrate with Photoshop, Illustrator and InDesign

With Adobe Comp, you can create print, web and mobile layouts that seamlessly integrate with Photoshop, Illustrator and InDesign

Price: Free

Increasingly, creative are able to use tablet devices to develop projects. Adobe Comp provides the tools you need to transform natural drawing gestures into production-ready graphics.

With Adobe Comp, you can create print, web and mobile layouts that seamlessly integrate with Photoshop, Illustrator and InDesign. Also, if you use linked assets, making a change in one program will cause the asset to update everywhere else it's featured.

Comp works with Adobe Stock and Typekit, thereby providing you with images, graphics, and hundreds of fonts that can easily be incorporated as you work on your design prototype. This is my favourite feature, because it means virtually any graphic or font is available at your fingertips.

Adobe Comp offers a new way to develop and design prototypes, but due to its user-friendly design, there is virtually no learning barrier. Regardless, Adobe still provides several tutorials to help you get started, if you need them.

If you want to share your design prototypes with your team or clients, you can use Adobe's Behance network to get feedback: a smart move by Adobe to leverage its already massive reach.

12. Principle

Prototyping tools: Principle

Principle comes with an iOS app to mirror live prototypes

Price: $129 (free trial)

Principle is built by a former Apple engineer for OS X, and comes with an iOS app to mirror live prototypes. Principle has a record feature that can export prototypes to a video or an animated GIF, which can be shared on Dribbble, Twitter or anywhere else you'd like!

Principle is only available for Mac, and if you've used Sketch, Principle's interface will look very familiar. Principle uses artboards to animate elements between states, so as you work on your prototype, you can live-preview your designs on the top right-hand side window. Alternatively, you can mirror your designs on an iOS device.

While Principle does not include a collaboration tool, this drawback will likely be overshadowed by its offline capabilities. The flexibility of working offline is further highlighted by increased speeds, since you're not relying on a potentially unreliable or slow connection.

These reviews were originally published in net magazine. Subscribe today.

Related articles: