🌐 Public

Prototyping with Origami

By Joost van der Ree

Introduction

I'm not an 'Origami expert', I actually never used it, but as I'm learning it I will bookmark the pages as a resource for others. Origami is a toolkit created by Facebook to make designs more interactive. It's build to use with Quartz Composer, not an easy app to learn, but I've heard a lot of good stories about it. As an interface designer I'm always looking for ways to test and prototype designs fast, I've been using After Effects a lot, but with Origami I can interact with the designs instead of playing a video.

Joost van der Ree — interface designer at Present Plus. loving to connect people with technology.

Added by Joost van der Ree: “This solves a problem many people might have encountered: sometimes you want to drag / scroll something and let it snap to a certain position (like a sidebar drawer). This tutorial explains how to do it. It's no easy, but very rewarding.

1 Snapping Scroll, part 2

It's been ages since my last article, especially in light of the breakneck speed with which prototyping with Quartz Composer is evolving. People contribute so much it's hard to keep up with everything that's going on. Nevertheless, I hope the basics I cover in the second part of my Snapping Scroll tutorial will still prove to be helpful to you.

Added by Joost van der Ree: “This solves a problem many people might have encountered: sometimes you want to drag / scroll something and let it snap to a certain position (like a sidebar drawer). This tutorial explains how to do it. It's no easy, but very rewarding.

2 Snapping Scroll, part 1

In my last article I covered the basics of the QC coordinates system and explained how to convert the Mouse patch output to match the Origami Phone screen. I also attached my Snapping Scroll file, as an example of practical usage. Now let me delve into the science behind the Snapping Scroll itself. If you want to follow along, go

Added by Joost van der Ree: “'We currently have a few major schools of thinking. They roughly fall into 3 categories: Timeline, Signal Flow & Code.'

4 The state of Interaction Design tools

The state of Interaction Design toolsThe current state of tools is decent, but how they fit together is less than ideal.Pull up a chair & get your butt cheeks comfortable, because this will be a comprehensive mind explosion. Animation is really, bloody hard. Furthermore, the idea of using animation in the context of interactive design is really new for many

Added by Joost van der Ree: “Nice read about the making of Paper, with a mention of Origami: 'This is how Facebook built much of Paper. Matas and other designers used Origami to create unusually complete prototypes, and then a group of software engineers reproduced and refined these prototypes, building software they could ship to a world of phones.' Thanks @kartashov for the suggestion!

6 Facebook Paper Has Forever Changed the Way We Build Mobile Apps

Mike Matas was sitting on an L-shaped couch inside one of the largest offices at Facebook, holding an iPhone that plugged into a Mac laptop through a long, black cord. It was the early afternoon, and he was surrounded by several Facebook colleagues, including Chris Cox, who oversees the development of new products at the social networking giant as one

Added by Joost van der Ree: “'Its development started around nine months ago, in conjunction with their work on Paper. As the Paper project’s needs grew, so did the capabilities of Origami. And in fact, almost every animation you see in Paper was prototyped first in Origami before it was handed to Facebook's programmers to build into the real app.'

9 Facebook Develops A Photoshop For Interaction Design, And It's Free For Anyone To Use

Happy Presidents' Day! To celebrate, we're revisiting some of our most popular stories of the year. Enjoy. We've already waxed poetically about Facebook's new app Paper, which reskins the bloated Facebook experience to feel like a top-tier interactive media product. The Facebook feed is reimagined as a grid of cards that put video and images first, and you can explore

10 Introducing Origami for Quartz Composer

Introducing Origami for Quartz ComposerFor easier interactive design prototypingToday, the Facebook design team launched Origami ( http://origami.facebook.com), a toolkit of patches and examples for Quartz Composer that makes it easier for designers to create interactive prototypes without writing code. I've talked at length about the importance of investing in the right design tools for the job, and we've shared the

Added by Joost van der Ree: “For those with the alert: 'can't be opened because it is from an unidentified developer', you can change this in System Preferences > Security & Privacy > Allow Apps downloaded from > Anywhere.

11 Origami

Added by Joost van der Ree: “Very useful course, I recommend to watch it while doing it. I extracted the app elements from the Facebook app (used in the video), saves you some work: http://we.tl/8Z2NuoytvL

12 Prototyping with Origami

Added by Joost van der Ree: “Stumbled upon this quote in an interview with Joey Flynn on The Verge: 'I also use LiveView for viewing it on the device. LiveView has "Interactive" mode which works really nicely with Quartz compositions that you want to interact with on the device.' It's basically a mirroring tool with interactive capabilities. I tried it and it works really nice, this is a great way to test transitions in an interactive way. Make sure to check 'interactive'. If the frame rate is too slow you can set a lower quality.

16 App tip: LiveView

Leosis

Freshman

  • 0 Playlists
  • 0 Followers

Florian Sänger

Freshman

  • 0 Playlists
  • 0 Followers

лена

a huge manatee

  • 0 Playlists
  • 0 Followers

pixelwink

Freshman

  • 0 Playlists
  • 0 Followers

nila

Freshman

  • 0 Playlists
  • 0 Followers

John Kramer

Freshman

  • 0 Playlists
  • 0 Followers

Eddie Vidales

Video Streaming Engineer, Editor/Producer, Graphic Designer

  • 0 Playlists
  • 0 Followers

Satish Kumar Laghisetty

Freshman

  • 0 Playlists
  • 0 Followers

Kradllit

Freshman

  • 0 Playlists
  • 0 Followers

Gloria Ip

Freshman

  • 0 Playlists
  • 0 Followers

Rachel Mitrano

Freshman

  • 0 Playlists
  • 0 Followers

Niels

Freshman

  • 0 Playlists
  • 0 Followers

Olena Bulygina

Restless everything syndrome

  • 0 Playlists
  • 0 Followers

Szabó Balázs

Senior UX Designer @ EPAM. Creative Asshole. Retired Superhero.

  • 0 Playlists
  • 0 Followers

Poul Cummings

Freshman

  • 2 Playlists
  • 0 Followers

simon

Frontend Engineer

  • 0 Playlists
  • 0 Followers

DPS Panipat City

Delhi Public School, with the motto

  • 0 Playlists
  • 0 Followers

Kevin Morán

Freshman

  • 0 Playlists
  • 0 Followers

Fretboard225

Freshman

  • 0 Playlists
  • 0 Followers

Rose Matsa

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?