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

SONY DSC

Главный редактор Skyeng Magazine рассказывает о результатах введения нового дизайн-инструмента

Анна Савина

Автор

Глеб Леонов

Фотограф

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

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

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

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

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


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

ноябрь 2017 года

Аудитория

9 000 уникальных пользователей за первую неделю работы проекта

Команда

4 человека

Город

Москва

Лолита Груздева

главный редактор Skyeng Magazine

Идея проекта

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

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

«Делать» — рубрика о работе, хобби и о том, как прокачать себя, «Думать» — раздел о саморазвитии и мотивации (изучение английского языка всегда связано именно с ней). Рубрика «Говорить» посвящена популярной лингвистике (например, мы сделали видео с Линор Горалик об англицизмах из мира моды), а рубрика «Учиться» связана с нашим продуктом.

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

Мы запустили очень «легкую» версию сайта — это просто первый вариант того, что мы хотим сделать в будущем. У нас не будет новостей и мало материалов, привязанных к повестке, так что мы отказались от квадратных обложек постов на главной странице. Главная Skyeng Magazine — лента из публикаций с крупными заголовками и обложками, которые иногда будут перебиваться цитатами, фактами про английский язык, ссылками на наши социальные сети и возможность подписаться на рассылку Skyeng Weekly, чтобы была понятна связь со школой.

Мы разрабатывали фирменный стиль в несколько этапов. Когда к нашей команде присоединился дизайнер, мы начали работать над лендингом и собирать референсы: нам нравилась американская версия Hopes & Fears, Тинькофф-журнал и Life.ru — у последних отличная навигация. Кроме того, наш дизайнер смотрел на другие медиа в поиске маленьких решений — например, у vc.ru удобные теги. Для того чтобы лучше представить будущий сайт, мы решили описать идеального читателя — и даже делали подборку книг, которые ему нравятся (например, Designing Design основателя Muji Кении Хара).

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


СОВЕТ ДЛЯ начинающих

Луч­ше не вы­би­рать один из пред­уста­нов­лен­ных сти­лей в Style Manager, а при­ду­мать свой, осо­бен­но, ес­ли вы со­би­ра­е­тесь ис­поль­зо­вать ки­рил­ли­цу.

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

Процесс

Skyeng Magazine — это проект, которым занимаюсь я и Саша Кононенко, контент-директор. Над макетом работала дизайнер Надежда Шпиякина, сайт мы делали на WordPress. Я сама редактирую и верстаю посты. Когда еще даже концепции сайта не было, мы уже знали, что будем пользоваться Setka Editor. Была попытка свернуть с пути и попробовать Visual Composer. Я согласилась, чтобы понять, с каким инструментом легче работать. Примерно спустя сутки у меня полилась кровь из глаз, я сидела за компьютером и была готова расплакаться.

Setka blog

Что такое фирменный стиль издания и зачем он нужен вашему медиа

Мы вернулись к использованию Setka Editor. Верстка первой статьи заняла у меня примерно семь часов, но я все-таки справилась. Сейчас я трачу гораздо меньше времени на оформление материала, но все, конечно, зависит от того, насколько хорошо подготовлен текст: например, прописаны ли все сноски. Каждый материал состоит из четырех элементов: текст, боковые сноски, wordset со словами, переведенными с английского языка, и фотографии. Если все четыре элемента уже готовы и мне не нужно писать wordset, верстка занимает минут тридцать. Все просто, потому что мы настроили свой стиль в Style Manager. Сначала мы верстали посты в четыре колонки, но меня не устроил результат, и сейчас мы используем шестиколоночную сетку.

Setka blog

Что такое модульные сетки и зачем они нужны

Цели и планы

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

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

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

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

Лайфхаки

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

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

Еще мне кажется, что не нужно слепо копировать стиль других СМИ — например, в США модно использовать крупные элементы верстки. У нас аудитории такое оформление кажется слишком навязчивым — в кириллице крупные элементы смотрятся неудачно.

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

Setka blog

Как бизнес-издание Inc. Russia использует Setka Editor

Сергей Родионов

арт-директор Setka

Советую покупать красивые кириллические веб-шрифты у российских дизайнеров (CSTM Fonts, Letterhead, Paratype, Романа Горницкого, Андрия Шевченка), потому что носители языка понимают систему букв лучше иностранцев. Конечно, вы можете использовать бесплатные кириллические шрифты из библиотеки Google Fonts или Typekit, но из-за их популярности вам будет труднее сделать так, чтобы у издания был оригинальный узнаваемый почерк.Чтобы подобрать гармоничную и подходящую по теме шрифтовую пару (для заголовка и основного текста), изучите красивые примеры с использованием кириллической типографики: плакаты фильмов, обложки книг. В этом смысле мне очень нравится то, что делает дизайнер Кирилл Глущенко: он привносит эстетику советской типографики в веб-среду.


Никита Лаврухин

менеджер по поддержке клиентов

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