FARFETCH Motion System
FARFETCH wanted a motion design language and system to accompany their updated brand. The design needed to set the motion principles and be able to work across platforms and help speed up production of both marketing/brand assets and product design including the mobile app and website.
Principles
Confident
Motion on type and image are at odds with one another. One static and one eased creates a bold design aesthetic.
Considered
Every interaction, no matter the platform, should consider the needs of the audience and the purpose of the touch-point.
Concise
Our motion language holds to the adage, “Less is more.” Just because something can move doesn’t mean it should.
Scale of expression
The brand expression has been split into two categories, Functional and Emotional. This allows a sliding scale of expression that maintains consistency within the overarching motion language while also adhering to the brand tone of voice.
Easing
Functional [A] and Emotional [B] easing is used with imagery, transitions, containers, and logos. They are the most enthusiastic moment in the Motion System and can be used with persistent elements that move from one on-screen position to another. The expression scale has been provided from functional to emotional, ensuring flexibility in uses.
Decelerated
cubic-bezier (0,0,0,1)
Outgoings 88% Incomings 0%
Accelerated
cubic-bezier (1,0,1,1)
Outgoings 88% Incomings 0%
Context
CSS
After Effects
Accelerated
Decelerated
Typography
The FARFETCH typography system has been developed to follow the scale of expression inherent in our motion theory.
Functional: Type animation focused on simplicity
Conversational: An extension of functional that’s more editorial
Expressive: Emotional type animations creating unique and exciting messaging
The Fuse
FARFETCH Monogram, or The Fuse, is a new asset released; the simple, fluid and elegant motion were used to give maximum flexibility in application.
Imagery
Using the best practice in the UK, images can either be hard cut or swiped using the established easing values. practice
Iconography
Iconography follows the same languages as our motion system. Simple, non-prominent icons such as down-states make use of our functional timings, while key interactions make use of our emotional animations.
Solution
A motion system that enabled function and expression. A set of principles that offer both creative expression and enable easy assets creation with design consistency. A system that can work at pace and scale while at the same time reflect the brand values and ethos.
Role
Strategy & Design director
Team
Design: James Cuddy
Motion: Chris Meadmore
Brand: Ronojoy Dam