🌐 Public

Prototyping With Quartz Composer

By eray alan

Introduction

Quartz Composer a 3D animation program pop up again with the creation of Facebook Paper. They said "To create the best app we created to best prototyping tool" After Facebook released Origami the library for QC, we all realized the power of the program for interactive prototyping for motion in web or mobile applications. Well I just started learning QC on 18th March and Ill keep here updated about what I am doing for it. Readings, exercises and so on. At the same to understand the theory better I'll be working on "Motion on Interaction" keep an eye on it to learn with me. In this flow I am planning to start with learning the QC basics and than jump into the possibilities of Facebook Origami. Let me know if you have any suggestions Motion in Interaction: https://gibbon.co/erayalan/motion-in-interaction-design

eray alan — Interaction Designer - Interaction Design Master Student in Domus Academy

1 Let's do it parallel! Learn the Motion in Interaction

In short motion is a must to trigger an action for interaction! Designers are trying to find the best gestural motions to interact with from handles (twist, push, pull, etc) to screens (tap, swipe, pinch, etc) and best animations from opening & closing windows to changing pages (flip, disappear, swipe, etc). With the Facebook Paper "Importance of Motion" come to

Added by eray alan: “Alright start with bad news, Apple officially deprecated Quartz Composer! But interesting Facebook created a Origami for it to design their shining star app "Paper". And also they wanted to keep it open sourced. Well in this case it would not be a bad news anymore, I would say either Apple change its decision or we will still able to use OC for our interactive prototypes. So In this article you can get motivated to learn a deprecated program! PS: I thought it was deprecated but it is not. In any case its for sure not the Apple's favorite program.

2 Some Motivation To Start! (20 min)

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 eray alan: “Good explanation from the rebirthers of Quartz Composer. Facebook Product Design Director explains what QC is great for prototyping

3 Some More Motivation (5 min)

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 eray alan: “Its not so easy to find where to download QC, here you can get some more motivation and find out how to set it up! Better to go to link!

4 Setting up QC (20 min)

Added by eray alan: “Before you start to create, be sure that you have the app to test your animations on your devices. Unfortunately I could not figure out how to change the size of the screen but still its useful especially if you are using it in interactive mode!

6 Test It Live "LiveView for iPhone & iPad" (10 min)

Added by eray alan: “A trick to increase phone view

7 Using Sketch Mirror, LiveView, SilkScreen, Skala Preview, AirServer & others via USB

If you design for mobile, chances are you’re using some tool that lets you preview your designs on your iPhone’s screen (and if you don’t, shame on you : ) These tools use a shared Wifi connection (be it your main wireless network, or an Ad-Hoc network you’ve created using the Sharing preference panel) to which you need to connect ...

9 Upload! Custom Patches For UI Design (3 min)

A community of UI designers, animators and developers interested in creating more delightful experiences with tools like Quartz Composer. Hey guys, I made a few custom patches which eliminates a lot of the tedius work which would be required otherwise. There's 6 patches in all.. To install, drag the files into - Library/Graphics/Quartz Composer Patches.

10 Upload 2! QC Designers - It's finally here. jQC 1.0 - A UI Framework for Quartz Composer

Version 1.0 is here! This is a major update to jQC, bringing with it 15 new patches as well as bug fixes and improvements to existing patches. This release is proudly Origami compatible, which means it can be used alongside the the framework without issue, and several take full advantage of Origami's retina mode.. Big features include new animation patches,

Added by eray alan: “Here you can understand the Units and Pixels of QC, take a quick look and do the macro if you wish. However I think it may be early

14 Understanding Coordinates (10 min)

It all started with a Medium post. Quartz Composer, long rumored to be a favorite tool of Mike Matas' to prototype UIs in, got some quick time in the spotlight when it was mentioned as an essential tool for concepting out Facebook Home. This mention, while pretty casual in the article, actually sparked a lot of interest in Quartz Composer

Added by eray alan: “You need to fast forward it a bit because its quite long that it could be but still nice beginning video. You may learn image Dimension Patch which helps you to use original size of images. Even you resize the view they will stay in the actual size. Timeline Patch: Its a graph. Reproduce the animation, outputs the value that we are animating. To create the movement of the animation use Timeline’s graph to create values. There can be more than one timeline in one timeline Patch. Interpolation: You can change the animation playing with Tension (the sharpness of start and begin) and the Interpolation (For ex: quadratic out means bounce)

15 Exercise : Parallax Website Effect(40 min)

Added by eray alan: “ Inspiring from that video you do some wit the patches Audio Input Source: How to use mic as input source, you may want to design an app using audio’s “Volume Peak” and “Spectrum” as input. Math Patch: Which changes the value of the signals with math equations. Cube: How you can use a shape. Imagine you want to design an cube base rotating animation on an app.

16 Exercise: Audio Reactive Cube (20 min)

Added by eray alan: “Here you can use some using some math in the QC to convert your input values to the values you need. Inspiring from that video you do some wit the patches Movie import: Playing around rendering the movie, for example if your app fast forwards video with a swipe you can play with it Counter: To have incremental or decremental values to use as inputs Image with string: To have an interactive text on your screen Mathematical Expression: More than Math patch you can write equations in this patch to convert your values.

17 Exercise: Micro Loops and Glitch (30 min)

Added by eray alan: “ Switching on and of something, which is a basic element of mobile interfaces. Keyboard: If you want to design the behaviour of any button on the phone you would be using keyboard as input Toggle: Basic interaction back to the Bill Verplank’s decision handles or buttons, you can design you behaviour with Toggle Patch.

18 Exercise:" Understanding the Toggle Patch (15 min)

Added by eray alan: “Most important patch (for prototypes with QC) are well explained in this tutorial. And also it is a great example how to solve problems with very simple solutions. Meaning how using Clear (enabling and disabling) patch to turn the screen into a video player was a good example of simple solutions.

19 Exercise: Interaction Patch (20 min)

Added by eray alan: “I was always thinking the video "how to" guides are best for self learning until I saw this. Not only a step by step guide to how to do the example but also step by step guide to understand the logic of program and animation. You will also get pleasure with the results unless you think about the creation of images to use for obtaining same feelings of animation. (you will get it at the end of the lesson)

22 Exercise: An interactive light button (45 min)

Added by eray alan: “Start from min 17 and learn about, Delay in animation can be understood in iPhone animation part of the video. Smooth Patch: make the move smoother 3D transition Patch: To make the image transitions Stop Watch Patch: For delay Input Splitter Patch: Single input to be shared by other inputs

23 Exercise: Animated Chat Avatars (25 min)

Added by eray alan: “Same amazing source. You will jump into most wanted animation in the second exercise! But but but! Don't just do it to do it! Change the parameters, wire the other inputs and test the changes. Two Very important part: 1) Timing in Quartz Composer 2) Bending the Time

24 Exercise: An animated window opening (90 min)

Spawning a WindowNow that we have some basic understanding of the Quartz Composer Interface, let's build upon what we have now and turn it into a rudimentary window manager. If you had some difficulty in solving the previous exercises, which was purposefully set a bit tough, we have put up a detailed discussion of the answer here. Here is what

Added by eray alan: “If you already started creating some interactions in QC you should had seen that it can go super complicated to create what is in your mind. At least it was like this for me. Now with the introduction to Origami patches you will see how easy to do some interactions with using much less patches. Please dont get angry with me after seeing this, because I believe Its good to start with basic patches to understand the logic behind a program. You will see how it will be easy to understand what does Origami patches are doing.

26 Excercise: Prototyping with Facebook Origami (50 min)

Added by eray alan: “Spritz is the new method of reading which will change our way to read! In this prototype of Gmail for Android which is done by Quartz Composer with using Facebook Origami, you can see a possible interaction for using the new method of fast reading in email apps. Download the code, and please let me know if you have any suggestions. Code:https://drive.google.com/folderview?id=0BzegYc8ArLgMdVJvWFc0Z1lJUDA&usp=sharing Spritz: http://www.spritzinc.com/

32 Exercise: Spritz for Gmail 1

Added by eray alan: “Here you will learn to use QC cleaner, its very very important when more than one person is working in a project (or if you need any help from QC community) or for understanding your past works!

35 Build Abstractions, use it clean!

I decided today that I would learn a bit of Quartz Composer. I had never touched it before, beyond reading a couple articles and watching a conference talk. The most useful introduction for me was " UI Prototyping with Quartz Composer and Origami" by Pasan Premaratne. It takes you from absolute zero to having built a simpler version to Path's

36 Excercise: Snapping Scroll – Part I: Dragging

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 eray alan: “Check out the examples, change values to see differences, and do! Copy paste the image patches to new blank, open both viewers of your blank and example's blank, try to get similar effect. Check example's blank if you stuck!

40 Exercise - Origami Examples From Facebook (150 min)

41 Chaining animations is easy.

IntroductionA big chunk of our everyday prototyping revolves around figuring out how "things" should appear on and disappear from the screen, based on the user's input. Often times, designing those interactions will require chaining two or more animations to obtain intuitive and meaningful transitions. Harnessing animation chaining will surely improve your design and make it more attractive and user friendly.

42 Exercise: Swipe right

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 eray alan: “In this video Dave sets up the render of phone with a wallpaper. He is playing with Billboard and Sprite. Using Billboard for the images that he doesn’t want to resize and Sprite for others. I could not figure out why he used 3D Transformation for the wallpaper instead of a Sprite, maybe we can figure it out in the next videos. Here are the Patches he used Clear: Paints entire rendering destination. You can change the colour from inspector. You don’t need to wire this patch in any patch. Image Patch: Source for each image. To render the image connect it to Bilboard’s Image port. Billboard with Image Patch: Handles images, a less option version of Sprite. Has no 3rd dimension. So X transition doesn’t work. In the video he is adjusting the size and position of the renders Sprite with Image Patch: Like a billboard but you have to set hight and width to mask to image you can use it. If you use Image Mask you can’t interact. He used this patch to hide the extended parts of the wallpaper on both sides of the phone. 3D Transformation: A macro patch (strait corners) you can go into and you can contain other patches in this. Billboard doesn't move in them. You should use Spritz for it. Numbers on the corners: Represent the hierarchy between the patches, works as layers in photoshop. He adjusts the visibility of images in the render via this Download the QS file here: http://cl.ly/2Z3U1I403t1a

44 Exercise: Building Facebook Home 2 (15 min)

Added by eray alan: “In this video he is creating animateable profile picture. He renders the image with Sprite because he wants to resize and position the image. To have the image in a specific position after the intervention of position, he adds 2 Directional Springs (one for X and one for y axes). Basically this patch defines the ultimate position of the image. To create interaction in QC Interaction patch is used. It allows the user input to render. This patch connects to Sprite from top corner. As he shows in the example if you connect Interaction’s X Position to Sprit’s X position you can move the render in X axe, however if you connect Interaction’s X position first to Value input of Directional Spring and from its Output Value to Sprite’s X Position, after you move the render it will automatically turn back the position that you set with Directional Springs (Repeat for Y). What happening here is your mouse’s coordinate values become input for Sprite while interacting with the image when you stop interacting then Sprite take the Directional Spring’s Spring Center values as input. here is the file: http://cl.ly/3V2q3V333l2M

45 Exercise: Building Facebook Home 3 (20 min))

Added by eray alan: “Here there is a good example of using Multiplexer as a condition tool to obtain two different values as output from a Boolean input. The animation part is much easier with the Origami patches but good to try to understand the idea behind Bouncy and Classic Animation Patches

46 Exercise: Building Facebook Home 4 (20 min)

Added by eray alan: “In this chapter of Dave's Facebook Home Design you will learn more about customizing motion. And also there are two important points of this video; first if you need to change X and Y position twice you can basically but your rendering patch into a 3D Transformation patch and publish outputs on the rendering patch. Second to use Java Script Patch. With this patch you can create custom conditional patces

48 Exercise: Building Facebook Home 6 (30 min)

Myung Kyu Yang

Freshman

  • 1 Playlists
  • 0 Followers

Michael Bibeau

Freshman

  • 0 Playlists
  • 0 Followers

Paresh sagar

Paresh Sagar is the CEO of EWW , IoT, Web and Mobile App Development Company ...

  • 8 Playlists
  • 1 Followers

tinkolza

Freshman

  • 0 Playlists
  • 0 Followers

Georgemaine Lourens

Freshman

  • 0 Playlists
  • 0 Followers

William Burton

Founder & CEO of Casheer, Inc.

  • 0 Playlists
  • 0 Followers

Chinnatip Taemkaeo

Freshman

  • 0 Playlists
  • 0 Followers

邵怡静

Freshman

  • 0 Playlists
  • 0 Followers

anjhero

Freshman

  • 0 Playlists
  • 0 Followers

Beanez

Freshman

  • 0 Playlists
  • 0 Followers

toh

Freshman

  • 0 Playlists
  • 1 Followers

Dennis Corsi

Freshman

  • 0 Playlists
  • 0 Followers

Jason Miao

Freshman

  • 0 Playlists
  • 0 Followers

Nikita Volkonsky

Freshman

  • 0 Playlists
  • 0 Followers

Slumbermink Amblesack

UX Designer

  • 0 Playlists
  • 0 Followers

텔로

인터렉션 디자이너 혹은 프로토타이퍼로 불리고 싶은 GUI 디자이너.

  • 0 Playlists
  • 0 Followers

Friday

Freshman

  • 0 Playlists
  • 0 Followers

Blake Brown

Freshman

  • 0 Playlists
  • 0 Followers

Henrik Johnsen

Freshman

  • 0 Playlists
  • 0 Followers

Brenna Marketello

Designer. Previously at Storehouse.

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?