Visão Geral

Este curso ensina como criar animações profissionais para interfaces digitais usando Adobe After Effects e exportação otimizada com Lottie. Você aprenderá a desenvolver microinterações, transições, animações para telas de apps e web, ilustrações animadas e elementos visuais prontos para uso em produtos reais. O foco é unir motion design e UI/UX, criando animações leves, fluidas e que funcionam diretamente no código.

Objetivo

Após realizar este curso, você será capaz de:

• Criar animações profissionais para produtos digitais
• Desenvolver microinterações e transições para UI
• Produzir animações otimizadas no After Effects usando plugins compatíveis com Lottie
• Exportar animações leves e funcionais para uso em apps e web
• Integrar Lottie em diferentes ambientes (React, Web, iOS, Android)
• Criar uma biblioteca animada de componentes e ícones

Publico Alvo

• Designers UX/UI e Product Designers
• Motion Designers que querem atuar em produtos digitais
• Desenvolvedores interessados em integrar animações em apps e sites
• Estudantes de design
• Profissionais que desejam elevar a qualidade visual de suas interfaces

Pre-Requisitos

• Noções básicas de UI/UX Design
• Familiaridade inicial com After Effects é desejável, mas não obrigatória

Conteúdo Programatico

Module 1 – Introduction to Motion for Interfaces

1. Motion in UI/UX: principles and purpose
2. Types of interface animations
3. Understanding Lottie and its workflow
4. Best practices for lightweight animations

Module 2 – After Effects Essentials for UI Motion

1. Workspace and tools overview
2. Shape layers, masks and keyframes
3. Timing, easing and animation curves
4. Preparing assets for animation

Module 3 – Microinteractions for UI

1. Button animations (hover, press, loading)
2. Success, error and feedback states
3. Animated icons and transitions
4. Interaction choreography

Module 4 – Motion Principles Applied to Interfaces

1. Anticipation, follow-through, overshoot
2. Smooth motion curves for digital products
3. Creating depth and hierarchy through animation
4. Motion accessibility considerations

Module 5 – Designing Animated Components

1. Animated toggles, switches and tabs
2. Navigation transitions
3. Modal and overlay animations
4. State transitions for components

Module 6 – Screen and Page Transitions

1. Page flows and navigation animations
2. Hierarchical transitions
3. Dashboard and card reveal animations
4. Storytelling with motion

Module 7 – Exporting Animations with Lottie

1. Preparing layers for Lottie
2. Using Bodymovin plugin
3. Supported vs. unsupported AE features
4. Optimization and lightweight exports

Module 8 – Integrating Lottie in Applications

1. Using Lottie on the Web
2. Lottie in React/Next.js
3. Lottie in Android and iOS
4. Performance considerations

Module 9 – Advanced Animations for Products

1. Data-driven animations
2. Logo animations for onboarding
3. Empty states and illustration animation
4. Animation systems and consistency

Module 10 – Building a Motion Library

1. Structuring a motion component library
2. Naming conventions and versioning
3. Delivery and documentation
4. Collaboration with developers

Module 11 – Final Project

1. Full UI animation package (components + screens)
2. Lottie export and integration demo
3. Presentation and review