MOTION GRAPHICS MODULE
Learning Objectives
By completing this exploration, you will:
- Understand fundamental motion graphics principles including translation, scale, rotation, easing, and timing
- Apply animation thinking to static design through storyboarding and temporal planning
- Reinforce design fundamentals (balance, alignment, hierarchy, contrast, rhythm, proximity, color, space) in a time-based medium
- Gain introductory experience with industry-standard motion graphics software (After Effects or Figma Smart Animate)
- Explore how motion communicates brand personality and visual identity
Project Overview
Create an animated version of your final logo from Project 1, exploring how motion can enhance and communicate your logo’s brand identity. This is an introductory exploration focused on fundamental motion principles rather than complex animation techniques.
You will develop 3 distinct animation concepts as storyboards, then produce one final animated logo lasting 3-6 seconds.
Week 1: Storyboard Concepts
Due: Week 8 at End of Class
Requirements: Create 3 different storyboard concepts exploring varied approaches to animating your logo.
Each storyboard must include:- 6-8 keyframes showing major animation moments
- Timing notes (approximate seconds for each keyframe)
- Motion descriptions (scale, rotation, position, opacity, etc.)
- Easing notes (linear, ease-in, ease-out, bounce, etc.)
Conceptual Approaches to Explore
Consider animating your logo using different strategies:- Sequential Reveal - Elements appear or assemble one by one
- Transform/Morph - Logo evolves from one shape to final form
- Rhythmic Pattern - Repeating motion creates visual rhythm
- Scale & Emphasis - Dynamic scaling highlights hierarchy
- Spatial Journey - Logo travels through compositional space
- Color Transition - Color change creates visual narrative
Note: Each of your 3 concepts should explore meaningfully different approaches.
Presentation Format
- Figma storyboard template provided (or create your own)
- One page per concept with clear keyframe sequence
- Annotations explaining motion, timing, and easing decisions
- Brief written rationale (2-3 sentences) for each concept's approach
Week 2: Animated Logo Production
Due: Week 9 End of Class
Requirements for beginning of class: Select your strongest storyboard concept and produce it as an animated logo.
Technical Specifications:- Duration: 3-6 seconds
- Software: After Effects OR Figma Smart Animate (your choice)
- Dimensions: 1920 × 1080 px (Full HD)
- Frame Rate: 30 fps
- No sound/audio required
- Export Format:
- After Effects: MP4 (H.264 codec)
- Figma: Prototype link + screen recording as MP4
Animation Principles to Demonstrate
Your animation must demonstrate understanding of at least one of the following motion design principles:Translation & Transform:
- Position (x, y movement)
- Scale (size changes)
- Rotation
- Opacity/fade
- Appropriate animation duration (not too fast, not too slow)
- Easing curves (avoid purely linear motion)
- Purposeful pacing that supports brand personality
- Balance: Visual weight shifts over time
- Hierarchy: Animation guides viewer attention
- Contrast: Motion creates emphasis
- Rhythm: Repeated or varied motion patterns
- Proximity: Spatial relationships change dynamically
- Color: Hue, saturation, or value transitions
- Space: Thoughtful use of negative space and composition
Process Documentation
Include with your submission:- Final storyboard used for production
- After Effects screenshot showing timeline/layers OR Figma prototype settings screenshot
- Brief reflection (100-150 words): What motion principles did you apply? How does animation enhance your logo's brand identity?
Submission Requirements
Week 8 Submission
- 3 storyboard concepts in Figma (shared link)
- Uploaded to class shared folder by end of class
Week 9 Submission
File naming:firstinitiallastname_vds_fa25_logo_animation.mp4Submit via class shared folder:
- Final MP4 animation file
- Final storyboard PDF
- Process documentation (screenshots + reflection) as single PDF
Assessment Criteria
This assignment is worth 5% of your final grade (included as an extension of the Logo Project ).
Storyboard Concepts (40%)
- Concept Diversity (20%): Three meaningfully different approaches explored
- Storyboard Clarity (10%): Clear visual communication of animation sequence
- Technical Planning (10%): Thoughtful timing, easing, and motion notes
Final Animation (50%)
- Motion Principles (20%): Effective use of translation, easing, and timing
- Design Fundamentals (15%): Balance, hierarchy, contrast, rhythm applied to time-based design
- Technical Execution (15%): Clean animation, appropriate pacing, professional export quality
Process Documentation (10%)
- Reflection demonstrates understanding of motion graphics principles
- Clear documentation of production process
Software Tutorials & Resources
After Effects Basics
- LinkedIn Learning: "After Effects Essential Training"
- YouTube: "After Effects for Beginners 2024"
Figma Smart Animate
- Figma Tutorial: "Prototyping with Smart Animate"
- YouTube: "Figma Smart Animate Tutorial" by Figma
Motion Graphics Principles
- Easing Functions Cheat Sheet: easings.net for timing curve visualization
Workshop Structure
Week 8: Motion Graphics Fundamentals
- Lecture: Principles of motion design and animation fundamentals
- Demo: Introduction to After Effects AND Figma Smart Animate
- Workshop: Storyboard development with peer feedback
- Homework: Choose one 3 storyboard concept and begin animating
Week 9: Motion Graphics Production
- Showcase: Present animation prototypes
- Workshop: Hands-on animation production with Professor support
- Lab Time: Individual work on animation production
- Homework: Complete final animated logo + documentation
Tips for Success
- Start Simple: Focus on executing fundamental principles well rather than attempting complex effects
- Think About Brand: How can motion reinforce your logo's personality? Fast and energetic? Smooth and elegant?
- Use Easing Intentionally: Almost nothing in real life moves at constant speed—avoid linear motion
- Test Timing: 3-6 seconds is shorter than you think! Make every moment count
- Watch It Loop: Does your animation work if played on repeat?
- Seek Feedback Early: Share work-in-progress in Discord for peer feedback
- Don't Overthink Software Choice: After Effects has more features, but Figma Smart Animate may be faster to learn if you're new to motion
Frequently Asked Questions
Q: Should I animate the entire logo or just parts of it?
A: Either approach works! You might animate individual elements, the whole logo, or a combination. Consider what best serves your brand personality.
Q: Can I use motion blur or other effects?
A: Yes, but focus on fundamentals first. Effects should enhance, not obscure, your core motion principles.
Q: What if I've never used After Effects or animated anything before?
A: That's expected! This is an introductory exploration. Focus on simple, well-executed motion rather than complexity.
Q: Can I use pre-made templates or presets?
A: You must create the animation yourself, but you're welcome to learn from tutorials and adapt easing curves from presets.
Q: My logo is very simple—how do I make it interesting for 3-6 seconds?
A: Consider: How does it enter the frame? What happens before the final reveal? Simple logos can have elegant, sophisticated animations.
Q: Should all 3 storyboards be the same duration?
A: They can vary! One might be a quick 3-second reveal, another a slower 6-second transformation. Explore different pacing.
Academic Integrity Note
All animation work must be your own original creation. You may:
- Learn from tutorials and apply techniques
- Use easing presets or timing references
- Discuss approaches with classmates
You may NOT:
- Use pre-made animation templates that do the work for you
- Copy another designer's animation concept without significant transformation
- Submit work created by AI animation tools without explicit instructor permission
When in doubt, ask!
Questions? Reach out on Discord or request a meeting during office hours (by appointment).
Looking forward to seeing your logos come to life!
A motion design moment of zen form the vault: