Overview
Explorations in motion design that blend visual storytelling, typography, and interaction thinking.
Impact: Created motion pieces and UI animations that reinforced brand personality and usability.
Key Accomplishments
- Designed motion studies to communicate interaction concepts to stakeholders and engineers
- Used tools like Adobe After Effects and Figma to prototype micro-interactions
- Explored how motion can guide attention and make complex flows feel effortless
- Created brand animations for product launches and marketing campaigns
- Developed reusable animation patterns for design systems
Motion Design Philosophy
Purpose Over Flash
The best motion design serves a purpose. Whether it's guiding attention, providing feedback, or reinforcing brand personality, every animation should have a clear job to do.
Subtlety and Polish
Effective UI animations are often subtle. Small movements, carefully timed transitions, and thoughtful easing can make interfaces feel responsive and alive without being distracting.
Storytelling Through Motion
Motion graphics tell stories. I use animation principles like anticipation, timing, and follow-through to create narratives that engage and inform.
Types of Motion Work
Micro-Interactions
Small animations that provide feedback and delight: button hovers, loading states, success confirmations, and transitions that make interfaces feel polished and responsive.
Prototype Animations
Motion studies used to communicate interaction concepts to stakeholders and engineers. These help teams align on how features should feel before implementation.
Brand & Marketing Animations
Explainer videos, product demos, and marketing assets that bring brand personality to life through typography, color, and movement.
UI Animation Systems
Reusable animation patterns documented within design systems. Defined timing curves, transition durations, and interaction patterns that maintain consistency across products.
Tools & Techniques
- Adobe After Effects for complex motion graphics
- Figma for UI animations and prototypes
- CSS animations and JavaScript libraries (Framer Motion, GSAP)
- Lottie for lightweight animation delivery
- Principle and ProtoPie for interaction prototyping
Motion Principles Applied
- Timing & Easing: Natural feeling animations with appropriate acceleration and deceleration
- Anticipation: Preparing users for what's about to happen
- Follow-Through: Elements don't stop abruptly; they ease into rest
- Hierarchy: Using motion to guide attention to what matters most
- Personality: Animations that reinforce brand character and tone
Skills Demonstrated
- Motion design and animation
- UI micro-interactions and transitions
- Visual storytelling
- Typography and kinetic type
- Video editing and post-production
- Prototyping and interaction design