Как мы тематический сайт редизайнили и пересобирали

Под редизайном редакторы сайтов часто подразумевают изменения, которые «сделают красиво». Или «по-новому», потому что «картинка приелась». Мы в sdelano.media счастливо избежали этого стереотипа. нам хотелось «сначала полезно, потом красиво»; Это стоило нам 365 дней тяжелой редакторской работы по пересборке всего ресурса.

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

Это была корневая идея. За эти годы менялись внешний вид, название, расположение блоков, наполнение. Но первоначальная идея связанности «что мы сделали» и «как мы это сделали» остаётся до сих пор.

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

Но в этот раз мы решали не только технические задачи, но и смысловые. То, что мы легко сейчас делаем на новом дизайне, было невозможной (или долгой и муторной) ручной работой на предыдущих. Мне хотелось иметь в энциклопедии любые тематические подборки. Быстро. В один клик. По любому критерию. Я раньше работала на новосибирском проекте «Электронный город», где увязка контента была положена в основу контента портала. Хотелось использовать этот приём и на sdelano.media

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

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

Параллельно на Miro мы формировали сквозную систему тегов.

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

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

У сайта за время его работы было несколько редакторов, но до этого у нас не было сквозного документа редакционных стандартов, которые позволяли бы передавать сайт от одного редактора к другому. Поэтому у каждого редактора была своя стилистика заголовков, свой подход к структурированию материала. Но в нашем формате смена редактора не должна быть заметна пользователю, потому что мы формируем энциклопедию. И те материалы, которые написаны в 2015 году, они не менее интересны и должны быть похожи на те материалы, которые мы пишем в 2024 году. Во время редизайна мы это всё стандартизировали и упорядочили.

В каждом из сотен материалов изменили заголовки и прописали паспорта кейсов, привели их к стандартам.

Редактор сайта Анастасия Шагаева комментирует: «Ценно, что редизайн привёл нас к написанию редакционных стандартов. Это заняло у меня несколько месяцев. Но теперь у нас есть рабочий документ, в котором прописано всё от и до: на какие вопросы автор текстов должен получить ответы, какой визуал запросить, как оформить текст, в каком виде его сдать, какие обвесы нужны и пр. С такими редстандартами можно запускать конвейер: условно, мы можем нанять 15 авторов, и они все будут выдавать по этому стандарту приемлемый контент, не выбивая из колеи редактора».

От некоторых элементов пришлось отказаться. Раньше контентная часть размещалась в две колонки: в основной был кейс, а в узкой боковой — ссылки на инструменты. Метрики показали, что по «боковушке» не кликали, поэтому в новой версии сайта второй колонки нет.

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

Метрика показала, что пользователи не скроллят до конца главную страницу. Поэтому она стала вдвое короче. Да, стандартный отраслевой приём. Но почему-то далеко не все сайты на него решаются))

Шрифтовые пары и цветовое кодирование рубрик было подобрано, исходя из фирменного стиля компании. Дизайнер Ольга Филиппова так описывает процесс: Со шрифтами все просто. Это шрифты, которые мы когда-то подобрали и активно начали использовать как фирменные. Тогда выбор был в пользу комфорта: широкий набор, округлый, но при этом не мягкий, удобный для глаз, приятный в дизайне. Что касается цветов, то базовым остался фирменный оранжевый, дополняющий — бирюзовый. Это яркие, чистые и ясные цвета. Они задали выбор остальных цветов: появились фуксия, весёлый салатовый, голубой.

Макет обновлённого сайта в трёх версиях — десктопной, мобильной и планшетной — собирали в Figma.

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

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

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

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