Quartz Composer or framerjs?
over 9 years ago from Nathan Langley, Designer
How is the take up on these two for prototyping? Do many people use them? And which do you recommend?
Thanks :)
over 9 years ago from Nathan Langley, Designer
How is the take up on these two for prototyping? Do many people use them? And which do you recommend?
Thanks :)
UPDATE: Our recently released Framer Studio solves most of the mentioned downsides below. See: http://framerjs.com
Framer creator here.
The most important difference between Framer and QC is that Framer uses code (javascript) and QC visual programming (patches and noodles). They are very different approaches to define flexible behavior and you should figure out what clicks with you.
If you are just interested in the practical differences, these are the ones I think are key (some of them might be solved/outdated).
QC has immediate visual feedback. You can get close with Framer by using auto refresh on save (for example with Cactus) but it's not the same.
QC has better performance in cases where it needs to do heavy computing for each frame (obj-c is faster then Javascript) but generally they are pretty close because the both use the same graphics acceleration.
QC has a nice set of tools built by Facebook to specifically do UI stuff.
QC is more extendable if you can code objective-c because it doesn't depend on the browser.
QC's visual programming is more "forgiving". One typo can break your javascript, QC doesn't have that, there is always some result.
Framer is very nicely integrated with Photoshop.
Framers' coordinate and event system is a lot easier (positioning or handling clicks).
Framer works great on mobile devices (including Android although less smooth)
Because Framer uses the browser you can re-use things you know like css and html, easily use live data and mix in other javascript things you like.
Framer is modeled after AppKit/UIKit so is closer to what the actual implementation will be.
Let me know if I missed anything.
Thanks for taking the time to reply, Koen. It clears a lot up, appreciate it.
Thanks for this. Very informative and unbiased answer :)
Apples & Oranges. Use both and more. One tool isn't the ideal solution.
Today I just did my first Quartz Composer prototype using Origami and if you do not know any programming language is the way to go!
take a look at the video I just did: http://dribbble.com/shots/1410837-Animated-Landing-with-Facebook-Origami-for-Quartz-Composer
Di you use any tutorial? I found this http://vimeo.com/85578380 but what you've made seems a bit more complex.
Yeah! that's the only one I've seen! And the one which made me try it
Help me understand the advantage of something like Quartz over After Effects. I feel like I could accomplish this effect quickly and easily in AE, but have trouble wrapping my head around the noodly interface in QC. I assume a finished Quartz prototype contains more useful information for the developers than does a .mov or video exported from AE?
Yes you could achieve the same with AE, but you can not make it interactive, so if you are going to show the animation to a developer i think it much self-explanatory, the first prototype I've made using Origami in Quartz just took me 2 hours having not experience with Quartz at all, and I feel like i could do it in 10 minutes now
Makes sense, thanks. You can only add a layer representing someone's thumb in AE, but nothing compares to holding the real thing. I'll have to give Quartz another go with Origami.
How did you record that? Me and my buddy can't figure out how to do it in QC. Do you just screen record it?
Nice work btw.
I used an app called screenflow https://itunes.apple.com/us/app/screenflow-4/id573279886?mt=12
But can also use Snapz Pro X is great for screen capture on mac, and a bit cheaper. To capture video from your phone you can use Reflector+screen cap app on your mac.
Thanks mate :)
You can easily screen record with QuickTime Player. No need for third party applications.
Why are we always comparing apples to oranges here? Look at the tools, use it in a real-world project to solve a problem and see if it works for you. If it doesn’t, use a different tool. In the one situation you better use QC, in the other Keynote, in the next one a sketch…
The most important things to learn are awareness and curiosity. You don’t want to run around with the same hammer for 20 years, but if Director or Flash still works for you to communicate a solution/solve a problem, then use those.
I dove into some of the Origami files and was able to knock out some nice mobile prototypes in an afternoon. Not bad for first time use. The big downside to me is that I can't actually run it on the phone. Canvas and Storyboard in XCode are another good alternative for a little more power, but also a little more tedious. These are all just tools and some are better in certain situations than others. Knowing the pro's and con's of each is your best bet.
I thought quartz prototypes could be run on the phone.
I haven't found a way yet. With Origami, you can simulate the look of an iPhone on a Mac, but I don't think they run on iOS.
I think you can embed a quartz composition into an iOS app.
edit: my bad, it's only available for Mac OS X apps, still there's this thing
My understanding is that Facebook has a proprietary way to do it.
qc-mobile should be able to load .qtz files on an iOS device.
Investigating Origami right now. The benefit of Origami/QC seems to be that devs can pretty much take the numbers out and plug them into code (or so my team mates tell me). Right now I use Flinto (seconding Yogev) for iOS interaction prototypes and Framer for web.
I would like to know about this too. Origami vs. Framer.JS. Which is easier to start using?
I've looked at the documentation for both but haven't used them for client prototypes so far so YMMV.
FramerJS is a javascript framework and the documentation is good. If you are comfortable with JS then you should be able to dive in and make some headway.
Alternatively, Quartz composer is a whole new beast–the recent demos I looked at are confusing. I honestly have no idea how all the boxes and lines interact to build a demo.
I've used both. If you're comfortable with css and/or js, Framer has the less-steep learning curve. If you have no code background at all, Quartz is at least visually oriented, but still very complex.
Keynote, Flinto, Invision: - Made to rapidly create a user-flow, to show interaction paths and give an overall feeling
QC, Framerjs: - Made to create intricate animations, which details/numbers can easily be translated into the Apps source code
QC vs Framerjs: QC basically reminds me of those camera animation and scripting panels from 3D SW. It's simple and just needs some time to fiddle around with the boxes and numbers to learn, yet it will always be faster than writing pure code.
But, as many already mentioned, in the end it depends on your liking. With some practice in framerjs, you may come up with the same output, but it'll take more time.
I had heard that Apple officially deprecated Quartz Composer for lack of retina support. I'm not sure if that is/was the case, but that had kept me from diving into Quartz head-first.
There are a couple great branch threads on the topic of both QC, Interactive prototyping and transitional interfaces as a whole.
Ultimately, prototyping is to communicate your ideas into something your team, stakeholders, clients, engineers to understand visually.
So whatever tool or tools to get the job done is a matter of your preference.
Personally, I believe keynote is great at the storytelling and communicating the user journey of the user experience. Whereas, QC or FramerJS gives you the power of getting the details of the interaction to be exactly the way it is intended.
One thing great about QC and building mobile apps for iOS is that you can speak to engineers language as you work closely from prototype to actual coding. For example, tension/friction In a bouncy animation can be tuned to the exact number the way designers wants it, and engineers just have to apply the spec.
The only thing I worry about JS is that the expectation of an mobile app is about performance. And running anything complex in animation that is build off of JavaScript always feels off in the performance and actual intended interaction. But it's probably more of my problem, because I'm not good with JavaScript.
FramerJS is great for creating prototypes you can then test on a mobile device. I played with Quartz composer a while back and at the time there was no way to use the resulting prototype on a mobile device, which I found to be counter productive. I'm not sure if this is still the case.
Also, as Koen mentioned, you are using existing skill sets for front-end development (HTML, CSS, Javascript) meaning anything you learn whilst building FramerJS prototypes can be applicable to front-end dev and vice versa.
Anything that help you to get the job done :). Btw this kind of discussion on Stack Overflow would be closed because doesn't add too much value.
I enjoyed pointing out the differences, specially in the authors reply, it's informative and worthwhile. Now, the show off of who likes what is completely useless.
Keynote.
While I've used Framer and Quartz Composer before, they still take too much time to create basic flows and animations that cover a wide range of experiences. With Keynote you can build a ui, compontent-by-component using the same assets you provide to your developers. You can also leverage the amazing set of existing animations (which got better with the latest keynote) along with creating a sense of custom animation by animation stacking via magic move and others. Also knowing and understanding there is a difference of the timing function in Keynote vs iOS and Core Animation (which is .25 seconds) helps.
Can you show examples of prototypes you've built in Keynote? I use Keynote too. THanks!
I agree about keynote.
I'm interested in using QC or framer, but the learning curve has kept me at bay so far. I really don't understand what flinto offers beyond keynote (or any of a number of tools available for assigning link targets to static images).
I think Keynote is indeed great to quickly communicate an idea, but not to come up with new interactions, stuff that doesn't exist yet. I think currently QC, Framer or native are your only options for that, but flexibility comes with a learning curve.
That's certainly a fair point as I've used Framer to create some unique animations where I previously hit the ceiling in Keynote. When it comes to any of these tools, I think it's really context specific which ones to use for the job...what you're trying to deliver and how you have to showcase an experience to communicate it effectively.
I used this video to learn a little about Origami & QC: http://vimeo.com/85578380
In it, the narrator states that QC is best used to prototype something you've never seen before--bc if you've seen it then you can just use that to describe what you want.
To make prototypes to feel for yourself or perform user tests, I use Hype: http://tumult.com/hype/ It is pretty great. It should be a part of this discussion now that it supports retina images as of the 2.5 release.
I haven't used Origami/Quartz yet, but I intend to. I like the idea of working with SVGs so you get a more pixel accurate representation of what you're building. Plus it seems like it has more fine grained interaction ability.
I have used Framer.js, I was intrigued so I gave it a shot a few weeks ago.
Took me about 2 hours to create this prototype, including: The visual design(sketch), Learning basic Framer.js(w/sketch output), and building the prototype itself. http://e.richietaylor.com/ProjectsAccounting/ Interaction is: Click Construction Project 2B > Building Materials Detail > Lumber Detail
And the back 'Last Breadcrumb' on each page.
We're in an interesting time for UX & Prototyping. A lot of tools surfacing, a lot of tools on the way (EvolveUI, Macaw.io) etc. I'm having a hard time settling on a toolkit.
For interactions that simple, Flinto would actually be a lot faster.
I'd say Quartz with Origami. Even though it's quite obscure, lacks solid documentation and the more custom stuff is not obvious to create, it's also more rewarding and once you grasp it you will be able to push yourself into unexplored territory like the Facebook Design team. The immediate visual feedback allows you to tweak everything to your liking with less chance of errors and going back and forward with the browser. It's not perfect by any means, my comps tend to look like spaghetti after a while and I dread having to deal with anything more complex than a single interaction per file.
Framer is a good tool mostly if you're not bad with javascript, but a little complicated for mobile prototyping, imho. I was recently getting into Origami seems smooth and easy to dive in, but i haven't tested it's limits so far.
Come on, man.
Entirely not the same thing.
If you try to do the things QC/Framer are meant for, in Flinto, you're going to have a bad time.
If you try to do the things Flinto was meant for in QC/Framer, you're also going to have a bad time.
If you try to do the things QC/Framer was meant for in QC/Framer, you're going to have a mediocre time.
If you try to do the things Flinto was meant for in Flinto, you're going to have a splendid time!
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now