About my reviews: I'm going to focus on what each app has that I like, and what each app is missing in my opinion. These are not detailed walkthrough style reviews, although I will update them when necessary.
If you are in a hurry you can read the Summary at the bottom of the page.
Proto.io is one of the online SAS tools for prototyping detailed desktop, tablet, and mobile apps. As of this writing it is my favorite online prototyping tool, surpassing UXPin after both apps had recent updates. These apps are almost as powerful as Axure and iRise, but don't have the data connections and programmer support that the desktop apps do. That said I find them easier to learn and use.
Proto.io Prototyping App
The layout of the app is similar to many others, which makes it easy to discover and pretty familiar if you used any web tools of this nature, and most of the microinteractions in the app are well thought out and efficient. The new version has a more cohesive feel to it, and I like it more than the previous version - it is well organized and easy to learn.
As stated up front I'm not going to describe the UI in detail but rather provide a list of features that I think are well done and useful, and any places I think the app lacks functionality and lacks in their UI approach.
In general the UI is excellent, they have improved almost every aspect of the user interface and microinteractions. There was a small learning curve finding some things from previous version placement, but overall it flows well and is efficient and simple to follow. The have exposed the properties of elements in a much better way (whereas in my opinion UXPin somewhat muddied the waters in their latest release - but to be fair I'll do a review of their app and point out where it excels).
Navigation and Layering
The screen navigation panel is combined with their "Containers" panel by tabs, and screens are flatly organized, so there's no way to organize them into a hierarchical tree, which I will miss on larger projects. They do provide a grid view of the screens which is great for getting a big picture view although it does not show the connections between screens.
Layers are handled the same way everyone does it, in a hierarchical tree that provides drag and drop organizing and Z-order changes. One thing they did well which so many apps don't - I can tell what I have selected in the tree AND on the canvas - Sketch is horrible at this simple interaction.
In general I think the designers at proto.io spent a lot of time actually using their product to do real world design, and found the kinks in their previous workflow - it has an almost elegant feel to it now.
Containers are their version of combined components or symbols that you can place on any screen that will update across screens. I think these are excellent and easy to create and use. I could see making dozens of shared containers as microinteractions for a style guide and rapid prototyping.
Since I started writing this I did a page of micro-interactions, which was incredibly easy to do.
The top toolbar is a mix of commands and launch points for features of the app such as their asset organizer, variables, and more. I think it could benefit from the basic shape drop down that UXPin offers, something I found very useful in their latest version.
The sub-toolbar just below the top one gives easy access to the most used functions while editing screens such as grouping, alignment and Z-order. Overall these are both in easy reach and well thought out.
The canvas is well done also, with zoom features, rulers, and guides, but I'm disappointed that like Sketch, the guides are next to useless for creating specific widths and heights. You can't group guidelines together , which is one thing I love about Illustrator. You also have to drag-remove the guidelines which I find annoying in Sketch as well. What I'd like to see is some form of
They've added an animation timeline to version 6 and it is very well done, although there's a small learning curve. What's great is you don't have to preview the entire project to make sure you got the animation right. Just preview the animation via the animation panel/timelines. I also started to use the Animation Target component which I never used before (if there in previous versions), and it makes it easy to precisely place an object's animation end state without have to look for X,Y coordinates, something I always forget to do until I'm deep into setting up an interaction.
Libraries & Assets
I lumped these panels together because they serve the same purpose - one is a place to pick pre-built components, and the other a place to store your custom assets, but they can only come from file uploads (or drag dropped to the panel) or exported proto.io files from Sketch or PS. I wish there was a way to create components (especially containers) and then use them as Assets instead of having to "Copy to" another project (which was hard to find in V6 - it is under the hamburger project menu top left).
I don't use Photoshop unless forced to alter a bitmap as I prefer Sketch or Illustrator and working in vectors, but I wanted to mention the proto.io Sketch plugin as part of this review. After it is downloaded and installed in Sketch, it works well on smaller projects. I tried doing a several page project and it hung up Sketch, so I ended up doing artboard by artboard exporting to the proto.io format you drag drop to the Asset panel.
proto.io breaks up the Sketch art into a semi-customizable (1x, 2x etc.) group of assets that are dumped at the root of the Asset library. I do wish I could target a folder when importing work from the Sketch plugin, because then you have to organize your imported assets using drag and drop one-at-a-time in the Asset manager. Painful. However, once done, the app does a good job of placing and sizing all the elements from the Sketch file, one downside being text is converted to bitmaps, and complex objects are "simplified" so you may want to recreate them in proto.io.
Latest version is a great improvement over previous UI - it is cleaner and better organized with more 80/20 use items in easy reach.
States are easy to understand (better than UXPin), and make microinteraction creation straightforward.
Containers are better organized and easier to manage, and have always been one of my favorite features of the app. They are a great way to create custom microinteractions you can plug in anywhere and update automatically wherever they are used.
New pattern library, while limited now, could grow into a great resource for prototypes and for learning how to use the app.
Faster interaction setup, especially from screen to screen
New animation timelines give you even more control over microinteractions and transitions.
Grid view of screens gives you a view of all your screens at once, and stacks the screens with multiple states. Handy although it doesn't show connections between elements or screens.
Font manager is a great way to organize all your project fonts and is well organized and easy to use.
Sharing is more powerful than ever as a feature, here is a test of their embed code for an Evernote mobile "personal revamp" - you can drag the new menu bar up and down to see it in action. Check out my Evernote Mobile Redux post, in progress.
There are still a limited number of pre-built elements in the Libraries panel, although it is better organized and there appear to be more icon sets. UXPin has always been the leader in this regard, they have a huge number of components. However the elements they do provide are well designed and useful.
Grid lines still don't provide much value - you can't group them, it's hard to know the space between them, and you have to remove them by dragging them off the canvas. Sketch does this as well and it's a pain in the butt.
The Asset Manager could use some work; I still can't bulk move assets from one project folder to the next, and when you are importing from Sketch after their plugin export, it can be a ton of assets.
Nothing substantial - the proto.io team has done a fantastic job of updating their UI and feature set to provide UXD's with some real prototyping power in an easy to use interface. I even dared mess with variables and it was very easy to alter text based on conditionals.