Co.Design

Ideo Releases A New Photoshop For Interaction Design

The design agency offers an improved version of Origami, the open-source UX prototyping tool Facebook released earlier this year.

A few months ago, Facebook released a bit of open-source code called Origami, which lets designers create and test user interfaces without any coding.

Now, Ideo has released a free sequel. The design firm calls it Avocado, and it builds on the functionality of Origami, creating an even faster UX prototyping tool. "We wanted to build Avocado as something for our designers to be useful for them, and then put it out there to see if it’s helpful to others," explains Design Director Chris Nyffeler.

If Origami provides the Lego blocks for a prototyping interface, Avocado provides fully formed Lego kits. "We don’t want to reinvent components from scratch every time," explains Avocado creator, and Ideo interaction designer and software engineer Marco Triverio.

For Ideo, Avocado was a natural extension of its rapid prototyping process. The design firm has a fierce addiction to Post-it notes, sketching out ideas to get at the very best design. Avocado was a way to refine the firm's rapid prototyping—to create that sweet spot between quick and pretty.

Origami sits on top of Apple’s age-old Quartz Composer software, and Avocado sits on top of Origami. Avocado contains a few common user interface components that make building prototypes quicker. Among them: a carousel interface, which creates a framework for photos you swipe through left and right, and animations like jiggling, jumping, and pulsating, which are extremely popular across interfaces. Each template—called a "patch"—is as easy to implement as dragging and dropping into your Quartz Composer desktop. From there, you link the media assets (like images) you’d like to manipulate, and use controls like sliders and nobs to tweak the intensity and nuance of the core animation. "You can code that animation, but you would need the understanding of 2-D and 3-D transformations," Triverio says, referring to the deep understanding of geometry needed to animate well within code. "Avocado abstracts the complexity behind creating such an animation. It gives you simple controls."

The resulting creation isn't a true app. But it is a detailed, full-motion mockup of how an interface could work. In this sense, Avocado projects sit halfway between Post-it mockups and fully functional coded applications. They're meant to prove or iterate a concept before you invest in actually building a piece of software.

Since its release a few weeks ago, developers and designers have already been creating new patches in Avocado. If you've created one of your own (or if you plan to in the near future), we'd love for you to send it to us. It just might even be featured on Co.Design!

Download Avocado here.

Add New Comment

18 Comments

  • Carlo Maldonado

    What in the world is wrong with you people screaming about the name. These are totally different applications and market. A Mac based prototyping tool for developers has nothing to do with a user-facing iOS app for social networking. Seriously never heard such whining.

  • InfoWave Knowledgeware

    Got some useful information about Ideo Releases A New Photoshop For Interaction Design. Definitely photoshop and responsive designs are playing a great role in present market. Convert PSD to Responsive are popular among businesses in order to get more traffic check out http://www.psdtoresponsivehtml5.com/ for responsive conversions.

  • “You can code that animation, but you would need the understanding of 2-D and 3-D transformations,” Triverio says, referring to the deep understanding of geometry needed to animate well within code. “Avocado abstracts the complexity behind creating such an animation. It gives you simple controls.”

    Awesome, so you can have complete non-technical people build a beautiful prototype, who then hand it off to the developers and say, "What, you don't know how to implement this?"

    If it could build usable code, I would think it was cool. As it stands, it is an Expectation Exploder.

  • Kelsey Higham

    Quartz Composer and Origami (on top of which Avocado is built) are very clear about how everything is implemented — all the physics, units, etc. are clearly documented. The designer inserts a parameter of 0.5s, and the developer sees that value and how it fits into the function (which has, itself, already been implemented in JS, Obj-C, and Java).

    That's the reason designers are starting to use Quartz Composer instead of, say, After Effects or Photoshop, which do have the problem you describe.

  • Stephanie Rodriguez

    So....I guess you forgot to research and find that there is already a super awesome app called Avocado. Might want to rethink this...

  • False. You just applied for it on June 6th. Applying doesn't grant you a trademark. Mark my words. You will be denied because it's too generic.

  • trnqv

    How many times are the Avocado.io team going to spam this thread?

    Deal with it, you chose an unoriginal product name.

  • I agree that this is a confusing name choice by Ideo since, as others have already pointed out, the Avocado app is quite successful (and has been covered by fast.co before). Why pick a name that is destined to cause confusion and probable screw over the hardworking startup that has been building their brand for more than two years?

  • Did they even google the name first? There's already an app named Avocado, and it's #4 on the search results page, after results for the fruit itself.

  • hi there, i'm a long time reader of fast.co and i have to say that it's normally top class. however, i'd like to point out something here. you have written about Avocado before, but it had nothing to do with IDEO.

    Avocado Software is a small start up in San Francisco that is developing an application that sweats social networking for couples.

    fast.co last wrote about Avocado.io in February of this year. In terms of potential confusion in the market place and to show your usual strong support for start ups, don't you think that you could clarify that IDEO stared using the product name years after Avocado Software? a disambiguation above at least?

    ignoring trademarks for a second, and perhaps even financial contributions in the market place in general, it's a bit cheeky for a large, successful firm to be stepping on the toes of smaller companies who are trying to bring something new in to the world . .

    come on fast.co, stick up for the little guy.