Русский бал в Лондоне

Русский бал в честь 400-летия династии Романовых прошел совершенно незамеченным. Дизайн герба и сайта Русского бала мало кто видел, а тот, кто видел — почти ничего не понял. В нем разглядели неряшливую поделку в духе 90-х годов, хотя это был совершенно не так: в дизайн был вложен колоссальный труд и знания.

И вот недавно мой друг прислал мне заголовок, написанный курсивным шрифтом с засечками, и спросил, почему дизайн-студия пишет шрифтом с базарных палаток. Знаете, каким шрифтом была сделана надпись? Это был Гарамон — старейшая антиква 1530 года.

Тогда-то я все понял. Получается, это технологии так испортили наш вкус. Мы ведь разучились воспринимать засечки у шрифтов, если только это не книжный корешок. Когда в последний раз вы видели экранный заголовок, написанный шрифтом с засечками? Везде теперь пишут ультражирной Гельветикой или что там сейчас в айфоне, Сан-Франциско?

Корнями этот тренд уходит в первые компьютерные экраны, на которых были очень крупные пиксели. Из-за этого не получалось красиво вывести на экран элегантные шрифтовые засечки, и поэтому все начали массово использовать шрифты-гротески. У них-то прямые палки, их легко нарисовать на экране. А для шрифтов с засечками придумали алгоритмы сглаживания (анти-алиасинг). Это когда пиксели на краях букв делаются полупрозрачными, чтобы создать эффект плавности.

Так мы и потеряли шрифты с засечками. Теперь любой заголовок, набранный благородным романским шрифтом 16-го века выглядит как надпись на палатке с ксерокопией. Не только из-за сглаживания, но еще и благодаря тому, что Таймс Нью Роман до сих пор самый популярный шрифт для объявлений, набранных в Ворде. Хотя раньше тот же Гарамон — король засечковых шрифтов — использовался компанией Аппл и в рекламе, и в логотипе, и на самих Макинтошах:

Русский бал в последний раз проводился в 1913 году — год 300-летия династии Романовых. Странно было бы взять для сайта Гельветику, не так ли? Поэтому я выбрал шрифт Петербург. Он также известен как «Гарнитура Кудряшевская энциклопедическая» — длинное и сложное имя, примерно как название линий московского метро.

Петербург — шрифт не дореволюционный, а советский. Дореволюционные шрифты я пробовал, когда рисовал черновики сайта:

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

Потом к проекту подключили Илью Глазунова, и он нарисовал что-то совсем старорусское, чем запутал всех еще больше:

Когда стало понятно, что эксперимент со старыми шрифтами нас слишком увлек, решили остановиться на Петербурге. Это был отличный компромисс: с одной стороны, шрифт довольно старый. Неопытный глаз не отличит его от дореволюционного (да и от Таймса тоже), а набирать им можно и текст, и заголовки. Жажду сделать что-то дореволюционное я потом реализовал в плакате о поиске менеджера в студию. Вот это чистейший дореволюционный русский стиль: два десятка шрифтов и нелепые диалоги.

Герб-логотип

Логотипом занимался великолепный Митя Парамонов. Сначала он предложил нарисовать Альберт-холл — это королевский зал в Лондоне, в котором должен был проходить Русский бал.

Хотя черновики получились интересные, сам логотип не имел никакого отношения ни к балу, ни к русскому. Получился то ли логотип самого Альберт-холла, то ли айдентика лондонского турагентства.

Тогда Митя решил идти ва-банк и замахнулся на геральдику. Я, говорит, попробую совместить герб и музыку. На балах играют вальсы Штрауса, и его силуэт уже используется в других логотипах клиента, например, на Венском балу в Москве. Только самого Штрауса брать не будем, возьмем его скрипку.

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

На следующий день Митя прислал первый эскиз своей идеи.

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

Чуть-чуть поясню, что здесь происходит.

Гербы бывают малые, средние и большие. Читатель наверняка встречал в основном малые гербы. Чаще всего это просто щит, в который вписано какое-нибудь животное или орнамент. Если теперь взять этот щит и поместить вокруг него рыцарей, надеть шапку, шлем или корону, либо вставить внутрь двуглавого орла — мы получим средний герб. Теперь если взять средний герб и вставить его внутрь царской мантии, окружить орнаментом и множеством других элементов, которым я даже названий не знаю — мы получим большой герб.

Все три герба являются гербами страны одновременно, а какой рисовать — зависит от ситуации. Вот малый, средний и большой герб Польши с 1815 по 1832 год.

Чтобы показать основные детали герба, лучше возьму герб Соединенного Королевства (United Kingdom).

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

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

Золотисто-серебряные узоры, разлетающиеся от держателей и похожие то ли на волны, то ли на листья — намёт. Он используется в качестве орнамента.

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

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

Кроме того, в щит вписана фраза Russian Ball in London. Обычно в гербах используется не название, а девиз. Но в нашем случае такая тонкость ни к чему. Буквы R и B получились в черновике не читабельные, но к ним мы вернемся позднее.

Показали этот черновик организаторам. Больше всего встрепенулась австрийка Элизабет и даже побежала звать кого-то: «Посмотрите, посмотрите, он совместил герб и скрипку!».

Идея всем очень понравилась, ни один уважающий себя клиент никогда не принимает работу без замечаний. Так получилось и на этот раз. Посмотрев герб со всех сторон, организаторы решили, что в гербе не хватает... танцующих людей. А это совершенное табу: в геральдике строго запрещены люди внутри щита! Люди — только держатели.

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

Нашли танцующую пару, Митя отрисовал.

Вставили внутрь щита. Блевотненько получилось, то что нужно.

Показали клиенту. Объяснили, что можем нарисовать лучше, но так нельзя обращаться с гербами. К большому счастью Элизабет поморщила нос и сказала: «Убедили, давайте без людей. Буквы-то можно? Ладно, пусть будет с буквами».

Буквы в щитах размещать можно, хотя длинный текст писать не принято. Обычно в гербах писали девиз (мотто). Например, на польском гербе в примере была надпись «Съ нами Богъ» — вот это как раз девиз. Или взять хотя бы знаменитый герб Гарварда. В него вписаны три книжных разворота со словом VERITAS — «истина» на латыни. Под щитом расположена торжественная ленточка с надписью Harvard.

Для герба Русского бала мы взяли первые буквы названия: R и B. Здесь пришлось нарушить нашу последовательную русофилию и использовать латинские буквы.

Было несколько причин такого решения. Во-первых, гербы — это продукт западной культуры, в России хороших примеров очень мало, и тем более нет примеров работы с типографикой. Во-вторых, примеров лигатур (соединений двух букв) в отрыве от гербов тоже очень мало в русском языке. В-третьих, поскольку проект международный, нам пришлось бы делать две версии герба. Это странное решение. Я не слышал, чтобы кто-то занимался локализацией гербов.

Также решили избавиться от Альберт-холла. Слишком он напоминал узбекскую шапочку. А с точки зрения геральдики получалось, что Альберт-холл — владелец Русского бала.

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

Шла работа над лигатурой. Буква R плохо, но читалась с самого начала, а вот буква B вышла совершенно нечитаемой. Самым сложным местом оказалось сочленение букв. Нужно было взять правую ногу буквы R и очень элегантно подключить её к букве B, но как это сделать? Ведь буква B закрытая.

Мы пытались разомкнуть нижний полуовал буквы B и зарифмовать его с ногой буквы R. Из-за этого B превращалась в е и совершенно не читалась.

Искали другой способ соединить буквы. Сделали букву B заглавной, сверху дали ей лихой вынос и заплели его вокруг полуовала буквы R. Такой же прием применили к нижнему штриху.

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

Знакомый каллиграф дал совет. Заменили крышу букве R, чтобы получилось как у В. Убрали месиво в правом углу.

Последним шагом соединили R и B — вот она, элегантность! Нашли!

Одновременно с каллиграфией прорабатывался стиль гравюрной штриховки.

Герб — это ведь не логотип, не рисунок и вообще не графика. На самом деле герб — это кодовая фраза, написанная на особом, геральдическом языке. Вот взять герб шведской провинции Вермланд. Он выглядит так: «В серебряном поле лазоревый орёл с червлёным языком, клювом, лапами и когтями». Я правильно употребил слово выглядит. Эта фраза — и есть герб, а то, как он нарисован — дело десятое. Орла можно нарисовать сотней разных способов, оттенков червленого (красного) клюва могут быть тысячи, но любая комбинация будет считаться тем же самым гербом.

Мы могли выбрать любое оформление для герба, но решили остановиться на гравюрной технике. Кажется, нам очень тогда понравился логотипы ресторана «Гранд Империалъ» и Большого театра, которые рисовал Лебедев, и мы захотели сделать нечто подобное.

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

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

Намет нарисовали новый, а вот просвет в верхней части щита называется почетном местом, и его нужно было занять чем-то... почетным. В почетное место геральдисты часто ставили другие, вложенные гербы. Вот мы и вернулись к тому, с чего начали: к Лондону. На юбилейной монете в один фунт стерлингов нашелся прекрасный герб Лондонского Сити, выполненный в нужном стиле. Митя перерисовал его и вставил в почетное место. Теперь, если следующий Русский бал пройдет где-нибудь в Берлине, можно просто заменить герб.

Собрали все вместе. Получился великолепный герб, в котором осмыслена каждая деталь.

Показали организаторам — ни одного замечания. Такое бывает, когда проект настолько сложный, что его бессмысленно даже объяснять. Ни одну деталь в гербе нельзя поменять, не разрушив полностью всю структуру.

Единственное, что попросил сделать клиент, — это нарисовать герб в цвете. Это не было проблемой. У Российской Империи была прекрасная айдентика в виде черно-желтого флага. Черным закрасить герб мы не могли, поэтому превратили его в буро-коричневый, а желтый сделали золотым, подложив текстуру холстяной бумаги. Такая условность не только допустима, но и желательна. Листья намета сами собой вышли зелеными, а георгиевский крест в гербе Лондона стал красным, как в оригинале.

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

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

Конечно же, мы не стали этого делать :-) Зато для малых печатных форматов подготовили упрощенную версию герба.

Буквица

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

Но это очень плохой пример. С буквицей произошла такая же история, как и со шрифтами. Технологии печати сделали книги массовыми, времени на декорацию не осталось. Если кто-то теперь берется рисовать буквицы, то вряд ли он понимает, с чем имеет дело. Поэтому и получается павшинский рынок, хотя буквица — страшно сильный прием. На этой странице из Библии буквица L занимает всю страницу, сразу и не поймешь:

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

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

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

Осталась одна проблема: сайт — это не печатная книга, здесь все постоянно меняется. Редактор захочет заменить текст, что тогда? Мы не можем написать алгоритм, который бы обволакивал букву автоматически. Договариваемся с верстальщиком, что вручную составим сдвиги строк для каждой буквы двух алфавитов: русского и английского. Некоторые буквы повторяются, так что получится чуть больше 40 вариантов.

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

Допустим, буква А. Под ней число 104. Затем ряд чисел справа от буквы: 0, 15, 30, 45, 64. Это означает, что первая строка текста сдвинута на 140 + 0 пикселей, вторая на 140 + 15 и так далее.

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

Раздел ради одной буквы

Дизайн — это война.

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

– Александр, слово «бал» пишется с маленькой буквы, это часть названия. Как, например, «Московский государственный университет».
– Я понимаю, и все же прошу написать с большой. У нас компания называется ООО «Венский Бал Москва», все с больших букв. Это часть корпоративной культуры.
– Пишите тогда сами. Открывайте код и меняйте на заглавную.

У каждого из присутствующих в офисе от такой наглости что-то отвалилось с лица: у кого выпало из глаза треснувшее пенсне, у кого — отклеились и спланировали на пол дореволюционные усы.

– Но... что это значит? Почему?
– А потому что многоуважаемое дизайн-сообщество меня с потрохами сожрет, если я напишу название Русского бала в честь 400-летия династии Романовых с грамматической ошибкой.

В спор тогда вмешался мой бизнес-ангел и спас нас всех от драки, потому что я уже закипал. Тет-а-тет попросил меня написать слово с большой. Конечно же, я молча прислал макеты с маленькой буквой. Скандал разразился с новой силой, и в ход пошли такие аргументы: мол, в заголовках можно все писать с большой, посмотрите на Аппл. «Нет, — отвечал я, — это в английском есть такое правило, а в русском нет».

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

Мне было все равно. Эта работа мне виделась одной из главных в моей жизни, и я не мог написать на главной странице с ошибкой. Как потом жить с таким грузом? Что я скажу, оказавшись перед богом?

Конфликт зашел в тупик и стало понятно, что нужно подключать тяжелую артиллерию. Я собрал несколько справочников: Розенталя, Мильчина и Якова Грота, русского академика филологии 19-го века. Взял из них все правила, которые касались названий балов и императорских династий. Нарисовал раздел «Для прессы», в который поместил логотипы и фотографии бала, а в нем сделал вкладку «Правописание», на которой расписал все, что нашел.

Целый раздел ради одной буквы! Битва была выиграна, клиент капитулировал, дизайн-сообщество проект не заметило.

Точка в конце заголовков.

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

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

Прием на самом деле не так давно вышел из моды, еще на рекламе первых Макинтошей точки стоят.

Да, к грамотности раньше относились внимательнее. Все-таки заголовок — это предложение, поэтому точка нужна. Зато сейчас даже запятые стесняются ставить: мол, некрасиво, товар перестанут покупать. Что ж, на сайте Русского бала точки будут, можете сдать билеты.

Пропавший ять для Дульсинеи

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

Это рукописный шрифт, надписи делались пером. Посмотрите на эти растянутые буквы с непрерывными соединениями — это образцовый каллиграфический почерк 19-го века. Таким шрифтом писали официальные письма, а в печати его использовали редко, только для коротких надписей, потому что читать тяжело.

Шрифт сразу захотелось использовать на сайте. Что-то он мне напоминал, где-то я его еще видел. Открыл сайт Лебедева — и точно! Это отсюда он скопировал свою Дульсинею. Немедленно купил лицензионную версию и попробовал — прекрасно подошел, но оказалось, что в шрифте нет буквы ять.

Ять и ер часто путают. Твердый знак на конце слов — это ер. А ять по форме скорее похож на мягкий знак с перечеркнутой ногой.

От этой черточки отдает чем-то православным, очень она похожа на церковный крест. Действительно, все эти еры, яти и ижицы до последнего писались в церковных текстах, даже после того, как их убрали из русского языка. Да и те же стихи, придуманные для запоминания слов с ятем, начинаются так: «Замѣшу посѣвъ въ мѣрило, Ѣду грѣхъ исповѣдать».

Читатель без труда прочтет эти стихи, если заменит ять на букву е. Вот поэтому ять и убрали из русского языка: он смешался в произношении со звуком е еще до Пушкина и стал «знаком отличия грамотных от неграмотных».

Вот и пришлось искать пропавший ять для Дульсинеи, чтобы не сделать неграмотный сайт для царской семьи. Рисовать шрифты я тогда еще не умел. Мне показалось, что раз Лебедев оцифровал дореволюционный шрифт, то наверняка были хотя бы черновики ятя. Написал в Студию — ответа не получил. Через неделю написал лично Лебедеву и объяснил, что веду дело государственной важности. И тут мне с утра приходит письмо со специальной версией Дульсинеи, с ятем! Я тогда подпрыгнул на стуле от счастья. Спасибо, Тёма.

Дореволюционный UI Kit

Картины и шрифты на сайте остаются теми же, что были на бумаге сто лет назад. Меняется только способ их «печати»: вместо акварели и чернил используется светящаяся электронная панель.

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

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

Тень под иконкой на экране не существует: это подражание настоящей тени. Сама пиктограмма телефонной трубки — это тоже подражание настоящей телефонной трубке. И засечки у компьютерного шрифта — всего лишь подражание засечкам с Троянской колонны. Электрические лампочки в форме свечей — это подражание настоящим свечам в подсвечнике. Откидной верх у современного автомобиля — это подражание откидным верхам старых конных повозок. Все это примеры скевоморфизма.

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

Сайт часто начинают рисовать с главного меню. Выбор здесь небольшой: либо делать его вверху, либо сбоку, либо бургером. Боковое меню делают только в интернет-магазинах, потому что пунктов много. Меню бургером — то есть внутри иконки из трех полосок — слишком медийный прием, который тяжело использовать на корпоративных сайтах. Поэтому главное меню Русского бала поместили вверх.

К главному меню прилагается логотип. Его можно поставить либо слева, либо в центре меню. Это ключевое решение, которое задает всю композицию сайта: будет ли он выровнен влево или по центру? Я и так знаю ответ, но давайте поищем примеры того, как делали до революции.

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

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

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

Долго выбирали стиль стрелок и усов для декорации заголовков, которые перебирали по старому каталогу символов.

Все элементы Митя нарисовал в гравюрной технике. Стрелочки получились как наконечники у копья, усы оставили привычной формы.

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

Ну как вам? Видели когда-нибудь дореволюционный UI Kit?

Романовы и Альберт-холл

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

Страница получилась длинной простыней. Это хорошо: статейный, книжный формат.

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

Место проведения бала — Королевский зал Альберт-холл. Это такая супер-престижная концертная площадка, известная во всем мире. Своего рода Большой театр, только про музыку. Когда-то здесь выступал сам Рихард Вагнер, читал лекцию Альберт Эйнштейн и давал прощальный концерт Лед Зеппелин. Now they know how many holes it takes to fill the Albert Hall, — пели Битлз, высмеивая мажорные жопы, любящие заседать в Альберт-холле.

Для Альберт-холла нашлась старинная картина, где вокруг зала ездят лошадиные повозки.

Взяли эту картину как фон для короткой страницы, посвященной Альберт-холлу. В России про это место мало кто слышал, поэтому нужно было рассказать, где проходит бал.

Михайло Зичи

Русский бал проводился впервые за 100 лет, поэтому организатор прислал фотографии другого мероприятия — Венского бала в Москве. Посмотрели, попробовали поставить. Не то.

Пошли искать фотографии русских балов. А тогда уже была цветная фотография? Конечно, была. Прокудин-Горский снимал в цвете еще в 1903 году. Может быть он и на балу что-то снимал? Нет, ни одной фотографии русского бала не нашлось.

Спросил Митю Парамонова:
– Господин придворный герольдмейстер, известен ли вам какой-нибудь придворный художник, рисовавший балы?
– Извольте видеть, Михайло Зичи.

Был такой живописец венгерского происхождения, который рисовал хронику событий при дворе Александра Второго. Его еще называли не художником, а рисовальщиком — великая честь. Так вот, Михаил Зичи нарисовал большую серию картин от коронации царя до всевозможных балов.

Попробовали взять его картины — вот это то что нужно!

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

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

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

Раскадровка:

Теперь нужно как-то дать посмотреть фотографию. Продолжаем наше слайдшоу и делаем еще два таких же слайда, только уже с фото. Если нажать стрелочку на втором слайде, то эффект с надписью повторяется, но уже с современной фотографией.

Получился эффект «до и после»: картина представляет бал 100 лет назад, фотография — сегодняшний бал. Эдакий временной портал.

Вот раскадровка из всех четырех слайдов:

Видеозапись эффекта:

Получилось очень круто. Надпись «Русский бал» на фоне настоящего русского бала при царском дворе, а вторая часть — «в Лондоне» — на фоне современной фотографии. Она не из Лондона, конечно, но кто об этом знает?

Спасибо, Зичи! Сделаем про тебя отдельный раздел на сайте. Другие картины используем в оставшихся разделах. Работы художника оказались настолько подходящими для Русского бала, что было ощущение, будто Зичи, как и Миша Ленн, рисовал их специально для сайта.

Спектакль в Большом театре по случаю коронации Александра Второго. Картина идеально подошла для страницы Билеты.

Завтрак Вильгельма Первого и Александра Второго. Разговор двух императоров — прекрасная метафора для раздела Контакты.

Миша Ленн и его картины

Кроме Ильи Глазунова к проекту подключили художника-акварелиста Мишу Ленна.

Я ничего не понимаю в изо, и про Ленна услышал тогда впервые. Почитал. Оказалось, что его картины есть в коллекциях Горбачева и Малковича, а еще он обладатель «Оскара» как лучший акварелист Америки. И вот он нарисовал картину для Русского бала, и эту картину прислали мне, чтобы я поставил её на главную страницу сайта.

А как я ее поставлю-то? Это же сайт, а не выставка. На сайте должен быть логотип, меню, текст, кнопочки. Все это должно читаться, а на такой пестрой картине ничего прочесть не получится. Конечно, можно сделать так:

но ради чего? Испортим и картину, и текст. Пришлось опять вставать в позу и вежливо объяснять, почему картину поставить на сайт не получится и что у нас уже есть неплохой стиль с картинами Зичи:

– Но где-то ведь на сайте должен быть Миша!
– Где-то будет.

Сделал для Миши отдельную страницу с кратким рассказом и примерами картин. Это ведь лучше, чем картина без подписи на главной?

Ну, а раз сделали такую страницу для одного, то надо и для всех. Так на сайте появилась целая серия страниц: про спонсора проекта Наталью Касперскую, придворного живописца Михайло Зичи и акварелиста Мишу Ленна.

Этот вариант всем понравился, а потом на балу в Лондоне мне довелось столкнуться с Мишей лицом к лицу:

– Это вы дизайнер сайта? Что там за история произошла с моей картиной?
– Видите ли, она не подошла. Поэтому я приказал сделать про вас отдельный раздел.
– Черт возьми, а ты мне нравишься.

Щекотливый был момент.

Меню ужина и программа

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

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

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

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

Потайной подвал с секретными разделами

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

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

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

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

С тех пор я применяю эту концепцию во всех собственных проектах, где на меня не давит клиент со своими хотелками.

Судьба проекта

Русский бал прошел в Лондоне, в королевском зале Альберт-холл, 2 декабря 2013 года. На балу присутствовали члены семьи Романовых, известные композиторы и музыканты, послы России и Великобритании. Сто двадцать дебютантов приняли участие в танцевальной программе.

Пресса встретила бал прохладно. Кажется, Афиша написала, что бал был похож на школьный выпускной. Гости хорошо напились и полезли на танцпол плясать русские танцы. Ну, да. Примерно так и было.

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

Сайт создавался около 6 месяцев в начале 2013 года. Бюджет проекта составил немыслимые по тем временем 800 тысяч рублей, которые были выплачены в виде зарплат и не подразумевали прибыль (с прибылью проект бы стоил около 2 миллионов рублей).

Сайт просуществовал до конца 2014 года, затем организатор бала и инвестор поругались из-за авторских прав, и сайт переделали. В новой версии сайта, над которой работал, вероятно, куда более профессиональный дизайнер, чем я, были учтены все пожелания заказчика. Слово «бал» написали с большой буквы, убрали секретные разделы и буквицы, а картина Миши Ленна наконец-то разместилась на главной странице.

Красота! Все по гайдлайнам, все согласно ТЗ, без ругани, войны за букву, бесконечных споров и странных решений. Клиент, наверно, очень доволен был, что нашел такого хорошего, послушного дизайнера.

Дизайн — это война. И очередная битва этой войны была проиграна.