-
Capture the subtle details of your UX design. Learn how to create and prototype microinteractions using Adobe After Effects.
After Effects is more than a video effects application. For UX designers, itâs a go-to tool for prototyping. With After Effects, designers can create small but meaningful interactionsâmicrointeractionsâthat communicate details such as timing and visual feedback to developers and clients. In this course, Tom Green shows how to build microinteractions in After Effects, using features such as the Graph Editor, easing, and Keyframe Velocity. Develop your skills as you work your way through simple projects, from taps to swipes, and then dive into more advanced projects that integrate Photoshop, Illustrator, and Adobe XD. In these hands-on exercises, you can learn how to prototype more complex designs, such as accordion menus and 3D interactions. Each lesson shows how to capitalize on the motion-driven workflow in After Effects to capture the subtle details of your design.
Overview
Syllabus
-
Introduction
- What this is all about
- What you need to know
- What are microinteractions?
- Why do we need microinteractions?
- Why After Effects?
- Preparing comps in AE
- Using the timeline
- Using markers
- Keyboard shortcuts
- Adding keyframes
- Using eases
- Using the Graph Editor
- Using the AE tools
- Using primitives to create interactions
- Creating a cursor
- Creating a precomp
- Creating a simple click/tap
- Creating a double click/double tap
- Creating a long press
- Creating a drag
- Creating a swipe
- Creating a pinch/zoom
- Photoshop
- Importing Photoshop into After Effects
- Illustrator
- Importing Illustrator into After Effects
- Adobe Experience Design (XD)
- Create a microinteraction from an XD import
- Sequencing
- Transitions
- Animated containers
- Using a focal element
- Creating an overshoot
- Stretching elements
- Zooming
- Floating action button fundamentals
- Sticker sheets
- Arcs
- Text input
- 3D effects
- A pulsing cursor
- Wireframe a drawer
- Refining the slide-in drawer
- Card-based layouts
- The ripple effect
- Next steps
