Как работает дизайн-команда Meduza — Интервью с дизайнером Сергеем Сургановым25.01.2017 15:37

Сергей Сурганов

О дизайн-команде Meduza

Весь дизайн «Медузы» создается внутренними силами нашего отдела. Исключение делается лишь для иллюстраций в длинных текстах, но заказываем мы их довольно редко.

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

Во-первых, мы занимаемся сайтом «Медузы» и приложениями (iOS, Android, Windows), а также другими каналами доставки — соцсети, мессенджеры, email-рассылка, расширения для Chrome, push-уведомления и так далее. Сюда же можно включить оформление редакционных форматов — например, увеличить шрифт в статьях, добавить новые средства выразительности, запустить новый формат, переделать старый. Это, можно сказать, «рама» для редакционного контента.

Во-вторых, дизайнеры «Медузы» занимаются оформлением некоторых редакционных и рекламных материалов. Фотографиями занимается фотоотдел, но когда нужна инфографика, карта, иллюстрация, иконка, видеоэксплейнер, любой текст на картинке или что угодно интерактивное — вступает дизайнер.

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

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

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

И, в-четвертых, мы занимаемся всеми новыми проектами, работающими на бренд «Медузы» — такими как серия конференций «Шторм» или школа журналистики и медиаменджмента «Ферма». С точки зрения дизайна, запуск подобного проекта предполагает разработку нового фирменного стиля, проектирование лендинга и оформление всех возможных носителей, в том числе и печатных.

Редакция Meduza

Как устроена работа в дизайн-команде Meduza

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

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

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

Илья Красильщик, Сергей Сурганов и Настя Яровая

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

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

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

О том, чем СМИ отличаются от других проектов

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

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

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

О сотрудничестве с дизайн-студиями

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

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

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

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

О первых днях работы над Meduza

Все, что мне досталось от студии — это сайт, уже переживший один редизайн (помните, когда «Медуза» запустилась, она была полностью черная?), два мобильных приложения (iOS и Android) и несколько макетов приложения для Windows.

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

Один из первых дизайнов Meduza, подготовленный студией Charmer

Главная страница Meduza сейчас

Страница статьи на Meduza сейчас

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

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

Один из первых дизайнов приложений Meduza, подготовленный студией Charmer

Обновленный дизайн приложений Meduza для iOS

Обновленный дизайн приложений Meduza для Android

Meduza для Windows

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

Также мы постепенно обновили весь сайт — внутренние страницы, например, изменились до неузнаваемости. Мы сменили заголовочный шрифт (Helvetica очень не нравилась редакции), переделали Share-картинки, добавили регистрацию и чаты, запустили форматы «В одной картинке», «Удивительные цифры», «Инструкции» и полностью переосмыслили то, как работают игры и тесты.

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

Редакционная система «Монитор»

О постоянных изменениях

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

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

О неудачных и удачных решениях

Когда мы переделали внутренние страницы, то передвинули блок подписки на «Вечернюю Медузу» сильно ниже — и тут же резко снизилось количество новых подписчиков. Глупо? Да. Очевидно? Да.

Чуть менее очевидный пример — про индикатор верифицированности источника. У каждой новости на «Медузе» есть отметка «Надежный источник», «Требует подтверждения» или «Ненадежный». Сейчас это обозначается через иконки, но раньше для индикации использовались три разных цвета, как у светофора. Такое решение никак не учитывало тот факт, что по статистике у 8% процентов мужчин есть нарушения цветовосприятия.

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

Об унификации дизайна

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

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

Я довольно быстро замучался рисовать это в Sketch, и в конце-концов сделал прототип на React.js, с использованием реальных данных через API «Медузы». С помощью этого прототипа я мог менять размеры шрифтов и двигать пиксели, меняя лишь цифры в редакторе кода —, а вся система перестраивалась сама.

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

Об инструментах

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

Общение с редакцией и разработчиками проходит через Slack — у нас больше 300 каналов, потому что на каждый мало-мальский проект (например, выпуск очередной рекламной игры) мы создаем новый канал, так удобнее. Я счастлив, что мне практически не приходится использовать электронную почту по работе (ставить кого-то «в копию», и участвовать в этих многоэтажных переписках? брр!).

О метриках

В нашем случае довольно сложно оценивать эффективность дизайна через метрики — потому что как правило речь идет о качественных, а не о количественных изменениях. Как померить то, чего раньше не существовало? Конечно, дизайн вносит свою лепту в общую посещаемость, глубину просмотра и процент доскроллов, но нельзя забывать, что Content is a king, и никакая красота не поможет неинтересной статье.

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

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

О видео в Meduza

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

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

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

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

О будущем СМИ

Отвечу словами Уильяма Гибсона: «Будущее уже наступило, просто оно еще неравномерно распределено». Уже сейчас понятно, что из-за соцсетей сильно снизилась роль главной страницы СМИ, мобильные телефоны обогнали десктопы по количеству траффика, а контент становится все более мультимедийным и интерактивным. Только вот до сих пор не все это понимают, к сожалению.

СМИ вообще до сих пор приходится очень нелегко — все очень быстро меняется, Google и Facebook довольно сильно залезли на территорию медиакомпаний, плюс недавняя история с победой Трампа наглядно показала, что влияние СМИ в современном мире сильно переоценено. Но самое главное, что внимание стало в интернете новой валютой, и поэтому медиа конкурируют не только с другими медиа, но и с, условно, Telegram-каналами про смешные картинки.