Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

migrated from video.stackexchange.com Jul 25 at 18:56

This question came from our site for engineers, producers, editors, and enthusiasts spanning the fields of video, and media creation.

    
For prototyping, sure. If it works for your needs. For BUILDING a site? No. –  DA01 Jul 25 at 20:51
    
To demonstrate motion concepts After Effects can be good. Go for it. –  Don Droga yesterday

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
    
Would you agree that before designing a mockup in AE, you should have a strong understanding of web standards in general? I can imagine receiving a file from someone who has only ever designed with AE, and having to explain why much of it is either not possible, or not a good idea for various reasons. –  Mr E. Upvoter Jul 26 at 19:45
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. –  Professor Sparkles Jul 26 at 19:58

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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