Amiga

К кейсам

Крупное федеральное СМИ

Mobile

О проекте

Крупное федеральное СМИ, которое не боится публиковать неоднозначные новости и противоположные мнения. Рассказывают честно и обо всем.

Задача

С нуля разработать сайт крупного федерального СМИ.

Реализация

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

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

Рубрики

От новостей политики до спорта — на сайте есть удобное меню с рубриками.

Прямые трансляции

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

Голосования и опросы

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

Репортажи читателей

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

Дизайн

Задачи дизайна:

– разработать четкий, структурированный и понятный интерфейс;

– взять за основу классическую стилистику СМИ и учесть пожелания клиента;

– сделать лаконично, просто и читабельно.

Решение:

Мы решили расположить блоки в две колонки, справа добавить ленту новостей.

Проектирование сайта

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

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

Валерий Передистый

Валерий Передистый

Дизайнер-проектировщик проекта

Разработка

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

Ролевые модели в панели администратора

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

– редактор пишет материал;

– корректор правит ошибки или отправляет на доработку;

– бильдредактор занимается визуальной составляющей;

– выпускающий редактор публикует готовый материал;

– главный редактор отслеживает весь процесс


Сервисная структура

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

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

Front-end и back-end работают отдельно, итого у нас 3 репозитория. Мы подключили мониторинги Prometheus, Grafana и Sentry, чтобы понимать нагрузку и ошибки.


Производительность

Количество посещений — 400 тысяч человек в день. Поэтому мы уделили большое внимание вопросам производительности и внедрили современный формат изображений — ленивую подгрузку.

По показателям Pagespeed сайт находится в зеленой зоне. Так же были подключены мониторинги Grafana, New Relic и прочие для отслеживания показателей нагрузки, ресурсов и ошибок.


Масштабирование

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


Технологичный стэк

Мы выбрали нестандартное решение: подружили frontend-фреймворк Nuxt и Bitrix в качестве административной панели и back-end. Для этого мы добавили Symfony, PHP-фреймворк, чтобы упростить написание API.

Кэш сайта

Для ускорения работы сайта мы настроили кэш на Redis и подключили дополнительный модуль. Это позволило увеличить скорость ответа и обработки данных при запросах пользователей.

Результаты

– За 3 месяца с нуля разработали работающий и полноценный сайт СМИ;

– Разработали айдентику, бренд-бук, прототипы сайта;

– Сделали удобным чтение ленты новостей для веб и мобильной версии сайта с помощью навигации и ленивой подгрузки картинок;

– Спроектировали матрицу ролей для редакции, которая упрощает процесс публикации за счет уведомлений и статусов.

Технологии
Bitrix
Symfony
Redis
Mysql
Nuxt
Docker
k8s

Команда

Виталий Гришин

Проджект-менеджер

Артём Салеев

Teamlead Backend

Кирилл Калюжный

Teamlead Frontend

Тимур Краско

QA

Виктория Лукина

QA

Владимир Просвирин

Frontend Developer

Владимир Максимов

Frontend Developer

Арташес Овесян

Frontend Developer

Владислав Скоков

Backend Developer

Арсений Круглов

Backend Developer

Андрей Трегубов

DevOps

Валерий Передистый

Дизайнер-проектировщик

Другие кейсы

Web | NDA

Мегафон

Обложка кейса «Мегафон»

Mobile | NDA

AI-приложение Get Art

Обложка кейса «AI-приложение Get Art»

Web

Имиджевый сайт «Шахтинская плитка»

Обложка кейса «Имиджевый сайт «Шахтинская плитка»»

Web | Minicase

Интернет-магазин мебели Трио

Обложка кейса «Интернет-магазин мебели Трио»

Mobile | NDA

Приложение для здоровья CW Clinic

Обложка кейса «Приложение для здоровья CW Clinic»

Mobile

Интернет-магазин Bravo

Обложка кейса «Интернет-магазин Bravo»

Web

Маркетплейс специалистов Gigoo

Обложка кейса «Маркетплейс специалистов Gigoo»

Web | Minicase

Аникура

Обложка кейса «Аникура»

Web

Образовательный портал Школа гениев

Обложка кейса «Образовательный портал Школа гениев»

Mobile

Airspector

Обложка кейса «Airspector»

Mobile | NDA

Rockwool

Обложка кейса «Rockwool»

Web | NDA

НЛМК

Обложка кейса «НЛМК»

Web

Транспортная компания №1

Обложка кейса «Транспортная компания №1»

Web

B2B-сервис по отработке обращений «Авеста»

Обложка кейса «B2B-сервис по отработке обращений «Авеста»»

Mobile | NDA

Интернет-магазин NL Store

Обложка кейса «Интернет-магазин  NL Store»

Mobile

Мобильное приложение CMstore

Обложка кейса «Мобильное приложение CMstore»

Web

Крупное федеральное СМИ

Обложка кейса «Крупное федеральное СМИ»

Web | В работе

Русплитка

Обложка кейса «Русплитка»

Web | NDA

ERP-система лизинга автопарка

Обложка кейса «ERP-система лизинга автопарка»

Web | NDA

Газпром

Обложка кейса «Газпром»

Web | NDA

Samsung

Обложка кейса «Samsung»

Mobile

Программа лояльности Vaillant Group

Обложка кейса «Программа лояльности Vaillant Group»

Web | NDA

Mercedes-Benz

Обложка кейса «Mercedes-Benz»

Mobile | NDA

Сбер

Обложка кейса «Сбер»

Mobile

Мобильное приложение для сети аптек «Ваша №1»

Обложка кейса «Мобильное приложение для сети аптек «Ваша №1»»

Web

Сайт для туркластера «Арктический»

Обложка кейса «Сайт для туркластера «Арктический»»

Web

Корпоративный портал ЕМС Team

Обложка кейса «Корпоративный портал ЕМС Team»

Web

Travelpayouts

Обложка кейса «Travelpayouts»

Web | NDA

М.Видео

Обложка кейса «М.Видео»

Web | В работе

Makita

Обложка кейса «Makita»

Mobile | NDA

Бизнес-приложение Жёлтая печать

Обложка кейса «Бизнес-приложение Жёлтая печать»

Mobile | NDA

DHL Express

Обложка кейса «DHL Express»

Mobile

Приложение с интеграцией ML

Обложка кейса «Приложение  с интеграцией ML»

Mobile

Приложение-сканер товаров с TV

Обложка кейса «Приложение-сканер товаров с TV»

Mobile

Образовательный проект Easy

Обложка кейса «Образовательный проект Easy»

Web

Маркетплейс горного оборудования

Обложка кейса «Маркетплейс горного оборудования»

Web

Маркетплейс нефтяных продуктов Proleum

Обложка кейса «Маркетплейс нефтяных продуктов Proleum»

Mobile | NDA

Shell

Обложка кейса «Shell»

Web

HR-сайт для SOKOLOV

Обложка кейса «HR-сайт для SOKOLOV»

Mobile

Приложение для пекарен Хлеб Хмельницкого

Обложка кейса «Приложение для пекарен Хлеб Хмельницкого»

Web | NDA

Nike

Обложка кейса «Nike»

Mobile

Мобильное приложение для АЗС ХТК

Обложка кейса «Мобильное приложение для АЗС ХТК»

Web | NDA

Ecco

Обложка кейса «Ecco»

Web | NDA

Casio

Обложка кейса «Casio»
Хотите связаться с владельцем
компании напрямую?
Дмитрий Тарасов
Дмитрий Тарасов
СЕО

НАПИСАТЬ