Signal for Help
The Canadian Women’s Foundation | 2023
Designed to Move: From Illustrator to After Effects
Clean vector art isn't just visually appealing—it's built with motion in mind. By drawing simple, stylized scenes in Adobe Illustrator, we keep the aesthetic crisp and modern while laying the groundwork for smooth animation.
Every detail—from the car and fence to the background trees and floating sun—is meticulously split onto its own layer.
This smart file setup gives us total control in After Effects to animate each piece independently, bringing a flat, line-art world to life without clutter or fuss (usually!).
Screens in the Wild: Grounding UI in Real-World Scenarios
Instead of showing a floating app screen in a sterile vacuum, this piece places the technology right into a comfortable, relatable space.
By showing a character sitting down with their tablet in a cozy living room, it bridges the gap between software and real life.
It makes complex workflows or learning modules feel human, approachable, and easy to envision in everyday use.
From static art to motion
Ever wonder how a flat illustration actually starts moving? It’s all in the prep work!
First, I chop the artwork into separate, clean layers—eyes, limbs, background props, you name it.
Then comes rigging (giving those pieces joints to turn on), setting key poses for timing, and smoothing out the speed curves so the motion feels snappy and natural instead of robotic.
The Animatic: Testing the Waters Before We Animate
Think of an animatic as the rough draft that saves the day.
It’s essentially a moving storyboard synced to music or audio, letting us test the timing, cuts, and overall vibe before jumping into heavy production.
It keeps the story tight, prevents wasted hours on frames we don't need, and makes sure we're totally aligned before the real magic starts.
Lean UI Storytelling
Great design isn't just about making pretty visuals—it's about knowing where to focus the budget.
By swapping out full custom character illustrations for a sleek simulated text thread, we can move a story along super fast without blowing the scope. It breaks up static screens, feels completely relatable, and saves those big visual "hero" moments for when they hit hardest.
Inclusive by Design: Meeting Learners Where They Are
WCAG Compliance & Captions: Following WCAG standards is a baseline for every project. Adding clear captions and transcriptions isn't just crucial for deaf or hard-of-hearing users—it benefits anyone watching on mute, learning in a noisy room, or processing text better visually.
Device-First Needs Analysis: During initial research, we figure out how people actually consume the content. Are learners grabbing two minutes on their phones during a break, or sitting down for a desktop module? Structuring assets responsively ensures a seamless experience on any screen.
Bandwidth & Rural Wi-Fi Realities: High-speed internet isn't a guarantee, especially across rural Canada. To prevent spotty Wi-Fi from buffering a lesson to death, video files are heavily compressed, motion graphics are built light, and text alternatives are provided so the core message always lands smoothly.
Cohesive Visuals: Why a Clear Style Guide Matters
When a project spans multiple scenes, topics, and formats, a solid illustration style guide is the glue holding it all together.
By defining a consistent line weight, a controlled color palette, and unified character features upfront, every asset feels like it belongs to the same visual universe.
Whether showing a video call, step-by-step hand gestures, or internal thoughts, sticking to a clear style keeps the entire learning experience polished, professional, and easy to follow.
