5

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?)

Improve this question
2
  • For prototyping, sure. If it works for your needs. For BUILDING a site? No.
    – DA01
    Jul 25, 2014 at 20:51
  • To demonstrate motion concepts After Effects can be good. Go for it.
    – user32412
    Oct 18, 2014 at 23:43

3 Answers 3

Reset to default
3

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.

Improve this answer
1
  • 1
    Definitely, you can't just translate everything from AE into HTML5. Though there were some efforts to make a plugin for AE to export to HTML5, which worked to some degree but I think it never hit the market. When you restrict that someone to only use standard "Transform" property animations you won't have any issues though. Those are a set of properties every layer has and are very well translatable into CSS animations.
    – timonsku
    Jul 26, 2014 at 19:58
2

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.

Improve this answer
0

You can and I do. Some people create flow diagrams, and if you are the type that needs to see, create the website in AE, to plan the steps of what to do next. Of course it makes video, which is not helpful all the time for web, but there are packages out there that converts your AE effects and exports the javascript code.

I think if you wanna create something different use AE. If you want to create a basic website there’s no need. If you are just doing a UI/UX, pick when it’s helpful to create powerful effects that you can export

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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