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 and got my thinking whether that approach can be a viable alternative to Photoshop or Illustrator for UI designs.

The design he produced was very simply so it doesn’t show me what AE is really capable of in regard to more complex UIs. Has anyone used AE to create a relatively complex UI mockup before? What are the pros and cons of using this approach vs Illustrator/Photoshop? (Aside from the obvious benefits of video transitions, I mean specifically in regard to creating static pages, is it very difficult to create complex UIs?)


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.

Source : Link , Question Author : parliament , Answer Author : timonsku

Leave a Comment