Сайт фонда «Скульптор»

Однажды в студию обратился необычный клиент. Это был не очередной стартап или интернет-магазин, а самые настоящие люди от искусства. Фонд, который объединял лучших скульпторов России, а еще архитекторов, живописцев, дизайнеров и художников. Фонд так и назывался: «Скульптор».

Основателем фонда был Юрий Орехов — известный советский скульптор, создавший много скульптур и памятников, в основном русским ученым, артистам и писателям.

Орехов не был раскручен как Церетели, но все-таки с одной из работ фонда «Скульптор» читатель знаком: фонд воссоздавал Храм Христа Спасителя, который взорвали большевики в 1932 году, и заново строили в 1990-х.

Не весь храм, а горельефы на его стенах — скульптуры, изображающие исторические и религиозные события. Все бронзовые статуи, которые сейчас висят на стенах храма — воссозданы фондом по старым эскизам.

И вот в студию пришел фонд «Скульптор» за сайтом. Это большая редкость и целое событие для дизайн-студии.

Люди от искусства никогда не пойдут за дизайном в проходную компанию, которая делает сайты для маркетинга и продаж. Если пришли — значит, работы студии стоят чего-то большего, чем просто обеспечивать бизнес рекламными материалами в формате html.

Кроме того, это шанс сделать сайт, в котором дизайн перекликается с изобразительным искусством и книжкой версткой, то есть сам становится чем-то от искусства.

Выбор шрифта

Предыдущая работа такого уровня — сайт Русского бала в Лондоне. В тот раз я выбрал шрифт Петербург, который хоть и был создан в Советском Союзе, но очень хорошо передавал дух дореволюционной эпохи.

Петербург был хорош, но слишком прост. На этот раз захотелось подобрать шрифт, который действительно был бы высокого полета. Шрифт от искусства, весь какой-нибудь эдакий. Можно два шрифта. Один для заголовков, второй для набора.

Поиски начались с Юрия Гордона. Этот русский шрифтовик и типограф — настоящий гений своей профессии. Работы Гордона стоят особняком от всех остальных. Автор лучшей и единственной достойной книги по шрифтам на русском языке, «Книги про буквы от Аа до Яя», Гордон невероятно смело чувствовал структуру буквы. Он верстал «врасключку», а шрифты делал «корявой лапой», чтобы буквы были «каждая наособицу». Гений!

Посмотрим, что приготовил нам Гордон. Берем пачку самых выразительных шрифтов: Bazaarban, Arounded The World, 21 Cent, HermiType и Citizen M — и пишем название сайта:

Все надписи божественны!

Для заголовка можно использовать любой из этих шрифтов, чем более он замысловатый, тем лучше. Получается обложка дорогой, антикварной книги про искусство.

Такими шрифтами нельзя писать просто так. Ими нужно рисовать, только тогда шрифт проявляет свою художественную душу. Взять, например, шрифт Citizen. Восходящие штрихи его букв такие тонкие, а просвет в буквах такой большой специально для того, чтобы внутрь что-то поместилось. Вот как нужно им писать:

А вот что можно сделать из шрифта Bazaarban. Такая верстка называется суперакциденцией:

Такая верстка очень красивая и необычная, но с ней есть две проблемы.

Во-первых, заголовки на сайтах должны редактироваться. Поэтому в таком стиле можно сделать, ну, разве что титульную надпись на главной странице, и если её захотят поменять, то придется звонить дизайнеру и просить сделать новую. Скорее всего этого делать не будут. Красивую картинку просто снесут, а на её место поставят нелепый заголовок ариалом.

Вторая проблема: люди такого приема боятся. Он слишком вычурный и непонятный. Если честно, я и сам боюсь шрифтов Гордона. Работать с ними я умею, но применять на практике никогда не приходилось. Мало ли, наворочу какую-нибудь глупость, все смеятся будут.

Но все-таки заголовок шрифтом Bazaarban мы напишем и покажем заказчику, вдруг оценит. А вот какой шрифт взять для набора? Тут не до игры, текст должен читаться. Нужен интересный кириллический наборный шрифт, который было бы легко читать. Возьмем заголовок и текст для главной страницы, попробуем понабирать разными гарнитурами.

Для курсивного заголовка хорошо подошел Caslon (и у него явно все в порядке со вкусностью), а для набора 21 Cent (хотя он немного пресноват), но хотелось найти один универсальный шрифт для всего.

Теперь уже и не вспомню, сколько вариантов я перебирал — десятки. Но внимание привлек журнал про типографику «Шрифт». Зацепило, как они набирают текст статей. Вызвал отладочную панель в браузере, ткнул в параграф. Оказалось, это шрифт Kis. Я про него слышал, но никогда до этого не пользовался. Зря!

Шрифт Kis создал венгерский шрифтовик Миклош Киш, работавший в Амстердаме, аж в 1680 году. Это примерно та же эпоха, когда появился Caslon — один из королей классической антиквы, который уже успел мне понравиться. Caslon тоже создавался по образцу голландских шрифтов.

Сам же Kis использовали для набора Библии. Амстердам, 1685:

Вот этот самый Kis и стал прототипом для русского гражданского шрифта, ведь как раз в то время в Голландии был Петр Первый. Получается, что Kis мало того что высокий шрифт от искусства, так еще и по духу нам близок — ну просто отличный выбор!

Читателю, не изучавшему типографику, поясню, в чем тут дело. Близость по духу создают незаметные при чтении особенности в структуре букв. Главным образом отличаются буквы Д, Л, Ж, ф, б и з. Классическое русское начертание буквы Д и Л — с наклонным левым штрихом и прямым правым, а в большинстве современных шрифтов левый штрих делают дугой. Буква Ж в классической антикве вместо капель наверху заканчивается засечками, а нижние дуги расходятся в стороны как листы лопуха. В современных шрифтах у буквы Ж сверху свисают капли, а снизу дуги заканчиваются штрихом, из-за чего она похожа на майского жука.

Букву ф раньше рисовали из круга, рассеченного прямой. Сейчас к стволу буквы приделывают немного сжатые буквы с, отраженные относительно вертикальной прямой. Буква б лишилась волнистого беличьего хвоста, а нижний штрих з перестал быть похожим за язык змеи и стал торчать из буквы острой булавкой.

Если вы впервые сталкиваетесь с типографикой, все это кажется чем-то малозначимым, но именно такие отличия дают разницу при наборе.

Не главная страница

Чаще всего сайт начинают рисовать с главной страницы, но этот случай был особенным. Упор на сайте «Скульптор» должен быть сделан на верстке текста, а какой же текст на главной? Три коротеньких абзаца да заголовок.

Поэтому для отработки верстки я взял внутреннюю страницу с биографией Юрия Орехова. Здесь и текста много, и фотографий.

Снова вспомнился Юрий Гордон. Посмотрим, как у него сделан сайт. Ага, вот отличный прием: выключить фотографию вправо, а текст пустить в обтек слева, да еще дать ассиметричный отступ на странице. Хороший книжный прием, то что нужно.

Пробую сделать так же с Ореховым:

Клиент говорит, что скучно. Просит добавить цвет и написать логотип по-русски. Согласен. Но какой цвет-то? Фирменных цветов у клиента нет, а скульптуры все белые. Ок, возьму нежно-голубой, потом решим. Для заголовка возьмем один из суперакцидентных шрифтов и пустим его поверх фотографии, как в журналах.

Сразу можно включить в макет весь текст биографии. Один из основных книжных приемов — делать текстовую обвеску. Это когда идет текст, а слева или справа врезается несколько дополнительных абзацев.

На фон захотелось подложить какие-нибудь каляки кистью. Нашлось несколько образцов каллиграфии у того же Гордона. Возьму их для примера, потом сделаем свои.

Вот это уже больше нравится клиенту, но все равно скучно. Просит поставить большую титульную фотографию и добавить больше цветных фотографий в текст.

Ок. Приходит в голову идея. Прошу прислать скан подписи Орехова и несколько хороших цитат мастера. Делаю фотографию на весь экран и поверх неё пускаю цитату с подписью, выключаю максимально вправо.

Вот это клиенту нравится. Теперь займемся версткой блоков внутри текста.

Беру прием с правой выключкой и нарушаю общепринятый канон: подпись к фотографии размещается справа, с намеренно большим отступом.

Начало главы наоборот выношу сильно влево. Перед главной хорошо бы поставить фотографию, которая явно противоречит пропорциям текста. За счет этих приемов достигается искомый книжный эффект.

Еще одна страница

Раздел об Орехове получился очень длинным и немного перегруженным разными приемами, которые я навыдумывал. Есть на сайте другая страница, попроще. Про главную работу фонда — Храм Христа Спасителя.

На ней можно использовать все приемы и посмотреть, действительно ли хорошо они подобраны. В заголовок ставлю такую же крупную фотографию, а текст под ней делаю с выключкой вправо.

Далее. Как только закончился первый блок текста — перебиваю его парой мощных фотографий по центру страницы. Новый блок текста делаю по центру. Когда он кончается — снова мощная фотография в центре. После нее завершающий кусок текста с выключкой вправо. И финальная картинка.

Мы читаем слева направо, и с этим ничего не сделать, задом наперед читать неудобно. Но напраление чтения все равно можно поменять, если разбить текст на несколько частей и расставить их по очереди справа налево. Зачем это нужно? Необычное расположение сразу обращает на себя внимание. Читатель начинает протестовать от наглости, с которой верстальщик нарушил один из главных законов верстки.

Такими же приемами пользовались художники-авангардисты, только там это более понятно: они оперировали не текстом, а графикой.

Давайте переведу полученную верстку на графический язык. Как обычно строится страница? Вот такими прямоугольными блоками из картинок и текста, слева направо и по центру.

Знакомо? Так выглядит большинство страниц в Интернете. Одинаковые, скучные «кирпичи», как их называют. Конечно, не все страницы унылые, ведь можно взять фотографию поярче и сделать кричащий заголовок, но тогда дизайнер работает на высоком уровне абстракции. Делая «Скульптор», я решил спуститься на более фундаментальный уровень восприятия и поменять не внешнюю оболочку, а саму структуру.

Вот как полученная страница выглядит на уровне примитивов:

Размещу их рядом, посмотрите. Какая структура более живая?

Кстати, обратите внимание на круглую картинку в конце. Это на самом деле точка в конце текста, если так подумать.

Голова Аполлона

Символ фонда «Скульптор» — голова Аполлона. Почему? Клиент не смог объяснить конкретно. Просто голова Аполлона — один из величайших образцов скульптуры.

Голову нужно было поставить на главную страницу. Текст для главной уже был испробован на разных шрифтах. Кроме головы и текста попросили разместить только название и дописать, что фонд входит в Российскую академию художеств. Должно получиться лаконично.

Голубой цвет перекочевал на главную со страницы про Орехова. Там он был вымещен графически более мощной фотографией. На лаконичной главной странице он прижился гораздо лучше.

Надпись про Российскую академию художеств и название фонда клиенту не понравилось. Попросил найти более сильный графический ход. Оттенок синего тоже не совсем подходил.

Предлагаю еще пару вариантов:

Поясню структуру.

Надпись «Российская академия художеств» здесь на самом деле точка опоры всей конструкции. Левый край выровнен относительно текста и нижней точке шеи Аполлона. Это ось, проходящая через всю страницу. К этой оси крепится заголовок «фонд скульптор». Слово «фонд» черного цвета и потому более тяжелое. Слово «скульптор» белое, более легкое, но зато сильнее выпадает вправо. Вместе с фразой «выражаем состояние души» оно уравновешивает слово «фонд».

Если читателю сложно понять, о чем я, вспомните детскую игрушку, птицу-балансир:

Очень странная аналогия, но именно это и происходит на странице. На тоненькой оси сбалансированы тяжелые элементы, которые, кажется, должны перевешивать один другой и заваливать всю композицию на бок.

Вот репрезентация структуры на графических примитивах:

Клиент безоговорочно утверждает этот вариант без моих пояснений: все сам видит, все сам понимает. А вот к голове мы еще вернемся.

Несколько других страниц

Когда приемы верстки выработаны и стилистика сайта определена, оставшиеся страницы — дело техники. Просто используем найденные приемы в разном порядке. Страница о фонде — по сути упрощенная версия главной страницы.

На страницу новостей захотелось поместить Аполлона в полный рост. Тем более, для него идеально нашлось место слева. Новости ведь размещаются с правой стороны согласно нашим правилам верстки.

Тут случилось страшное: клиент испугался ставить голый член на свой сайт.

Это было в 2016 году. Набирал обороты российский бешеный принтер, и недавно отгремел скандал с членом у одной из скульптур Большого театра, который расположен на денежной купюре. Кажется, еще кому-то пытались влепить уголовный срок за голую картину или скульптуру.

Митя Парамонов предложил замазать член мозаикой. Я сначала сопротивлялся, мол, что за маразм? Потом подумал: так ведь клево же, можно в своей работе запечатлеть дух эпохи и рассказать об этом историю. Вот, уже вам рассказываю, видите.

Последняя страница, о которой я хочу рассказать — раздел с работами.

Тут нужно было сделать рубрикатор по виду работ. Их всего получалось 12, но названия очень длинные: «художественная ковка», «садово-парковая скульптура». А другие наоборот сверхкороткие: «фасады», «интерьер».

Спрашивал у клиента, можно ли переименовать рубрики? Нет, говорит, нельзя. И что с ними делать, они же не помещаются в меню. Играл-играл, переставлял туда-сюда... Вдруг смотрю и не верю своим глазам: разделы сами собой выстроились в форму балясины!

Митя Парамонов с клиентом долго поверить не могли. Вот такая получилась страница. Редкая удача.

Голова должна вращаться

Я говорил, что мы еще вернемся к голове Аполлона.

Клиент говорит: «Моя мечта — чтобы эта голова вращалась на сайте. Можно ли так сделать?»

Не можно, а нужно. Как раз этого и не хватает для полноты вау-эффекта. Сделать сайт не только от книжного искусства, но и с современным спецэффектом. Совместить высокое и технологичное. Супер. Я готов бесплатно работать, лишь бы воплотить такую мечту в реальность.

Находим модель головы в 3D. Благо, модель популярная, поэтому найти не составляет труда. Покупаю, кажется, за 50 долларов.

Нанимаю трехмерщика, чтобы он правильно поставил свет, убрал постамент, поправил неточности и наложил хорошую текстуру.

Это все не то. Нужен нежный молочный оттенок, но не белый, чтобы подходил для главной страницы. Трехмерщик долго работает со светом.

Вроде как начинает получаться, но голова оказывается далека от идеала. То цвет не тот, то глаза выдают базедову болезнь.

Спорную голову делаем в формате видео, затем нарезаем на кадры. Для мобильной версии делаем 120 кадров, для десктопной 240. Будем замерять скорость соединения и подставлять либо полную, либо сокращенную версию, чтобы избежать проблем с долгой загрузкой.

Результат — перед вами. Трехмерная вращающаяся голова Аполлона. Просто скролльте страницу вниз, голова реагирует на прокрутку страницы. Круто? Правда иногда глючит, пообновляйте страницу, если что.

А клиент говорит, что не круто. Его не устраивает форма головы. Ну, что тут можно поделать? Трехмерщик явно не дотягивает до древнегреческого скульптора Леохара, который создал этот шедевр. Модели лучше слишком дорогие, бюджет сайта заканчивается.

В итоге клиент отказывается от трехмерной модели. Вот он, губительный перфекционизм! Может быть, оно и к лучшему, но я был сильно расстроен, и долго думал, что делать с этой головой. В результате поставил на сайт своей студии, на главную страницу. Там у меня вышла сборная солянка из лучших работ, и голова вроде как в тему.

Сайт был запущен в 2016 году и до сих пор работает нетронутым. Снова редкая удача. Люди от искусства довольно ленивы, чтобы тратить свое время на заполнение каких-то там сайтов. Слава Зевсу! Ведь такие сайты долго не живут, их очень быстро портят менеджеры по контенту.