Как компания Skillbox использует Setka Editor

Верстка в рамках дизайн-системы и собственный набор сниппетов

Аня Бугаева

Автор

Глеб леонов

Фотограф

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

Skillbox — это онлайн-университет новых профессий в области разработки, маркетинга, дизайна и управления проектами. На образовательной платформе обучаются более 20 тысяч студентов, которым преподают лидеры в своих областях. Чтобы поддерживать и расширять комьюнити вокруг университета, компания проводит 600 вебинаров в год и выпускает корпоративное медиа. Мы поговорили с его руководителем Алиной Гашинской о том, как устроена дизайн-система медиа и как необходимость сверстать 36 статей за два дня помогла быстро освоить возможности Setka Editor.

Если вы хотите рассказать об опыте использования Setka Editor или Setka Workflow, напишите нам hello@setka.io.


Сайт

Skillbox.ru


ТЕМАТИКА

Образование


АУДИТОРИЯ

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


КОМАНДА

16 человек


ГОРОД

Москва


ЗАПУСК

2018

Алина Гашинская

Руководитель медиа

Идея проекта

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

Мы постарались сделать все, чтобы уже на старте получить первую аудиторию. Совместно с агентством IT-Agency подготовили структуру будущего медиа, и параллельно арт-директор разработала дизайн-систему, дизайн главной страницы сайта Skillbox, куда выводятся статьи, а также внешний вид статей в соответствии с предложенной на тот момент структурой. Дизайн прошел несколько итераций, и в текущем виде медиа появилось в июле 2018-го.

Мы остановились на четырех основных форматах материалов: статья, подборка, руководство и интервью. Совсем недавно запустили истории — рассказы наших выпускников и студентов.

Фирменный стиль

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

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

С этой целью в рамках общей дизайн-системы мы разработали отдельную систему для изображений внутри статей. Думаю, это одна из причин, по которой сейчас мы имеем хороший показатель времени, проведенного на страницах (в среднем 3–5 минут) и достаточно маленький процент отказов — в среднем 3,3%. Но мы, конечно, понимаем, что в плане дизайна и подачи материалов нам еще есть куда расти.

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

Процесс

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

Помимо меня, есть двое редакторов, каждый из которых отвечает за два направления, и пул авторов — по 2–3 на каждое направление. Также в нашей команде автор статей для «Хабра», двое корректоров, контент-менеджер и выпускающий редактор.

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

Мы планировали начать верстать статьи в визуальном редакторе нашей CMS — «1С-Битрикс», а уже затем перейти на Setka Editor. Исходя из опыта работы в редакции, я понимала: если мы начнем верстать в «Битриксе», то так и продолжим. То есть нужно было сразу использовать готовое решение или разрабатывать его самим. На второе у нас не было ресурсов, поэтому выбирали между существующими WYSIWYG-редакторами. Ранее я уже работала с продуктом компании Setka — Workflow и знала, как это удобно. Учитывая, что нужно было решение для медиа, которое к тому же можно интегрировать в «1С-Битрикс», в итоге мы остановились на Setka Editor.

Три лайфхака


1.

Закладывайте время на внедрение


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


2.

Подготовьте набор сниппетов


Базовая настройка стилей и предустановленный набор сниппетов помогут начать верстать в Setka Editor, если нужно «здесь и сейчас».


3.

Сверстайте много материалов быстро


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

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

Мы подключили Setka Editor примерно за неделю до запуска медиа, а выпускающий редактор появился у нас только через полтора месяца. И когда нам понадобилось сверстать первые 36 материалов, мы с двумя редакторами справились за два дня. Конечно, было тяжело, поскольку сделать нужно было срочно. Благодаря тому, что в процессе верстки мы видели результат, а также заранее подготовили сниппеты — смогли успеть в срок.

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

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

Совет


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


Цели и планы

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

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

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

ЕЛЕНА КОЛОБАЕВА

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


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

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

Если вы хотите рассказать об опыте использования Setka Editor или Setka Workflow, напишите нам hello@setka.io.

Помимо этого, мы стремимся ускорить процесс интеграции Setka Editor в сайт. Недавно мы разработали модуль онлайн-редактора для CMS-решения «1С-Битрикс: Управление сайтом». Теперь настройка редактора занимает несколько минут: достаточно установить модуль и ввести в настройках лицензионный ключ от аккаунта.