После того, как страсти вокруг нового дизайна сайта ИД «Коммерсантъ» улеглись,

Виталий Калашник рассказывает о ходе проекта с самого его начала, о причинах некоторых из своих творческих решений и об общей эволюции дизайн-макета.

Однажды, в самом конце 2009 года, мне позвонил Генеральный директор Коммерсанта Демьян Кудрявцев, который на тот момент уже был знаком с некоторыми моими работами, и предложил встретиться, чтобы обсудить стратегические нужды Издательского Дома относительно его веб-представительства.

Мы встретились в его кабинете, в главном здании «Ъ» на ул. Врубеля. Встреча продолжалась около часа и строилась, в основном, вокруг обсуждения уже сделанного в кулуарах Издательского Дома эскиза главной страницы. Эскиза, как заметил Демьян, скорее системного, чем визуального.

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

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

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

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

Так же, учитывая пожелания Демьяна о «гибкой структуре», я решил предложить систему управляемого пользовательского интерфейса, где каждый будет иметь возможность создавать свою собственную, индивидуальную главную страницу. В зависимости от своих интересов и предпочтений пользователь имел бы возможность размещать тематические блоки в нужном ему порядке сверху вниз: 1) биржевые индексы, 2) благотворительный блок, 3) новости искусства и т. д., либо все наоборот, управляя этим процессом посредством кнопок в свободном от контента поле слева.

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

Через неделю после отправки письма с эскизами и кратким описанием мне позвонил Демьян. Вечно бодрым и неизменно деловым голосом он сказал: «Виталий, вы сделали всё не совсем так, как я говорил, и каким я это себе видел, и вообще я ждал от вас .html, а не .jpg, но - в этом что-то есть. К тому же ваши эскизы - максимально пригодное из всего, что я получил от разных физических и юридических лиц». После чего предложил встретиться еще раз для более обстоятельной беседы на тему нашего постоянного сотрудничества.

Моя официальная деятельность в должности креативного директора и шеф-дизайнера диджитал-продукции «ИД Коммерсант» началась 1-го апреля 2010-го года, но до нового этапа проектирования сайта оставалось еще около месяца, так как началась эта деятельность с разработки визуальной концепции «Коммерсантъ TV». Но ближе к маю мы снова озадачились вебом.

После проекта TV, придя на очередную встречу по проекту сайта, я познакомился с Павлом Черниковым - главным редактором службы Коммерсантъ-online, человеком, ответственным за функционирование виртуальной среды ИД. Мы заново, уже втроем, обсудили все вопросы, касающиеся нового сайта. Одним из резюме беседы было то, что сотни миллионов людей активно пользуются социальными сетями, ведущие из которых достаточно схожи как функционально, так и визуально, и одной из главных задач должна стать мимикрия нового сайта Коммерсанта под ведущие социальные сервисы.

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

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

На странице конкретного материала все дополнительные обвесы этого материала, такие как «фото», «комментарии» и т. д. были организованны в отдельное меню, шедшее в конце этого материала.

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

Меню сервисов, которое я в этом варианте расположил под меню изданий (чего избегал в предыдущем), должно было раскрываться по аналогии с тем же меню в эскизе №2 - в виде всплывающих окон поверх основного контента изданий.

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

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

Судя по тому, насколько следующий эскиз (№4) отличается от вышеописанного - пунктов было больше.

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

Продолжало резать глаз расположение меню изданий и меню сервисов относительно друг друга в предыдущем макете, поэтому в новом варианте я вернулся к структуре из эскиза №2 и вынес меню сервисов к левому краю, расположив вертикально. Для навигации, однако, решил использовать не слова, а иконки, как в эскизе №3.

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

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

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

По сути, в этом эскизе вернулась структура старого (существовавшего на тот момент) сайта, где слева - широкая колонка основного материала, в центре - колонка сопутствующих материалов и основных анонсов ИД, справа - рекламно-анонсная колонка.

Именно этот эскиз стал базовым и начал подвергаться коррекции и изменениям, местами - до неузнаваемости. Техническую часть этого процесса взвалил на себя Алексей Дубинин, «динозавр» и арт-директор Ъ-online, благодаря многолетнему опыту и консультациям которого мне, в процессе дальнейшего проектирования большого количества разных по функционалу страниц, удалось избежать катастрофического количества нелепостей.

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

Топ-меню

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

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

Первый (топовый) материал

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

Эскизные наброски (финальные варианты - на рабочем сайте):

Плеер

Пара эскизных вариантов встроенного плеера, в стиле winamp и более современном (в конечном варианте будет другой).

Навигационные пиктограммы

Когда дело дошло до отрисовки иконок сервисного меню (и еще некоторых разделов), мне подумалось, что традиционные иконки с фотоаппаратом на разделе фото и т. п., существующие на сотне тысяч сайтов, уже намозолили глаза. Я предложил использовать, хоть и менее очевидные для большинства пользователей, но более уникальные пиктограммы, которые будут работать не просто как визуально-ассоциативные маяки, а как идентификационные знаки непосредственно этого раздела исключительно на сайте «Ъ». «Мы - ИД "Коммерсантъ" - оправдывал я свое предложение перед руководством, - "и не следуем за привычками масс, мы их формируем!" Если пиктограмма "Блогов" представляет собой стилизованную букву "b" с глазами, отдаленно напоминающую сами знаете кого - значит так надо, и пользователь зафиксирует именно этот символ в связке с тематикой именно этого раздела с первого же раза. Особенно с учетом того, что они подписаны.

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

Первый вариант пиктограмм. Финальный вариант - на сайте.

Обоснование дополнил визуальным аргументом.

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

Также предполагался ряд дополнительных пиктограмм для разделов некоторых изданий. Например, в Уикенде (на этом примере также видны отличия в использовании иконок и пиктограмм):

Эскиз главной страницы Коммерсантъ-Weekend на ноябрь 2010г.

Эскиз главной страницы Коммерсантъ-Weekend на январь 2011г.

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

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

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

Калашник Виталий, креативный директор и шеф-дизайнер диджитал-проектов ИД «Коммерсант», арт-директор cylinderstudio.ru, для Adme.Ru

Иллюстраци - www.adme.ru