How we design motion before we design screens
We used to animate a product once it was finished. Now we decide how it moves first, and the screens follow.
Article· 6 min read
By Leah Whitfield
For years our process ended with motion. The screens were designed, approved and built, and then someone was asked to make them feel nice. By then every decision that shapes how a product moves had already been made by accident.
On Kite we tried the opposite. Before we drew a single screen, we spent a week deciding how one shape should breathe: four seconds out, six seconds back, no bounce. Everything else in the app was then designed to stay out of that shape's way.
Start with one moment
Every product has one moment people remember. For Kite it was the breath; for Atlas Rail it was the berth you choose before you pay. We find that moment in the first workshop and prototype it in code in the first fortnight.
- Name the one moment the product is about.
- Prototype it in the browser, not in a video.
- Write its timing down as numbers the engineers can use.
- Design the screens around it, never on top of it.
Then take motion away
Once the one moment is right, most of our work is removing motion. Menus open at once. Lists do not stagger when you type. A button presses down in a tenth of a second and that is all it does.
If everything moves, nothing does. The one moment only works because the rest of the product is still.
It also makes the products kinder. People who turn on reduced motion get the same product, with every move replaced by a short fade, because we planned for it on day one instead of patching it at the end.