AI Skill Report Card
Creating Brand Motion Content
Quick Start15 / 15
JavaScript// After Effects composition setup for web const webComposition = { frameRate: 30, // 60fps for premium feel, 24fps for cinematic dimensions: "1920x1080", // 16:9 base, adapt for 9:16 and 1:1 colorSpace: "Rec. 709", duration: "0:00:15:00" // 15 seconds max for social }; // Lottie export settings const lottieExport = { bodymovinVersion: "latest", jsonOptimization: true, compressImages: true, maxFileSize: "500KB" // critical for web performance };
Recommendation▾
Add specific bitrate/file size targets for each social platform (Instagram vs TikTok vs LinkedIn)
Workflow14 / 15
Progress:
- Composition Setup: Create 16:9 master at 1920x1080, 30fps, Rec. 709
- Brand Alignment: Import brand colors, typography, logo variations
- 3-Second Hook: Design opening that communicates value immediately
- Caption Design: Create layouts that work with/without sound
- Format Adaptation: Generate 9:16 (1080x1920) and 1:1 (1080x1080) versions
- Lottie Export: Use Bodymovin plugin, optimize JSON under 500KB
- Video Compression: Export H.264 with target bitrates by platform
- Thumbnail Creation: Design static frame that maximizes click-through
Recommendation▾
Include a template section with exact After Effects project structure and naming conventions
Examples18 / 20
Example 1: B2B Product Demo (15s) Input: SaaS dashboard feature launch Output:
- 0-3s: Problem statement with bold typography
- 3-10s: Solution demonstration with UI animation
- 10-15s: CTA with brand colors and logo
- Formats: 16:9 (LinkedIn), 9:16 (Stories), 1:1 (Instagram feed)
Example 2: Lottie Web Animation Input: Loading spinner for web app Output:
JSON{ "v": "5.7.4", "fr": 30, "ip": 0, "op": 60, "w": 200, "h": 200, "nm": "brand-loader", "assets": [] }
File size: 45KB, seamless loop, brand colors
Recommendation▾
Provide concrete timeline breakdowns for different content types (brand story vs product demo vs testimonial)
Best Practices
Composition Setup:
- Use 30fps for social (smooth motion, manageable file sizes)
- Set color space to Rec. 709 for web consistency
- Create compositions 20% larger than final output for cropping flexibility
Brand Integration:
- Extract exact hex codes from brand guidelines
- Use brand typography as After Effects text layers (not images)
- Maintain 2:1 contrast ratio minimum for accessibility
Format Strategy:
- Master in 16:9, adapt don't recreate for other ratios
- 9:16 for Stories/Reels: move key elements to center third
- 1:1 for feeds: square crop with padding, not stretch
Video Compression Targets:
- Web hero videos: H.264, 5-8 Mbps
- Social media posts: H.264, 2-4 Mbps
- Background loops: WebM, 1-2 Mbps
- Email/low-bandwidth: H.264, 500 Kbps
Lottie Optimization:
- Keep animations under 500KB for web performance
- Use shape layers instead of AI files when possible
- Enable "Export hidden layers" only when necessary
- Test on lottie-web before delivery
Common Pitfalls
- Auto-generated thumbnails: Always design custom thumbnails with clear value proposition
- Sound dependency: Design for muted viewing first, audio as enhancement
- Brand inconsistency: Don't modify brand colors for "better" animation - adapt motion instead
- Format stretching: Never stretch 16:9 content to fit square - crop or redesign key frames
- Lottie complexity: Avoid masks, effects, and 3D layers that bloat file size
- Generic motion: Cookie-cutter transitions don't align with brand personality
- Caption overlap: Leave safe zones for platform-added captions and UI elements