I am a visual Designer and currently work as a UI_UX designer at the company I work for. I wanted to ask my colleagues here and front-end Devs as well your opinion about presenting After Effects animations in order to detail how the interaction will be in certain Design. Do you find this useful?

In this link you can find one example of what I am talking about:


Note: This takes much more time than using another prototyping tool but I find it really useful in the implementation process because it permits a seamless view of what designers want to be done.

I need your opinions, pros & cons or whatever you want to share. Thanks a lot.

  • Animations are a huge part of an application's experience, where sometimes the animation is an affordance. It is useful and it might be worth it. I suggest you do that. I do that through code and it's integrated in my design process (I do HEAVY prototyping via code after I design flat comps and then present it to stakeholders and developers) – Majo0od May 22 '17 at 18:18

Here's my two cents on the matter. I agree with you that prototyping is necessary in some cases (wow-ing clients, expressing the behavioral details of an app, etc). In my experience, prototyping has been very useful, but I've done it in one of two ways:

Rapid Prototyping (my favorite). We're currently working on an Angular app and it's something I've picked up relatively easily. You're essentially prototyping using the framework your devs are working with in the very same environment your app exists in. Reasons (in my opinion) why this approach is best:

  1. High degree of code re-usability (provided you're not using throwaway code - see Adobe Muse spaghetti code factory).
  2. Ability to demonstrate the true behavior of the app/feature by using the same framework as your devs,
  3. Experience the pain you might put your devs through by asking/designing animations/behavior that can sometimes prove to be unnecessary and expensive to build. I'm not saying this is the case in your situation, but it's worth mentioning.

Traditional Prototyping I still do this to put together simpler features and behaviors which do not require too much effort. This for me is the go-to method if I have time and the feature is not too cumbersome to digest/explain. I use Invision to help with simulating behavior and Sketch for the designs.

I'm not sure if either of the above will do the trick for you, but I can tell you they may be less time consuming than using After Effects (relative to your level of proficiency with AE of course). If you already have the designs ready and the behavior you're trying to elicit can be accomplished with any the following tools, I would recommend (in no particular order):

  1. Sketch Prototyping by using their Craft plugin. Proto is still in beta, but you can request a code from them. It's pretty solid.
  2. JustInMind
  3. Adobe XD
  4. Invision

I hope this helps with your decision.


| improve this answer | |

I see two issues here.

(1) You point out that they take a long time to make. Prototypes are meant to be quick and cheap to change since you're iterating and changes happen frequently.

(2) The users of your prototypes are ultimately the developers. Talk to them and see what they need. Can they work from a static wireframe with a few text notes? Do they need rough interactions (using Axure, for example) to provide more clarity? Or do they need actual pixel-perfect animations to do their jobs? (I've never met a dev that needed more than static wireframes.)

Lo-fi static wireframes have always worked for me, but in my current job we do Axure interactive prototypes, maybe because it's kinda fun to do them. I suspect that's why you're working in After Effects.

| improve this answer | |
  • Hi Ken, I usually deliver JPGS, PDFs and measurements files to Devs but this was something that I did as an extra deliverable and also it could be useful to make astonishing presentations to clients. I agree with you about prototyping has to be quick so I think this can be used in a particular project that really needs it, for instance, an app that has several illustrations, animations, and interactions. Thanks a lot for answering. – Calvin Gaviria May 22 '17 at 19:51
  • Ah. Your "user" for this is the client. So it's a tougher balancing act: delighting the client vs keeping your work quickly editable. Good luck. – Ken Mohnkern May 22 '17 at 20:19

My opinion (which does assume intermediary HTML/CSS/JS skills):

If you're looking for a quick answer I would say that AfterEffects holds limited value, other than making for cool-looking ways to present your projects on Behance. It's tedious, and for the vast majority of interactive animations, good ol' CSS can take you a long way. Boost that with GreenSock's TweenMax library if you need to chain together animations (a very powerful library, that doesn't require you to be a JavaScript expert), and you'll find yourself creating animations that are not only faster to make but are also easier for developers to translate into the production code on a 1:1 level. If it needs to be super complex, I would say time is often best spent designing the animation(s) in collaboration with a developer.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.