After Effects for UX Design

On July 26, 2018

Release date:2018, April 30

Duration:03 h 21 m

Author:Tom Green

Language:English

Exercise files:Yes

Learn a variety of techniques you can use to prototype motion and interactions using Adobe After Effects CC 2018. The course starts with a review of the AE interface, showing how to set up After Effects for working on UX projects. The course then covers how to prototype gestures and micro-interactions using animation tools; how to create and export an app with interaction previews for client and team reviews, and more.

Topics include:

Prototyping motion
Easing
Using the Graph Editor
Working with shapes and masks
Supporting tap, press, and swipe gestures
Handling pinch and spread gestures
Designing patterns
Making navigation, buttons, and breadcrumbs
Creating progress bars
Working with modals, menus, and cards
Zooming content
Making a floating action button
Handling text input and cursors

Table of Contents

0.Introduction
Welcome 1m 12s
Exercise files 1m 28s
1. Microinteraction Fundamentals
The importance of the composition 4m 10s
Prototyping motion 7m 17s
The role of easing 2m 22s
Using the Graph Editor 5m 52s
Working with shapes 6m 43s
Using masks 4m 25s
The joy of parenting 3m 43s
2. The Common Gestures
The tap gesture 5m 48s
The double-tap gesture 3m 52s
The long press 4m 22s
The swipe gesture 6m 40s
Creating a pinch or spread gesture 4m 52s
Demo on a device 4m
3. Design Patterns
Buttons and breadcrumbs 9m 54s
Bottom navigation 6m 21s
Making a switch 9m 13s
Creating a progress bar 3m 12s
Creating a circular progress bar 3m 42s
Showing progress with value 4m 23s
Working with modals 8m 45s
Slide-out menus 10m 48s
Cards 7m 19s
4. Microinteractions
Morphing objects 7m 48s
Building a bounce ease 5m 33s
Creating the “jelly effect” 8m 15s
Zooming content 6m 16s
Filling objects with color 9m 2s
A pulsing cursor 8m 21s
Floating action button 7m 1s
Ripple effect 6m 54s
Text input 4m 38s
Adding cursors 5m 58s
Conclusion
Next steps 1m 21s