The web-design industry moves fast. New releases of software and design trends occur almost on a weekly basis! However, it is clear that Adobe’s After Effects has become one of the most popular and powerful tools to today’s UI, UX and interface designers, due to its extensive range of features and ease of use.

Gone are the days when technology simply had to perform a task. Now we want eye-catching, animated interactions that also serve a functional purpose. This blog will cover just some of the benefits After Effects offers today’s designers, from prototyping micro-interactions to planning out complex user journeys.

Gif

Source: Dribble

What is After Effects?

After Effects is used to create digital motion graphics and high quality visual effects. It can also be used for basic video editing, although is not as complex as Adobe Premier. In regards to video, After Effects is ideal for adding effects after footage has been cut and edited. It works by using the layers system; having digital elements stacked on top of each other with each layer capable of being edited and animated. The finished animations or videos can then be displayed in a variety of formats, the most popular being GIF or MP4.

UX Planning

“Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.” 

Google Material Design Principles

Motion is an important element of UX that can sometime be ignored or forgotten. Designers can find it difficult explaining to clients the work process and transitions of their designs using a flat wireframe, especially when the project is complex. Animations and videos can display in seconds a process that might take minutes to explain, leaving a client delighted and reassured instead of confused. This method also creates the opportunity to identify any problems or alternative solutions to the UX journey at a much earlier stage, as clients will have a much clearer understanding of what to expect from the finished project.

 

Source: Dribble

UI Prototyping

Just like with UX Planning, animated UI prototypes display visually what design and micro-interactions to expect from upcoming projects. Clients get to see the look and feel of what the finished product will look like, which will speed up the project timeline. And in a similar manner to UX planning, UI prototyping gives the opportunity to identify any potential problems from an early stage. Reassuring clients about the thought process that went into the design and micro-interactions helps them understand how you approached the project as a designer, and why you made the decisions you did. Seeing how the elements move and interact creates the illusion of reality. By using animated visuals in this way, clients can get excited about the work in progress and start thinking outside the box about any ways to further improve.

Video

Having a variety of videos featured in websites is quite common these days, whether as looped headers or set in individual pages to help explain information e.g. How we work. Videos can be invaluable when trying to explain complicated processes, as they not only explain huge amounts of information in a much lesser time, but as users we are drawn to them more than reading text.

After Effects is a really quick and easy tool for formatting video to websites. It simply has to be imported, cut to the right length and exported in whatever format is best. The effects library is very extensive, listing hundreds of built-in effects that can transform a simple everyday video into something much sleeker.

Cinemagraphs

Animated GIFs have adopted a new twist that is taking the advertising and social media world by storm. A Cinemagraph is a “medium in which individual instants of motion are isolated against a static image.“ Jamie Beck and Kevin Burg

They have become increasingly popular in recent months due to the fact they unexpectedly catch our eye and stand out in a sea of advertisements and photographs. In simple terms, a Cinemagraph is a looped photo showing a small amount of motion.  They have the power to deliver a message using a few simple animated frames, eliminating the need for flashy headers, and as such stand out from the crowd.

After Effects is a great tool for creating Cinemagraphs as you can smooth the stream in the loop, and create a sharper mask between the animated layer and static layer. Photoshop can also be used for creating Cinemagraphs but can only save them as GIFs, which some apps don’t support e.g. Instagram.

Gif

Source: Tripwire Magazine

Other Software

Because After Effects is an Adobe product, it is very compatible with Photoshop and Illustrator. It allows imports of both PSD and AI files into its compositions. Importing PSDs especially gives users the option of having editable layers, which can be very useful when organising the different elements into a layer hierarchy. Users also have the ability to edit text on the PSD layers while working on the After Effects composition.

Review

There’s no doubt that After Effects is an incredibly powerful and flexible piece of software. And it’s no surprise that many designers are taking the time to learn their way round it. The uses listed here are only a few of the possibilities offered by After Effects, as designers are constantly finding new, innovative ways to incorporate it into the web industry. It's clear to see why it has become a firm favourite of the Adobe suite in a very short amount of time.