Welcome to the Age of Fully Realistic App Prototypes


Realistic Prototype

To start right off with something to stir up your curiosity (and make you read the rest of the post), let me show you what I did in less than 5 days just for fun. It’s not a real app, only a prototype of a hypothetical one. The video might interest you no matter whether you’re our potential client or an app designer yourself.

Heart Recipes – a realistic prototype made in Quartz Composer with Origami Design Prototyping Toolkit from Macoscope on Vimeo.

Love at First Sight or How I Met the Quartz Composer

If you’re in the app design business, you probably heard about the next big thing that’s going to change the way we design apps – if you don’t know what I’m talking about, you probably spent the last months researching aquatic life forms with the ghost of Jacques Cousteau on some submarine in the Atlantic Ocean. Without an Internet connection (lucky you). Nevertheless, let me show you what the fuss is about, and yes, it’s almost as awesome as sitting in Cousteau’s Diving Saucer.

At first I was skeptical, but then I thought: “Let’s try and see what comes out of it.” After one day of working with it I was curious, after two days I was passionately into it, and after three days, well, I was in love. Say goodbye to the era of static and unrealistic mockups and prototypes, and say hello to the brand new age of motion-design and sophisticated interactions that will guide you through any application like a kindergarden teacher. Welcome to the world of endless app design possibilities, the world of Quartz Composer.

Let me show you just a glimpse of what we can do using Quartz Composer with Origami Design Prototyping Toolkit (from Facebook). Let’s take a short tour of Quartz’s awesomeness:

  1. First of all, you don’t have to be a programmer to make realistic-looking and functioning app prototypes.

  2. Quartz Composer values money, as time is money (as we all learned from 90s movies and culture), and that’s what we stand to gain by using it. Quartz gives us time to prototype, time to think, time to iterate, time to feel the app’s flow, sell the idea, and make the most out of it. Design we always craved (and by “we” I mean the app designers community), design without boundaries, in its purest form.

  3. If you are a designer, you can easily make any app prototype from scratch, all you need is your prior design knowledge, user experience knowledge, and few one-on-one days with Quartz Composer (which comes bundled with Xcode). The really great thing is that finally you don’t have to wait for a developer to find time for you and then, if he ever finds it, make him deal with your strange (as far as he’s concerned) and time-consuming ideas for interactions; ideas which you will then try to explain using your hands, feet, sometimes even dancing… whatever works for you, all the while trying to describe the simplest interaction you have in mind. To be honest, you don’t want to waste the developer’s time trying to explain your vague ideas on how “that interaction should look like if it was actually working,” and “please make it more organic, more like water, you know what I mean?” Now, it takes just a couple of minutes to design a simple interaction (and a few hours to design more complicated interactions) and 3 seconds to show what you mean by “water-organic-effect.” So really, with Quartz Composer at your disposal, you (as a designer) don’t have any more excuses because you can control anything from timing to easing, blurs, all axes, triggers, and all the other stuff necessary in motion design.

Quartz and The Client’s Idea

Hello, Dear Valued Customer. Yes, I’m talking to you as well; actually, I was talking directly to you. We can make your app idea work just as you imagined it to; now, the ideation stage won’t cost you as much as it used to and won’t take so much time. It doesn’t matter whether your app is just an idea or you already have some preliminary sketches or even custom design mockups – we can make it work regardless of the stage of its development, and we can show you how it will look and behave as a finished product – but without engaging precious development resources. Long story short: Quartz Composer is a cheaper and faster way of showing you how your idea will behave when implemented. I don’t think there is any other cheaper and faster way of visualizing interaction and app behavior at the moment, no matter whether it’s a mobile, desktop or even a web app.

And yes, at Macoscope we know how it works, we’re Quartz pioneers here. You can order your fully realistic app prototype, like the one above, from us. Hope to hear from you soon!

The Science Behind Snapping Scroll – Part II: Animation & Logic
The Science Behind Snapping Scroll - Part I: Dragging