Сайт санкт-петербургского СМИ

Заказчик

MR7.ru — петербургский информационно-новостной портал, публикующий новости и статьи о жизни северной столицы с 2006 года. Сайт входит в ТОП-20 региональных интернет-СМИ.

Задача

Редакция MR7.ru обратилась к нам в Атвинту за редизайном сайта. На момент обращения у СМИ был налажен выпуск контента, сформирован костяк аудитории и узнаваемое имя среди петербуржцев. Однако внешне и технически портал морально устарел — реализованное много лет назад решение требовало обновления.

Нам предстояло спроектировать новый интерфейс для MR7.ru, который бы учитывал специфику редакционных процессов и был удобным для читателей.

План работ:

Реализация

Ранее мы уже работали со СМИ.

Один из наших проектов — редизайн новостного портала А42.ru c 1,6 млн читателей в месяц. Перед нами стояла задача обновить внешний вид сайта и при этом сохранить преемственность с предыдущим решением, чтобы в новом дизайне аудитория легко считывала тот самый А42.ru.

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

Чтобы пользователи быстро узнавали А42.ru в обновленном интерфейсе, мы сохранили несколько паттернов со старой версии, например, блок навигации в черном цвете, акценты фирменного голубого цвета и похожая раскладка контента в начале главной страницы.

Еще один проект из нашего портфолио — Правоохранительный портал Кузбасса. Основной контент СМИ составляют оперативные новости от ведомств Кемеровской области: МВД, МЧС, Пожарной охраны, ДПС.

Задачей было обновить портал и сделать удобный новостной сайт, через который жители области будут узнавать о деятельности правоохранительных органов.

В рамках проекта реализованы следующие решения:

Благодаря опыту работы со СМИ мы быстро погрузились в задачу и приступили к разработке прототипов и концепции для MR7.ru. На новом сайте нужно было реализовать удобную ленту, рубрики с разным видом контента, страницы новостей, статей и спецпроектов, рекламные баннеры, а также ряд технических страниц.

Для MR7.ru мы разработали прототипы всех страниц сайта и дизайн-концепцию на примере главной страницы.

Главная страница

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

Контент-стратегия MR7.ru отличается разбивкой по районам — журналисты площадки пишут не только о крупных городских событиях, но и местных районных новостях. Для мегаполиса с населением в 5,5 млн человек это удачный прием, который привлекает дополнительный поток читателей за счет возможности узнать о событиях именно в своей части города.

Для перехода к новостям районов мы сделали отдельный блок с интерактивной картой.

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

Далее размещены блоки «Про город» и «Про жизнь» — это рубрики, которые ведет редакция, внутри них могут быть опубликованы и новости, и статьи.

Важная часть работы любого СМИ — монетизация. Одним из ключевых способов заработка является размещение рекламных объявлений в интерфейсе. Для реализации этой возможности справа мы разместили вертикальные баннеры с размером 300х800. Так как мы не могли задавать свои размеры баннеров, решили обернуть эту трудность в преимущество.

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

Также в нескольких частях страницы размещен еще один рекламный формат — горизонтальные узкие баннеры.

По запросу заказчика сделали несколько шаблонов для регулируемого блока. СМИ обратилось к нам в разгар пандемии, и у редакции появилась идея сделать подборку материалов для сюжетов, где будет собрано несколько материалов по острой тематике. Например, новость, аналитический обзор и фоторепортаж о заболеваемости COVID-19.

Разделы

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

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

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

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

Страница материала 

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

Краудфандинг 

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

На странице мы отразили призыв оказать поддержку MR7.ru и разместили аккордион с тремя формами для:

Поиск по сайту

Для удобства пользователей в поиске добавили возможность выбрать период публикации для более точной выборки релевантных материалов.

Подписка 

Так как на площадке есть множество форматов, рубрик и тем, мы подготовили подробную страницу подписки, где пользователи могут выбрать нужные материалы среди богатого контента MR7.ru

Итоги

Наша команда спроектировала удобный и современный интерфейс на замену устаревшим страницам сайта MR7.ru.

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

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

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

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