Сайт интерактивного проекта Пространство (Градостроительство.Москва)

Со стороны бизнеса:

Информировать жителей и гостей Москвы о проектах и мероприятиях Департамента

Популяризировать градостроительную деятельность и укреплять имидж ДГП

Обеспечить удобную регистрацию на мероприятия и управление заявками

Поддерживать повторные визиты через новости, афишу и подписку

Со стороны разработки:

Провести полный цикл: аналитика → прототипирование → дизайн-система → вёрстка → бэкенд → запуск

Реализовать государственный портал в строгом соответствии с брендбуком ДГП

Принцип mobile-first: мобильный сценарий — критический приоритет

Обеспечить доступность по стандарту WCAG AA и полноценную SEO-разметку

Этапы работы

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

Этап 1. Аналитика и информационная архитектура

Перед проектированием провели полноценный исследовательский цикл:

• Анализ действующего сайта и брендбука ДГП

• Конкурентный разбор пяти профильных государственных и культурно-деловых порталов — изучали навигацию, UX-паттерны, структуру функциональных блоков

• Формирование трёх User Personas: типичный москвич-посетитель, профессионал из строительной отрасли, журналист / представитель СМИ

• Разработка полной Sitemap с уровнями вложенности и типами шаблонов

• User Flow для четырёх ключевых сценариев: регистрация на мероприятие, вход в личный кабинет, навигация по афише с фильтрацией, чтение новости

• Customer Journey Map для двух персон

Результат: аналитический отчёт (10+ страниц), Sitemap, 4 User Flow, 2 CJM — всё в PDF.

Этап 2. Интерактивные прототипы

Прежде чем перейти к визуальному оформлению, структурно прорисовали все ключевые экраны. Кликабельный прототип в двух версиях — десктоп (1920 px) и мобайл (360 px) — охватывал:

• Главную: hero, карусель мероприятий, новости, FAQ, подписка

• Афишу: фильтры, календарь, карточки, форма регистрации (модальное окно + отдельная страница)

• Карточку мероприятия с программой, картой и блоком актуальных событий

• Архив прошедших мероприятий

• Ленту новостей и детальную страницу новости

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

• Страницу 404 и результаты поиска

Каждый ключевой элемент снабжался аннотациями: поведение, состояния, источник данных.

Этап 3. Дизайн-система и UI Kit

Создали единую визуальную основу, соответствующую брендбуку ДГП 2025. Палитра портала — красно-белая с тёмными акцентами — строго следует фирменному стилю Комплекса.

Структура дизайн-системы по методологии Atomic Design:

• Токены: цветовые палитры, типографическая шкала, spacing, радиусы, тени, анимационные параметры

• Атомы: кнопки, поля, иконки, бейджи, лейблы

• Молекулы: карточки мероприятий и новостей, формы, строка поиска

• Организмы: навигация с dropdown, хедер, футер, секции афиши

Для каждого компонента задокументированы все состояния: Default, Hover, Active, Focus, Disabled, Error, Loading, Empty State. Сеточная система — 360 и 1920 px.

Этап 4. Финальные дизайн-макеты

Финальные макеты всех страниц в версиях Desktop (1920 px) и Mobile (360 px). Pixel-perfect: привязка к сетке, отступы строго по токенам, только компоненты утверждённого UI Kit.

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

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

Дизайн: что получилось

Посмотрев на финальные скрины, видны ключевые визуальные решения:

Главная страница — имиджевый hero с фотографией и анонсом фестиваля, ниже — лента мероприятий с горизонтальным календарём для выбора даты, фильтры по типу и месту, подборки по форматам (экскурсии, инсталляции, кино, лекции), блок новостей и FAQ в виде аккордеона.

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

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

Новости — лента в сетке 2+3 карточки с фильтрами по формату (статьи, видео, подкасты) и категориям команды.

Вёрстка (Frontend)

Вёрстка по принципу Mobile-first. Брейкпоинты: 360 и 1920 px.

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

• Dropdown-меню на десктопе и slide-in панель на мобайле

• Карусель мероприятий с автопрокруткой, стрелками и поддержкой свайпа

• Мгновенная клиентская фильтрация карточек афиши

• Интерактивный календарь с переключением месяцев и подсветкой активных дат

• Модальные окна с фокус-трапом и закрытием по Escape

• Аккордеон FAQ с плавной анимацией

• Lazy-загрузка изображений через Intersection Observer API

Доступность — WCAG AA: контраст текста не ниже 4,5:1, полная клавиатурная навигация, видимый фокус-индикатор, ARIA-роли, alt-атрибуты, label для каждого поля.

SEO: JSON-LD разметка Event и Article, шаблоны og-тегов, canonical-ссылки, корректная иерархия H1–H6.

Качество кода: валидный HTML5 (W3C), BEM-нейминг без исключений, Stylelint + ESLint, ноль inline-стилей, ноль console.log в production.

Кроссбраузерность: Chrome, Firefox, Edge (последние 2 версии), Safari 16+, Яндекс.Браузер, мобильные Chrome (Android 10+) и Safari (iOS 15+).

Бэкенд и CMS

Платформа — 1С-Битрикс «Управление сайтом» (редакция «Бизнес»).

Афиша мероприятий

Инфоблок «Мероприятия» с полным набором полей: название, дата/время, место, тип, описание, галерея, статус, лимит участников. Публичная часть: список с фильтрацией, интерактивный календарь, пагинация, детальная страница, архив. Административная часть: CRUD мероприятий, управление статусами, выгрузка списка участников в Excel/CSV.

Регистрация на мероприятие

Форма с серверной валидацией (ФИО, email, телефон, организация, дополнительные поля). Защита от спама — Яндекс SmartCaptcha. Хранение заявок в БД с привязкой к мероприятию. Четыре статуса заявки: «Новая», «Подтверждена», «Ожидает», «Отменена». Email-уведомления пользователю и администратору, автоматическое напоминание за 24 часа (агент 1С-Битрикс). Контроль лимита участников с блокировкой формы.

Новости

Инфоблок с категориями, фильтрами по дате и типу, карточками, детальными страницами и блоком «Читать также». Пагинация и кнопка «Загрузить ещё».

Личный кабинет

Регистрация с подтверждением email, авторизация (логин/пароль, «Запомнить меня», восстановление). Авторизация через ВКонтакте и Яндекс ID. Профиль, история мероприятий с разделением на «Предстоящие» и «Прошедшие», управление и отмена заявок. Настройки уведомлений: анонсы, напоминания, изменения заявок.

Дополнительные модули

• Подписка на новости с double opt-in и управлением отписками

• Полнотекстовый поиск по сайту с подсветкой совпадений и автодополнением в хедере

• Форма обратной связи с журналом обращений

Администрирование

Три роли: Администратор (полный доступ), Контент-менеджер (контент без настроек), Менеджер регистраций (только заявки). Загрузка и кадрирование изображений, WYSIWYG-редактор, SEO-инструменты, автогенерация sitemap.xml.

Аналитика и безопасность

Яндекс.Метрика с целями на регистрацию и подписку, Яндекс.Вебмастер. Соответствие 152-ФЗ: политика конфиденциальности, cookie-consent, удаление персональных данных по запросу. Хеширование паролей, защита от XSS/CSRF/SQL-инъекций, заголовки безопасности, HTTPS-only.

Процесс и сдача

Каждый этап сдавался отдельно: дизайн — в PDF и через ссылку с доступом для комментирования, вёрстка и бэкенд — на staging-стенде, идентичном production-окружению.

Заказчик предоставлял письменные замечания в течение 5 рабочих дней. До трёх итераций доработки на каждый этап включено в базовый объём работ.

Definition of Done для любого результата: соответствие брендбуку, проработанные состояния empty/loading/error, отсутствие технических обходов, pixel-perfect вёрстка, пройденное ревью кода и браузерное тестирование с отчётом по Core Web Vitals.

Государственный портал-хаб с полным функциональным циклом: от имиджевой главной до личного кабинета с историей заявок. Единый исполнитель, единая ответственность — ни одного «разрыва на стыке» между дизайном, вёрсткой и бэкендом.

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