adjustafresh

My Week With Proto.io

31 Mar, 2012

Since I’m a big fan of building prototypes, I wanted to spend some time testing out the latest mobile prototyping tool I’ve come across: Proto.io. I’ve spent about a week using the browser-based tool, and for the most part, I’m very pleased with the results.

Proto.io Examples

The Good

Proto.io provides a browser-based toolkit of the most common mobile (iOS & Android) UI patterns that may be dragged & dropped onto a canvas to design each screen of your app. This feature alone is a fairly simple way to build out wireframes of your app screens. The magic happens when you select an element on your canvas and click the Properties tab.

The Properties tab allows users to customize the look of the object, and, more importantly, add actions. Actions are what bring the prototype to life. Add trigger events like tapping and swiping that trigger a variety of actions including linking to another screen, showing/hiding UI elements, playing audio/video, and much more.

You can get lost in the endless array of customizations available—just keep in mind that you’re building a prototype, not the final app. There is also a fairly steep learning curve to create some of the more advanced effects like swiping through an image carousel, so be prepared to spend some time learning the tool.

Once your prototype is built it may be viewed in the browser or on a mobile device by snapping a QR code to open it in a mobile browser.

The Not As Good

I don’t have a ton of negative feedback. The team has done a very nice job putting together a solid piece of software, but I do have some minor gripes.

There is a bug when moving elements on your canvas if you’re viewing the canvas in a resolution less than 100%. The objects tend to jump up several pixels, sometimes making it impossible to place in the location you want.

Adding images to objects on the canvas is fickle. I found myself unable to do it more than I was able to.

Keyboard controls are also fickle. Sometimes tapping the delete key will delete an element from the canvas. Sometimes it will act as the browser back button (yikes!). Copy, paste, undo are also unreliable.

You can apparently export screens to PDF, but that feature only works in Firefox (at least it’s not IE).

Finally, I appreciate that they do have a free plan (they run a subscription model starting at $24/month), but it’s almost pointless. No publishing of the prototype, no reviewers, no more than 5 screens. They may be able to find a sweet spot with independent (contract) designers if there was a plan that was actually useful for $5 – $10 per month.

The Bottom Line

Proto.io is probably not the best tool for you if you’re designing something custom that departs from standard mobile UI patterns (e.g. Path, Paper, Clear). But if you’re designing an app that will feature primarily native controls, Proto.io is definitely worth your time. It’s feature-rich, very customizable, and able to create fully functional prototypes in a fairly short period of time. If you’re fluent in design software like OmniGraffle, Visio, Photoshop, etc., you should be able to learn the basics and build out a simple app within a day.

Posted in Design, Mobile | Comments Off on My Week With Proto.io

Comments are closed.