Как сайт «Большая Деревня» использует Setka Editor

Главный редактор Полина Накрайникова — о фирменном стиле, подходе к верстке и интерфейсе онлайн-редактора

Анастасия Орехова

Автор

Артем Голяков

Фотограф

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

«Большая Деревня» — сайт о жизни и развлечениях в Самаре, который запустили в 2013 году. Редакция пишет о городских событиях, местных героях, бизнесе, моде и ресторанах. Главный редактор Полина Накрайникова рассказала о подходе к оформлению статей и самых полезных функциях Setka Editor.


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

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

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


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

2013

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

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

Команда

15 человек

Город

Самара

Полина Накрайникова

главный редактор сайта «Большая Деревня»

Идея проекта

Сайт «Большой Деревни» начал работу на кухнях редакционного топ-менеджмента: первые планерки проходили дома у Тани Симаковой, Леры Алфимовой и Саши Краснова. Каким был самый первый материал, сегодня вряд ли кто-то вспомнит, но известно, что в числе ранних публикаций — интервью с человеком, который везде ходит со змеей на шее, диалог с Big Russian Boss, обзор твиттер-аккаунтов самарских чиновников и психоделический гид по Сызрани.

За пять лет формат сайта сильно изменился. Первую версию «Большой Деревни» создавал человек, который до этого запускал интернет-магазины: он удивлялся, почему на bigvill.ru не должно быть кнопки «Купить». Админка была предельно простая и медленная, поэтому в 2015 году совместно с разработчиками компании Cloud Castle мы обновили сайт: сменили рубрикатор, добавили ленту новостей и сделали его более удобным для чтения.

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

Сегодня наша команда — это я, главный редактор Полина Накрайникова, коммерческий директор Аня Чайковская и руководитель проекта Виталий Копалиани. В редакции на постоянной и временной основе работают 15 человек: это редакционный, коммерческий и новостной отдел. Еще у нас два дизайнера: Яна Сачук и Никита Базанов, они отвечают за верстку и всю красоту нашего сайта.

Мы считаем, что жить на Волге — весело. «Большая Деревня» пропагандирует волжский гедонизм, устраивает вечеринки для читателей и проводит барахолки. Наша редакция очень открытая: мы отвечаем практически на каждый комментарий в соцсетях, и многие материалы появляются на сайте именно с подачи читателей. Также мы всегда готовы к сотрудничеству с новыми авторами: в 2016 году мы проводили открытую школу журналистики «Зеленка», в 2017 — бесплатный тренинг «Перемена» для студенческих медиа.


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

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

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

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

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

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

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

Setka blog

Что такое фирменный стиль

Процесс

Небольшие тексты с минимумом иллюстраций на сайт выкладывают сотрудники отдела новостей. Что касается крупных материалов и рубрик, то за их верстку полностью отвечают дизайнеры. На старте «Большой Деревни» мы использовали WordPress со встроенными плагинами, но развитие сайта требовало более красивой, понятной, а главное, удобной для чтения верстки. Так, летом 2016-го мы перешли на Setka Editor.

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

Setka blog

Как использовать модульные сетки

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

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

Главное, чем бы мы хотели дополнить инструмент Setka Editor — это адаптировать верстку для компьютера под мобильную версию. В редакторе можно посмотреть, как выглядит текст на экране смартфона, но переместить и изменить элементы в мобильной версии нельзя. Из-за этого нам иногда приходится отказываться от красивого сложного оформления (а ведь согласно статистике 70% аудитории читает нас на смартфоне).

Цели и планы

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

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

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

Лайфхаки

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

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

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

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

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