Origami Studio (2017)

Explore, iterate, and test your ideas. A new tool for designing modern interfaces, built and used by designers at Facebook.
Stacks Image 36228
Stacks Image 36226

Design Prototyping (2013 - 2015)

Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, this is why I use Origami a tool for interaction design by the Facebook Design Team. A tool built upon a development language called Quartz Composer that I have 10 years experience developing with.
Origami is a tool for designing modern user interfaces. Allowing quick creation of prototypes that run on your iPhone or iPad, ideal for quick iterations and the added bonus of exporting code snippets for your engineers to use.
Inaddition Origami can prototype for desktop websites and apps with features like text input, custom cursors, FaceTime camera, OS X drag and drop, and a resizable web browser frame for prototyping responsive designs.
Facebook created Origami to help them design and build many of their products, including Instagram, Paper, Messenger, Slingshot, Rooms, and Groups.
Stacks Image 16904

1

Register as an Apple Developer

Stacks Image 16917

1

Register as an Apple Developer

Stacks Image 16934

2

Download and install Quartz Composer

Stacks Image 16949

2

Download and install Quartz Composer

Stacks Image 16962

3

Download and install Origami 2.0.2

Stacks Image 16973

3

Download and install Origami 2.0.2

Stacks Image 17051

4

Download Origami Live for iOS

Stacks Image 17062

4

Download Origami Live for iOS

My Tutorials Examples

Download my example prototype and run them on your device

iBeacons

UI designed for interactive guide system based in muesums and house holds.

Touch Preview

Touch Preview UI including my OpenAL custom music player plugin

Maze 3D Orientation

Example of collisions and 3D device orientation

Guess Who

Using Messenger Platform play a game of Guess Who

Paraxeling UI

3D orientation example naviagtion, paraxeling effect.

Image Grid Mode

Media Grid prototype built in Quartz Composer and Origami. Inspired by iTunes (iOS)

Cloth Mechanics

Multi Touch mesh cloth mechanics using the POP framwork

Live Twitter Feed

Real time twitter search feed for displaying incoming tweets with a specific search parameter

Color Palette

Generates a color palette from an inputted image
My Image

Pinch, Zoom, Rotate, Drag

Useful multitouch gesture for display and zooming into images.

Grid Layout

Multitouch grid layout for mobile application prototypes. Dynamically adjust the rows and columns.

Transitions

Transitions between application screens or inputted images

Apple Watch clock faces

Working Apple Watch clock faces

Create Account

UI to demostrate creating an account

Circular Image Scrolling

A continuous circular scrolling UI mechanism with rubber tension, magnet forces and snapping at boundaries.

Scroll Wheel UI

Touch control scroll wheel UI with behavioural force and inerition

BBC Radio

Inspired to recreate the scrolling dial navigation prototype.

Contacts Page

iOS contact page. Demonstrates iterated contacts list, frame scrolling, and swipe for options.

Paraxeling UI

3D orientation example naviagtion, paraxeling effect.

Image Grid Mode

Media Grid prototype built in Quartz Composer and Origami. Inspired by iTunes (iOS)

iTunes player

iTunes sender and receive plugin for Quartz Composer and Origami.

Stacks Image 13092

Philips Hue

Precise position based iBeacon and Philips Hue application concept.

Image Scrolling

Multiple image scrolling with magnetic force and snap to boundaries. Includes phone model transitions and parallax example. Look inside composition for keyboard controls

Phone Transitions

Phone model transitions for different mobile models