Срочно в номер: редизайн сайта СМИ, публикующего новости для 5,6 млн горожан Санкт-Петербурга

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

Старый сайт MR7.ru

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

План работ:

1. проанализировать проблемы старого сайта;
2. обновить структуру портала;
3. разработать прототипы;
4. создать современную дизайн-концепцию.

Реализация

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

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

А42.ru до редизайна

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

А42.ru после редизайна Атвинты

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

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

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

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

1. в главном блоке размещен слайдер с главными новостями региона;
2. добавлена новостная лента;
3. добавлены виджеты разделов сайта (трансляции с городских камер, карта с отделениями правоохранительных органов, розыск и проч.);
4. создан раздел «Мобильный патруль», где пользователи сообщают о правонарушениях на дороге;
5. внедрена административная панель с удобной версткой и публикацией материалов.

Главная страница Правоохранительного портала Кузбасса

Раздел «Мобильный патруль»

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

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

Заказать разработку информационно-новостного портала 

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

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

Прототип новостного блока

Дизайн новостного блока

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

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

Прототип блока «Про район»

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

Блок «Про район» на дизайн-концепции

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

Блоки «Про город» и «Про жизнь» на прототипах

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

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

Алексей Нибо

Дизайн-директор Атвинты

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

Дизайн блоков «Про город» и «Про жизнь»

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

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

Прототипы для сюжетов

Дизайн одного из сюжетных шаблонов

Блок с актуальными темами

Разделы

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

Прототип раздела

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

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

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

Прототип раздела «Новости»

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

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

Прототип страницы опубликованного материала

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

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

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

1. материального пожертвования;
2. отправки новости;
3. пожелания или отзыва.

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

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

Прототип страницы с результатами поиска

Подписка 

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

Итоги

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

Алексей Нибо

Дизайн-директор Digital-агентства Атвинта

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

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

1. на главной странице и в разделах сделан акцент на самых острых и обсуждаемых новостях и статьях;
2. пользователю предлагается узнать о новостях своего района, а интерес к своей локации всегда высок;
3. добавлены рубрики и теги, чтобы читатели могли погрузиться в интересные для них темы;
4. в интерфейсе размещены кнопки «Показать еще», «Читать все», «Все материалы», чтобы углубить читателя в контент и показать ему как можно больше материалов;
5. реализована страница подписки, чтобы заинтересовать пользователя релевантными новостями и вернуть на сайт.

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

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

Алексей Нибо

Дизайн-директор Digital-агентства Атвинта

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

Новая версия сайта от Атвинты

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