Sculptor Foundation website

One day, an unusual client came to the studio. Not another startup or online store, but genuine people of art: a foundation that brought together the best sculptors in Russia, as well as architects, painters, designers and artists. It was simply called Sculptor.

The foundation was established by Yuri Orekhov, a well-known Soviet sculptor who created many sculptures and monuments, mostly to Russian scientists, artists and writers.

Orekhov was never as famous as Tsereteli, but readers have probably seen one of Sculptor’s works: the foundation helped recreate the Cathedral of Christ the Savior, which the Bolsheviks blew up in 1931 and which was rebuilt in the 1990s.

Not the whole cathedral, but the high reliefs on its walls, sculptures depicting historical and religious events. All the bronze figures now on the cathedral’s walls were recreated by the foundation from old drawings.

And now Sculptor had come to the studio for a website. That is rare, and a real event for a design studio.

People of art will never go for design to a run-of-the-mill company that makes websites for marketing and sales. If they come to you, it means your work is worth more than supplying businesses with advertising in HTML format.

It is also a chance to make a website whose design echoes fine art and book typography, and so becomes something of an art itself.

Choosing a typeface

My previous project of this caliber was the website of the Russian Ball in London. That time I chose the Petersburg typeface, which, although 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 a typeface that truly soared. An artistic, out-of-the-ordinary one. Or even two: one for headings and one for body text.

The search began with Yuri Gordon. This Russian type designer and typographer was a true genius of his craft. Gordon’s work stands apart from everyone else’s. The author of the best, and the only worthy, book on type in Russian, The Book of Letters from Аа to Яя, Gordon had an incredibly bold feel for the structure of letters. He set type with letters interlocking and drew his typefaces “with a clumsy paw” so that “each letter was one of a kind.” A genius!

Let’s see what Gordon has in store for us. We take a handful of his most expressive typefaces — Bazaarban, Around The World, 21 Cent, HermiType and Citizen M — and set the name of the site:

All of them look divine!

Any of these typefaces would work for the title, and the more intricate, the better. The result looks like the cover of an expensive antique book on art.

You can’t just type with these typefaces. You have to draw with them; only then do they reveal their artistic soul. Take Citizen, for example. Its ascenders are so thin and its counters so large precisely so that something can fit inside. Here is how it should be used:

And here is what you can do with Bazaarban. This kind of layout is called super-display typography:

This layout is beautiful and unusual, but it has two problems.

First, headings on websites must be editable. So in this style you could make, well, maybe the title on the home page, and if they ever want to change it, they will have to call the designer and order a new one. Most likely they won’t. The beautiful image will simply be removed and replaced with a clumsy heading in Arial.

The second problem is that people are afraid of this approach. It is too elaborate and puzzling. To be honest, I’m a bit afraid of Gordon’s typefaces myself. I know how to work with them, but I had never used them in a real project. What if I made a mess of it and everyone laughed?

Still, we will set the title in Bazaarban and show it to the client; he might like it. But what typeface should we use for the text? No games here: the text has to be readable. We need an interesting Cyrillic text face that is easy to read. Let’s take the heading and text of the home page and try setting them in different typefaces.

Caslon worked well for an italic heading (and it certainly has taste), and 21 Cent for the text (although it is a bit bland), but I wanted to find one universal typeface for everything.

I no longer remember how many options I went through — dozens. Then Shrift, a magazine about typography, caught my eye. I was hooked by the way its articles were set. I opened the browser’s developer tools and clicked on a paragraph. It turned out to be Kis. I had heard of it but had never used it. A mistake!

Kis was created by the Hungarian type designer Miklós Kis, who worked in Amsterdam as far back as 1680. That is roughly the same era as Caslon, one of the kings of classic serif type, which I had already come to like. Caslon, too, was modeled on Dutch typefaces.

Kis itself was used to set the Bible. Amsterdam, 1685:

It was this very Kis that became the prototype for the Russian civil script, since Peter the Great was in Holland at exactly that time. So Kis is not only a refined, artistic typeface but also close to us in spirit — simply a perfect choice!

For readers who haven’t studied typography, let me explain. The sense of kinship comes from details in the structure of letters that go unnoticed when reading. The main differences are in the letters Д, Л, Ж, ф, б and з. The classic Russian Д and Л have a slanted left stroke and a straight right one, while most modern typefaces make the left stroke curved. In classic serif type, the Ж ends in serifs at the top instead of teardrops, and its lower arcs spread out like burdock leaves. In modern typefaces, the Ж has teardrops hanging at the top and arcs ending in strokes at the bottom, which makes it look like a cockchafer.

The letter ф used to be drawn as a circle cut by a vertical line. Now two slightly condensed letters с, mirrored around the vertical, are attached to the stem. The letter б has lost its wavy squirrel tail, and the lower stroke of з no longer looks like a snake’s tongue but sticks out like a sharp pin.

If you are new to typography, all this may seem unimportant, but it is exactly these details that make the difference in a set text.

Not the main page

Websites are usually designed starting with the home page, but this case was special. The Sculptor website was supposed to focus on text layout, and how much text is there on the home page? Three short paragraphs and a heading.

So to work out the layout, I took an inner page with Yuri Orekhov’s biography. It has plenty of text and photos.

Yuri Gordon came to mind again. Let’s see how his website is made. Aha, here is a great trick: align the photo to the right, let the text wrap around it on the left, and give the page an asymmetrical margin. A good book technique, just what I need.

I try the same with the Orekhov page:

The client says it is boring. He asks to add color and write the logo in Russian. Fair enough. But what color? The client has no brand colors, and the sculptures are all white. OK, I’ll take a pale blue for now and decide later. For the heading, let’s take one of the display typefaces and place it over the photo, magazine style.

The full text of the biography can go into the layout right away. One of the key book techniques is the sidebar: the main text runs, and a few additional paragraphs are inset on the left or right.

I wanted to put some brush scribbles in the background. Gordon had several calligraphy samples. I’ll use them as placeholders and we’ll make our own later.

The client likes this one better, but still finds it boring. He asks for a large cover photo and more color photos in the text.

OK. An idea comes to mind. I ask for a scan of Orekhov’s signature and a few good quotes from the master. I make the photo full-screen and place a quote with the signature over it, pushed as far to the right as possible.

This the client likes. Now let’s work on the blocks inside the text.

I take the right-alignment technique and break with convention: the photo caption goes on the right, with a deliberately large indent.

The start of a chapter, on the contrary, is pushed far to the left. It would be good to put a photo before the chapter that clearly breaks the proportions of the text. These techniques produce the bookish effect I was after.

Another page

The section about Orekhov turned out very long and a bit overloaded with all the tricks I had come up with. The site has another, simpler page about the foundation’s main work, the Cathedral of Christ the Savior.

On it, I can use all the techniques and see whether they really work together. I put the same kind of large photo at the top and right-align the text below it.

Next. As soon as the first block of text ends, I break it up with a couple of powerful photos in the center of the page. The next block of text is centered. When it ends, another powerful photo in the center. After it, the final piece of text, aligned right. And a closing image.

We read from left to right, and there is nothing to be done about it: reading backwards is uncomfortable. But you can still change the direction of reading by splitting the text into several parts and placing them one after another from right to left. Why? An unusual arrangement immediately attracts attention. The reader starts to protest at the audacity with which the typesetter broke one of the main laws of layout.

Avant-garde artists used the same techniques, only it is more obvious there, since they worked with graphics rather than text.

Let me translate this layout into a graphic language. How is a page usually built? With rectangular blocks of images and text like these, arranged left to right and centered.

Familiar? This is what most pages on the internet look like. Identical, boring “bricks,” as they are called. Of course, not every page is dull: you can use a brighter photo and a loud headline, but then the designer is working at a high level of abstraction. With Sculptor, I decided to go down to a more fundamental level of perception and change not the outer shell but the structure itself.

Here is what the resulting page looks like in terms of primitives:

Let me put them side by side. Which structure feels more alive?

By the way, note the round image at the end. If you think about it, it is actually the period at the end of the text.

Apollo’s head

The emblem of the Sculptor Foundation is the head of Apollo. Why? The client couldn’t really explain. The head of Apollo is simply one of the greatest examples of sculpture.

The head had to go on the home page. The home page text had already been tried in different typefaces. Besides the head and the text, they asked only for the name and a mention that the foundation is part of the Russian Academy of Arts. It had to be concise.

The blue migrated to the home page from the Orekhov page, where it had been pushed out by a graphically stronger photo. On the minimalist home page, it fit in much better.

The client didn’t like how the Russian Academy of Arts line and the foundation’s name were handled. He asked for a stronger graphic idea. The shade of blue wasn’t quite right either.

I suggest a couple more options:

Let me explain the structure.

The line “Russian Academy of Arts” is actually the fulcrum of the whole composition. Its left edge is aligned with the text and the lowest point of Apollo’s neck. This is the axis running through the entire page. The heading “Sculptor Foundation” hangs on this axis. The word “foundation” is black and therefore heavier. The word “sculptor” is white and lighter but extends further to the right. Together with the phrase “expressing the state of the soul,” it balances the word “foundation.”

If this is hard to picture, think of the children’s toy, the balancing bird:

A strange analogy, but that is exactly what happens on the page. Heavy elements that should, it seems, outweigh one another and tip the whole composition over are balanced on a thin axis.

Here is the structure shown in graphic primitives:

The client approves this option outright, without any explanations from me: he sees it all and understands it all. But we will come back to the head later.

A few other pages

Once the layout techniques are worked out and the style of the site is set, the remaining pages are a matter of execution. We simply use the same techniques in a different order. The About page is essentially a simplified version of the home page.

I wanted to put a full-length Apollo on the news page. There was even a perfect spot for him on the left, since according to our layout rules, the news goes on the right.

Then disaster struck: the client was afraid to put a naked penis on his website.

This was 2016. Russia’s “mad printer” of repressive laws was gaining speed, and a scandal had just died down over the penis of one of the sculptures on the Bolshoi Theater, which appears on a banknote. I think someone else was facing criminal charges over a nude painting or sculpture.

Mitya Paramonov suggested pixelating it. At first I resisted: what kind of madness is this? Then I thought: actually, this is cool, I can capture the spirit of the times in my work and tell a story about it. And here I am, telling it to you.

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

It needed a category filter by type of work. There were 12 categories, and some names were very long, like “art forging” and “garden and park sculpture,” while others were super short, like “facades” and “interiors.”

I asked the client whether the categories could be renamed. No, he said, they couldn’t. So what do I do with them? They don’t fit in a menu. I played around, moved them back and forth… Then suddenly I couldn’t believe my eyes: the categories had lined up into the shape of a baluster all by themselves!

Mitya Paramonov and the client couldn’t believe it for a long time. This is how the page turned out. A rare stroke of luck.

The head must rotate

I said we would come back to the head of Apollo.

The client says: “My dream is to have this head rotate on the website. Can that be done?”

Not only can it be done, it must be done. That is exactly what we need for the full wow effect: a website rooted in the art of the book but with a modern special effect. Combining the sublime with technology. Great! I’m ready to work for free just to make such a dream come true.

We look for a 3D model of the head. Luckily, it is a popular model, so it is easy to find. I buy it for something like 50 dollars.

I hire a 3D artist to set up the lighting, remove the pedestal, fix inaccuracies and apply a good texture.

Not right. We need a delicate milky shade, but not white, to suit the home page. The 3D artist spends a long time on the lighting.

It starts to come together, but the head is far from perfect. Either the color is off, or the eyes look like they have Graves’ disease.

We render the not-quite-perfect head as a video and then cut it into frames: 120 for mobile and 240 for desktop. We measure the connection speed and serve either the full or the reduced version to avoid long loading times.

Here is the result: a rotating 3D head of Apollo. Just scroll down the page, and the head responds to scrolling. Cool? It can be glitchy sometimes, so refresh the page if needed.

But the client says it is not cool. He doesn’t like the shape of the head. Well, what can you do? The 3D artist is clearly no match for Leochares, the ancient Greek sculptor who created this masterpiece. Better models are too expensive, and the website budget is running out.

In the end, the client rejects the 3D model. There it is, destructive perfectionism! Maybe it was for the best, but I was very upset and spent a long time thinking about what to do with the head. Eventually I put it on the home page of my studio’s website. It was a mix of our best work there anyway, and the head seemed to fit right in.

The site launched in 2016 and is still running untouched. Another rare stroke of luck. People of art are too lazy to waste their time updating websites. Thank Zeus! Sites like this usually don’t last long: content managers ruin them very quickly.