Built around the concept of unifying forces, Schibsted uses rotation as a key distinctive element in its motion visual language. Here you’ll find some ideas to keep in mind when approaching motion in the new Schibsted system.
Download logotype and symbol animations
Download animations of the pattern
Download animations of gradients
General important concepts
Rotate!
Built around the concept of unifying forces, Schibsted uses rotation as a key distinctive element in its motion visual language. The counterclockwise rotation direction references directly how the symbol animates and how it showcases the concept.
In the symbol, both parts of the S are rotating to represent two forces merging. For the logotype, this is applied through how the letters appear rotating around the symbol. Both in the in and out animations, the letters continue in that same rotation direction.
Differentiate brand and product
For brand animated elements, always try to apply the concept of rotation to build a coherent language between elements. But for product design elements, it would be preferable in most cases to go towards efficiency over substance.
Ease in long, ease out short
Animations that remove, close, fade out, dismiss or collapse elements have to use shorter duration. They should require less attention from the user in comparison to the next task. Animating in should take more time.
That’s why the principles have two durations to choose from, it’s to allow you to variate and choose the most appropriate one depending on the action.
Values and motion principles
Supporting the digital brand, we have three motion principles. Each of them is based on the values of Schibsted and is crafted with a purpose in mind: being functional, adding character or adding an emotional element. They are ruled by settings such as duration, easings, feelings and usage.
Empowerment function
Empowered, therefore confident – whenever communicating functionality it is important to be concise and quick, leaving no space for doubt.
The desired time interval to communicate empowerment is fast: 400 ms – 600 ms
Flexibility character
Flexible, therefore accessible – whenever communicating in a more personalised manner it’s important to leave a little more room for feeling and make it more accessible through reaching for identification with the audience in case.
The desired time interval to communicate flexibility is medium: 600 ms – 800 ms
Unity emotion
United, therefore organic – whenever communicating unity it’s important to acknowledge diversity and complexity while prioritising a human touch in order to add emotional value to the animation.
The desired time interval to communicate unity is slow: 800 ms – 3,000 ms
Motion scales and durations
There is a correlation between the time interval for the animation, the communication context and the value to convey.
Empowerment Function
Through sharp easing, this principle allows for confident interactions, communicating on trust, knowledge and confidence that Schibsted has built over the years.
Conceptually, it explores the pioneering and innovative side of the unifying forces through a stronger easing for shorter animations.
Usage
- Brand/Editorial
- Use to add a quick snappy feeling to movement. A quick rotation, or a quick scale-up.
- Product
- Use for primary and simpler animation. With its short duration, it can be used for quick transitions, opening modals, etc.
Duration
- Fast – 400 ms
- Medium – 600 ms
Feelings
- Quickness
- Confidence
- Knowledge
- Trustworthiness
Easings
- Outgoing
- Influence: 0
- Speed: 40
- Incoming
- Influence: 60
- Speed: 0
- iOS
- 0.00, 0.40, 0.40, 1.00
Flexibility character
Through short and soft starts and long easing outs, this principle allows for longer, more generous and lively animations.
It’s best used for animations that can take more time to express character such as secondary animations, both for brand and product.
Usage
- Brand / Editorial
- Use to add character to more complex motion that needs more time such as shapes expanding, unmasking, tracing shapes, etc.
- Product
- It’s tailored towards secondary animations that can take more time and be more expressive such as hero containers or whenever the content block is editorial.
Duration
- Medium –600 ms
- Slow – 800 ms
Feelings
- Dynamism
- Generosity
- Liveliness
- Subtlety
Easings
- Outgoing
- Influence: 30
- Speed: 0
- Incoming
- Influence: 90
- Speed: 0
- iOS
- 0.30, 0.00, 0.10, 1.00
Unity emotion
Through linear easing, this principle allows for more organic movement and timing. Conceptually, it explores the softer side of the unifying force and lets us envision a more complex reality around Schibsted’s services, with a human touch.
The linearity of the speed references the feeling of a constant data flow.
Usage
- Brand/Editorial
- Use to animate softer things such as gradient changes, shapes and pattern movements along a path.
- Product
- Use to animate data information, charts, loaders and pattern movements.
Duration
- Slow – 800 ms
- Custom – 1,000 ms to 3,000 ms
Feelings
- Flow
- Organicity
- Naturality
- Softness
Easings
Contrasting with the rest of the motion system, the incoming and outgoing easings are linear.