After Effects Web Prototyping

Prototyping and experimenting with UX interactions in a web environment can be very challenging. One of the processes that I have started working through for this is creating grayscale prototypes in After Effects to show would these behaviors could start to look like.

I know that there are a ton of prototyping tools out there. But, from what I have seen in my experience a lot of them do not focus on user action/animation. So, what I have ended up doing is working through this in After Effects.

I set my comp up to the width of the projected grid size and kind of arbitrarily select a height. I’ll then recreate my wireframe often based off of something that has been sketched out. I’ll then bring in a cursor and start to make a theoretical use case for how the information on screen can be interacted with. It has been very helpful for showing searches, how things should work in real time, navigation experiences, and a bunch of other small interactions that make a big difference in a web project.

Here is a grayscale After Effects video that goes through the navigation, footer behavior, sidebar behavior, search functionality, and a find a doctor tool:

Working through these user actions in this way allows for a lot of emphasis to be placed on thinking through them. It also, allows for effective internal team discussions, as well as showing the client what the product will start to behave like. This type of visualization goes a long way in being able to just show what the damn thing will look like, instead having to write it up or verbally explain it in so much detail (which somehow always leaves some level of disconnect).

This type of UX design is something I would recommend to anyone that designs digital experiences to explore. If you have never used After Effects there are a ton of tutorials out there that can help you through some basic things (, EnvatoTuts+, etc…).

Be the first to leave a reply!

Leave a Comment

* required