MockUps - Prototyping UI using After Effects. Is it worth it?


#1

Hello everyone, I am a visual Designer and currently work as a UI_UX designer at the company I work for. I wanted to ask my colleagues here and front-end Devs as well your opinion about presenting After Effects animations in order to detail how the interaction will be in certain Design. Do you find this useful?

In this link you can find one example of what I am talking about:

https://www.behance.net/gallery/52672469/Animated-Mockup-APP-Merkus

Note: This takes much more time than using another prototyping tool but I find it really useful in the implementation process because it permits a seamless view of what designers want to be done.

I need your opinions, pros & cons or whatever you want to share. Thanks a lot.


#2

I see huge value in terms of communicating intent – esp to stakeholders that aren’t designers or developers. The static nature of wireframes is always a bit frustrating in that way.

That said, I guess you need to weigh up the ROI in terms of time spent. It would depend on how big the project is, what the budget is, how much animation is involved etc. I guess if there were just one or two animations that were pivotal to the design then including this would make sense. I think you’d need to be pretty disciplined in your decision making around what to prioritise.


#3

Totally agree! thanks for responding.


#4

No worries. Welcome to the community. :slight_smile:


#5

Hello @calvingaviria,

I’m a proponent of communicating solutions to developers and stakeholders with more than just static wireframes. AE has become a tool that many UX designer use to further enhance their vision with animations and transitions. @HAWK brings up a good point regarding time and ROI.

The primary issue that I’ve experienced is that the developers still need to translate your ideas to code which takes time, especially if you want it to be perfect. I’ve come across a few resources that help close this gap. You might want to take a look at them. I’m always looking for ways to optimize and minimize time to market for a product/feature.


#6

One other thing @calvingaviria regarding animations for websites/apps: if you don’t already have knowledge of CSS animations, how they work, what you can create…basically know the medium and its limitations. This will help extensively when creating realistic animations.


#7

Thanks for replying! actually I’ve been trying those tools and they’re awesome! It is easy to translate an animation made in AE into an SVG animation that works very good in apps and web (vector). I’m still learning a lot about this so I’ll keep you updated if something cool comes up!


#8

I know I’m late to this…but if you’re on a Mac have you heard of Principle? I’m still a beginner as far as being exposed to this app is concerned, but it’s much more basic than AE and can produce the same animated effects much more quickly. I recently was part of a group a project in my UX/UI bootcamp and we presented an animated prototype using Principle and it went over very well.

http://principleformac.com/

That said, AE is probably better and making sure things are super precise…also if you’re on PC then everything I just said is moot :slightly_smiling_face: