Prototyping Microinteractions with After Effects

Capture the subtle details of your UX design. Learn how to create and prototype microinteractions using Adobe After Effects.

Introduction

• What this is all about
• What you need to know

1. Microinteractions

• What are microinteractions?
• Why do we need microinteractions?
• Why After Effects?

2. Preparing Your Workspace

• Preparing comps in AE
• Using the timeline
• Using markers
• Keyboard shortcuts
• Adding keyframes
• Using eases
• Using the Graph Editor
• Using the AE tools

3. Fundamental Microinteractions

• 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

4. Content for Microinteractions

• Photoshop
• Importing Photoshop into After Effects
• Illustrator
• Importing Illustrator into After Effects
• Adobe Experience Design (XD)
• Create a microinteraction from an XD import

5. UI Microinteractions

• 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

Conclusion

• Next steps