---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-02-23
publishYear: 2025
name: Seatmap
title: Инструмент для создания схем стадионов и концертных площадок
excerpt: Визуальный язык для создания схем рассадки и UI процесса выбора и покупки билетов.
context: |
[Seatmap.pro](https://seatmap.pro/) — профессиональный инструмент для создания планов рассадки различной сложности на стадионах, концертных площадках и аренах. ЦА сервиса — платформы онлайн-бронирования, билетные агенты и площадки для проведения массовых мероприятий.
isNew: true
logo:
src: ~/assets/images/portfolio/seatmap/logo.svg
alt: Seatmap • Логотип
link: https://seatmap.pro/
image: ~/assets/images/portfolio/seatmap/main.png
imageAlt: Собака Павлова • Seatmap • Визуальный язык для схем стадионов и концертных площадок
thumbnail:
src: ~/assets/images/portfolio/cards/seatmap.svg
alt: Собака Павлова • Seatmap • Визуальный язык для схем стадионов и концертных площадок
tags:
- it
- research
- ux-design
- prof
- mass
awards:
- |
<a href="https://tagline.ru/sobaka-pavlova/cases/razrabotka-vizualjnogo-yazyka-dlya-shem-koncertnyh-i-sportivnyh-ploschadok-seatmap---3/" target="_blank" title="Кейс Seatmap — золотые медали Tagline Awards 2025 в номинациях «Лучшее международное IT-решение» и «Лучшее IT-решение, разработка и интеграция»"><img src="/images/medals/tagline-gold-2025.svg" alt="Кейс Seatmap — золотые медали Tagline Awards 2025 в номинациях «Лучшее международное IT-решение» и «Лучшее IT-решение, разработка и интеграция»"></a>
- |
<a href="https://tagline.ru/sobaka-pavlova/cases/razrabotka-vizualjnogo-yazyka-dlya-shem-koncertnyh-i-sportivnyh-ploschadok-seatmap---3/" target="_blank" title="Кейс Seatmap — золотые медали Tagline Awards 2025 в номинациях «Лучшее международное IT-решение» и «Лучшее IT-решение, разработка и интеграция»"><img src="/images/medals/tagline-gold-2025.svg" alt="Кейс Seatmap — золотые медали Tagline Awards 2025 в номинациях «Лучшее международное IT-решение» и «Лучшее IT-решение, разработка и интеграция»"></a>
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследоания](/ux-research), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: elma
outcome:
title: Некоторые цифры
numbers:
- title: Нарисовали
number: '73 макета'
text: для трех различных площадок
- title: Создали
number: 2 Figma-плагина
text: чтоб иметь возможность отрисовать
- title: Предусмотрели
number: 6 вариантов
text: сценария покупки билетов на двоих
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "600 000 ₽"
time: "8 недель"
director: "Одна из самых необычных задач, с которыми мы сталкивались. Сложно. Круто. Нам понравилось."
review:
text: |
О проекте и подходе. Мы сотрудничали над созданием инновационного UX для схем рассадки и процессов бронирования. Команда провела глубокое исследование и полностью переосмыслила пользовательский путь от выбора места до завершения покупки. Особенно впечатлила работа над 3D-визуализацией залов и плавными анимациями. Каждая деталь интерфейса была продумана с точки зрения удобства конечного пользователя. Проект потребовал комплексного подхода, и команда справилась с этой задачей на высшем уровне.
О процессе работы. Процесс был выстроен максимально профессионально и прозрачно. Команда демонстрировала глубокое понимание специфики нашей области и потребностей целевой аудитории. На всех этапах мы получали детальные презентации с обоснованием каждого дизайнерского решения. Особенно ценным было умение команды находить баланс между эстетикой и функциональностью. Все дедлайны соблюдались, а коммуникация была чёткой и конструктивной.
О результатах. Результат превзошёл наши ожидания – мы получили действительно seamless решение, которое значительно улучшило пользовательский опыт. Новый интерфейс сделал процесс выбора и бронирования мест интуитивно понятным и приятным. Интеграция 3D-видов добавила wow-эффект и помогла пользователям принимать более осознанные решения. Мы видим положительную динамику в метриках и получаем отличные отзывы от клиентов. Однозначно рекомендуем эту команду для сложных UX-проектов.
person: Андрей Юсин,
position: Генеральный директор Seatmap
photo: ~/assets/images/portfolio/seatmap/person.jpeg
metadata:
canonical: https://sobakapav.ru/portfolio/seatmap
title: Дизайн интерфейса • Инструмент для создания схем стадионов и концертных площадок
description: "Визуальный язык для создания схем рассадки и UI процесса выбора и покупки билетов."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/seatmap/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
import { YouTube, Tweet, Vimeo } from 'astro-embed';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Аналитика](#anchor3) • [Визуальный язык](#anchor4) • [Результат](#anchor5) •[Отзыв, цены, сроки](#anchor6)
</TOC>
## <a name="anchor1" />Бизнес-задача
Создать сервис с хорошим пользовательским опытом, тем самым увеличивая продажи своего инструмента и продажи билетов компаний-клиентов. Сделать сервис более современным, удобным и конкурентоспособным.
<a href="/images/portfolio/seatmap/1.png" target="_blank"></a>
<em>Исходное состояние</em>
## <a name="anchor2" />Дизайн-задача
1. Собрать с нуля UI процесса выбора и покупки билетов для двух версий: десктопной и мобильной.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/seatmap/7.png" />
<PhoneMockup image="/images/portfolio/seatmap/8.png" />
</div>
<em>Мобильная версия</em>
2. Придумать визуальный язык для схем площадок. Выработать набор правил, эвристик, которые позволили бы создавать любые единообразные читаемые понятные схемы. Название рядов секций, номера мест, лестницы, проходы, аварийные выходы, справочная информация, цены, глубина площадки, расположение места относительно площадки и т.д.
<a href="/images/portfolio/seatmap/4.png" target="_blank"></a>
<em>Конкретный сектор. Места</em>
## <a name="anchor3" />Аналитика
Изучили проблематику рынка, специфику отрасли и конкурентов. Собрали список плохих решений и интересных механик. На каждом этапе проекта применяли результаты исследования.
Совместно с заказчиком изучили опыт покупки билетов. Итогом стал список пользовательских сценариев.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
<a href="/images/portfolio/seatmap/5.png" target="_blank"></a>
<em>Места выбраны</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/seatmap/11.png" />
<PhoneMockup image="/images/portfolio/seatmap/12.png" />
</div>
<em>Выбор места в мобильной версии</em>
## <a name="anchor4" />Визуальный язык
Заказчик подобрал наиболее репрезентативные площадки, для которых мы рисовали схемы. Например, Театр, Рига арена и Barclays Center в Бруклине.
Те или иные данные отображаются или не отображаются на экране в зависимости от масштаба. Для каждого масштаба разрабатывали набор различных параметров. Например, на каком масштабе необходимо показывать подписи к секциям, номера рядов, нужно ли показывать номера мест или они нечитаемы и не несут никакой информации.
Для каждого стадиона нарисовали больше десятка схем в разном масштабе. Подбирали закономерности, как и что работает.
На примере площадок разных размеров и вместимости выделили подходы и правила создания типовых схем.
<a href="/images/portfolio/seatmap/2.png" target="_blank"></a>
<em>Сектор. Popover с информацией о цене, номере ряда и места</em>
<a href="/images/portfolio/seatmap/3.png" target="_blank"></a>
<em>Фильтр</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/seatmap/9.png" />
<PhoneMockup image="/images/portfolio/seatmap/10.png" />
</div>
<em>План сектора, фильтры в мобильной версии</em>
## <a name="anchor5" />Результат
Заказчик ушел реализовывать наши макеты и проверять гипотезы.
Итоги первой итерации:
- Схемы как визуализация наших экспериментов
- Гайдлайн по визуализации схемы площадки
<a href="/images/portfolio/seatmap/6.png" target="_blank"></a>
<em>Мои билеты</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/seatmap/13.png" />
<PhoneMockup image="/images/portfolio/seatmap/14.png" />
</div>
<em>Мои билеты и поиск в мобильной версии</em>
<YouTube id="VQcHupowkT0" />
## <a name="anchor6" />