Как издание britanka.media использует Setka Editor

Главный редактор издания Ирина Сергеева рассказывает, как запустить медиа малыми силами и начать верстать, если до этого не верстали

АННА Бугаева

Автор

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

Глеб Леонов

Фотограф

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

Мы поговорили с Ириной Сергеевой — главредом britanka.media, нового издания Британской высшей школы дизайна. Она рассказала о том, кто и как делает первое в России медиа об ответственном дизайне.


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

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

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


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

февраль 2018-го

Посещаемость

2 000 посетителей в день за первую неделю после запуска

Команда

3 человека

Город

Москва

видеооператор Иван Анисимов, дизайнер Екатерина шестакова и главный редактор Ирина Сергеева

команда издания britanka.media

Идея проекта

Первую версию britanka.media мы запускали как обыкновенный блог, который закрывал пробел на сайте школы, где было мало историй о людях и рассказов от первого лица. В основном мы рассказывали о студентах и их проектах.

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

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

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

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

Setka blog

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

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

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

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


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

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

Нам хотелось, чтобы медиа стало узнаваемым, поэтому мы разработали дизайнерские шаблоны для разных форматов: например, чтобы использовать айдентику в наших группах в социальных сетях. Также мы используем фирменные элементы для оформления видео: мы, например, анимировали заставку. Здорово, что за короткое время и малыми силами мы смогли создать целую дизайн-систему! При этом мы понимаем, что создали MVP (minimum viable product), который нам интересно развивать дальше — и с точки зрения дизайна, и с точки зрения контента.

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

Процесс

Мы делаем britanka.media своими силами: в школе все настолько горят идеями, что всегда готовы броситься с головой в какую-нибудь историю. В эту историю с головой бросилась я сама — помимо digital-коммуникаций в самой «Британке», теперь я занимаюсь изданием в качестве главного редактора. Также в команде есть видеограф, с которым мы делаем небольшие репортажи (мы, в принципе, планируем делать акцент на видео-контенте), и есть дизайнер, который помогает нам с айдентикой. Я постоянно общаюсь с коллегами и кураторами школьных программ: они как эксперты помогают формировать понимание того, о чем стоит рассказывать.

С Setka Editor работаю только я. И, как, наверное, любой человек, который только начал работать с редактором, я использую его довольно аккуратно. Думаю, в будущем к работе с ним подключится наш дизайнер: мне бы очень хотелось такого «арт-директорства» над нашим проектом.

Верстка всегда была моей болью, потому что было не понятно, как «выжать» из стандартных редакторов что-то более-менее приличное: сделать выносы, акцентировать внимание читателя на различных контентных блоках и т. д. Я посмотрела много примеров верстки: на The Village, в русской версии Inc., Raconteur, 99U, в других западных медиа и, особенно, как это выглядит в медийных лонгридах, где важно правильно «провести» читателя по материалу.

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

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

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

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

Для britanka.media мы выбрали систему из восьми колонок: это показалось нам оптимальным решением для того, чтобы использовать интересные приемы, например, подписывать различные элементы или оформлять профайлы экспертов.

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

Setka blog

Как использовать шрифтовые пары: простые советы для медиа

Цели и планы

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

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

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

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

Лайфхаки

Когда вы только начинаете работать с Setka Editor (да и с любым инструментом для верстки), перед тем как выпустить материал, покажите его пяти людям и посмотрите на их реакцию. Такой подход помог нам исправить кучу ошибок.

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

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

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

Setka blog

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

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

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

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

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