Here at The Cream Creative, we feel inspired by Google’s new design manifesto, Material Design, and how highly they prioritize the integration of motion animation into their UI and UX decisions. It’s a no-brainer that motion UI/UX will continue to emerge in the field and we feel compelled to join this relatively new motion prototyping movement. It’s going to be increasingly difficult to convey our ideas and design concepts to clients and developers, so we are determined to utilize tools such as Apple’s Quartz Composer and Facebook’s Origami framework to quickly hack together live prototypes that are then demonstrated to our clients.

In this post I will explain how I built a Flipboard concept which is shown below.

Flipboard concept that we made that was inspired by Yahoo’s Weather app that uses parallax, gaussian blur, and alpha transitions.

Before you begin

You need to have an Apple’s developer account, Quartz Composer, and the Facebook Origami framework to set up your working environment. All three are free and simple to obtain/install.

Create a free developers account: https://developer.apple.com/

After setting up an account, go ahead and also download “Graphics Tools for XCode”

Then go ahead and install the framework: http://facebook.github.io/origami/

For a more detailed explanation on the installation of these resources, check out this link from a community forum for QC http://qcdesigners.com/index.php/forums/topic/2/new-to-quartz-composer-start-he

Let’s start

Fire up your recently-installed Quartz Composer and create a blank composition. Now that was the hardest part!

Alright, not really. Hoping you are still with me here :P

If your new composition doesnt include a “Clear” patch, bring up your Library by pressing “command” and “enter”, then search for “Clear”, highlight it and press enter. Your clear patch is now your first patch inside your document. This helps your composition clear and reset so its always ready to be worked on.

Use the Library to also bring in “Layer Group” and “Phone”. “Layer Group” is a macro patch that groups together many different elements into a single layer. This helps with the organization of patches. Now click and drag a lil noodle from the “Image” outlet of the Layer Group patch to the “Screen Image” inlet of the Phone patch.

If you click on the “Viewer” button on top of your composition, you will see a rendering of an iPhone with a blank screen. The screen is still blank because we haven’t attached any graphics to it in the Layer Group macro patch.

Double-click into the Layer Group macro patch. This is how we access the guts of it.

Bring in the top nav bar for your app. For this example we will make it sticky. Once you drag the image into your composition, you will see that it added a couple patches with a connection already made. Inside your viewer you can see your graphic being rendered.

Click on your image patch, and open up your patch inspector (found on top of the composition). Inside your patch inspector, configure the Anchor Point to be “Top Center”. This will move the navigation bar to the top and make it stick there.

Open your library and add another Layer Group and Layer. COnnect them having the Image outlet connect to the Image inlet.

Double click inside this Layer Group macro patch to go inside of it. This is where we will do most of the work.

Let’s add the graphic that will be out of sight until we drag it up. This image should be a PNG that has the correct amount of transparent space on top so it pushes the actual graphic below the phone screen’s visibility.

Inset the “Scroll” patch as well and configure it like the diagram below. This enables scrolling movement on your graphic. Go ahead and play with this interaction on your Viewer.

Lets drag in the graphic that you want the first screen to be. This is the graphic that will get blurred, darkened, and parallaxed, when being transitioned out. You can play around with the Y positioning here in the patch inspector to give it the right fitting.

Let’s add a “Mathematical Expression” patch. This will give diffeent scroll speeds to the two different graphics to create a parallax effect. The top image will scroll slower than the bottom image.

In the patch inspector for the Mathematical Expression patch, click the drop-down menu to access “Settings”, and type this equation

(a+1000)*.45

You can customize this algorithm to fit your graphic.

The Y position outlet from the Scroll patch can now be connected to the “a” inlet of the Mathematical Expression patch. The “Result” outlet of this patch can be connected to the “Y position” inlet of the graphic that will be dragged up. Test this out in the viewer and customize the Y position of your graphics, and the pace of the scroll through the Mathematical Expression, to your liking.

We created two different scrolling speeds for the elements, but we still need to create a transition that blurs and darkens the top image while we are scrolling up.

In order to accomplish this, lets bring in the “Progress” and “Transition” patches to the table. Connect the “Result” outlet of the Mathemetical Expression patch to the “Value” inlet of the Progress patch. Then connect the “Progress” outlet of the Progress patch to the “Progress” inlet of the “Transition” patch. The “Value” outlet of the Transition patch can be conencted to the “Alpha” inlet of the bottom graphic. This will allow us to carefully control the transition rate of the Alpha/Opacity of the top image, which will make it darker while scrolling.

Inside the Patch Inspector for the Progress patch, have the start value at 0 and the end value 200. Now go to the Transition patch, and make the following adjustments: Set start value at 1 and end value at 0.7.

Check out the viewer and adjust the rate of transition through the Patch Inspector of the Progress and Transition patch as needed.

You can also double-click on the titles of each patch to add a custom name for organization purposes.

Now lets create a blur effect that occurs simultaneously to the Alpha transition. Like before, lets add a Progress and Transition patch. In addition to those, lets also add the “Gaussian Blur” patch.

Lets connect the Result outlet of the same Mathematical Expression patch to the Value inlet of the Progress patch, then connect the Progress outlet of the Progress patch to the Progress inlet of the Transition patch. The Value outlet of the Transition patch should then connect to the Image outlet of the Gaussian blur patch. The Image outlet of the Gaussian Blur patch should connect to the Image inlet of the Layer patch. This will automatically disconnect the Image patch of the top graphic so instead connect the Image outlet from there to the Radius inlet of the Gaussian Blur patch.

Let’s make the following adjustments through the Patch Inspector:

In the Progress patch, the start value should be 0 and the end value should be 16. In the Transition patch, lets make the start value 0 and the end value 0.3.

Now play around in the Viewer to customize the transition rates and position to fit your graphics. That should be it! Now go ahead and capture a video of your work and share your work with others. There is a lack of Quartz Composer documentation and tutorials on the web so hopefully this one serves to be helpful for people looking to get into it. And as always, feel free to leave any questions in the comments and I’ll get back to you!

I’ll end this post with a different example of how I used the same techniques explained in this tutorial to create these prototypes for recent clients.

You can follow me on Twitter @yofred, check out the mobile UI/UX work we do on Dribbble, and visit our website at The Cream Creative.