Connect
To Top

Facebook Creates the Photoshop of App Design

Quartz

 

I wrote last week about my thoughts on Facebook’s new app Paper but I later found out that the Facebook Design team created a really cool new rapid prototyping tool called Origami that they used to design all the interactions for the app.  Origami is a free toolkit for Apple’s free Quartz Composer application that has traditionally been used as a motion graphics tool. Origami makes some key additions with effects like scrolling, animations, remembered states, transitions, layers, buttons and iPhone, Android or Windows Phones to test your work on.

I am genuinely excited about Origami because there has been a desperate need for a design tool like this for at least the past three years. Adobe has been completely asleep at the wheel on how digital and app designers workflows have changed and that we can’t create great experience through static Photoshop comps any more. I am fed up with having to create static comps that I have to translate into a motley crew of crude prototyping techniques that don’t really give me the interaction prototypes I really need. I need to be able to quickly touch, test and play around with my interface designs to really be sure they are working the way I want without having to wait days for my iOS developer to create the design in code only to discover that I need to make changes to the design.

It took me about 2 hours of trial and error to get to a place with Origami where I was able to create the prototypes I wanted. Getting started is easy and here is what you will need to do:

1 – Click here to register as an Apple developer if you haven’t already.

2 – Click here to download and install Quartz Composer

3 – Click here to download and install Origami. You may get an error message about the installer coming from an unknown developer but if that happen just launch it again and then hit ‘trust’ to launch the installer.

 

Once you have it installed I found a few resources that make it easier to get up and running. First I would download the examples files the Facebook Design team created as it makes it easy to see a finished project and then work backward through how they created it. I also found the Origami launch page and community page helpful for questions and feedback as I worked through the process.  Unfortunately there isn’t much more documentation than that and I haven’t been able to find any video tutorials just yet.

It is rare that you see a company who is willing to create something like this and not hold on it to try to get any advantage over their competitors. So while I wasn’t that blown away with the concept behind Paper I strongly applaud Facebook for creating and release Origami to help move the art of digital design forward.

You must be logged in to post a comment Login

More in Design & user experience

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 Thanks to @the_villainess for an amazing work in progress shot of the soon to be crown jewel of our collection - a huge (8' wide) commission from @tristaneaton based on the lives of @thechiclibrary and I. Can't thank him enough knowing how busy he is and I'm SO F*CKING EXCITED!!! #streetart #streetartist #streetartnyc #streetartofficial #tristaneaton #tristaneatonart #tristaneatonmural  @visionaireworld X @louisvuitton from back in the day when Kidrobot actually made art toys #louisvuitton #lv #kidrobot #visionaire #visionaireworld #monogram #louisvuittonmonogram #murakami #takashimurakami  Got a vintage @huckgee Skullleader as a new addition to the collection #urbanvinyl #huckgee #mech #robotech #robot  @thechiclibrary in full effect at New York Fashion week for the photographers tonight in @ika_editions @blackscale and @tomford #nyfw #newyorkfashionweek  Forgot to mention I got to see @huckgee new Skullhead mech work in progress which I think is one of the best pieces he has ever done. I already put in dibs on at least one. #huckgee #huckgeeskullhead #urbanvinyl
 Extremely honored to have been chosen by @ghoshal and @erondu to join 25 design leaders from AirBnB, Uber, Facebook, Slack, Google Ventures, IDEO and more for High Resolution, a 25 episode video series on design. Look for my episode focusing on creativity and leadership coming soon. @highrespodcast #creativity #leadership #design #podcast  Spent the morning with @the_chris_buck new book Uneasy which is a fantastic look at the work of one of the most creative people I know. Get your copy at chrisbuckuneasy.com #chrisbuck #photography #photographer #portraitphotography #portrait #portraits  Some days I feel like I should wear this @huckgee armor to work. #huckgee #urbanvinyl #mech #armor #toy #kidrobot #dunny  If you listen to The #CrazyOne podcast you have @lukewessman to thank for it. He gave me the push to finally launch it and it was one of the best decisions I've ever made. He is a constant inspiration, someone who makes me want to be a better man and I always feel lucky to count him as one of my friends. Thanks for the support brother. #crazyones #lukewessman #tattooartist #lag #crazyone  @nychos under scaffolding in Haight Ashbury #streetart #streetartist #nychos #streetartofficial #streetartsf
 A pile of pugs and a @steelers blanket - what else do you need on a day off? #pug #pugs #pugsofinstagram #steelers #yinz #burghproud #herewegosteelers  FYI - it's pronounced 'art' not 'toy'. These @huckgee pieces are hand made and can take up to a year to produce. #huckgee #robotech #mech #robot #urbanvinyl  Happy Valentines Day to @thechiclibrary - love of my life fierce and true. #chic #nyfw #fashion #love  Because of Snowmaggeddon in NYC I'm having to do my meetings from home today and apparently everyone thinks they are a Creative Director in this house. #pug #pugsofinstagram #design #creativedirector #puglife #designer #dogismycopilot  @huckgee amazing work in progress #urbanvinyl #huckgeeskullhead #huckgee

Copyright © 2015 Stephen Gates