Лого vc.ru

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

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

Редакция vc.ru пообщалась с Сергеем Сургановым, работающим над дизайном издания Meduza, а ранее занимавшимся сайтом «Почты России» и проектом «Сделано», — о том, как устроена работа в дизайн-команде издания, почему компания отказалась от сотрудничества с внешней дизайн-студией, удачных и неудачных решениях, инструментах и метриках.

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

О дизайн-команде 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-каналами про смешные картинки.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Теги
Статьи по теме
Как устроена система управления контентом в издании «Медуза»

Ребенок внизу первой фотки - это лучшее в материале!

0

Медуза, да разбань ты меня в вк

0

Привет, меня зовут Женя. Ребята, а можете поделиться опытом - как вам удается работать на столько круто вдвоем? У нас похожая ситуация - мы работаем в Welltory с Катей, и тоже вдвоем.

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

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

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

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

Когда задачи правильно оцениваются, то ты никогда не проваливаешь сроки. Когда ты не проваливаешь сроки, то не возникает авралов, стресса, паники и т. д. Глаза боятся, руки делают. Очень помогает использование Sketch — в нем можно ОЧЕНЬ быстро работать, и все шаблонизировать.

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

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

Ну помогает и опыт работы, конечно же. Когда я 6 лет назад работал в СКБ Контур, то тоже был бесконечный поток задач, и всего несколько рук, там я всему и научился в плане организации своей работы. Каждый раз просто думаешь — а как успеть сделать все, и вовремя уйти с работы? Решение всегда находится.

0

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

0

Просто хочу узнать как можно оптимизировать работу с новостями. Или вы на такие вопросы не отвечаете?

Я могу хорошо рассказать только про то, чем я сам занимаюсь

Спасибо за интересную колонку. И я с удовольствием читаю ваш канал в телеграме.

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

0

Хотим и уберем, до футера никак руки не до ходят просто

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

0

Смотри растопчу ;-)

0

уже растоптал первым комментарием :)

0

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

0

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

0

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

0

На моем бихансе есть хайрезы в 1600 px по ширине
behance.net/surganov

0

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

Особенно мучительно, когда абстрактные гифки. Например, про Пайета: meduza.io/feature/2017/01/21/vsya-angliya-obsuzhdaet-frantsuza-kotoryy-ne-hochet-igrat-za-vest-hem-pochemu-ob-yasnyaem-na-gifkah-s-lyagushkami

Но может я и придераюсь, хз.

Эту штуку поправим точно, проблема такая есть, знаю

0

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

Крутой формат с видо! А есть видос такой же, но на английском?

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

0

На английском нету(

Хреново же работает? Первая версия, которую Чармер (кажется) делал, вызывала немало вопросов, но при этом была "цельная" и аккуратная. Сейчас же получилось просто адово месиво. Еще и сверстано колхозниками.

0

Видео классное, продолжайте с этим форматом обязательно)

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

0

Мне иконка с каралкулями понравилась больше всего. Это дитенок (который на фотке) рисовал?)

0

Попробуйте догадаться, что обозначала эта иконка, ха-ха

0

А что там насчет видюх у Медузы? Они что, тож с ютуба подкачиваются через iframe? Ужас как страницу тормозит с десяток видюх на одной странице(десять ифреймов) Нельзя ли напрямую виде просматривать через html5 video тег?

0

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

0

Вы говорите про вот эту версию?

0

ПО новостям на сайте Медузы грубая ошибка -
"поставки оружия В Украину, а не "НА Украину",

россияне пишут "Произошло в России", а не "Произошло НА России" - с приставкой "в" пишут страны/полуострова, а острова с приставкой "НА"- "На Кипр", "На Мальдивы"

Удивительно, но к русскому языку претензии у каждой незалежной страны СНГ есть. Кого-то не устраивает на/в, хотя, казалось, какое им дело: сами главное говорите, как считаете нужным. Кто-то кричит, что нужно использовать "ы", а не "и" после "к". Хотя их нисколько не смущают французы, которые вообще название на свой лад переиначили, или англоговорящие.

Врезки «еще на эту тему» создают ощущение, что статья закончилась, а иногда это не так: meduza.io/feature/2016/05/19/chto-pokazali-na-konferentsii-google-glavnoe Чуть не закрыл статью на этом месте

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

Прямой эфир
Узнавайте первым важные новости
Подписаться