Новый сайт RTVI: единая мультимедийная платформа для новостей, мнений, видео и прямого эфира

Главное о кейсе

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

Перед командой uplab стояла задача перезапустить RTVI.com: превратить сайт в единую платформу, где читатель может быстро узнать главное, разобраться в теме, посмотреть выпуск или включить прямой эфир.

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

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

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

Как проект изменил жизнь пользователей

Для читателей: понятнее, что важно и куда перейти дальше

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

Для зрителей: эфир, программа и архив в одном сценарии

Мы спроектировали видеохаб, который связывает прямой эфир, программу передач, архив и отдельные выпуски. Пользователю не требуется искать каждый формат в несвязанных разделах: можно включить трансляцию, посмотреть расписание, вернуться к пропущенной программе или выбрать конкретный выпуск. Для коротких вертикальных видео предусмотрен отдельный раздел Shorts.

Для редакции: менять подачу без пересборки сайта

Главная страница стала модульной. Редакция может собирать ее из блоков новостей, мнений, видео, спецпроектов и Shorts в пределах общей дизайн-системы. Шаблоны публикаций поддерживают разные способы рассказать историю: текст, цитаты, акцентные врезки, таблицы, фотогалереи и внешние мультимедийные блоки. Редактор получает набор инструментов под конкретный материал.

Для коммерческой команды: рекламные форматы встроены в структуру

Рекламные позиции предусмотрены на уровне макетов. Для баннеров зарезервированы контейнеры, чтобы при загрузке рекламы текст и картинки рядом не сдвигались и читатель не терял место. Для спецпроектов подключили Tilda: коммерческие материалы можно создавать в отдельном инструменте и публиковать на домене RTVI.com.

Бизнес-задача и ее решение

Задача

Создать масштабируемую мультимедийную платформу, которая поддерживает развитие RTVI по трем направлениям:

— привлечение аудитории через новые форматы и удобный мобильный опыт;

— удержание пользователей благодаря понятной навигации и переходам между материалами;

— развитие монетизации без разрушения основного сценария чтения и просмотра.

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

Решение

Начали с информационной архитектуры, а не отдельных экранов

Провели сравнительный UX/UI-анализ международных новостных и видеоплатформ: BBC, BBC Russian, CNN и Fox News. Сопоставили подходы к первым экранам, навигации, размещению видео и представлению авторов. На этой основе определили структуру, которая разделяет форматы, но сохраняет их внутри одного медиапродукта.

Построили главную страницу как редакционный конструктор

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

Разработали визуальный язык для плотного информационного потока

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

Объединили текст и видео в одной платформе

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

Разделили управление контентом и пользовательский интерфейс

Серверную часть построили на Node.js и Strapi, интерфейс — на Nuxt.js и Vue.js. Headless-подход отделяет редакционное управление от отображения контента. В CMS есть роли автора, редактора, администратора и рекламного отдела, а единый контентный контур рассчитан на использование сайтом и мобильным приложением. Новостные страницы собираются на сервере, а статичные разделы генерируются заранее: так страницы быстрее открываются и лучше индексируются поисковиками.

Подготовили переход с прежней платформы

При миграции с WordPress составили карту 301-редиректов и сохранили структуру адресов там, где это возможно, чтобы старые ссылки и страницы в поиске вели на новый сайт. Для разных типов материалов заложили структурированные данные Article, VideoObject и BroadcastEvent. Производительность учитывали на уровне архитектуры, обработки изображений и поведения рекламных блоков.

Крафт (мастерство), реализация, технические детали

Главная страница меняется вместе с повесткой

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

Единый путь зрителя вместо набора плееров

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

Один материал — разные способы рассказать историю

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

Коммерческие возможности предусмотрены до размещения рекламы

Рекламные контейнеры и спецпроекты включили в архитектуру и макеты заранее. Монетизацию учитывали вместе с редакционным контентом, а не добавляли поверх готового интерфейса. Интеграция с Tilda дает дополнительный способ создавать нестандартные проекты, не превращая каждый из них в отдельную разработку основной платформы.

Авторы стали отдельными точками навигации

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Новостному медиа нужна иерархия, а не больше контента на первом экране

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

Разные форматы должны оставаться частями одного продукта

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

Гибкость редакции начинается с ограничений дизайн-системы

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

Монетизацию нужно проектировать вместе с пользовательским опытом

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

Перезапуск медиа — новая версия, которая сохраняет накопленное

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

Скриншоты