Adobe After Effects for UI/UX Designers

Name: Adobe After Effects for UI/UX Designers
Rating: 4.3 (74 reviews)

Level up your UI design skill with motion graphics animation

Created byCameron Perry

Last updated 8/2021

English

English [Auto],

What you'll learn

Will will learn the basics of Adobe After Effects
You will learn how to create animated prototypes of your app/software using Adobe After Effects
You will be given tips on how to successfully animate for UX/UI

Course content

4 sections • 20 lectures • 1h 37m total length

Introduction2:03
Master the basics of After Effects to prototype and animate UI designs for UX, from setting up a project to animating a prototype app and presenting polished animations to stakeholders.
After Effects Basics2:29
Learn the basics of after effects for UI/UX designers, including a quick UI tour and how to create your first composition with 390x844, 60 fps, and a one-minute duration.
Design Tools in After Effects1:27
Explore the After Effects toolbar basics, including selection, hand, shape, pen, and text tools, plus editing options like color, stroke thickness, and character and paragraph panels.
Intro to Keyframing3:28
Master keyframing in After Effects by animating position, scale, rotation, and opacity through timeline-based keyframes, adjust timing, and learn how anchor points and the pan behind tool shape motion.
Intro to Easing3:12
Master easing to create natural, smooth animations in After Effects by using easy ease, the graph editor, and bezier handles to control the speed graph.
Masking and Parenting3:55
Master masking, blending modes, and parenting in After Effects to create dynamic UI animations. Use track matte, pen and ellipse tools to shape masks and link layers for coordinated motion.
Pre Composing (Grouping)1:51
Explore pre comps in After Effects to group multiple layers, edit nested comps, and adjust dimensions, frame rate, and length, then practice keyframing and easing in an upcoming exercise.
Animation Exercise7:01
practice essential after effects techniques by building a bouncing ball animation in a 24fps composition that teaches key framing, easing, and squash-and-stretch using position and scale.

Designing for Animation and Preparing Your Designs2:25
Prepare your designs for animation in after effects by creating art boards or scrollable cards, and plan color changes and interactive details to build a realistic prototype.
Exporting from XD to After Effects2:12
Export your XD designs to After Effects, ensure grouped objects stay together, provide a background shape to set comp size, then import as native editable layers and set 60 fps.
Exporting from Sketch or Figma to After Effects1:07
Learn to move designs from Sketch or Theama into After Effects by exporting via Adobe XD, then to After Effects, or use the AIU X plugin for easy transfers.
Setting Up Your After Effects Project2:14
Download a ready-to-go After Effects project, then organize compositions, color code layers, and set up parenting before planning animations for a smooth UI/UX workflow.
Planning Out Your Animations (Shot Listing & Storyboarding)7:27
Plan your UI animations with a clear goal, using shot lists and storyboards to communicate ideas, from scroll and card tap transitions to prototype-ready sequences for After Effects.

Animation Part 113:31
Animate a recipe app in After Effects with a scroll parallax. Use pre-composed cards, masks, and track matte, then apply keyframes and easing to create a polished UI animation.
Animation Part 210:05
Create a master composition in after effects to host screens, animate a tap-to-swipe from main screen to recipe page with linked layers, easing, and white background; add an interaction cursor.
Animation Part 39:56
Master a top menu swipe in After Effects, composing and cropping to region of interest, applying trim paths, and fading breakfast to dinner with opacity transitions for a polished UI.
Animation Part 415:27
Animate a plus button fade, then have a new recipe screen pop into view using scale and opacity, followed by typing the recipe title.
Exporting Your Animations2:02
Export the master composition by trimming the work area to the desired range. Name the file, keep the preset match source high bitrate, and export via the media encoder.

Tips for Setting up an Animated Demo5:22
Package your finished animations inside a phone mockup to present a polished, real-device look for stakeholders, using a track map, a master composition, and basic 3D adjustments in After Effects.
Conclusion0:39
Learn to animate your UI/UX designs in Adobe After Effects with the end-of-course resources document, and share feedback to improve future courses.

Requirements

Be familiar with UX/UI or Graphic Design

Description

Motion graphics animation has been around for a while, but only recently has it become a massively important tool for UX/UI designers. This course will teach you everything you need to know about Adobe After Effects for UX/UI animations and prototyping software designs using animation.

After Effects can be a bit of an overwhelming piece of software to learn, but luckily for you as a UX/UI designer, there are many parts of After Effects that you don't even need to know about or learn to be successful. I've cut out all the fluff in this course and just give you the absolute necessities to get the job done!

This course is not intended to be a UX/UI course, this is a full-on motion graphics animation course geared toward UX/UI designers. As such, you do need a base-level knowledge of UX/UI in order to have the necessary context to follow along.

Here are some things you'll learn:

- After Effects basics including the very important concepts of keyframing and easing

- How to export designs to After Effects and then set up those designs for animation

- How to plan animations for UX/UI designs

- How to animate and prototype an actual app inside of After Effects

- How to polish your animations for presentation

Along with all of the lectures provided in this course, you'll have access to the Adobe XD prototype app I use as an example throughout the course, the After Effects project file set up and ready to go, some app demoing assets, as well as an animation exercise to help familiarize yourself with basic After Effects concepts.

Get ready to become a UX/UI animation pro!

Who this course is for:

UX and UI designers
Graphic Designers
Illustrators
Software Developers

Adobe After Effects for UI/UX Designers

What you'll learn

Explore related topics

Course content

Introduction to After Effects8 lectures • 25min

Preparing Your Designs for Animation5 lectures • 15min

Animating Your Design5 lectures • 51min

Conclusion2 lectures • 6min

Requirements

Description

Who this course is for: