10 top prototyping tools

06. Atomic

Prototyping tools Atomic

Atomic is a web application that requires Google Chrome
  • Price: Free trial (Starter $15pm/Pro $25pm)

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.

07. Easee

Prototyping tools Easee

Easee is one of the most impressive prototyping tools around
  • Price: Basic Free (Unlimited $10pm)

When you consider that this product is a passion project of Steven Fabre, Easee is one of the most impressive prototyping tools around. In his Medium post, Fabre says that the goal of Easee was to help designers build beautiful animations for the web without needing to write code.

With Easee, you can drag and drop layers from Sketch and Photoshop and begin animating. Easee will take the smooth animations created in the app and export them to CSS, so you can import them into your live web project. You can also view a live preview of your animations on the web.

You can begin using Easee with a basic plan and upgrade to an unlimited plan for $10/month, which provides you with unlimited animation projects and CSS exports.

It's clear that Easee was created by a designer to meet a simple need, and do it well. The tool keeps things straightforward with no unnecessary features, so you can concentrate on building the best interactions and animations for your design project. I encourage you to give Easee a try and support a freelance developer.

08. InVision

Prototyping tools InVision

InVision is arguably the most popular prototyping tool in the world
  • Price: Free

InVision is arguably the most popular prototyping tool in the world. The team are constantly adding new features to help designers prototype more efficiently. InVision's best feature is perhaps its management of project feedback. Clients and design teams can conveniently provide comments directly on the prototype. These are collated in one convenient location, so you never lose track of feedback.

Communicating the status of the project to your client and team is critical; with InVision's project management page, you can organise design components into a status workflow. You can set columns for To-do, In progress, Needs review, and Approved, and drag and drop your design components into the appropriate column.

For example, if you're about to work on the homepage, you can drag the design component into the 'In progress' column. Now, when your client or team views the status board, they immediately know what is being worked on. If you have ever used Trello in an agile development environment, this will be very familiar to you.

InVision is always announcing new features, and it has recently released one it calls Boards, which is a home where your projects can live. It can also be used as a presentation tool, an asset manager for projects, and a place to create moodboards or galleries. You can even share these moodboards or galleries with clients and design teams, so they can provide direct feedback.

InVision's feature list seems never-ending: you can import design files from Sketch or Photoshop, animate design assets, link pages to simulate real-life websites, and preview prototypes on mobile devices. There is also version control with unlimited history, unlimited free user testing, and integrations with apps like Slack, Dropbox, Box and many more. InVision is still a game-changer in this space, and it doesn't seem to be slowing down.

09. Adobe Comp

Prototyping tools Adobe Comp

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

The recent release of the iPad Pro tells us that many creatives are using 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.

10. Principle

Prototyping tools Principle

Principle comes with an iOS app to mirror live prototypes
  • Price: Free trial ($129)

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.

Conclusion

We've looked at the top 10 prototyping tools, and as you can see, the choices are abundant, so it will be hard to pick just one. I recommend you try out any that pique your interest, and see what works best for you, your clients, and your team. The ultimate goal is to let your concept materialise and your design take centre stage, so test different tools and check for updates that might give you just what you're looking for. With so many great options already available, you'll soon find the right prototyping tool to bring your ideas to life.

This article was originally published in issue 276 of net magazine; subscribe today!

Related articles: