Choreography
"Press Play on Style" is a versatile concept that is conceived to help unify the Zalando brand expression in motion. As an organising idea, it should inform the process when designing and applying motion as well as aid in the conception of new and innovative executions.
There are six actions (mirroring those in an entertainment navigation bar) that can be utilised freely across your timeline to create interesting and dynamic content.
These six actions are: play, forward/rewind, shuffle, pause, repeat and stop.
Together these building blocks come together to form our motion expression. We call it our choreography.
This approach to motion affords us the utmost flexibility in creating bespoke solutions that suit any purpose, format or duration. Over time, this flexibility also allows us the freedom to evolve and reimagine our expression, which in turn, affords us opportunities to spark joy and to stay relevant.
Play
The play action is pivotal to the Zalando motion language. It signifies the moment our brand comes to life. Pressing play triggers the activation of our brand, embodying the core motion language that defines our expression.
The Zalando Play action is the combination of two simultaneous motions. The press and the tip motion. The press is simulated using a simple scale down and a scale up. The tip motion is made using a tilt in orientation on the X and Y axes.
Forward / Rewind
Forward / Rewind is an essential action in motion compositions and it has a wide range of uses. A quick move to either side of the screen, skipping backwards or forwards through a set of elements, or even fast forwarding on the timeline itself. Forward / Rewind is a highly effective tool for creating interest between elements in your composition or to add pace and energy to your animation.
Shuffle
Shuffle is a valuable tool for creating interesting and engaging content. It offers flexibility when you want to capture the viewer’s attention. Use it to create surprise when you want to display multiple assets simultaneously or to add visual interest and detail to an element.
Pause
How we choose to see Pause differs somewhat from the general interpretation of the word. Instead of a full freeze of a motion, we see a movement that is suddenly slowed down to a hyper slo-mo pace. Like slowing down time to an almost stand still, to then pick up the pace again.
This action can be very effective in adding tension to a motion or directing focus to a specific asset or moment.
Repeat
Repeat is a highly versatile and useful action to have at your disposal when designing motion. It can signify using many duplicates of an asset in your composition at the same time, repeating the same motion several times — or both together.
Repeat is particularly effective with text animations since repeating a word can greatly emphasise its meaning.
Stop
Stop is the absence of motion. With stop an element can move, change, appear or disappear from one frame to the next. It can be expressed in keyframes with a hold, or on a linear timeline with a hard cut.
Since this is the most immediate way to change a visual state it is sometimes the most effective way to emphasise a specific moment. It can be used to heighten the visual impact of one single asset appearing, to create a sense of rhythm in a piece of footage using jump cuts, or to emphasise a beat or a kick in a piece of music. Important to note is that stop is only effective when used in contrast with other elements that are in motion, or any intended impact is lost.
Choreography on the timeline
When building your choreography on the timeline, you can arrange, add, repeat and reuse the choreography actions in any way or order that best suits the message and context. To achieve the best result, always respect the basic principles of animation.
Below you can find our interpretation of these principles and how they pertain to motion across the Zalando brand and product.
Scale of expression
The size and type of motion applied should always be directly related to the context. Respect the viewers' engagement and animate only what is needed to convey your message. A motion should always add to the interaction and never detract from the core purpose.
For contexts where the core purpose is primarily functional the size of the expression should be small so as to not detract too much from a fluid experience.
For contexts where the core purpose is to be more expressive the size of the expression can be larger to create the most impact possible.
Duration
In motion design, duration refers to the time it takes for a specific action, transition, animation, or process to occur within an area. It relates to the temporal aspects of design, determining how long certain visual changes or interactions last.
Shorter durations add to the impression of speed and can convey a sense of immediacy while longer durations may imply a slower and more deliberate movement.
Rhythm
The duration of a motion directly affects its perceived pace and the intervals between motions directly affect the perceived tempo. Shorter durations and shorter intervals create a higher tempo. A high tempo can add energy and attitude to an animation. Conversely, longer durations and longer intervals create a slower tempo. A slower tempo can add subtlety and softness to an animation.
The arrangement of pace and tempo over time is what creates the rhythm in an animation. Establishing a sense of rhythm in motion is essential to a well-paced and understandable animation. Rarely does everything need to move all at once. Animate elements in order and use tools like anticipation, stop, pause and continuity to help bring meaning and rhythm to your story.
Secondary movements
A motion that is visually interesting often has more than one motion working in unison to create depth. Layering several motions over each other helps elevate the expression and make an animation rich and intriguing to watch.
This can be done by repeating the same motion in sequence only with a slight offset or delay, or by adding secondary elements that inherit the parent motion but with an offset or delay.
This is particularly effective with text animations since repeating a word greatly emphasises its meaning.
Interpolations
A well crafted motion feels both effortless and elegant with a fluidity to the movement. When designing motion, aim for realistic movements that portray a recognisable sense of weight and momentum. Objects should behave according to their respective physicality but will typically speed up quickly and slow down smoothly.
Functional and expressive easing
How much a movement accelerates or decelerates is referred to as its interpolation or easing. When a motion speeds up smoothly from a keyframe it is called an ease out. When a motion slows down smoothly into a keyframe it is called an ease-in.
Easing and duration are the two key components that define the character of a motion. Shorter duration and less easing creates a motion that will appear more assertive and precise. We call this type of easing “functional”. Using a longer duration and more easing will make the motion appear livelier and more organic. We call this type of easing “expressive”.
Functional ease
Expressive ease
Ease out on exit
When an element in motion exits or disappears from the screen, it is recommended to use an ease-out interpolation from the rest state.
Tip motion
Central to our brand expression is the very act of pressing ‘Play’. Pressing ‘Play’ marks the igniting moment where our brand comes to life. It starts our journey and unlocks the world of possibilities within the Zalando universe.
For us, this action is captured in the tip motion. A signature motion that is uniquely ours and that over time can become synonymous with the Zalando brand in motion. The tip motion can be applied to a wide range of visual elements, ranging from icons and images to words or blocks of typography.
Mimicking the pressing of a ‘play’ button, this motion implies the activation of an event. As such we limit the use of this action to moments that indicate a significant change in state or that mark the start of an event. We use this motion on select occasions within the brand expression, taking care not to overuse it.\
Below is a functional breakdown of this motion and instructions on how to construct it.
Add to wishlist
Brand mark
Add to cart
Maximum size ratios
Even if the tip motion can, in theory, be applied to any element there are instances where the size ratio of the element begins to interfere with how the motion is perceived. Therefor we limit the use of this motion to elements with a maximum size ratio of 3:1 and 1:3.