Live Chat With the Creators of Facebook’s Origami, A Free Tool To Prototype UX
Join Co.Design's Mark Wilson at 2:00 p.m. EST on Friday, February 7th for a live chat with Facebook designers Drew Hamlin and Brandon Walkin as they discuss their new free UX tool, Origami.
This week, the news was dominated by Facebook's new product called Paper, an iPhone app that reconsidered the Facebook feed as a gorgeous collection of gesture-controlled text and images. But to build Paper, Facebook used a secret weapon. They named it Origami, and it's a tool the development team built in-house to rapidly prototype Paper’s unique user interface.
Now, every designer at Facebook is being trained in Origami to quickly mockup up interfaces without the need for coders. But the company has also released it for free for anyone else to use, too. Today, the creators of Origami are joining us to tell you anything you'd like to know about it.Get your questions in early if you want them asked! Just use the "Make a comment" box below. The chat beings at 2pm ET. And for a brief primer on the software, read this first.
-
Also, I strongly recommend you read this post for background on Origami before we get started. It will answer some of the basic questions I've seen coming in already.
-
There are certainly a ton of benefits to prototyping designs, whether it be with Quartz Composer or any other tool. We like Quartz Composer simply because we've found it to be both powerful and relatively intuitive to learn and use.
We think these tools can help whenever you're approaching an interaction design problem regardless of the scope or complexity level. As you prototype work, you start making yourself aware of all of these interesting edges and cases and design opportunities that you might not even have realized were there. Eventually, if you want to build your product, you’re going to run into those. Discovering them easier means you’re going to make more informed decisions. Engineers especially love this because being surprised by a design component that you hadn’t already surfaced half way through building something is a pain-point and often leads to wasted time. By identifying all these opportunities up front, you’re more informed as a designer and often end up producing a better (more robust, more delightful, etc.) design in my experience. -
Once you're proficient with this tool, you can create compositions extremely quickly. We're routinely creating prototypes for even complex designs in less than a day.
Prototyping also makes it much easier to communicate your ideas to others, especially non-designers. Ideas are more tangible when they’re prototyped: they feel real and you aren’t just talking in abstractions. I’ve found that others (designers and non-designers) react much more positively to ideas when they’re communicated with prototypes than without. -
The patches in Origami and the others we use at Facebook were created by Drew and I who are designers that spend most of our time designing products. You can think of it as a side-gig. This works pretty well for us because as we run into problems with our workflow or need some functionality that doesn’t exist or is too cumbersome to use, we can fix it right away. This is important because often you’ll see design tools created by non-designers that don’t solve real problems designers encounter day-to-day.
-
The most important part of designing a product is working with your team on both the big ideas and the small details. Origami can be really useful in doing that because it lets us quickly visualize and evaluate ideas that would otherwise just be whiteboard sketches or hand-wavy ideas. When a team feels good about the direction a product is taking, we're meeting with lots of people from around the company and socializing those ideas. That's part of what makes products get better. We certainly do presentations using Quartz Composer and the compositions range from basic to complex depending on the problem we're talking about.
-
It’s funny, before we started using Quartz Composer, we’d usually present a bunch of static mockups laid out next to each other, or flip through a series of layer comps. You’d verbally explain what would happen when you tap or swipe for example. Now at review meetings the baseline is showing fully interactive prototypes that work exactly as you’d imaging it working in the real app.
-
From the available documentation and examples, Quartz Composer / Origami looks to be perfect for representing a concise interaction between two states or presenting a container of information. Has the Facebook Design Team run into instances where trying to do too much in one QC project, patches became an unmanageable mess?
-
We find that it’s best to have compositions that are focused on showing off the idea you’re trying to communicate. Instead of building one Quartz Composer file that had the whole Paper design built in it, we built a bunch of individual compositions demonstrating each feature. For example, we’d have a file showing how you can tilt your phone to pan a photo, a file showing how resharing a post works, a file demoing swiping open and closed a link booklet, etc.
-
Yeah, Quartz Composer is actually over a decade old and it wasn't originally created with interaction design in mind. It was always intended to be more of a motion graphics tool—for creating digital motion effects and screen savers. But as it turns out, it's a really awesome tool to use for interaction design prototyping with the right tweaks—sometimes simple ideas like "You want to work in pixels"—which we've included in Origami.
We're grateful for what Apple has done so far in making Quartz Composer available as a free tool. Even if it's not around forever, I'm confident there's enough benefit in being able to prototype rich interactions like this that the movement will absolutely live on in some form or another. It's hard to get into hypotheticals though and right now Quartz Composer still seems to be very much alive!