ООО «МЭД КИТЧЕН» · 2026

Белая книга Донбасса и Новороссии:
от разрушения – к возрождению

Научная монография об экологическом состоянии природных ресурсов четырёх исторических регионов в условиях боевых действий. Задача проекта – превратить 366-страничную книгу в современный интерактивный научно-просветительский сайт. Далее в презентации изложены две концепции реализации с реальными референсами.

366

страниц A4 исходной монографии

4 региона

ДНР, ЛНР, Запорожская и Херсонская области

4 темы

вода · леса · накопленный ущерб · биоразнообразие

О проекте

Книга, которую хочется исследовать

Имея в качестве исходного материала научную монографию объёмом 366 страниц, мы создаём современный интерактивный научно-просветительский сайт, доступный для понимания не только узким специалистам, но и широкой аудитории. Сложная тема подаётся наглядно и понятно, благодаря эмоциональной окраске у посетителя сайта появляется желание изучить тему до конца.

СовременноВизуальный язык на уровне лучших мировых интерактивов – Guardian, BBC, NBC

ПонятноСложные данные превращаем в ясные образы: карты, графики и факты вместо стен сплошного текста

КрасивоВыверенная типографика и тёплая природно-земляная палитра. Сквозная тема «от разрушения – к возрождению»

ЖивоМного поддерживающей анимации: движение раскрывает связи и ведёт взгляд, помогает понимать, а не отвлекает

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

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

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

Концепция 1

Скроллителлинг со структурой книги

Кинематографичное вертикальное повествование «что произошло → как изменить к лучшему» – но с навигацией как у книги: хаб-оглавление и 4 тома позволяют сразу перейти к нужному разделу, не читая весь объём подряд.

хаб-оглавление → 4 тома → главы: переход сразу к нужному тому
внутри тома – кинематографичный скролл: закреплённые фото, «было/стало», счётчики
эмоция скролла + структурность и нелинейность книги

Референсы – реальные интерактивы

The Guardian «Firestorm» – кинематографичный скроллителлинг ↗

Скриншот: NBC News – анализ спутниковых снимков

NBC – скроллителлинг с анализом спутника ↗

BBC «Beirut blast» – иммерсивный лонгрид ↗

Было: разрушение

Стало: возрождение

Потяните ползунок – живая демонстрация интерактивности дека

Оглавление – сразу к тому

Том 1 · ДНРТом 2 · ЛНР Том 3 · ЗапорожьеТом 4 · Херсон

Концепция 1 · как это выглядит и движется

Кинематография скролла

Эмоция документального фильма в вебе: экран за экраном история сама ведёт читателя – от разрушения к возрождению.

Закреплённые экраныФото фиксируется на весь экран, текст и факты наезжают поверх по мере прокрутки

Параллакс слоёвФон, средний и передний планы движутся с разной скоростью – ощущение глубины

Проявление по скроллуЗаголовки, цитаты и графики плавно всплывают, когда входят в кадр

Живые счётчикиЦифры ущерба «накручиваются» от нуля при появлении на экране

«Было / стало»Шторка-слайдер раскрывает снимок «после» по скроллу или движением мыши

Драматургия цветаПалитра ведёт от угля и охры к прорастающей зелени по ходе тома

Навигация-книгаОглавление, которое всегда остаётся на экране при прокрутке, индикатор прогресса чтения тома и быстрый переход между главами

Анимация: мягкие переходы 0,4–0,8 с с естественным замедлением. Если человек включил в настройках устройства режим уменьшения анимации (его выбирают те, кого укачивает или утомляет движение на экране), сайт автоматически отключает анимации – весь текст и данные остаются полностью доступными.

Концепция 2

Интерактивная карта

В центре – карта четырёх регионов. Клик по региону открывает слои данных. Точки на карте раскрывают карточки с фото, графиком и фактом. «Было/стало» привязаны к конкретным местам.

клик по региону открывает слои: вода · лес · ущерб · биоразнообразие
точки раскрывают карточки: фото, график, факт, «было/стало»
карта – это оглавление-атлас. Полный текст главы открывается лонгридом
нелинейный исследовательский формат – видны география и масштаб

Референсы – реальные интерактивы

The Carbon Map – карта с переключаемыми слоями ↗

The Refugee Project – интерактивная карта-атлас ↗

Карта 4 регионов
ДНР · ЛНР · Запорожье · Херсон

↓ клик по региону

Слои данных

💧 Вода🌲 Леса ☣️ Ущерб🦎 Биоразнообразие

↓ клик по точке

Карточка-тизер: фото · график · факт · «было/стало»

↓ «Читать главу»

Полный лонгрид раздела
текст монографии в режиме чтения

Концепция 2 · как это выглядит и движется

Карта, которая дышит

Карта – интерактивное оглавление: читатель сам выбирает регион и тему, а полный текст главы открывается отдельным лонгридом. Текста много, и он подаётся в полном объёме, карта лишь ведёт к нужному разделу.

Появление картыРегионы подсвечиваются, маркеры мягко пульсируют, направляя внимание

Переключение слоёвВода, леса, ущерб, биоразнообразие сменяются плавным перетеканием – без перезагрузки страницы

Полёт к регионуПлавное приближение и панорамирование с мягким ускорением по клику

Карточки точекВсплывают с лёгкой пружиной, график внутри строится анимированно

Тепловые градиентыИнтенсивность ущерба показана цветом прямо на полотне карты

«Было / стало» по точкеПлавное перетекание спутниковых и полевых снимков конкретного места

Тайм-слайдер (опц.)Динамика по годам, если в данных есть временной ряд

Анимация: те же принципы – плавность и мгновенный отклик на действие. А если включён режим уменьшения анимации, сайт автоматически показывает всё статично, не теряя ни одного факта.

Что входит в проект

Состав работ

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

Дизайн, интерфейс и контент366 страниц монографии → веб-повествование (структура, редактура, выжимки) + уникальный визуальный стиль и продуманный интерфейс: макеты всех экранов, типографика, сценарии взаимодействия

Данные и инфографикаТаблицы и показатели превращаем в понятные графики и диаграммы

Работа с медиаОбработка фотографий, подготовка пар «было/стало»

АдаптивностьКорректная работа на десктопе, планшете и телефоне

ДоступностьУправление с клавиатуры, хороший контраст, режим без анимации

ПроизводительностьСжатие изображений без потери качества и подгрузка картинок только когда читатель до них доскроллил – страница открывается быстро и не тратит лишний трафик

Технологии и CMSЛёгкая, быстрая основа без тяжёлых фреймворков + панель управления (CMS): возможность править текст и картинки

ОпциональноАналитика посещений, мультиязычность, форма обратной связи

Процесс

Как строится работа

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

01Контент-сценарийРазбираем 366 страниц монографии, выстраиваем структуру разделов и драматургию повествования, выделяем ключевые факты, цифры и цитаты, готовим тексты под веб

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

03РазработкаПрограммируем сайт: вёрстку, интерактив, плавную анимацию и навигацию, карты и графики, адаптацию под телефон и десктоп, панель управления (CMS)

04НаполнениеЗагружаем итоговые тексты, обработанные фотографии и пары «было/стало», данные и инфографику – собираем все разделы воедино

05Тест и запускПроверяем на разных устройствах и в браузерах, оптимизируем скорость загрузки, исправляем замечания и публикуем готовый сайт

Результат работырабочий сайт · исходный код · инструкция · публикация (хостинг) · права на материалы

После запуска (опц.)поддержка, обновление контента, развитие новых разделов