В рубрике «Кейсы» мы говорим об опыте и инсайтах изданий и брендов, которые используют инструменты компании Setka.
В интервью герои рассказывают о своих медиа и внутренних процессах, делятся лайфхаками, которые применяют в работе для улучшения дизайна материалов и создания красивой верстки. Мы поговорили с арт-директором журнала Inc. Михаилом Питерским. Он рассказал Setka Blog, как создавался фирменный стиль нового медиа и какие приемы использует дизайн-отдел.
Елена Колобаева
продакт-менеджер Setka Editor
Мы всегда рады комментариям наших пользователей Setka. Наша команда прислушивается ко всем замечаниям и постоянно улучшает продукт на основе фидбэка клиентов. Именно поэтому мы публикуем честные кейсы — в них компании, использующие Setka, честно рассказывают о преимуществах и недостатках наших инструментов. Если вы хотите рассказать о своем опыте использования Setka Editor или Setka Workflow, пожалуйста, свяжитесь с нами: hello@setka.io.
ДАТА ОСНОВАНИЯ
2016
Аудитория
800 тыс. уникальных пользователей в месяц
Команда
15 человек
Город
Москва
Михаил Питерский
арт-директор Inc.
Фирменный стиль
Когда я начал работать в Inc., у них уже были настроены стили. Мне нужно было их развить и адаптировать под новые задачи: главному редактору хотелось, чтобы дизайн выглядел «дороже». Нужно было сделать все элементы более строгими, одновременно оставив в каких-то рубриках ироничное и даже игривое настроение.
У нас были простые референсы — конечно, нам нравился дизайн Bloomberg Businessweek. Больше мы себя ни с кем не сравнивали. Это бизнес-издание вдохновило нас на некоторые цветовые решения (синий, зеленый, фиолетовый), хотя они, конечно, не уникальны для Bloomberg и в целом ассоциируются с бизнесом.
Работая над стилем издания, я также сократил количество шрифтовых начертаний. Поработал с интерлиньяжами и в целом с типографикой. Правда, потом оказалось, что большое количество начертаний, которое предполагал наш фирменный стиль, возникло не случайно. Постепенно мы вернулись к большому числу начертаний. Вместе с новым дизайнером мы добавляли их по мере надобности, и ни одно начертание не было случайным. С тем, что было сделано чужим человеком до этого, было непросто работать.
Мы были готовы к быстрым изменениям фирменного стиля: постоянно возникали новые форматы и рубрики, потому что журнал молодой и все быстро развивается. Из-за этого часто возникала потребность в уникальном отображении какого-то элемента, так что появлялись все эти дополнительные начертания. На главной у нас максимум три вида заголовков, а внутри, конечно, это все работает немного иначе. Начертаний больше, и их количество сложно сократить.
Процесс
Наш рабочий процесс организован довольно просто. Если редактор может залить текст в «админку», то, скорее всего, материал уже не будет сильно меняться — максимум, его проверит корректор, или, если нужно, дизайн-отдел может попросить сделать дополнительные выносы или переупаковать контент.
Обычно мы верстаем все тексты по уже сложившемуся у нас шаблону. За последние месяцы у нас сформировались рубрики, и для каждой из них у редакции есть готовые решения. Мы заранее знаем, как будет выглядеть пост для каждой рубрики. Например, если это интервью, то у нас будет десять колонок, и первые четыре мы пропускаем, чтобы использовать их для выносов и комментариев, а остальные шесть — для основного текста.
СОВЕТ ДЛЯ начинающих
Выбирайте максимально большую по количеству колонок сетку, которая делится на четное число: это позволит делать материалы с интересной версткой
Сейчас мы не используем сниппеты и Post Templates в Setka Editor. Может быть, мы скоро попробуем их использовать, но, если нужно скопировать какие-то части из одного поста в другой, мы просто нажимаем Cmd-C и Cmd-V.
Нестандартные материалы
Конечно, иногда мы делаем что-то уникальное — большой пост, который отличается от всего остального, что было до этого. Чаще всего мы делаем сложную верстку для больших интервью и для раздела «Бизнес-кодекс».
В целом, оформление больших материалов (например, лонгрида про БВШД или расследования про бизнес «Стрелки»), не сильно отличается по приемам от остальных. В длинных постах больше «воздуха» и есть какие-то детали, на которые нам обычно не хватает времени: например, инфографика и продуманные заранее иллюстрации.
Цели и планы
У нас много задач. Пока нам только удалось наладить выпуск регулярных рубрик и все систематизировать. Надеюсь, скоро у нас появится возможность продумать какие-то большие вещи, делать материалы, которые требуют много времени на производство. Нам бы хотелось больше работать с анимацией: сейчас мы делаем просто «выезды» для некоторых элементов, но хотелось бы найти более интересный подход.
Быстрый выпуск регулярных материалов, шаблоны рубрик и постов, анимации.
Посмотрите все возможности Setka Editor
Сейчас мы медленно обновляем весь сайт. Я пытаюсь заложить микромодуль для всех страниц, который будет подчинять себе все остальные элементы сайта. Это очень простой принцип, который используют многие дизайнеры. Микромодуль — самая маленькая единица измерения в сетке. Это может быть квадратик 4×4 пикселя, или 8×8, или 10×10. В соответствии с этим микромодулем выстраиваются все остальные взаимоотношения между элементами на сайте. Не только поколоночная верстка, но и горизонтальные соотношения. Такой подход сильно упростит задачу по систематизации всех элементов.
К сожалению, в Setka это довольно сложно, потому что в редакторе нужно указывать все в процентах, а вычислять все попиксельно нельзя. То же касается интерлиньяжа шрифтов. Сейчас отступы либо стандартизированы (предлагается выбрать из пяти или шести отступов между элементами), либо нужно написать стандартный размер интерлиньяжа в процентах в соответствии с кеглем шрифта. Это здорово, но хочется иметь немного больше управления. Хочется иногда специально допустить какую-то ошибку, либо, наоборот, все сделать идеально ровно, чтобы по всем строкам было выравнивание по нижней базовой линии.
Лайфхаки
Мне кажется, каждый должен сам искать подходящие приемы для своего издания и своей команды. Продвинутому пользователю я бы посоветовал сразу же создать максимально большую по количеству колонок сетку, которая делится на четное число: это позволит делать сложные материалы. Кроме того, это позволит делать маленькие выносы на полях и избегать лишних «дыр» в верстке. Правда, этот совет может как дать толчок к развитию, так и послужить разрушительным фактором, потому что недостаточно опытный дизайнер может переборщить с мелкими элементами верстки и у него получится аляпистая, неструктурная вещь. Везде нужен индивидуальный подход!
Роман Худоногов
директор по продукту Setka
Всегда приятно, когда клиенты удивляют нас и используют методы и подходы, которые мы не закладывали в функции Setka Editor. Верно, что у Setka Editor есть некоторые ограничения в попиксельном управлении элементами. Также верно, что подход с использованием микромодулей — один из возможных.
Мы искали и, как нам кажется, нашли баланс между бескомпромиссным, универсальным, тяжеловесным, только-для-дизайнеров инструментом и оптимизированным сервисом, поддерживающим базовые принципы хорошей верстки для современного веба сразу «из коробки».
В этом смысле автоматический расчет вертикальных отступов согласно заданному межстрочному расстоянию является следствием наших идей. В Setka Editor не надо думать о размере отступа в пикселях и одним кликом можно выбрать одиночный, двойной или тройной отступ, вообще никак его отдельно не настраивая. Не исключаем появление более тонких настроек в будущем, но только в том объеме, который сохранит баланс функций простой интеграции редактора, быстрого процесса выпуска контента и оптимального отображения на всех устройствах.
