Кейс: разработка портала мероприятий в Москве на 1С-Битрикс

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

Ключевая сложность в том, что раньше три части проекта — дизайн, вёрстку и программирование — вели как отдельные ТЗ и, судя по всему, отдельные исполнители. Из-за этого решения на стыках терялись: дизайн не всегда учитывал ограничения Битрикса, вёрстка не всегда доезжала до продакшена без потерь. Мы объединили все три направления в единый сквозной процесс с одной командой и одной ответственностью за результат — от прототипа до боевого сервера.

Проект — государственный, поэтому к нему добавлялись свои правила игры: обязательное соответствие брендбуку Комплекса градостроительной политики и строительства Москвы, полный запрет на платные UI-киты и шаблоны без согласования, работа только с лицензионными изображениями и требования 152-ФЗ о персональных данных.

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

1. Информационная архитектура и UX/UI-дизайн

Прежде чем рисовать интерфейсы, разобрались, как устроен предыдущий сайт (prost-rans-tvo.ru) и что делают конкуренты — проанализировали не менее 5 профильных порталов госструктур и культурно-деловых площадок. На основе этого собрали три персоны пользователей, карту сайта (Sitemap), user flow по ключевым сценариям — регистрация на мероприятие, вход в личный кабинет, навигация по афише с фильтрами, чтение новости — и CJM для двух основных персон.

Дальше — кликабельные прототипы всех ключевых экранов в двух версиях, десктоп (1920 px) и мобильная (360 px), с аннотациями поведения элементов. Только после согласования структуры перешли к дизайн-системе: токены (цвета, типографика, spacing, тени), atomic-компоненты, полный GUI Kit со всеми состояниями — hover, active, disabled, error, loading, empty. И только на этой основе — финальные pixel-perfect макеты всех страниц с проработкой микровзаимодействий, модальных окон и «неудобных» состояний данных (пустые списки, ошибки валидации, переполненные карточки).

2. Адаптивная вёрстка

Вёрстку делали mobile-first, с двумя обязательными брейкпоинтами — 360 и 1920 px — по грид-системе, заложенной в дизайн-систему. Интерактив без перезагрузки страницы: карусель афиши с автопрокруткой и свайпами, клиентская фильтрация мероприятий, интерактивный календарь с подсветкой дат, аккордеон FAQ, модалки с фокус-трапом, lazy-загрузка изображений через Intersection Observer.

Отдельный блок требований — доступность и SEO на уровне вёрстки: семантический HTML5, ARIA-атрибуты, контраст не ниже WCAG AA, параметризованные мета-теги и структурированные данные JSON-LD для мероприятий и новостей. Код собирали по BEM, без инлайн-стилей и !important, с едиными конфигами Stylelint/ESLint — чтобы следующий этап (интеграция в CMS) не переписывал вёрстку заново.

3. Программирование и интеграция в 1С-Битрикс

Платформа — 1С-Битрикс: Управление сайтом (редакция «Малый бизнес»/«Бизнес»), выбор был согласован и зафиксирован заранее, поэтому дизайн и вёрстка изначально проектировались с оглядкой на возможности CMS.

Что реализовано на бэкенде:

• Афиша мероприятий — инфоблок с полным набором атрибутов (дата, место, галерея, лимит участников, статус), фильтрация, календарь, детальная страница, архив прошедших событий, выгрузка участников в Excel/CSV из админки.

• Регистрация на мероприятия — форма с серверной валидацией, защита Яндекс SmartCaptcha, статусы заявок («Новая», «Подтверждена», «Отменена», «Ожидает»), email-уведомления и автоматическое напоминание за 24 часа через агент Битрикса, контроль лимита мест.

• Новости — лента с фильтрами, детальные страницы, блок «Читать также», управление публикацией из админки.

• Личный кабинет — регистрация с подтверждением email, авторизация через ВКонтакте и Яндекс ID, история мероприятий, отмена заявок, настройки уведомлений.

• Дополнительно — подписка на новости с double opt-in, полнотекстовый поиск с автодополнением, форма обратной связи, ролевой доступ в админке (администратор / контент-менеджер / менеджер регистраций).

Безопасность и эксплуатация закрыты на уровне платформы: хеширование паролей, защита от SQL-инъекций через ORM D7, экранирование от XSS, CSRF-токены на формах, HTTPS с редиректом, security-заголовки, кэширование компонентов и БД, соответствие 152-ФЗ (политика конфиденциальности, cookie-consent, удаление персональных данных по запросу).

На выходе — не набор макетов и не верстка «в стол», а работающий портал на 1С-Битрикс, где дизайн, интерфейс и бэкенд-логика согласованы между собой на каждом уровне: от токена дизайн-системы до статуса заявки в базе данных. Сквозная ответственность одной команды на всех трёх этапах позволила избежать типичной для таких проектов проблемы — потери решений на стыках между дизайнером, верстальщиком и разработчиком.