Live Chat!
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.
-
So by now, hopefully everyone has read about your new project called Origami, which you built during the development of Paper to rapidly prototype the user interface.
We should also know that Origami is a free plugin for Quartz Composer (which is a free app Apple offers its developer community).
But a lot of us haven't actually used it yet. So I’d like to get started with a simple question: What can Origami do, and what can’t it do? -
Origami is great for high fidelity prototyping. You can employ a number of different types of animations and make these prototypes interactive so you can actually feel out your application as you're designing it. Unlike other prototyping tools, Quartz Composer lets you tweak your composition as you're interacting with it, making it extremely fast to iterate on your design.
-
I think we've released Origami at what is really the outset of a movement toward a lot richer interaction design prototyping than we've seen in the past. There are certainly still a lot of things that would be awesome that aren't possible at the moment. For example, there's no way to run compositions on your phone or compile them to real code. We've actually found that there's a lot of benefit to interaction design prototyping even as a separate step to building, so these limitations certainly aren't deal-breakers in terms of "Is there value to prototyping?" but it's fair to say things are just getting started.
-
Yes, it’s absolutely possible and we encourage people to iterate and build on top of what we’ve built. We’ve been experimenting with these ideas here on the Facebook design team. We’re really excited that people are asking this question. It means people are finding value in Origami and design prototyping and want to take it to the next level.
-
This is something I’m really passionate about. Origami is really powerful but I know there’s a learning curve there as well. We’re working on getting out more documentation and video tutorials. We’ve also seen a number of people in the community doing this as well, which is really exciting. There are some examples and videos out there already that people can download and watch to get started.
-
From our experience teaching Origami & Quartz Composer to designers at Facebook, what people seem to find most helpful are example files that show how to mock up common interaction patterns. We plan on releasing a lot more example compositions that designers can build on.
-
Mike Matas actually introduced us to Quartz Composer when he joined Facebook. We were amazed at how quickly you could prototype your designs in high fidelity once you were proficient at it. A lot of us on the design team started adopting it at that point and building simpler abstractions for Quartz Composer that were more conducive to designing user interfaces.
-
-
On Paper, we were lucky enough to have incredible engineers who were able to build these interactions we were prototyping at a high degree of polish. We worked closely with them to fine tune the interactions as they would build them into the app.
We did build some technology to let us quickly translate values we used in Origami directly to Paper that certainly sped things along. -
So Origami creates mockups for interface, but those mockups will actually have to be coded to become apps. That works at Facebook because you have loads of coders! But is Origami still useful for a designer looking who wants to make an app but doesn’t know how to code?
-
We've found that there's a lot of value using Quartz Composer and Origami to prototype interactions even if the engineering process is a separate, distinct step. It allows you to quickly explore ideas that might take a lot longer to actually build and has the property of letting you stumble into new ones as you explore. There's certainly some overhead in "doing the work twice" but a lot of benefits as well to being able to try ideas out quickly as well. In our experience, prototyping actually ends up saving a lot of wasted time in the long run—and also leads to better results—but I appreciate that different teams might get different mileage depending on all sorts of factors.
-
I would like to know in which situations do you recommend to use origami. If you learn it, is it as fast as doing some motion design in After Effects. Or does it still take up so much time that you would advice using it in projects i.e. longer than 2 months.
-
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!
[Photo: Reinhard Hunger for Fast Company]