: Can After Effects be used for website prototyping? I know one designer that is a motion graphics guy first, then a UI designer. Recently, produced a website design entirely in After Effects

@Ravi4787994

I would say no, and here's why.

If you prototype in AE, you're going to be disappointed.

The web is nowhere near as robust as AE when it comes to motion graphics.

It really just depends on your programming level and the tools at your disposal, I suppose. I would much rather prototype in an actual web page that way I'm sticking to the "laws of the web" and have something to build on once the project is a go.

Then again, I've been doing web work for quite some time, and have a nice collection of tools available for rapid prototyping, even with animations.

Vote Up Vote Down

@Murray664

I'm more of an After Effects guy than web design so I can't really give an professional opinion from a web standpoint but you can definitely design really nice UI's with After Effects, actually many UIs seen in movies are made in After Effects (with some of the assets made in PS and AI of course).

It doesn't have such highly sophisticated vector tools like Illustrator or drawing tools like Photoshop (actually barely any "drawing" features at all) but the way it works makes it easy to create a UI in a parametric approach which I think makes it a lot easier to translate later on into a CSS.

As CSS is purely parametric as well you can often just easily copy offset values, width values, length etc. from AE to your CSS, overall you build your design with a kind of similar logic as your end product, which can be helpful.

You can even place elements in a similar "place this element based on the position of this element" kind of way in AE by using parenting and expressions.

Where AE of course outperforms both PS and AI is when you plan on having a fancy website with a few animations. There is really nothing better and faster to easily create an animated UI than After Effects.

And of course the wide variety of effects really help develop certain styles, even If I do a static design in Photoshop I often bring it into After Effects for more advanced coloring which would take much more work with the tools available in Photoshop. There are really a ton of great tools available for AE that help with getting a specific look done.

And lastly its nearly impossible to have a destructive workflow and much more friendly when it comes to making changes to any part of your design than Photoshop.

Regarding exporting any of your work I can really recommend redfinery's Render Layers script. It enables you add all your layers to the render queue as individual assets, very essential script when doing such work. Unfortunately his site has gone into hiatus for months now but the direct links to the (free) scripts still work: Download

Also really good to know is that when you copy keyframes in AE they will end up as human readable text values in your clip board, which is great for translating more complex AE animations into CSS animations as exact as possible.

Vote Up Vote Down