Freeform Gradients, 2019. Softer selection animation for a softer feature.
Six years of in-app tutorial animations, teaching users new features inside the smallest possible frame. The first set built a motion language; every release after spoke it.
Every year, Adobe's Illustrator and InDesign teams shipped new features and needed a concise, beautiful way to bring them to new users. Highlighting what was new, getting people excited, and helping them learn. From new tooltips to logo-building workflows, our GIFs had to be small in both file size and resolution, but mighty in what they carried.
These couldn't be screen recordings. Instead we opted to rebuild the UI as abstracted facsimiles, with control over every element in frame. The abstraction mattered as much as the craft. What was removed for clarity was as deliberate as what we kept. Inside that box, the motion had to carry the teaching, with just a line of in-app text alongside it.
A real mouse click is almost invisible. A few pixels of change, easy to miss even when you're looking for it. So nothing here moves at documentary scale. The cursor travels with intent, the click lands with weight, the key press feels like a real, deliberate push. Simulated but enhanced. Familiar enough to read as a user doing this, exaggerated enough to teach. We obsessed over the press most of all.
Trailing lines follow the cursor on drags, guiding the eye from where motion came from. You're never disoriented; the mouse always arrives from somewhere.
A hover indicator descends onto targets before the click, calling attention to where the action is about to happen.
Clicks and key presses with real push to them. The single hardest-working element in the system.
Accent lines fire when something pops on, reacts, or changes — small celebrations that confirm cause and effect.
Panels and chrome simplified to reduce noise, keeping the feature itself the loudest thing in a very small frame.
The system flexed by feature — some called for fewer elements, some for more, some for new ones entirely, like simulated handles transitioning around the frame.
Adobe came back every year with new features, and the system absorbed them all. New tools, new formats, new sizes, eventually splash screens and video tutorials as the work moved out of tooltips and up in scale. Sixty-five-plus unique animations, hundreds of rendered deliverables, one motion language. Not bad for a format limited to 256 colors.
This was one of many collaborations with the Adobe team. Videos for Illustrator on iPad, a sizzle reel and social suite for InDesign's 20th anniversary, splash screen animations, and more. A partnership that ran for nearly the entire life of Pixel Fort, and it began with the execution of these little loops.
The first set built the design language. Every feature after spoke it.