Сайт кинотеатра ГринФильм

Гриннфильм — сеть кинотеатров в нескольких городах России (головной офис — Курск). Кинотеатры оборудованы залами с поддержкой 2D/3D-форматов и кинобарами. Для управления кассами и расписанием используется профессиональное ПО «Премьера Кино».

До начала проекта у сети не было полноценного сайта с онлайн-продажей билетов: покупка была возможна только в кассе. Это ограничивало выручку и неудобно для аудитории 18–60 лет, привыкшей решать задачи онлайн.

Задача

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

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

Кроссбраузерность обеспечена для IE 10+, Opera 12+, Firefox 38+, Chrome 45+, Safari, а также браузеров Android и iOS.

Все макеты с цветами, шрифтами и размерами утверждались руководителями проекта перед началом вёрстки.

2. Архитектура навигации

Плавающая шапка фиксируется при скролле и содержит:

• кликабельный логотип «ГРИННФИЛЬМ» (возврат на главную);

• кнопку «Выбор города» — раскрывает список городов, где работают кинотеатры сети; геолокация по IP автоматически подставляет Курск как город по умолчанию;

• кнопку «О кинотеатре» — после выбора города показывает описание, фото и видео конкретного кинотеатра;

• кнопку «Кинобар» — меню бара выбранного кинотеатра;

• кнопку «Купить билеты» — если город не выбран, предлагает сделать выбор перед переходом;

• выпадающее дополнительное меню.

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

Главная построена как витрина: крупный слайдер с новинками (автосмена каждые 5 секунд, кнопки «Купить билет» и «Подробнее» на каждом баннере), ниже — карусель афиш текущего проката и фильмов «Скоро в кино».

Центральная афиша в карусели подсвечена, соседние затемнены. Под каждой афишей — хронометраж, формат (2D/3D), возрастное ограничение и яркая кнопка «Купить билет». При клике по стрелкам афиши плавно смещаются влево/вправо.

Ниже расположены информационные баннеры: клубная система (кнопка «Подробнее»), предложение кинобара и блок с дополнительными сведениями о сети.

4. Страница расписания и выбора мест

Это ключевая страница сайта — точка входа в воронку покупки билета.

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

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

При клике на сеанс открывается поп-ап с интерактивной схемой зала, реализованный через модуль «Премьера Кино». В схеме отображаются три статуса мест: занято, свободно, выбрано — с цветовой легендой под схемой. Экран зала расположен вверху.

В правом нижнем углу — кнопка «Продолжить» и таймер обратного отсчёта («До окончания заказа осталось 04:37»). При выборе мест рядом с кнопкой появляется текст «Выбрано N мест».

Нажатие «Продолжить» переводит на страницу онлайн-оплаты, полностью реализованную через модуль «Премьера Кино».

5. Интеграция с ПО «Премьера Кино»

Это технически сложнейшая часть проекта. Через API «Премьеры» реализованы:

• автоматическое формирование расписания на сайте без участия администратора — данные о сеансах, залах и фильмах синхронизируются из ПО напрямую;

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

• онлайн-оплата — весь процесс от выбора места до подтверждения оплаты ведётся внутри модуля «Премьеры».

Это означает, что контент-менеджер добавляет сеанс в «Премьере» один раз — и он автоматически появляется на сайте с корректным планом зала и возможностью купить билет.

6. Кинобар

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

Сайт охватывает все кинотеатры сети в единой точке входа с автоматическим определением города пользователя. Тёмный брендовый дизайн с крупными афишами и яркими CTA-кнопками соответствует ожиданиям целевой аудитории 18–60 лет и кинематографической эстетике бренда.