Как издание Chips Journal использует Setka Editor

Издатель Юлия Тонконогова — о ребрендинге и сходстве между Setka Editor и таблицами Excel

Аня Бугаева

Автор

Фотограф Глеб Леонов

Глеб Леонов

Фотограф

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

Мы пообщались с издателем журнала для родителей Chips Journal (в недавнем прошлом — «ЁжикЁжик») Юлией Тонконоговой. Она рассказала о том, как издание поменяло концепцию и дизайн, а также о том, почему Setka Editor — универсальный инструмент для верстки.


Елена Колобаева

продакт-менеджер Setka Editor

Мы всегда рады комментариям наших пользователей Setka. Наша команда прислушивается ко всем замечаниям и постоянно улучшает продукт на основе фидбэка клиентов. Именно поэтому мы публикуем честные кейсы — в них компании, использующие Setka, честно рассказывают о преимуществах и недостатках наших инструментов. Если вы хотите рассказать о своем опыте использования Setka Editor или Setka Workflow, пожалуйста, свяжитесь с нами: hello@setka.io.


ДАТА ОСНОВАНИЯ

сентябрь 2012

Аудитория

450 тыс. уникальных посетителей в месяц

Команда

11 человек

Город

Москва

Юлия Тонконогова

издатель

Идея проекта

Изначально мы планировали делать издание а-ля «TimeOut для родителей Москвы» и рассказывать о том, куда пойти с детьми. Последние шесть лет детская индустрия в Москве стремительно развивалась, и мы хотели использовать этот активный рост. Но со временем поняли, что одной афиши мероприятий нам мало.

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

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

Процесс

Мы стали первым сайтом с кастомной CMS, для которого настроили интеграцию с Setka Editor. В процессе интеграции появлялись некоторые шероховатости, однако техподдержка очень быстро реагировала на любые вопросы. Основные проблемы мы решили за первые два-три месяца. Ребята из Setka также помогли нам создать собственный стиль в редакторе: например, они разработали несколько шаблонов для материалов, которые мы, впоследствии, подогнали под себя.

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

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

Setka blog

Как использовать модульные сетки

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

Лайфхаки

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

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

Ребрендинг

В апреле 2018-го мы сделали ребрендинг, включающий смену названия и домена. Примерно год мы раздумывали над именем проекта, которое бы соответствовало новой концепции. В процессе советовались с другими медийными проектами и в итоге выбрали название «Chips Journal» — это слово, образованное от «children» и «parents».

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

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

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

Setka blog

Что такое сниппеты и как создавать их в Setka Editor

3 совета, как настроить
Setka Editor, если у вас редизайн


1

Создайте новый стиль и назначьте его основным (default). Отключите старый стиль (кнопка «Disable»), чтобы сохранить внешний вид постов, сверстанных в нем. При удалении стиля верстка материалов также теряется.

2

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

3

Мы не рекомендуем автоматически применять новый стиль к старым постам: есть риск испортить верстку. Важные для редакции материалы (лонгриды, рекламные проекты и т. п.) лучше вручную переверстать в новом стиле.

Создавая новый дизайн, мы ориентировались на такие сайты, как The Village, «Мел», «Сноб» и другие российские медиа. Также мы смотрели примеры западных сайтов, но… большинство зарубежных детских проектов — довольно местечковые. Крупные сайты также не подошли нам как ориентир, так как были нужны именно городские издания. В этом смысле мы могли рассматривать только нью-йоркский TimeOut Kids.

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

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

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

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

Посмотрите все возможности Setka Editor

Цели и планы

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

Также мы присматриваемся к новому инструменту внутри редактора — Design Cloud. У нас есть отдельная компания, которая продает спецпроекты на нескольких рекламных площадках: это два сайта под моим управлением (включая Chips Journal) и один партнерский. Поэтому нам было бы удобно верстать спецпроект в одном месте и затем размещать его на разных площадках. Это достаточно большая экономия денег и сохранение визуальной преемственности проекта на разных сайтах. Думаю, клиентам такой подход тоже понравится: не нужно бегать по трем площадкам и каждый раз согласовывать дизайн для одного и того же проекта.

Setka blog

Design Cloud: верстка в облаке для экспорта куда угодно

Елена Колобаева

продакт-менеджер Setka Editor

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

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