#App Prototyping Tools
Origami is a plugin for Apple's Quartz Composer visual development tool. Developed by Facebook for prototyping interaction design in mobile apps, Origami is well suited to that task.
- Codeless, patches and wires interface
- Create complex and very refined interaction prototypes quickly
- Display prototypes on iOS devices via the Origami Live app
- Integrated with Sketch for updates of assets, via the Export for Origami plugin
- Focused on the prototyping task, interaction design in particular
- Code generation and export (Java for Android, Objective-C for iOS and Javascript)
- Mac-only, due to the dependency on Quartz Composer
- Mobile handset focus
- Minimal export capabilities
- Origami Live requires a USB connection between a Mac and iOS device
- The learning curve can be steep
- CPU monster
Origami is my current tool of choice for mobile app interaction design. The patches-and-wires interface is an excellent way to work, enabling both rapid iteration and complex interactions. Patches expose a lot of behavior, and can be changed. This means you can create complex interactions and animations simply by chaining together patches. And the results can be really great and fun to play with, too.
There is a learning curve that can be steep to climb, at first. If you aren't familiar with how the patches themselves work, building your first couple of prototypes will be daunting. Things may not work the way you expect. Quartz Composer and Origami may be codeless, but they're still complex tools. Once you get past the initial hurdle, you can get productive quickly, and find the fun.
The Origami Live app for iOS is a nice feature, since it lets you connect to Origami to allow interaction with prototypes on-device. Even cooler, the on-Mac interface displays the touch events on the iOS device, so you can use Origami Live in some user testing scenarios, capturing input as you go. Unfortunately, I've found the current version of Origami Live to be a little buggy (some UI interactions don't seem to work consistently). I'm sure this will get fixed. The other bummer here is having to connect via a USB cable.
One reason I like Origami is that it is focused on one task: creating interactive prototypes for mobile devices. It doesn't have native design tools and isn't set up for anything but a handfull of devices by default. I like these limitations. It makes for a better tool that lets me get on particular task done. I prefer to do my design and assets creation in another tool, such as Sketch, then work on animation and interactions further along the pipeline. If you're looking for an all-in-one tool, Origami probably won't work for you.
Another thing I really like is Origami's ability to emulate more than just tap gestures. For example, you can emulate scrolling and swiping. This is great for fine-tuning interactions, including things like checking the intermediate states of things as the progress.
There are a couple of other things that you might find annoying. Quartz Composer has limited capabilities for exporting. You can use Quicktime X or anotehr screencap tool, and that's about it. I have used LICEcap to capture animated GIFs for sharing or uploading to platforms like Invision. I'll also say that Quartz Composer is a bit of a beast. If you're looking for a guaranteed way to get the fans on your Mac going, fire it up. Your CPU will be working hard in no time. On older or less powerful systmems, you might find it unusable as things slow to a crawl. I've found it workable on a current MacBook Air that wasn't doing too much else.
Atomic is a new (invite-only beta, right now) online prototyping tool.
- Has basic design tools, so you can do a simple prototype entirely with the app
- Codeless prototyping
- Custom CSS can be applied to objects
- Browser-based (Chrome only right now)
- Short learning curve
- Online sharing of prototypes
- Still in development, so it's buggy at times
- Chrome only
- Limited interaction capabilities
- Limited control over animation
- The history view needs visualization
I haven't spent a lot of time with Atomic yet, but I like what I see so far. This new online prototyping tool has a lot of potential, and if it can shed some annoying shortcomings and get a bit more polished, I'll use a lot more.
Atomic is a browser-based (well, so far it seems to be Chrome only) application. Atomic blends basic design tools with intelligent, automatically interpolated animations. You can also create custom CSS to apply to elements, which opens up a lot of possiblities for refining design within a prototype. The UI will feel familiar to anyone who has used Adobe-ish design tools, such as Photoshop, Illustrator, Pixelmator, etc. The main metaphor is pages with layers. Each page is a view on the interface and can be thought of as a discrete state of the UI. You can layout basic objects (rectangles, circles, lines, text, and images) and apply hotspots. Hotspots can be used to trigger interactions. When an interaction is fired, it can run an animation as well.
Unfortunately, in the current beta, interactions means jumping between pages and that's it. This means that you have to create a page for every state of your interaction. In practice this is not hugely problematic, but it is annoying. Having the ability to attach animations and behavior to objects or groups of objects would be nice. Two of my coworkers made the same obversation seperately: a web-based prototyping tool named Atomic created an implicaton that it would make use of some of the ideas from Brad Frost's Atomic Design and give us atom/molecule/organism level control over interaction (something you can do with a tool like Origami). But for now, it's pages or nothing.
Interaction animations in Atomic are exciting and confounding at the same time. When you build things correctly, Atomic can automatically detect changes in the properties between objects from page to page, and will animate those changes. For example, if you build a page with a button and a image on it, then place a hotspot over the button that loads another page that rotates the image 180 degrees, then enable animations, Atomic will detect the rotation and animate it. And if multiple objects changed state between the pages, Atomic will animate them, too, and they'll all be coordinated. You can set the durection of the animation, and insert a delay. This is very cool and the first time you get it working, you'll be amazed. But it's also limited.
The first limitation is that Atomic will apply the same animation parameters to all objects. This means that if you select Ease-in-out or Linear for the interaction, all of the changes will use the same easing. And all of the animations will take exactly the same amount of time. If one object should bounce for 1 second while another slides out of view in 250ms—well, that can't happen. If your interaction animation can be modeled to the simple capabilities presented, great. But if you've look for fine-grained control, you're out of luck (this is one of the reasons I like Origami so much).
The other limitation is that all interactions are bound to hotspots. There are a couple of issues with this implementation. You can't directly attach interaction to objects in the design, which means you end up drawing a second hotspot object as an overlay. This object is in the layer hierarchy, so you'll have to move it around as you redesign elements on the page (or group it with its associated UI). Another issue is the limitied numbr of gestures you can support. Hotspots are clickable/tappable regions. That's fine when you're trying to show off buttons or the like, but how about something like swipes? No dice.
A really cool feature of Atomic is that it automatically figures out that properties of an object that appear on multiple pages have changed and will apply animations to them. This is really powerful and the feature just works. But it does feel like there are few things that are needed to make this work better. Right now, you don't have any way to see that an object on one page is related to an object on another page. You can give your layers unique names, so there is a way to manually handle this, but it feels like the app could and should give you an automatic identifier to make this easier. For animation work, it really must be the same object on more that one page, or the engine can't detect that changes. I found that in a not-too-complex design, it was sometimes hard to keep track of what was what. Careful application naming and grouping helped.
Atomic interactions and animations hint at a lot of possiblity, but they aren't there yet. Everything is a jump from one fixed state to another. This is fine for a rough view of interactions, but it's not great for refining interaction design. It's similar to what I can get in tools like Invision, so Atomic needs to do more if it wants to displace other tools in designer workflows.
One of the more interesting features in Atomic is the ability to scrub through the entire history of a page, making it possible to review all of the changes that lead to the current state. This is great from a retrospective point of view, but even more intriguing is the fact that you can alter a page at any point in time. Doing this creates a new page, with it's history set from the start of the original page to the alteration. In developer terms, you might say the page was forked at a particular revision.
This is really cool. It means you can safely and happily jump back in time and explore a new pathway in your design. This is the first time I've seen a browser-based design tool make version control so easy. But it's not without flaws, some of them serious. I found that trying to create new revisions caused the app to error several times. Each time this happened, Atomic required me to refresh and that discarded any changes to the working project made up to or after the error.
Something else I'd like to see addressed is the lack of visualization of history. The history slider on a page is a good start. But it's not quite enough. Atomic needs to give us tools to see what pages derived from other pages, and when. A history graph, similar to those found in git tools like Tower, would go a long way to helping this.
Overall, I liked Atomic, despite all of the things that I think need improvement or refinement. I was able to go from first login to two working prototypes in about 30 minutes, and that's pretty cool. I recreated an interaction that I had built in Origami the day before, and the results were decent enough for a first pass. Not as clean as the original version, but still good enough for a review with other designers and developers. Productivity in a tool is a huge feature and one that can be hard to achieve. Starting from comprehensible app interface patterns goes a long way to making Atomic feel familiar right away. And keeping the controls simple and having at lot of things happen automatically makes it easy to get moving. Kudos to the Atomic team for that.
I have it on good authority that there are some amazing developers working on Atomic, so I'll be watching eagerly as they work on the beta.
- Web-based
- iPhone app and Apple Watch integration available
- Syncs with Dropbox
- Limited transitions
- Animated transitions only between views
- Apple Watch app is clunky
- No timed transitions
- Fine-grained interaction prototyping with a patches-and-wire model
- Browser-based tools and previews
- Support for components
- Learning curve can be steep
- Chrome only
Noodl is currently in beta, and I'm pretty excited about it. This looks like the tool that will answer many of my interaction needs. Like Origami, Noodl uses the patches-and-wires design model. As I've mentioned before, this allows for fine-grained control of animations, properties and behaviors. This power comes with a bit of a learning curve, but if you're already used to a tool like Origami, then many of the core concepts will carry over.
One of the more interesting and exciting features of Noodl is support for creating UI components. This means that you can create flexible, reusable widgets and controls in your prototype, which in turn can lead to big gains in productivity and control. Thanks to a special patches, Component Inputs and Component Outputs, it is possible to create robust components. You can do something similar in Origami, but this is not nearly as easy to grasp or manage.
Previewing prototypes in Noodl is browser-based. You can connect to the prototype running on your system from another device on your network. Prototypes run smoothly and feel quite high-fidelity when you want them to be.
Like Atomic, Noodl givees you the tools design work in the protyper. Basic visual assets, such as circles and rectangles, can be created on the main canvas, and can be mixed with outside assets (images). When I first encountered this in Atomic, it felt like the prototyper was trying to cover too much ground. But I've come to realize that this may be a requirement for high-fidelity prototypers. Even within Origami, I find that I end up having to manipulate sliced images to do anything decent. Some designers may not like having to recreate full designs in another tool. I think that the answer here is to focus on creating component designs rather than full views. But I will have to spend some more time on workflow with these tools before I'm sure about that.
Here are some other prototyping tools that I have looked at, but not yet done any in-depth work with.
You may also consider adding UXPin to the list.