YNAP Motion Language

When designing motion across multiple brands it’s important to implement consistent patterns.

This is the design exploration and documentation that goes along with building a system of motion elements for a digital experience.

First we defined what motion means for YNAP. They’re a luxury brand. So what does luxury motion feel like? It luxury slow? Is it fast? Do transitions happen gradually or are they instantaneous?

motiontype.gif

Pretty nifty. What next?

One we’d defined our motion patterns, it was time to apply them across relevant components that users would encounter them in.

dropdown_desktop.gif
giftcard_closing_trimed.gif

Sounds good. But where’s all this going?

Once these motion patterns had been stress tested, it was easy to build on those foundations and use them to create more complex and engaging motion patterns elsewhere in YNAP’s design ecosystem.

Desktop_Gallery_V3.gif
Gallery_mobile_V3(fully stacked).gif