Proto.io

Proto.io is an incredible contender for creating lifelike prototypes from rough ideas right through to fully fledged designs. The tool also provides a lot of possibilities for your projects, including detailed animations and custom vector animations too. You can start by developing initial ideas with a hand-drawn style, then work them into wireframes and finish off with a high-fidelity prototype. The Sketch and Photoshop plugins really help if you want to design using other tools but Proto.io does handle the end-to-end design process well. Other features like user testing will also help validate your designs. This is an all-in-one place solution with a great number of trusted brands already using it.

Pros

  • Very clean UI HTML exporting is allowed
  • I like the ability to create mockups before beginning a new development project.
  • Nothing I like about it - it seemed like a good working tool at first - but not...
  • If you want to create interesting microinteractions in your prototypes Proto.io is the easiest and best looking way to achieve it.

Cons

  • The software is very good, but a desktop platform would be nice.
  • Proto.io's import features could use improvement - but for a web-based prototyping platform its pretty solid.
  • It took me a little while to get the hang of how the software worked, with linking screens together and adding all the elements to the pages.
  • The trial is limited to 15days. Also after the project is complete, linking the screens is still a bit of messy and doesn't work as expected in the phone app.

Interactions and animations are where Proto.io excels. There is more of a learning curve associated with Proto.io when compared to InVision and Marvel, but the tool is far more capable of creating a prototype that is as close to the finished product. Proto.io has the ability to create interactions, custom animations, screen states, scrollable containers, container states, play videos, implement logic, toggle visibility, plus much more. It also comes with UI libraries for iOS, Android, and Windows Mobile and the user can manipulate each object within a single screen.

Ultimately, the prototype is still screen based. Interactions are created with a hotspot which then has a plethora of options to link to other screens, screen states, visibility, animation, etc. I did find myself having to fix ‘bugs’ here and there because so much was linked and a simple change can throw interactions off. Keeping track of exactly the order of events can be difficult depending on the complexity of the prototype.

With these advanced features, I was able to create a prototype that was as close to the final product as possible without actually entering software development. The further I explored Proto.io the more I realized how much is possible with the tool. It’s very impressive and definitely worth looking into.

InVision and Marvel take a different approach to prototyping, and actually are extremely similar in nature. Instead of advanced interactions and animations combined with states, these two tools use more of a screen-to-screen mentality. After uploading your screens to each tool (more on asset management in a bit) hotspots are created to link each screen to one another. When linking each screen you designate the destination screen, action/gesture, and transition. Both tools have similar gesture and animation options which include sliding in, fading, flipping, etc.

I prefer the way that Marvel addressed linking screens together over InVision. Marvel displays the screen options at the bottom of the browser with previews of each screen and transition/action options above, whereas InVision uses more of a dropdown menu approach. The thumbnails seen using InVision are merely to switch to that screen rather than using visuals to link screens. One small feature that InVision does have over Marvel is the ability to set a timer and automatically redirect to another screen.

Proto.io only has an option to upload your individual screens or assets, while InVision and Marvel both incorporate a syncing service. Proto.io allows assets to be organized within folders, but if any changes are made you will need to manually upload the files. That’s not a huge deal, but half of the time I found myself having to log out and clear my cache on my browser for the changes to appear. This was extremely frustrating. I have been told by Proto.io that a syncing service is being worked on and will be added in the future which will eliminate this current headache. Proto.io supports more file types than the Marvel and InVision .png, .jpg, .gif, .svg, .ogg, .mp3, .wav, .aac, .oga, .ogv, .mp4, .webm, .pdf, .psd, .ai, .eps, and .sketch files.

Proto.io has a number of options to share the prototype. You are able to copy the URL, scan a QR code, or use an embed feature with a published project. You also have the ability to export to HTML or PDF when in editing mode. The prototype is resized to fit when viewing the project from a web browser on both mobile and web.

On a desktop browser the prototype has a number of options to enhance the experience, toggle interaction visibility, zoom, make comments, and jump to specific pages. On a mobile browser the prototype is merely a screen with interactivity. Proto.io also has a native app that can be downloaded, but must have a login. Free reviewer accounts can be created and be limited to view certain projects within your Proto.io account. The native iOS and Android app are the best way to view the prototype if viewing from a mobile device, but is kind of a pain to set up reviewer accounts.

Commenting is available on the web view when using Proto.io. Comments can be made on a screen by screen basis, or comment on the overall prototype. These can also be filtered by all, unread, completed, and active. No files can be attached to the comment.