Website for the Fund Sculptor

One day, an unusual client contacted the studio. It was not just another startup or an online store, but real artists. A fund that united the best sculptors of Russia, as well as architects, painters, designers and artists. The fund was called simply “Sculptor”.

The founder of the fund was Yuri Orekhov, a famous Soviet sculptor who created many sculptures and monuments, mainly to Russian scientists, artists and writers.

Orekhov was not promoted like Tsereteli, but the reader is still familiar with one of the works of the Sculptor: the fund recreated the Cathedral of Christ the Savior, which the Bolsheviks blew up in 1932, and which was rebuilt in the 1990s.

Not the whole temple, but the high reliefs on its walls — sculptures depicting historical and religious events. All the bronze statues that now hang on the walls of the temple were recreated by the fund according to old sketches.

And now the Sculptor came to the studio for a website. This is a rarity and an event for a design studio.

Art people will never go for design to a front company that makes websites for marketing and sales. If they came, it means that the work of the studio is worth something more than just providing business with advertising materials in html format.

In addition, this is a chance to make a site in which the design has something in common with fine art and book layout, that is, it becomes something of art itself.

Font selection

The previous work of this level is the site of the Russian Ball in London. That time, I chose the Petersburg font, which, although it was created in the Soviet Union, conveyed the spirit of the pre-revolutionary era very well.

Petersburg was good, but too simple. This time I wanted to choose a font that would really fly high. A font from art, exclusive. Or even two fonts. One for headings, one for text.

The search began with Yuri Gordon. This Russian type designer and typographer is a real genius in his profession. Gordon’s work stands apart from all the others. The author of the best and only worthy book on typefaces in Russian, “Book about Letters, from Аа to Яя”, Gordon had an incredibly bold feel for the structure of a letter. He composed text “unlockedly”, and made fonts “with a clumsy paw”, so that the letters were “each one apart”. Genius!

Let’s see what Gordon has prepared for us. We’ll take a pack of the most expressive fonts — Bazaarban, Around The World, 21 Cent, HermiType and Citizen M — and write the name of the site:

All captions are divine!

You can use any of these fonts for the title, the more intricate it is, the better. It turns out the cover of an expensive, antique book about art.

These fonts can not be written just like that. They need to be drawn, only then the font shows its artistic soul. Take, for example, the Citizen font. The ascending strokes of his letters are so thin, and the gap in the letters is so big just to fit something inside. Here’s how to write with it:

And here’s what you can do with the Bazaarban font. This layout is called superaccident:

This layout is very beautiful and unusual, but there are two problems with it.

First, headings on sites must be editable. Therefore, in this style, you can make, well, perhaps the title inscription on the main page, and if they want to change it, you will have to call the designer and ask to make a new one. Most likely they won’t do it. A beautiful picture will simply be demolished, and an absurd title of Arial will be put in its place.

The second problem is that people are afraid of such an approach. It is too pretentious. To be honest, I am myself afraid of Gordon’s fonts. I know how to work with them, but I have never had to put them into practice. You never know, what if I come up with some nonsense? Everyone will laugh.

But still, we will write the title in Bazaarban font and show it to the customer, he will suddenly appreciate it. But what font to take for the text? It’s no joke, the text must be readable. We need an interesting Cyrillic typeface that is easy to read. Let’s take the title and text for the main page, and try to type in different fonts.

For the cursive title, Caslon worked well (and it’s obviously all right with its taste), while the 21 Cent worked for the text (although it’s a bit dry), I wanted to find one universal font for everything.

Now I don’t even remember how many options I went through — dozens. But the magazine about typography “Type” attracted my attention. I was hooked by how they type the text of the articles. I called the debugging panel in the browser, clicked at a paragraph. It turned out to be the Kis font. I heard about it, but never used it before.

The Kis font was created by the Hungarian type designer Miklós Kis, who worked in Amsterdam in 1680. This is about the same era when Caslon appeared — one of the kings of classical antiqua, which I already managed to like. Caslon was also modeled after Dutch typefaces.

Kis himself was used to type the Bible. Amsterdam, 1685:

It was this very Kis that became the prototype for the Russian civil font, because Peter the Great was in Holland just at that time. It turns out that Kis is not only a high font from the art, but is also close to us in spirit — well, just a great choice!

For the reader who has not studied typography, I will explain what is the matter here. Proximity in spirit is created by features in the structure of letters that are imperceptible when reading. The letters Д, Л, Ж, ф, б and з make the main difference. The classic Russian style of the letter Д and Л is with an oblique left stroke and a straight right one, and in most modern fonts the left stroke is made with an arc. The letter Ж in classical serif instead of drops at the top ends with serifs, and the lower arcs diverge to the sides like leaves of burdock. In modern fonts, the letter Ж has drops hanging from above, and arcs ending with a stroke from below, which makes it look like a cockchafer.

The letter ф used to be drawn from a circle cut by a straight line. Now, slightly compressed letters с are attached to the stem of the letter, reflected relative to the vertical line. The letter б lost its wavy squirrel tail, and the lower stroke of з ceased to look like a snake’s tongue and began to stick out of the letter like a sharp pin.

If this is your first time encountering typography, it all seems like something of little importance, but it is precisely such differences that make a difference when typing.

Not the main page

Most often, the site starts to be drawn with the main page, but this case was special. The emphasis on the Sculptor’s site should be placed on the layout of the text, but what kind of text is on the main one? Three short paragraphs and a heading.

Therefore, to work out the layout, I took the inner page with the biography of Yuri Orekhov. There is a lot of text and photos here.

Yuri Gordon came to mind again. Let’s see how his site is made. Yeah, here’s a great trick: turn off the photo to the right, and let the text flow to the left, and even give an asymmetric indent on the page. A good bookish trick, exactly what I need.

Trying to do the same with Orekhov:

The client says it’s boring. He asks to add color and write a logo in Russian. Agree. But what color is it? The client does not have corporate colors, and the sculptures are all white. Ok, I’ll take the pale blue, then we’ll decide. For the title, let’s take one of the superaccidental fonts and put it on top of the photo, like in magazines.

You can immediately include the entire text of the biography in the layout. One of the main book techniques is to make a text wrap. This is when the text goes, and a few additional paragraphs crash on the left or right.

I wanted to put some doodles with a brush on the background. There were several samples of calligraphy from the same Gordon. I will take them as an example, then we’ll make our own.

This one the client likes more, but still boring. He asks to put a large cover photo and add more color photos to the text.

Ok. An idea comes to my mind. I aske to send me a scan of Orekhov’s signature and some good quotes of the Master. I place a photo in full screen and put a quote with a caption on top of it, setting it as far as possible to the right.

This is what the client likes. Now let’s deal with the layout of the blocks inside the text.

I take the technique with the right alignment and break the generally accepted canon: the caption for the photo is placed on the right, with a deliberately large indent.

The beginning of the chapter, on the contrary, I take out strongly to the left. It would be nice to put a photo in front of the main chapter, which clearly contradicts the proportions of the text. Due to these techniques, I achieve the desired bookish effect.

Another page

The section on Orekhov turned out to be very long and a little overloaded with various tricks that I invented. There is another page on the site, simpler. About the main work of the fund — the Cathedral of Christ the Savior.

On this page you can use all the tricks and see if they are really well matched. I put the same large photo in the title, and I do the text under it with the alignment to the right.

Further. As soon as the first block of text is over, I interrupt it with a couple of powerful photos in the center of the page. I make a new block of text in the center. When it ends, there is again a powerful photograph in the center. After it, the final piece of text justified to the right. And the final picture.

We read from left to right, and nothing can be done about it, it is inconvenient to read backwards. But the direction of reading can still be changed if the text is divided into several parts and arranged in turn from right to left. Why is this needed? The unusual location immediately attracts attention. The reader begins to protest from the arrogance with which the typographer violated one of the main laws of layouting.

The same techniques were used by avant-garde artists, only there it is more clear: they operated not with text, but with graphics.

Let’s translate the resulting layout into a graphic language. How is the page usually built? Here are such rectangular blocks of pictures and text, from left to right and centered.

Familiar? This is what most pages on the Internet look like. The same, boring “bricks”, as they are called. Of course, not all pages are dull, because you can take a brighter photo and make a flashy headline, but then the designer works at a high level of abstraction. When making Sculptor, I decided to go down to a more fundamental level of perception and change not the outer shell, but the structure itself.

Here’s what the resulting page looks like at the primitive level:

I’ll place them side by side, take a look. Which structure is more alive?

By the way, pay attention to the round picture at the end. It’s actually a dot at the end of the text, if you think about it.

Apollo’s head

The symbol of the Sculptor is the head of Apollo. Why? The client was unable to explain. Just the head of Apollo is one of the greatest examples of sculpture.

The head had to be put on the main page. The text for the main page has already been tried in different fonts. In addition to the head and text, they asked to place only the name and add that the fund is part of the Russian Academy of Arts. It should be succinct.

The blue color migrated to the main page from the page about Orekhov. There he was replaced by a graphically more powerful photograph. On the laconic main page, it took root much better.

The client did not like the inscription about the Russian Academy of Arts and the name of the fund. He asked me to find a stronger graphic move. The shade of blue didn’t quite match either.

I offer a couple more options:

Let me explain the structure.

The inscription “Russian Academy of Arts” here is actually the fulcrum of the entire structure. The left edge is aligned with the text and the bottom of Apollo’s neck. This is the axis that runs through the entire page. Attached to this axis is the heading “Sculptor Foundation”. The word “fund” is black and therefore heavier. The word “sculptor” is white, lighter, but falls more strongly to the right. Together with the phrase “expressing a state of mind,” it balances the word “fund.”

If it’s hard for the reader to understand what I’m talking about, remember a children’s toy, a balance bird:

A very strange analogy, but that’s exactly what happens on the page. Heavy elements are balanced on a thin axis, which, it seems, should outweigh one another and overwhelm the entire composition on its side.

Here is a representation of the structure on graphical primitives:

The client unconditionally approves this option without my explanations: he sees everything, he understands everything. But let’s get back to the head.

Several other pages

When the layout techniques are developed and the style of the site is determined, the remaining pages are a matter of time. We just use the found techniques in a different order. The page about the fund is essentially a simplified version of the main page.

I wanted to put Apollo in full growth on the news page. Moreover, there was an ideal place for him on the left. After all, news is placed on the right side according to our layout rules.

Then a terrible thing happened: the client was afraid to put a naked penis on his site.

This was in 2016. The Russian frenzied printer was gaining momentum, and recently a scandal with a member near one of the sculptures of the Bolshoi Theater, which is located on a banknote, died down. It seems that they tried to slap someone else with a criminal term for a naked painting or sculpture.

Mitya Paramonov offered to cover up a member of the mosaic. At first I resisted, they say, what kind of insanity? Then I thought: it’s so cool, you can capture the spirit of the era in your work and tell a story about it. Now I’m telling it to you, see?

The last page I want to talk about is the section with works.

Here it was necessary to make a rubricator by type of work. There were 12 of them in total, but the names are very long: “artistic forging”, “landscape sculpture”. And others, on the contrary, are ultra-short: “facades”, “interior”.

I asked the client if it is possible to rename the rubrics? No, he says he can’t. And what to do with them, they do not fit on the menu. I played, rearranged back and forth... Suddenly, I don’t believe my eyes: the sections themselves lined up in the shape of a baluster!

Mitya Paramonov and the client could not believe for a long time. This is how the page turned out. Rare luck.

The head must rotate

I said that we would return to the head of Apollo.

The client says: “My dream is to have this head spinning on the site. Is it possible to do so?”

Not only possible, but necessary. We lack the wow effect. Let’s make a site not only from the book art, but also with a modern special effect. Combine art and technology. Super! I am ready to work for free, just to make such a dream a reality.

Looking for the head model in 3D. Fortunately, the model is popular, so it’s not difficult to find. I buy, it seems, for 50 dollars.

Hiring a 3D designer to set up the light correctly, remove the pedestal, correct inaccuracies and apply a good texture.

No. We need a delicate milky shade, but not white, to be suitable for the main page. The 3D designer works with light for a long time.

It seems like it starts to turn out, but the head is far from ideal. Either the color is not the same, or the eyes betray Graves’ disease.

We make the controversial head in video format, then we cut it into frames. For the mobile version, we make 120 frames, for the desktop 240. We will measure the connection speed and substitute either the full or reduced version in order to avoid problems with long loading.

The result is in front of you. 3D rotating head of Apollo. Just scroll the page down, the head reacts to page scrolling. Cool? Sometimes it’s buggy, refresh the page, if anything.

But the client says it’s not cool. He is not satisfied with the shape of the head. Well, what can you do? 3D designer is clearly not up to the ancient Greek sculptor Leochar, who created this masterpiece. Better models are too expensive, the site’s budget is running out.

As a result, the client refuses the 3D model. Here it is, pernicious perfectionism! Maybe it’s for the best, but I was very upset, and thought for a long time what to do with this head. As a result, I put it on the website of my studio, on the main page. There I got a combined hodgepodge of the best works, and the head seems to be a good match.

The site was launched in 2016 and is still running intact. Again, rare luck. Art people are lazy enough to waste their time filling up some websites. Glory to Zeus! After all, such sites do not live long, they are quickly spoiled by content managers.