Как журнал Inc. использует Setka Editor

Aрт-директор Михаил Питерский рассказывает о работе с дизайн-инструментами Setka, рабочем процессе и выпуске нестандартных материалов

Анна Савина

Анна Савина

Автор

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

Глеб Леонов

Фотограф

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

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

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

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

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


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

2016

Аудитория

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

Команда

15 человек

Город

Москва

Михаил Питерский

арт-директор Inc.

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

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

У нас были простые референсы — конечно, нам нравился дизайн Bloomberg Businessweek. Больше мы себя ни с кем не сравнивали. Это бизнес-издание вдохновило нас на некоторые цветовые решения (синий, зеленый, фиолетовый), хотя они, конечно, не уникальны для Bloomberg и в целом ассоциируются с бизнесом.

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

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

Setka blog

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

Процесс

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

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


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

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

Сейчас мы не используем сниппеты и Post Templates в Setka Editor. Может быть, мы скоро попробуем их использовать, но, если нужно скопировать какие-то части из одного поста в другой, мы просто нажимаем Cmd-C и Cmd-V.

Нестандартные материалы

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

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

Setka blog

Шаблоны для постов и группировка сниппетов

Цели и планы

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

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

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

Сейчас мы медленно обновляем весь сайт. Я пытаюсь заложить микромодуль для всех страниц, который будет подчинять себе все остальные элементы сайта. Это очень простой принцип, который используют многие дизайнеры. Микромодуль — самая маленькая единица измерения в сетке. Это может быть квадратик 4×4 пикселя, или 8×8, или 10×10. В соответствии с этим микромодулем выстраиваются все остальные взаимоотношения между элементами на сайте. Не только поколоночная верстка, но и горизонтальные соотношения. Такой подход сильно упростит задачу по систематизации всех элементов.

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

Лайфхаки

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

Setka blog

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

Роман Худоногов

директор по продукту Setka

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

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

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