over 9 years ago from Brendan Gramer, Senior UX Designer @ Amazon
What are the pros and cons of designing in Quartz Composer (Origami, Avocado, etc) versus XCode (Storyboard, Interface Builder, Canvas, Facebook's Pop)?
Something to consider...
QC should be used only to prototype specific features or interactions. Not the whole app.
XC can be used to prototype the entire apps UI. Not to mention that what you build can be used within the final product.
I'm just getting into this myself, but this is what I've gathered from talking to iOS developers and using MengTo's Design+Code.
QC is much faster to set up complex animations etc than it is in xcode. There's a whole host of setup stuff you basically just ignore when youre working in QC that you would have to do in xcode.
QC gives a design-minded person much more flexibility when trying to perfect the look of an animation. Plus, if you're planning to use Facebook's Pop animation framework for xcode, the values you use in QC are pretty much the same thing youll use in Pop. (spring tension, friction, etc)
What I've been able to ascertain is that there's a steeper learning curve with XCode, but once you figure it out, your designs are right there to be coded by a developer.
With QC, the learning curve is not as steep, but it's pretty much throwaway prototyping of motion and animation. I don't see a way to export the variables so that a developer can import it into XCode. Am I missing something here?
Some of the values in the Origami patches (Bouncy Animation for example) basically line up with variables in Facebook's Pop animation framework for xcode. Things like Tension and Friction are values you can set in your animation, just like in QC/Origami. So.. if youre using all the facebook stuff there's a pretty good chance it will easily translate
Pros:
No code, just connect.
Cons: You can't test and feel the real feedback.
I would use forever XCode because it allows you to build an entire project with standard things and feel the step by steps.
It's clear that special effects are to be done on AE or Origami in order to get the idea what to code.
Yeah maybe the answer is using both? Begin prototyping in QC, get a feel for it. Then transfer to Xcode to add more interactivity and help create what can be used in the actual product.
As time goes on, you may want to tweak what is in the shipping product, so if you can just tweak what is in Xcode is may save jumping through hoops there if you can directly work on that.
I’ve only looked at some quick intro tutorials to QC and it looked pretty complicated to me. QC almost seems as complex as coding the way you group things and create inputs and outputs. I'm an experienced coder but haven’t done much Core Animation, but I’d be tempted to learn both to work out which one I prefer. Possibly someone could use Pop to create little reusable components that would work similarly to the components that you connect up in Origami?
One of the most important things in coding is keeping things structured and named well, just liked organising groups and layers and smart objects in Photoshop. Always use descriptive names, and break things sensibly into groups using methods.
You can do a lot of stuff on XCode without even drop a single line of code. You can also have the feeling of testing your app in your phone. Animations (to what is mainly used) on QC can be explored later in the project unless the app is animation dependent.
Oh that’s really cool. So just using the animation panel in the UI editor in Xcode (Interface Builder)? I assumed it was limited and lacked power to do much with but sounds really cool!
Actually, Meng shows how to create many animation transitions using only the Xcode Storyboard.
Just wanted to add, that animations are so so simple in code too. Drag an IBOutlet connection from your Storyboard to the header file (the .h) of your ViewController. And animate like such:
[UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseOut animations:{ // Put all values you want animated here. } completion:nil];
Yes, in the end Objective-C is really verbose and you can achieve most of the things without getting too lost.
Yes exactly. To me the key is what type of prototype are you trying to make. Is it to test user flow and general app logic? Or is it to test specific interactions and be creative? For the former, xcode is great, and I'd use QC for the latter.
Speaking as someone who has used Quartz Composer but never tried XCode, I can say that XCode seems way more daunting. Do you need to write objective-C to use the tools you mentioned? (Storyboard, Interface Builder, Canvas, etc...)
After experimenting with a recent design that needed to be prototyped, I found XCode was the only way to go for anything more than basic interactions (in which case we use inVision).
It's not as daunting as you'd believe, and much can be done now with storyboard while rarely touching code. @MengTo wrote this great introduction over at Design+Code (http://designcode.io/xcode).
Awesome - I'll check out that article.
I've just started developing an app with Xcode because I needed a prototype of the flow; I want to test the app with actual data, something a tool like Flinto or Marvel doesn't allow me to do.
I'm doing the crash course by Josh Long and Sam Soffes (executeios.com) and I'm enjoying it (as a designer). I can't wait to use what I'm learning there to develop (or hack together) my own app.
Quartz is, I think, more for small interactions like animations and such. I think Facebook Pop could help me do that quite well in Xcode, too, but I haven't reached that stage yet.
Execute iOS is well worth the money so far.
Could you go into detail on Execute? This looks pretty interesting, and I'm somewhat familiar with Sam Soffes. Do you feel like they do a pretty good job guiding you through things so that you really grasp it?
They do. Of course, at some point you'll be like “what the hell am I doing I have absolutely no idea please get me out of here”, but for the most part I generally feel like “hey, this is nice, I understand what's going on here”.
You make a to-do app and they go through everything that's needed to do so, all in code. If you're quick, you'll be able to finish the course in three days. I rewind now and then and read up on stuff I can't grasp yet so I'm a bit slower. But I think that, if you finish this course, you'll have a nice basic understanding of what you need to do to make an app.
And then the hard part of doing another one yourself starts ;-)
The difference is if you build a prototype in Xcode a dev or even your self can make the prototype a funcitonal product and upload to app store.
I use QC, so I'd like to hear from designers who use Xcode: how do you handle being taken so far out of the normal "flow" to which you're accustomed by being able to see your changes in real-time?
Also, what about the overhead...compiling, app, project setup, etc...how steep is that curve?
Are you able to create custom transitions / animations easily, or is it more of an InVision experience where you can just tap through and see your screens in succession?
Thanks!
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