After Effects for UX Design

Learn techniques you can use to prototype motion and interactions using Adobe After Effects CC 2018.

Introduction

• Welcome
• Exercise files

1. Microinteraction Fundamentals

• The importance of the composition
• Prototyping motion
• The role of easing
• Using the Graph Editor
• Working with shapes
• Using masks
• The joy of parenting

2. The Common Gestures

• The tap gesture
• The double-tap gesture
• The long press
• The swipe gesture
• Creating a pinch or spread gesture
• Demo on a device

3. Design Patterns

• Buttons and breadcrumbs
• Bottom navigation
• Making a switch
• Creating a progress bar
• Creating a circular progress bar
• Showing progress with value
• Working with modals
• Slide-out menus
• Cards

4. Microinteractions

• Morphing objects
• Building a bounce ease
• Creating the "jelly effect"
• Zooming content
• Filling objects with color
• A pulsing cursor
• Floating action button
• Ripple effect
• Text input
• Adding cursors

Conclusion

• Next steps