cover-2

Прямая речь. Вторая версия новгородского общественно-делового интернет-издания

«Прямая речь» — частное новгородское
общественно-деловое интернет-издание, основанное в 2010 году.

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

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

зима 2014—2015

pryamayarech.ru Издание сменило собственника в 2016 и с 2017 года прекратило работу

Координация — Андрей Морозов
Фотографии — Михаил Никонов
Информационная архитектура, дизайн и вёб-разработка — Эдзо Хогусава

На сайте используется js-код разработанный Андреем Кузьминым для СадаКамней  

Технический райдер: 
– Apache, nginx, Python, web.py, mySQL;
– jQuery, backbone, underscore, SASS;
-  Zurb Foundation, Фоторама, Орфус.

Задача второй версии: Перезапустить интернет-СМИ

Реинжениринг

• Больше инструментов для публикации (изображения, галереи, врезки)
• Новая организация материалов, в основе которой рубрики, по которым раскладываются материалы
• Герои материалов — инструмент для связывания материалов через ключевых персон
• Встроенный инструмент для создания и размещения рекламных блоков

Редизайн

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

Стартовая страница 

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

Первая полоса
Первая полоса
Слоёный торт рубрик и спецпроектов
Слоёный торт рубрик и спецпроектов
Слой героев материалов
Слой героев материалов
Вполне традиционный подвал
Вполне традиционный подвал

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

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

Дайджест рубрики
Дайджест спецпроекта

Дайджесты рубрик-спецпроектов выделяются крупной фотографией и логотипом спонсора.

Материалы

Прямая речь публикует не только новости но и сообщения других жанров — статьи, интервью, кадры, релизы и т.д. Движок сайта помогает оформлять такие материалы, группировать и автоматически распространять через цепочки сервисов (РСС-ленты, отдавать агрегаторам типа Яндекс-новостей и постить в твиттер).

Слева на право: короткая новость, материал с фотографией для привлечения внимания и большая фотоистория
Слева на право: короткая новость, материал с фотографией для привлечения внимания и большая фотоистория

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

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

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

richtext-11

Замечательная Фоторама помогает делать удобные фотогалереи.

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

richtext-10

Осмысленная обвязка

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

Страница завершается дайджестом родительской рубрики и сквозной краткой первой полосой — ссылками на самые главные события дня.

обвязка-2

Особые публикации

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

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

Обложка особого материала
Текст особого материала с вставленным графиком
Таблицы и графики в особом материале

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

Фотообложки

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

Организация материалов: рубрики, жанры, темы

Редакции было тесновато в жанрах прошлой версии сайта. Появлялись спецпроекты и хотелось инструмент «на вырост».

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

Деление материалов по жанрам придумано для редакции и роботов — оно помогает ранжировать материалы правильно при автоматической обработке (например, ни один робот в здравом уме не отправит анонс или рекламный релиз Яндекс.Новостям). Читателям жанры помогают отличить рекламный релиз от резонансного расследования.

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

Рубрики создаются редактором по мере необходимости.

Темы помогают строить цепочки материалов. Они хорошо знакомы вам по другим сайтам как тэги или метки.

Герои материалов позволяют персонифицировать новости и вести стройные списки упоминаний и картотеку в особом месте.

Фотообложки рубрик 

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

allCovers

Анонс материала для индексов и списков подстраивается под обстоятельства в зависимости от роли. 

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

Дизайн списков максимально упрощён, а сами списки вытянута по оси для облегчения сканирования. Это выглядит не так эффектно, зато помогает найти нужный материал.

Скриншот сделанный 2015-12-08 в 06.57.01
Скриншот сделанный 2015-12-08 в 06.38.34

С списках материалов работает естественное выделение — публикации с фотообложкой показываются крупнее привлекая внимание.

Герои материалов

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

Слой героев материалов на стартовой странице
Слой героев материалов на стартовой странице
Страница героини материала с биографией
Страница героини материала с биографией
Страница героя резонансных материалов с высоким индексом цитирования
Страница героя резонансных материалов с высоким индексом цитирования