Sotbi website

Task:
to create a website for an unconventional law firm.

Quite often, after some smart guys find themselves deep in debt, they decide to conduct a range of relatively legitimate activities to come out clean. They end up with few assets and nothing to pay off their multibillion (rarely, multimillion) debts with.

Their lenders get very upset by that fact. And go to Sotbi where experts know all nuances of working in this legal field and generally have been around the block more than once. Realizing that it’s time to make sure the form matches the content, Sotbi came to Art. Lebedev Studio for their new website.

The first concept

Designer

The well-regarded professional company is very careful about information it provides but also wants to talk about what it does in an interesting way. It would be great if the website could explain all the peculiarities of their field while attracting new clients.

After a detailed discussion of the project at a meeting, we decide to present Sotbi staff on the website as superheroes. They hide their faces but are always there to help. The character of each employee should be obvious by their mask. Starting the fitting.

The characters appear next to each other randomly, just like in real life
Services offered by the company are presented concisely
The work process is shown as cyclic movement from client application to court ruling
Nobody can talk about the company better than its employees
The most important clients have their own special section
Client

Guys, it’s all really great but it doesn’t look like us ¯\_(ツ)_/¯

Making the second attempt.



The second concept

Sotbi as seen by clients
Sotbi as seen by employees
Designer

The website gets a “dark” side. It is hidden by default and can be revealed by clicking a special button. The “dark” version contains the same sections as the “official” one but the information is written on behalf of the company’s employees. And these people often see their job in a very specific way, with unconventional humor and appreciation for internal values.

Editor

Since the design has changed, we now need to write extremely serious texts for the “white” side and raunchy ones for the “dark” side. It’s important to make sure both sides talk about the same things but in different ways. Reading the company’s corporate newspaper helps better understand the genre.

Designer

The client really likes their slogan “in debts as in silks” so we spread beautiful fabric on all backgrounds. The canvas wavers arousing understandable curiosity to find out what’s hiding behind. Fabric movement was modeled in 3D and saved as a video.

Technologist

Switching between the “black” and “white” versions of the website is done with a “curtain” and the top block of the “black” version should be fixed in place with absolute positioning.

The logo turns into a cool sandwich menu.

We decided to show Sotbi’s performance by using counters on the main page. Statistics that usually receives no response from people apart from yawning becomes dynamic, inviting to follow the company’s successes. Of course, the money counter is the fastest and it’s a pure pleasure to watch.



The services

Designer

Images are also different in the two versions of the website. They are made of almost the same parts but what they show is completely different. Move over to the “dark” side and a pie chart becomes a parachute that lifts a briefcase up in the air.

Images for the metaphors were created by designers and illustrators who were invited to help with the project, resulting in an ample selection of art.

Technologist

The first version of the animation was done using CSS. This allowed quickly changing settings on the fly according to the designer’s comments and edits.



Illustrator

Drawing images starts with simple metaphors. A pie chart turns into a parachute dome and the chart’s leader lines become ropes.

The factory that the client didn’t like is replaced by documents that are lifted up into the air.



The superhero lawyer turns into the Hulk on the “dark” side. In the first version the Hulk was simply putting on a suit and losing his biceps in exchange for a suitcase.

He ended up becoming a regular person that you can meet in any office, complete with a tie and even creased trousers.

The solar system demonstrates that the company operates extremely precisely even on a planetary scale. Planets don’t just rotate, they work together as a well-tuned mechanism.

Initially we wanted to turn the randomly scatted children’s cubes into a neat pyramid but ultimately decided to go with a Rubik’s cube. It’s more wholesome, complete and solid, plus it requires thinking, something that the company’s employees really enjoy.

Technologist

Animating all the metaphors required more serious tooling than regular CSS which fell short in this case. We decided to go with the svg.js library but had to fix a huge number of bugs before it became sufficiently reliable.



The clients

Designer

The Clients section on the “white” side contains real reviews provided by Sotbi. For the “dark” version though we needed something more interesting. We decided to go with messages from non-existent companies.

 

Editor

We need to think up who these people are, what their names are and why they used Sotbi’s services. The characters should evoke emotions so it would be good to start with something familiar.

For example, the Granny made a gingerbread man and later launched a full-scale baking enterprise. And so on, with all the beauty of official letter style.

To make the joke complete, the technical designers came up with a logo for each made-up company.

The principles

Designer

We needed a fresh graphic and semantic move. We already used illustrations and that cost us dearly. This time we wanted to avoid pictures completely. However, simply writing new text from scratch is boring.

We decided to keep the original text on the “dark” side and have words fall out of it, creating a completely different reading. Let the editor have his fun.

Editor

A death-defying act reminding of the old joke about using four cubes with the letters S, I, H, T to build the word “happiness.” Something like this?

Technologist

The hidden text is duplicated and positioned over the original one. It is made more transparent and groups of words on the top layer that should fall down are wrapped in separate tags.




The geography

Designer

The “light” side shows cities where Sotbi has successfully completed projects. This is fine, but how do we make the “dark” side exciting?

Editor

There are a lot of places in Russia with unusual names. That’s where the made-up companies should be located.

Each of the five dozen cities, towns and settlements that we selected can easily become a setting for a project that would look just like a real one. But since we’re talking about the “dark” side, we created a fascinating story for each of the places. It’s obvious that a hostile takeover of a beehive farm by a honey producing conglomerate could have taken place only in a place called Kind Bees.

The careers

Illustrator

Sotbi hires staff in three categories: students, experts and managers. We came up with a character for each group. As you go through vacancies, the images change, showing an intern, an experienced boss and everything in between.

Client

( ╯°□°)╯

After serious considerations we decided to replace people with realistic illustrations of characteristic attributes of their work. Of course, they all have their own items they use every day. Company employees use exactly the same fountain pens to write in exactly the same notebooks and prefer to drink their coffee out of exactly the same mugs as we drew. We checked.

Switching from the “white” version of the website to the “black” brings about the end of a work day making everything look completely different.

The website is filled with many details not always obvious at first glance that make each page much more interesting. Never before have serious legal cases been presented on a website in such an unconventional manner and aroused so much curiosity from the viewers.

We’ll take a break
and show you a printed presentation




artistic director

  • Artemy Lebedev

art director

  • Pavel Gerasimchuk

designer

  • Alena Sofina

illustrator

  • Albina Gainullina

technical designers

  • Artem Yudin
  • Maria Pavlova

technologist

  • Roman Kosovichev

beta tester

  • Dmitry Muratov

content manager

  • Mariya Zakharova

editor

  • Aleksandr Nosikov

project manager

  • Maksim Pushnov
  • The website is managed using Imprimatur III (Parser) proprietary technology
Made in 96 days