Как Setka Editor помогает изданию Flacon Magazine наладить ежедневный выпуск и верстать на несколько дней вперед

Арт-директор онлайн-версии журнала — о нестандартных дизайн-приемах и быстром обучении новых дизайнеров

Аня Бугаева

Автор

Глеб леонов

Фотограф

Flacon Magazine — печатное медиа о красоте, которое четыре раза в год выпускает команда под руководством Алёны Долецкой. Его диджитал-версия — это самостоятельный продукт, который лишь частично заимствует материалы из печатного издания. Онлайн-журнал Flacon Magazine задумывался как площадка для общения журналистов, читателей и косметических брендов. Ежедневно здесь выходят полезные статьи, колонки блогеров и мнения экспертов.

Арт-директор сайта Андрей Трофименко рассказал о том, как рождался визуальный стиль нового онлайн-издания и как команда постепенно раскрывает потенциал Setka Editor.

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


ТЕМАТИКА

Бьюти-издание


АУДИТОРИЯ

750 000 посетителей в месяц


КОМАНДА

16 человек


ГОРОД

Москва


переЗАПУСК

2018

Андрей трофименко

Арт-директор онлайн-издания Flacon Magazine

Запуск журнала

Первый номер обновленного печатного журнала Flacon Magazine вышел в сентябре 2018-го — издание перезапустила команда под руководством Алёны Долецкой. У печатных журналов в принципе довольно широкая аудитория, но команда Flacon Magazine направила внимание на более вдумчивых читателей. При этом она старается выступать новатором, в чем-то — немного хулиганить, в чем-то — быть более понятной. Из журнала ушел сухой описательный язык, его место занял более прямой, честный диалог.

Онлайн-версия Flacon Magazine стала логичным продолжением этой идеи. Издание востребовано у молодой аудитории 20–35 лет, и мы стараемся сделать его более живым и соответствующим медиатрендам.

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

 

Как создавали дизайн онлайн-издания

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

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

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

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

Как дизайнеры осваивали Setka Editor

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

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

совет


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

Как устроены верстка и выпуск постов

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

Мы используем комбинацию инструментов: Setka Editor для верстки и Setka Workflow для планирования — они значительно облегчили и ускорили процесс выпуска. В целом у нас только положительные впечатления от онлайн-редактора. В плане удобства, понятности интерфейса, скорости обучения и верстки — все очень классно.

Инструменты Setka значительно облегчили и ускорили процесс выпуска.


В первые месяцы после запуска админка сайта работала нестабильно, поэтому верстать в Setka Editor через нее было неудобно. Мы остановились на варианте делать дизайн в облаке и затем переносить HTML-код на сайт. Возможно, позже мы сделаем ревизию админки и настроим ее под свои задачи. Сейчас в ней работают корректор и выпускающий редактор: они проверяют и правят сверстанный материал прямо в окне онлайн-редактора.

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

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

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

В планах — спецпроекты и новые эксперименты с версткой

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

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

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

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

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

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


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

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

Мы стараемся сделать так, чтобы любым участникам команды, независимо от их опыта, было удобно работать в редакторе. Время, за которое человек осваивает Setka Editor — важный показатель удобства. Чем быстрее команда подключает сотрудников к верстке — тем быстрее запускает новое издание и налаживает регулярный выпуск постов. Опыт Flacon Magazine показывает, что работая над интерфейсом и новыми функциями редактора, мы движемся в правильном направлении.

Попробуйте бесплатно

Демо-версия на 14 дней. Карта не требуется

Начать