I was wondering if there are any new web apps or apps out there that make this a bit easier. I've had recommendations to use Keynote and/or Aftereffects. Anything else?
Use as much as you can. Each tool has severe strengths and weaknesses.
Lately my diet consists of After Effects, Quartz Composer, Framer JS, Form, Cinema 4D, sometimes Pixate, the web browser, pencil and paper.
Spend time learning animation fundamentals before relying on tools, and you'll produce great animation work.
Can you point to anything that does a good job explaining these fundamentals?
Here's a good resource for UI Animations with a section on principles: http://markgeyer.com/pres/the-art-of-ui-animations/#/
That presentation by Mark Geyer that Deny mentioned is great. Another good article is Transitional Interfaces by Pasquale D'Silva .
I am a big fan of Hype, it thinks like I do.
Hype is fantastic. I don't know why it doesn't get as much attention as some of the others.
other great things about Hype:
will watch assets and update them if you change it externally
easy to embed in other html/css/js projects
scene/page transitions are cake, super helpful for doing mobile flows
in the end, you can "innerHTML" any object from inside Hype.
I was in the same boat as you for a while. With so many prototyping tools out there, I was unsure which would be the easiest to use and also give me the most interactive prototypes.
A majority of the prototyping tools I used seemed like I was just linking together screenshots with some basic animation effects. Lame.
Eventually I just decided to cough up the $80 for Framer Studio and try it out. 1) even without JS knowledge, it's super easy to learn/use 2) you can create both simple animations or very complex interactions 3) you can re-use your code snippets for future prototypes 4) previewing and sharing prototypes is easy 5) the documentation and support is great
Yes, I love FramerJS. You can checkout some of my prototypes at dribbble/mrtnmatt
I'll be posting some more in the near future. Also, as Pasquale mentioned using, I always start with pencil/paper + a little research on animations before jumping in.
Pro-tip: If you don't want to cough up the $80 for Framer Studio, Codekit does a fine job of compiling the CoffeeScript and serving the prototype locally.
Although decent mobile visualization and sharing only comes with Framer Studio, so it's worth the price to escape the hassle.
I just started using Pixate. I'm a total noob when it comes to actually implementing an interaction idea into a prototype but Pixate has been fairly understandable so far.
I used to use Hype, maybe 3 years ago. I hear it's had some rad updates so might look again soon!
Proto.io doesn't seem to get much love here. I'm currently using it, and it can be as simple as Marvel or create super complex stuff as well.
i started with doing animations using aftereffects (my go to), but then started using Keynote as it was super simple and quick. then i after trying so many others out there including Pixate and Marvel i have settled down with Proto.io - which is fantastic. They even let you export a HTML package if you need to so you can host it as your own web app.
And seriously, you can make super quick believable prototypes of interactions and animations - or a whole user experience.
Composite to view designs on devices, and Pixate to animate them once you are happy. Both amazing
I used Pixate recently to prototype do review with our clients. It took a while to learn but once you master 'conditions' it gets a lot easier. If you just want to illustrate an animation over an interaction a lot of team use keynote.
+1 for Marvelapp which is great for super quick functionalish wireframes that are also easy to share.
After FX is also in my list -- since most designers are often already familiar with Adobe tools the learning curve is less steep.
xchema Frontend (private)
Invisionapp (+ team collaboration)
Marvelapp (+ animation and easy to use)