After Effects for UX Design
3h 22mBeginner2018-04-30
Authors
Tom Green
Teacher, Author, Professor
Course details
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.
Learning objectives
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
Learning objectives
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
Skills covered
Motion GraphicsUX DesignAfter EffectsRenderingUser ExperienceMotion Graphics and VFXProjectVisualization and Real-TimeAdobeAECProduct and ManufacturingAnimation and IllustrationWeb Development
Concepts
0. Introduction
- 01 - Welcome
- 02 - Exercise files
1. Microinteraction Fundamentals
- 03 - The importance of the composition
- 04 - Prototyping motion
- 05 - The role of easing
- 06 - Using the Graph Editor
- 07 - Working with shapes
- 08 - Using masks
- 09 - The joy of parenting
2. The Common Gestures
- 10 - The tap gesture
- 11 - The double-tap gesture
- 12 - The long press
- 13 - The swipe gesture
- 14 - Creating a pinch or spread gesture
- 15 - Demo on a device
3. Design Patterns
- 16 - Buttons and breadcrumbs
- 17 - Bottom navigation
- 18 - Making a switch
- 19 - Creating a progress bar
- 20 - Creating a circular progress bar
- 21 - Showing progress with value
- 22 - Working with modals
- 23 - Slide-out menus
- 24 - Cards
4. Microinteractions
- 25 - Morphing objects
- 26 - Building a bounce ease
- 27 - Creating the jelly effect
- 28 - Zooming content
- 29 - Filling objects with color
- 30 - A pulsing cursor
- 31 - Floating action button
- 32 - Ripple effect
- 33 - Text input
- 34 - Adding cursors
Conclusion
- 35 - Next steps